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 154x 154x 154x 259x 154x 154x 154x 154x 154x 154x 94x 60x 12x | import GiveEmptyStateWrapper from "@shared/EmptyState/GiveEmptyStateWrapper";
import useCheckFormType from "../../hooks/useCheckFormType";
import { Box, Stack } from "@mui/material";
import { styled } from "@theme/v2/Provider";
import ProductList from "../ProductList";
import { ProductItemType } from "@sections/PayBuilder/types";
import { Item_Layout } from "@sections/PayBuilder/provider/provider.type";
import { usePayBuilderContext } from "@sections/PayBuilder/provider/PayBuilderContext";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import { TFormStatus, TFormStatusEnum } from "../types";
import { useGetRedesignedFormTypes } from "@sections/PayBuilder/utils";
import HeroSelector from "../Hero/HeroSelector";
import { Node } from "@pages/NewAdvancedBuilder/components/Builder";
import { structuredTreeSignal } from "@pages/NewAdvancedBuilder/signals";
import { isEmpty as _isEmpty } from "lodash";
interface Props {
displayStatus: TFormStatus;
items?: ProductItemType[];
itemLayout?: Item_Layout;
isPreview?: boolean;
header?: any;
isPeekMode?: boolean;
}
const ProductPageMainContent = ({
displayStatus,
items,
itemLayout,
isPreview,
header,
isPeekMode,
}: Props) => {
const { isMembership, isProduct, isFundraiser, isSweepstake, formType } =
useCheckFormType();
const redesignedFormTypes = useGetRedesignedFormTypes();
const isPublic = displayStatus === TFormStatusEnum.PUBLIC;
const isEmpty = items?.filter((x) => x.display).length === 0 && isPublic;
const showEmptyProducts = isEmpty && (isProduct || isMembership);
const {
screenStates: { isMobileView },
} = usePayBuilderContext();
const {
parsedValues: { accentColor, background },
} = usePayBuilderForm();
const isRedesigned = redesignedFormTypes.includes(formType);
const heroContent = isPublic ? (
!_isEmpty(structuredTreeSignal.value) ? (
<HeroSelector
isPreview={isPreview}
{...header}
ADBContent={<Node node={structuredTreeSignal.value} isPublished />}
/>
) : (
<HeroSelector isPreview={isPreview} {...header} isPeekMode={isPeekMode} />
)
) : (
<HeroSelector isPreview={isPreview} {...header} isPeekMode={isPeekMode} />
);
if (isMembership || isProduct || !isRedesigned) {
return (
<Stack sx={{ padding: isMobileView ? "40px 20px" : 0 }}>
{heroContent}
<StyledContainer>
<GiveEmptyStateWrapper isEmpty={showEmptyProducts} section="products">
<ProductList
displayStatus={displayStatus}
items={items || ([] as ProductItemType[])}
itemLayout={itemLayout || "card"}
isMobileView={isMobileView}
accentColor={accentColor || ""}
backgroundColor={background || ""}
isPreview={isPreview}
isPeekMode={isPeekMode}
/>
</GiveEmptyStateWrapper>
</StyledContainer>
</Stack>
);
}
return (
<Stack
sx={{
...(isMobileView && {
padding: "20px 20px 0 20px",
}),
}}
>
{heroContent}
</Stack>
);
};
export default ProductPageMainContent;
const StyledContainer = styled(Stack)({
flex: 1,
alignItems: "center",
justifyContent: "center",
"& .empty_text p": {
maxWidth: "340px",
textAlign: "center",
},
paddingTop: "10px",
});
|