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 108 109 110 111 112 113 | import NiceModal from "@ebay/nice-modal-react";
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import ModalFactory from "@common/Modal/ModalFactory/ModalFactory";
import { ModalActions, ModalTitle } from "@common/Modal/ModalFactory/atoms";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import { Text } from "@common/Text";
import { palette } from "@palette";
import { showMessage } from "@common/Toast/ShowToast";
import { BtnBGTypes } from "@common/Button/Button_V2";
type BankAccountStatusDeclinePopupProps = {
declineHandler: () => void;
name: string;
};
const BankAccountStatusDeclinePopup = NiceModal.create(
({ declineHandler, name }: BankAccountStatusDeclinePopupProps) => {
const { open, onClose, SlideProps, TransitionProps } = useNiceModal();
const { isMobileView } = useCustomTheme();
const onClickDecline = () => {
if (declineHandler) {
declineHandler();
showMessage(
"Info",
<>
Bank account status of{" "}
<span style={{ fontWeight: "600" }}>“{name}”</span> has been
declined.
</>,
!isMobileView,
"Bank Account Status Declined",
);
}
onClose();
};
return (
<ModalFactory
variant="dialog"
modalProps={{
open,
onClose,
width: "563px",
SlideProps,
DialogProps: {
PaperProps: {
sx: {
padding: "24px 16px 16px",
},
},
TransitionProps,
},
}}
>
<ModalTitle title="Decline Bank Account" onClose={onClose} />
<FadeUpWrapper
delay={60}
containerProps={{ sx: { marginBlock: "8px 20px" } }}
>
<Text
lineHeight="16.8px"
color={palette.neutral[600]}
sx={{
"& span": {
fontWeight: 600,
},
}}
>
Are you sure that you want to decline <span>“{name}”</span> Bank
Status?
</Text>
</FadeUpWrapper>
<ModalActions
animationDelay={80}
containerProps={{
sx: {
paddingTop: "20px",
...(isMobileView && {
flexDirection: "column-reverse",
}),
},
}}
secondaryAction={{
label: "Cancel",
onClick: onClose,
sx: {
fontSize: "18px",
lineHeight: "21.6px",
padding: "12px 24px",
},
}}
primaryAction={{
type: "button",
onClick: onClickDecline,
label: "Yes, Decline",
background: "red" as BtnBGTypes,
sx: {
fontSize: "18px",
lineHeight: "21.6px",
padding: "12px 24px",
},
}}
/>
</ModalFactory>
);
},
);
export default BankAccountStatusDeclinePopup;
|