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 | 3x 3x 82x 82x 82x 15x 15x 82x | import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import NiceModal from "@ebay/nice-modal-react";
import GivePopup from "@shared/Popup/GivePopup";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
interface Props {
variant: "forgotPassword" | "changePassword" | "changeEmail";
onConfirm: () => void;
}
const variantMap = {
forgotPassword: {
description:
"For security, updating your password will log you out from every device. You’ll need to log in again everywhere with your new password.",
button: "Yes, Reset Password",
},
changePassword: {
description:
"For security, updating your password will log you out from all other devices. You’ll stay logged in here, but you’ll need to log in again on other devices with your new password.",
button: "Yes, Change Password",
},
changeEmail: {
description:
"For security, updating your email will log you out from all other devices. You’ll stay logged in here, but you’ll need to log in again on other devices with your new password.",
button: "Yes, Change Email",
},
};
const SecurityCheckModal = NiceModal.create(({ variant, onConfirm }: Props) => {
const { isMobileView } = useCustomThemeV2();
const { open, onClose } = useNiceModal();
const handleConfirm = () => {
onConfirm();
onClose();
};
return (
<GivePopup
type="success"
iconType="security"
title="Security Check"
description={variantMap[variant].description}
open={open}
onClose={onClose}
isMobile={isMobileView}
buttons={[
{
label: "Cancel",
variant: "ghost",
onClick: onClose,
},
{
label: variantMap[variant].button,
onClick: handleConfirm,
variant: "filled",
sxButton: { border: "none", margin: "0 !important" },
submitType: "submit",
},
]}
paperSx={{
...(isMobileView && {
maxHeight: "fit-content !important",
"& .MuiDialogActions-root": {
flexDirection: "row",
justifyContent: "flex-end",
},
"& button": {
width: "fit-content !important",
},
}),
}}
/>
);
});
export default SecurityCheckModal;
|