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 | import { Stack } from "@mui/material";
import { isUrl } from "@sections/PayBuilder/helpers";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import GiveText from "@shared/Text/GiveText";
import ProductPageLogoComponent from "./ProductPageContainer/ProductPageLogoComponent";
import { PaymentFormSuccessIcon } from "@pages/Checkout/components/PaymentSuccess";
import PublicFormPolicyFooter from "../PublicFormPolicyFooter";
import { format } from "date-fns";
import { FileMagnifyingGlassIcon } from "@phosphor-icons/react";
function PaidCancelledInvoiceView({
status,
}: {
status: "Paid" | "Cancelled";
}) {
const { data, parsedValues } = usePayBuilderForm();
const { accentColor } = parsedValues;
const savedLogo = isUrl(data.paymentLogoStyles?.URL)
? data.paymentLogoStyles
: data.paymentLogoURL;
const isPaid = status === "Paid";
return (
<Stack
justifyContent="space-between"
sx={{ maxWidth: "608px", margin: "0 auto", height: "100vh" }}
>
<ProductPageLogoComponent
logoUrl={savedLogo}
showBackToPortalButton={false}
isPreview={false}
/>
<Stack alignItems="center" gap="20px">
<PaymentFormSuccessIcon
accentColor={accentColor}
Icon={isPaid ? undefined : FileMagnifyingGlassIcon}
sx={
isPaid
? {}
: { width: "56px", height: "56px", borderRadius: "40px" }
}
/>
{
<GiveText
variant="bodyS"
color="secondary"
sx={{ textAlign: "center" }}
>
{isPaid ? (
<>
This invoice ({data?.reference}) has already been paid on{" "}
<GiveText variant="bodyS" color="primary" component="span">
{format(data?.statusUpdatedAt * 1000, "MMMM dd, yyyy")}
</GiveText>{" "}
No further action is required.
</>
) : (
<>This invoice has been canceled and is no longer payable</>
)}
</GiveText>
}
</Stack>
<PublicFormPolicyFooter />
</Stack>
);
}
export default PaidCancelledInvoiceView;
|