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 | 12x 92x 92x 92x 92x 92x 92x 23x 92x 184x | import { Grid } from "@mui/material";
import { Item_Layout } from "@sections/PayBuilder/provider/provider.type";
import { ProductItemType } from "@sections/PayBuilder/types";
import { useMemo } from "react";
import { TFormStatus } from "./types";
import useCheckFormType from "../hooks/useCheckFormType";
import CardSelector from "./CardItem/CardSelector";
import { sortProducts } from "@sections/PayBuilder/utils";
interface ProductsProps {
items: ProductItemType[];
displayStatus: TFormStatus;
itemLayout: Item_Layout;
isMobileView?: boolean;
accentColor?: string;
backgroundColor?: string;
isFromADB?: boolean;
isPreview?: boolean;
isPeekMode?: boolean;
}
const ProductList = ({
displayStatus,
items: Items,
itemLayout,
isMobileView,
accentColor,
isFromADB,
isPreview,
backgroundColor,
isPeekMode = false,
}: ProductsProps) => {
const { isMembership } = useCheckFormType();
const mobileSize = isMembership
? ""
: "repeat(auto-fill, minmax(171px, 1fr))";
const desktopSize = isMembership
? "repeat(auto-fill, minmax(280px, 1fr))"
: "repeat(auto-fill, minmax(260px, 1fr))";
const cardWidth = isMobileView ? mobileSize : desktopSize;
const listWidth = isMobileView ? "repeat(1, 1fr)" : "repeat(2, 1fr)";
const sortedProducts = useMemo(() => {
return sortProducts(Items);
}, [Items]);
return (
<Grid
container
sx={{
display: "grid",
gap: "16px",
gridTemplateColumns: isMembership
? cardWidth
: itemLayout === "list"
? listWidth
: cardWidth,
paddingBottom: "16px",
}}
>
{sortedProducts?.map((product) => (
<CardSelector
key={product.id}
product={product}
displayStatus={displayStatus}
itemLayout={itemLayout}
isMobileView={isMobileView}
accentColor={accentColor || ""}
isFromADB={isFromADB}
paymentType={product.paymentType}
isPreview={isPreview}
backgroundColor={backgroundColor || ""}
isPeekMode={isPeekMode}
/>
))}
</Grid>
);
};
export default ProductList;
|