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 114 115 116 117 118 119 120 121 122 123 | 12x 12x 207x 207x 207x 207x 207x 207x 207x 207x 207x 207x 207x 23x 23x 207x 207x 207x 207x 207x 45x 207x 93x 114x 114x 114x | import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import { useAppSelector } from "@redux/hooks";
import { selectAuth } from "@redux/slices/auth/auth";
import { usePayBuilderContext } from "../provider/PayBuilderContext";
import { usePayBuilderForm } from "../provider/PayBuilderFormProvider";
import { Item_Layout } from "../provider/provider.type";
import ProductPageContainer from "./products/ProductPageContainer";
import UnpublishedPage from "./products/UnpublishedPage";
import { Box } from "@mui/material";
import PreviewWrapper from "./PreviewWrapper";
import { TFormSourceEnum } from "./products/types";
import { isUrl } from "@sections/PayBuilder/helpers";
import { useGetCurrentMerchantId } from "@hooks/common";
import { useEffect } from "react";
import useCheckFormType from "./hooks/useCheckFormType";
import { useIsPreviewMode } from "../provider/useIsPreviewMode";
import { useNavigate, useParams } from "react-router-dom";
const PREVIEW_TEXT =
"You are viewing an unpublished version of this payment form.";
const ProductsCustomerView = ({
isPeekMode = false,
showBackToPortalButton,
}: {
isPeekMode?: boolean;
showBackToPortalButton?: boolean;
}) => {
const isAuthenticated = useAppSelector(selectAuth);
const { displayStatus } = usePayBuilderContext();
const {
methods,
data,
isPaymentFormInfosLoading,
setCheckoutBottomSheetVisible,
checkoutBottomSheetVisible,
} = usePayBuilderForm();
const { merchantId } = useGetCurrentMerchantId();
const {
Style: { itemLayout },
Items,
} = methods.watch();
const { isInvoice } = useCheckFormType();
const { isPreviewMode } = useIsPreviewMode();
const { id } = useParams();
const navigate = useNavigate();
const header = {
heading: data.name,
description: data.description,
assetPosition: data.position,
};
useEffect(() => {
return () => {
Iif (checkoutBottomSheetVisible) {
setCheckoutBottomSheetVisible(false);
}
};
}, []);
const savedLogo = isUrl(data.paymentLogoStyles?.URL)
? data.paymentLogoStyles
: data.paymentLogoURL;
const accentColor = data.accentColor;
const isCreatorOfPaymentForm = merchantId === data.accID;
const shouldShowUnpublishedPage =
displayStatus === "draft" && (!isAuthenticated || !isCreatorOfPaymentForm);
// Invoices don't have customer page, so if user ends up on /:id route, we should redirect to /:id/checkout
useEffect(() => {
Iif (!isPaymentFormInfosLoading && isInvoice && !isPreviewMode && id) {
navigate(`/${id}/checkout`);
}
}, [isPaymentFormInfosLoading, isInvoice, isPreviewMode, id]);
if (isPaymentFormInfosLoading) {
return <LoadingSpinner />; // TODO: PUT SKELETONS
}
Iif (shouldShowUnpublishedPage) {
return <UnpublishedPage />;
}
Iif (displayStatus === "draft" && isAuthenticated) {
return (
<PreviewWrapper
background={methods.watch().Style.background}
previewText={PREVIEW_TEXT}
source={TFormSourceEnum.PUBLIC}
>
<ProductPageContainer
displayStatus={displayStatus}
header={header}
items={Items}
itemLayout={itemLayout as Item_Layout}
showBackToPortalButton={showBackToPortalButton}
/>
</PreviewWrapper>
);
}
return (
<Box sx={{ background: data.backgroundColor }}>
<ProductPageContainer
showBackToPortalButton={showBackToPortalButton}
displayStatus={displayStatus}
header={header}
items={Items}
itemLayout={itemLayout as Item_Layout}
isPeekMode={isPeekMode}
savedLogo={savedLogo}
accentColor={accentColor}
isPreview={false}
/>
</Box>
);
};
export default ProductsCustomerView;
|