All files / src/sections/PayBuilder/components/EmailPreview/Membership MembershipEmailPreview.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Stack, Divider } from "@mui/material";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import { CommonMetadata } from "@sections/PayBuilder/components/product-preview-email/ProductCommonMetadata";
import { ItemsDonationSection } from "@sections/PayBuilder/components/fundraiser-preview-email/ItemsDonationSection";
import usePreviewCart from "@sections/PayBuilder/components/EmailPreview/usePreviewCart";
import { EmailPreviewLayout } from "@sections/PayBuilder/components/EmailPreview/EmailPreviewLayout";
import GiveText from "@shared/Text/GiveText";
import { capitalizeFirstLetter } from "@utils/index";
 
function MembershipEmailPreview() {
  const { isPaymentFormInfosLoading } = usePayBuilderForm();
  const { cartItems, subTotal, feesTotal, renewalDate } = usePreviewCart({
    onlyFirst: true,
  });
 
  const cartItem = cartItems?.[0];
 
  const content = (
    <>
      <CommonMetadata />
      <Divider />
 
      <ItemsDonationSection
        formattedAmount={subTotal}
        feesAmount={feesTotal}
        cartItems={cartItems}
        renewalDate={renewalDate || "MM/DD/YYYY"}
        showRenewalDateInfos
        sectionTitle="Membership Details"
        subtitle={
          cartItems.length ? (
            <Stack direction="row" justifyContent="space-between" mb={1}>
              <GiveText>{cartItem?.productVariantName}</GiveText>
              <GiveText textAlign="right">
                {subTotal} USD{" "}
                {capitalizeFirstLetter(cartItem?.recurringIntervalName)}
              </GiveText>
            </Stack>
          ) : null
        }
        labels={["Signup Fee", "Card Processing Fees"]}
        totalLabel="Total Due Today"
        hideFees={feesTotal === "0.00"}
      />
    </>
  );
 
  return (
    <EmailPreviewLayout
      isLoading={isPaymentFormInfosLoading}
      content={content}
    />
  );
}
 
export default MembershipEmailPreview;