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 | 12x | import { Image } from "@common/StyledImage/Image";
import { Stack } from "@mui/material";
import { ICartItem } from "@sections/PayBuilder/provider/CartContext";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import GiveText from "@shared/Text/GiveText";
import { addSizeToImage } from "@utils/image.helpers";
export const OrderSummary = ({ cartItems }: { cartItems: ICartItem[] }) => {
const { methods } = usePayBuilderForm();
const { Items } = methods.watch();
return (
<Stack>
<Stack gap="8px">
<GiveText
id="order-summary"
variant="bodyS"
sx={{
fontWeight: 700,
lineHeight: "22px",
fontFamily: "Arial",
fontStyle: "bold",
}}
>
Order Summary
</GiveText>
<Stack sx={{ fontFamily: "Arial" }}>
{cartItems.map((item, idx) => {
const { productVariantID: id, unitPrice, quantity } = item;
const formCartItem = Items?.find((item) => item.id === id);
const thumb = formCartItem?.thumbnail
? addSizeToImage(formCartItem.thumbnail, "thumb")
: undefined;
const description =
formCartItem?.description?.replaceAll("<br>", "\n") ?? "";
const title = formCartItem?.title ?? "";
return (
<Stack
sx={{
...(!(idx === cartItems.length - 1) && {
borderBottom: "1px solid rgba(0,0,0,0.1)",
}),
paddingY: "12px",
}}
gap={2}
>
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
>
<Stack
direction="row"
alignItems="center"
sx={{ gap: "16px" }}
>
{thumb && (
<Image
src={thumb}
sx={{ width: "72px", height: "72px" }}
/>
)}
<Stack sx={{ flex: 1 }}>
<GiveText variant="bodyS" fontFamily="Arial">
{title}
</GiveText>
<GiveText
color="secondary"
fontFamily="Arial"
sx={{ fontSize: "14px" }}
>
Quantity: {quantity}
</GiveText>
</Stack>
</Stack>
<GiveText fontFamily="Arial">{unitPrice} USD</GiveText>
</Stack>
{description && (
<GiveText
variant="bodyS"
color="secondary"
fontFamily="Arial"
sx={{
whiteSpace: "pre-line",
wordBreak: "break-word",
}}
>
{description}
</GiveText>
)}
</Stack>
);
})}
</Stack>
</Stack>
</Stack>
);
};
|