All files / src/features/Merchants/MerchantSidePanel/Modals SaveChangesModal.tsx

100% Statements 8/8
100% Branches 2/2
100% Functions 3/3
100% Lines 8/8

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                      1x   9x 9x   9x                             1x 1x           1x 1x                                                  
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";
 
type Props = {
  modalName: string;
  handleCancel: () => void;
  handleSave: () => void;
};
 
const SaveChangesModal = NiceModal.create(
  ({ modalName, handleCancel, handleSave }: Props) => {
    const { onClose, open } = useNiceModal();
    const { isMobileView } = useCustomThemeV2();
 
    return (
      <GivePopup
        type="success"
        iconType="success"
        title="Save Changes"
        description={`Do you want to save the changes you made to ${modalName}?`}
        open={open}
        onClose={onClose}
        isMobile={isMobileView}
        buttons={[
          {
            label: "Don’t Save",
            variant: "ghost",
            color: "destructive",
            onClick: () => {
              handleCancel();
              onClose();
            },
          },
          {
            label: "Yes, Save Changes",
            onClick: () => {
              handleSave();
              onClose();
            },
            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 SaveChangesModal;