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 109 110 111 112 113 | 12x | import { CURRENCY } from "@constants/constants";
import { Box, Divider, Stack } from "@mui/material";
import { CheckCircleIcon } from "@phosphor-icons/react";
import { FEE_PAYER_OPTIONS } from "@sections/PayBuilder/Checkout/consts";
import { ICartItem } from "@sections/PayBuilder/provider/CartContext";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import { useIsPreviewMode } from "@sections/PayBuilder/provider/useIsPreviewMode";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
export const ItemsSection = ({
formattedAmount,
cartItems,
renewalDate,
showRenewalDateInfos = false,
}: {
formattedAmount?: string;
cartItems: ICartItem[];
renewalDate?: string;
showRenewalDateInfos?: boolean;
}) => {
const theme = useAppTheme();
const { methods } = usePayBuilderForm();
const { Checkout } = methods.watch();
const { isPreviewMode, isPeekModalOpened } = useIsPreviewMode();
const isPreview = isPreviewMode || isPeekModalOpened;
const showProcessingFees = !isPreview
? Checkout?.support?.render
: Checkout.feePayer !== FEE_PAYER_OPTIONS.MERCHANT;
return (
<>
<Box id="items-section">
<Stack
sx={{
backgroundColor: "rgba(245, 245, 243, 1)",
width: "100%",
padding: "20px",
borderRadius: "12px",
gap: 2,
fontFamily: "Arial",
}}
>
<Stack gap={2}>
<Stack direction="row" justifyContent="space-between">
<GiveText variant="bodyS">
Subtotal ({cartItems.length} Item
{cartItems.length !== 1 && "s"})
</GiveText>
<GiveText variant="bodyS" textAlign={"right"}>
{formattedAmount} {CURRENCY}
</GiveText>
</Stack>
{showProcessingFees && (
<Stack direction="row" justifyContent="space-between">
<GiveText variant="bodyS">Card Processing Fees</GiveText>
<GiveText variant="bodyS" textAlign={"right"}>
0.00 USD
</GiveText>
</Stack>
)}
<Divider />
<Stack direction="row" justifyContent="space-between">
<GiveText variant="bodyM" fontWeight={700}>
Total
</GiveText>
<GiveText variant="bodyM" textAlign="right" fontWeight={700}>
{formattedAmount} {CURRENCY}
</GiveText>
</Stack>
</Stack>
{renewalDate && showRenewalDateInfos && (
<Stack gap={1}>
<Stack direction="row" alignItems="center" gap={1}>
<CheckCircleIcon
width="14.63px"
height="14.63px"
color={theme.palette.primitive?.neutral[60]}
/>
<GiveText
variant="bodyXS"
fontWeight={400}
color={theme.palette.primitive?.neutral[60]}
>
Subscription renews automatically on {renewalDate}
</GiveText>
</Stack>
<Stack direction="row" alignItems="center" gap={1}>
<CheckCircleIcon
width="14.63px"
height="14.63px"
color={theme.palette.primitive?.neutral[60]}
/>
<GiveText
variant="bodyXS"
fontWeight={400}
color={theme.palette.primitive?.neutral[60]}
>
Cancel your renewal anytime
</GiveText>
</Stack>
</Stack>
)}
</Stack>
</Box>
</>
);
};
|