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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 26x 26x 26x 26x 26x 26x 26x 26x 4x 1x 2x 26x 4x 1x 4x 4x 4x 4x 4x 26x | 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";
import React, { useState } from "react";
import useCheckFormType, {
useGetFormData,
} from "../components/hooks/useCheckFormType";
import { useNavigate } from "react-router-dom";
import { useGetCart } from "@hooks/merchant-api/cart";
import { deleteCardItem } from "@services/api/checkout/cart";
const processingIssueTitle = "Processing Issue";
const processingIssueDescription = `We’re sorry, but we encountered an issue while processing your payment`;
const refrestPageText = "Please refresh the page and try again.";
const returnToMainPageText = "Please return to the main page and try again.";
const yesRefresh = "Yes, Refresh Page";
const yesGoBack = "Yes, Go to Main Page";
const timeoutModalDescription = `Your session timed out and your cart has been cleared. To start again, click “Yes, Go to Main Page.”`;
const timeoutModalTitle = "Timeout";
type Props = {
timeoutId?: NodeJS.Timeout;
isCartSessionTimeout?: boolean;
};
const ProcessingIssueModal = NiceModal.create(
({ timeoutId, isCartSessionTimeout }: Props) => {
const { open, onClose } = useNiceModal();
const [disabled, setDisabled] = useState(false);
const { isMobileView } = useCustomThemeV2();
const { data } = useGetFormData();
const navigate = useNavigate();
const { data: cart } = useGetCart(true);
const { isFundraiser, isInvoice } = useCheckFormType();
const removeOldCartItems = async () => {
if (!cart?.items || cart?.items?.length === 0) return;
for (const item of cart.items) {
await deleteCardItem(item.id);
}
};
const handleNavigate = async () => {
if (timeoutId) {
clearTimeout(timeoutId);
}
setDisabled(true);
await removeOldCartItems();
setDisabled(false);
onClose();
window.location.reload();
};
return (
<GivePopup
open={open}
description={
isCartSessionTimeout
? timeoutModalDescription
: `${processingIssueDescription} ${
isFundraiser ? refrestPageText : returnToMainPageText
}`
}
onClose={() => null}
isMobile={isMobileView}
showCloseButton={false}
iconType="warning"
title={isCartSessionTimeout ? timeoutModalTitle : processingIssueTitle}
type="destructive"
paperSx={{
height: "fit-content !important",
}}
buttons={[
{
label: isFundraiser ? yesRefresh : yesGoBack,
onClick: handleNavigate,
color: "primary",
variant: "filled",
disabled,
},
]}
/>
);
},
);
export default ProcessingIssueModal;
|