Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 2x 6x 6x 6x 6x 2x 6x | import { Text } from "@common/Text";
import NiceModal from "@ebay/nice-modal-react";
import { styled } from "@mui/material";
import { palette } from "@palette";
import ModalFactory from "@common/Modal/ModalFactory/ModalFactory";
import { ModalActions, ModalTitle } from "@common/Modal/ModalFactory/atoms";
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import { Box } from "@mui/material";
import { useHandleLogout } from "@hooks/common/useHandleLogout";
const ResourceNotFoundPopUp = NiceModal.create(
({
title,
info,
secondaryText,
styles,
}: {
title?: string;
info?: string;
secondaryText: string;
styles?: any;
}) => {
const { open, onClose, TransitionProps } = useNiceModal();
const { submitLogout, isLoading } = useHandleLogout();
const onClickHandler = () => {
submitLogout();
};
return (
<ModalFactory
variant="popup"
modalProps={{
open,
onClose,
PopupProps: {
width: styles?.containerWidth || "576px",
paperStyle: { padding: "24px 24px 16px " },
TransitionProps,
},
}}
>
<ModalTitle
title={title || "This transfer belongs to another merchant."}
closeButtonSize={22}
onClose={onClose}
textStyles={{ title: styles?.titleStyle }}
/>
<FadeUpWrapper delay={100}>
<TextBox>
<StyledText>
{info ||
`You are currently logged in to a different merchant account. To
view the details of the transfer, please log out and log in to the
correct merchant account.`}
</StyledText>
{secondaryText && <StyledText>{secondaryText}</StyledText>}
</TextBox>
</FadeUpWrapper>
<ModalActions
containerProps={{ sx: { mt: "40px", gap: "16px" } }}
primaryAction={{
label: "Log out",
background: "primary",
type: "button",
onClick: onClickHandler,
disabled: isLoading,
sx: {
fontSize: "18px",
lineHeight: "21.6px",
padding: "12px 24px",
},
}}
secondaryAction={{
label: "Cancel",
onClick: onClose,
sx: {
fontSize: "18px",
lineHeight: "21.6px",
padding: "12px 24px",
},
}}
/>
</ModalFactory>
);
},
);
export default ResourceNotFoundPopUp;
const TextBox = styled(Box)({
display: "flex",
flexDirection: "column",
marginTop: "8px",
});
const StyledText = styled(Text)(() => ({
color: palette.neutral[70],
fontFamily: "Give Whyte",
fontSize: "14px",
fontWeight: 350,
lineHeight: "16.8px",
padding: 0,
marginBottom: "0px",
}));
|