All files / src/features/MerchantPortal/ManageMoney/modals TransferSentPopup.tsx

100% Statements 8/8
83.33% Branches 5/6
100% Functions 2/2
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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85                        1x   18x 18x 18x   18x 3x 3x     18x                                                                                                                          
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import NiceModal from "@ebay/nice-modal-react";
import { Box } from "@mui/material";
import { Stack } from "@mui/material";
import { CheckIcon } from "@phosphor-icons/react";
import { StyledTitle } from "@shared/Banner/styles";
import GiveButton from "@shared/Button/GiveButton";
import GivePopup from "@shared/Popup/GivePopup";
import GiveText from "@shared/Text/GiveText";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useAppTheme } from "@theme/v2/Provider";
 
const TransferSentPopup = NiceModal.create(
  ({ onFinish, isManualTransfer }: { onFinish?: () => void; isManualTransfer?: boolean }) => {
    const { isMobileView } = useCustomThemeV2();
    const { open, onClose } = useNiceModal();
    const theme = useAppTheme();
 
    const handleFinish = () => {
      onClose();
      onFinish?.();
    };
 
    return (
      <GivePopup
        type="destructive"
        iconType="warning"
        isMobile={isMobileView}
        open={open}
        paperSx={{
          width: "560px",
          padding: "64px 24px",
          ...(isMobileView && {
            maxHeight: "fit-content !important",
            width: "100%",
          }),
        }}
        onClose={onClose}
        title=""
        description=""
        showCloseButton={false}
        showActionSection={false}
        showHeader={false}
        showTitle={false}
        customDescription={
          <Stack spacing={3} alignItems="center">
            <Box
              sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                padding: "16px",
                background: theme.palette?.gradient["ocean-blue"]?.highlight,
                borderRadius: "50%",
              }}
            >
              <CheckIcon size={32} fill={theme.palette.primitive?.blue[100]} />
            </Box>
            <StyledTitle
              theme={theme}
              textColor=""
              sx={{
                fontSize: "36px !important",
                lineHeight: "40px",
                fontWeight: "300",
              }}
            >
              {isManualTransfer ? "Manual Transfer Recorded" : "Transfer Sent"}
            </StyledTitle>
            {isManualTransfer && (
              <GiveText variant="bodyS" color="secondary" textAlign="center">
                This transfer was marked as manual and will not be processed by
                the system. Complete the funds movement in your external system.
              </GiveText>
            )}
            <GiveButton label="Finish" size="large" onClick={handleFinish} />
          </Stack>
        }
      />
    );
  },
);
 
export default TransferSentPopup;