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 87 88 89 90 91 92 93 94 | 45x 5x 5x 5x 5x 5x 5x 5x 5x 45x 5x 1x 1x 1x 1x 4x 4x 4x | import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import ConfirmationSection from "../Checkout/components/ConfirmationSection";
import { usePayBuilderForm } from "../provider/PayBuilderFormProvider";
import { getDifferenceInUTCDays } from "../utils";
import { useMemo } from "react";
import { Customer } from "@customTypes/customer.types";
import PayNowButtonSection from "../Checkout/components/PayNowButtonSection";
import { DEFAULT_INVOICE_REFERENCE } from "../consts";
import { formatInUTCMoment } from "@utils/date.helpers";
import ProcessingFeesSection from "../Checkout/components/ProcessingFeesSection";
import CustomFieldsSection from "../Checkout/components/CustomFieldsSection";
const InvoiceSendStep = () => {
const { methods, customer } = usePayBuilderForm();
const endsAt = methods.watch("About.endsAt");
const differenceInDays = getDifferenceInUTCDays(endsAt || 0);
const daysText = useMemo(() => {
Iif (differenceInDays === 0) return "Today";
Iif (differenceInDays === 1) return "Day";
Iif (differenceInDays > 1) return "Days";
}, [differenceInDays]);
return (
<Stack gap={2}>
<Stack>
<GiveText color="primary" variant="bodyS" fontWeight={500}>
Invoice
</GiveText>
<GiveText variant="bodyS" color="secondary">
Invoice reference: {DEFAULT_INVOICE_REFERENCE}
</GiveText>
{endsAt && (
<GiveText variant="bodyS" color="secondary">
Due Date: Within {differenceInDays === 0 ? "" : differenceInDays}{" "}
{daysText}, {formatInUTCMoment(endsAt, "Do MMMM YYYY")}
</GiveText>
)}
</Stack>
<BilledToSection customer={customer} />
<ProcessingFeesSection />
<ConfirmationSection />
<PayNowButtonSection />
{/* PAY-Builder016 — invoice was the only checkout surface missing custom
fields; render the shared section (self-gates on the feature flag). */}
<CustomFieldsSection />
</Stack>
);
};
const BilledToSection = ({ customer }: { customer?: Customer }) => {
if (!customer) return null;
const { firstName = "", lastName = "", email, address } = customer;
const {
line1 = "",
line2 = "",
city = "",
zip = "",
country = "",
} = address || {};
const customerInfos = [
`${firstName} ${lastName}`,
email,
`${line1} ${line2}`,
`${country}, ${city}, ${zip}`,
];
return (
<Stack spacing={1}>
<GiveText variant="bodyS" fontWeight={500} color="primary">
Billed To
</GiveText>
<Stack>
{customerInfos.map((item, index) => {
const trimmedItem = item.replaceAll(",", "").trim();
Iif (!trimmedItem) return null;
return (
<GiveText key={index} variant="bodyS" color="secondary">
{item}
</GiveText>
);
})}
</Stack>
</Stack>
);
};
export default InvoiceSendStep;
|