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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 13x 2x 2x 2x 2x 2x 2x 2x 13x 13x 13x 6x 13x 2x 6x | import { Stack } from "@mui/material";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import GiveText from "@shared/Text/GiveText";
type Props = {
message?: string;
cardNumberLast4?: string;
customContent?: React.ReactNode;
/** Rendered above the receipt message, e.g. the event receipt's
* "Hi {Contact Name}," line (mockup 7432-225401). */
greeting?: string;
};
export const CommonMetadata = ({
message,
cardNumberLast4,
customContent,
greeting,
}: Props) => {
const { methods } = usePayBuilderForm();
const { Checkout } = methods.watch();
const { render: isBillingEnabled } = Checkout.billing;
const { render: isDeliveryEnabled } = Checkout.delivery;
const defaultMessage =
"Thank you for your order. We're busy getting it ready for you.";
const receiptMessage =
message || Checkout?.receiptMessage?.optionalMessage || defaultMessage;
return (
<Stack gap="32px">
<Stack gap="16px">
{greeting && <GiveText sx={textStyle}>{greeting}</GiveText>}
<GiveText sx={textStyle}>{receiptMessage}</GiveText>
</Stack>
{customContent}
<Stack direction="row" spacing={4}>
<InfoSection
id="payment-details"
title="Payment Details"
labels={[
"Full Name",
"Card Type",
`Card Brand •••• ${cardNumberLast4 || "0000"}`,
]}
/>
{isBillingEnabled && (
<InfoSection
id="payment-billing-address"
title="Billing Address"
labels={["Full Name", "Address", "City, State, ZIP"]}
/>
)}
</Stack>
{isDeliveryEnabled && (
<InfoSection
id="delivery-address"
title="Delivery Address"
labels={["Full Name", "Address", "City, State, ZIP"]}
/>
)}
</Stack>
);
};
const sectionTitleStyle = {
fontWeight: 700,
fontSize: "16px",
lineHeight: "22px",
fontFamily: "Arial",
fontStyle: "bold",
};
const textStyle = {
fontFamily: "Arial",
fontWeight: 400,
fontSize: "16px",
whiteSpace: "pre-line",
};
const LabelValueBlock = ({ label }: { label: string }) => (
<GiveText sx={textStyle}>{label}</GiveText>
);
const InfoSection = ({
title,
labels,
id,
}: {
title: string;
labels: string[];
id?: string;
}) => (
<Stack gap="8px" flex={1}>
<GiveText id={id} sx={sectionTitleStyle}>
{title}
</GiveText>
<Stack>
{labels.map((label, index) => (
<LabelValueBlock key={index} label={label} />
))}
</Stack>
</Stack>
);
|