All files / src/sections/PayBuilder/components/InvoicePreview EmailPreview.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
58
59
60
61
62
63
64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Button } from "@common/Button";
import { Text } from "@common/Text";
import { DEFAULT_INVOICE_REFERENCE } from "@sections/PayBuilder/consts";
import { useCart } from "@sections/PayBuilder/provider/CartContext";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import InvoiceCommonMetadata from "./InvoiceCommonMetadata";
import ItemsSection from "./ItemsSection";
import { getClosestRenewalDate } from "./utils";
import { getCustomerLabel } from "@sections/PayBuilder/utils";
import { useCardProcessingFees } from "@sections/PayBuilder/Checkout/hooks/useCardProcessingFees";
import { EmailPreviewLayout } from "@sections/PayBuilder/components/EmailPreview/EmailPreviewLayout";
 
function EmailPreview({ from }: { from: string }) {
  const { cartItems, subTotal } = useCart();
  // added useCardProcessingFees to execute the responsible useEffect for setDisplayFees
  useCardProcessingFees();
 
  const { data, methods, customer, isPaymentFormInfosLoading } =
    usePayBuilderForm();
 
  const values = methods.getValues();
 
  const dueDate = values.About.endsAt;
  const invoiceDate = data?.createdAt * 1000 || new Date();
 
  const renewalDate = getClosestRenewalDate(cartItems, invoiceDate);
 
  const content = (
    <>
      <InvoiceCommonMetadata
        amount={subTotal}
        invoiceDate={invoiceDate}
        dueDate={dueDate}
        from={from || ""}
        notes={values.About.notes}
        to={getCustomerLabel(customer || data?.customer)}
        invoiceKVNumber={data?.reference || DEFAULT_INVOICE_REFERENCE}
      />
 
      <Button
        id="checkout-button"
        sx={{ backgroundColor: values.Style.accent }}
      >
        <Text fontSize="14px">{values.Checkout.payButtonText}</Text>
      </Button>
 
      <ItemsSection
        formattedAmount={subTotal}
        cartItems={cartItems}
        renewalDate={renewalDate}
      />
    </>
  );
 
  return (
    <EmailPreviewLayout
      isLoading={isPaymentFormInfosLoading}
      content={content}
    />
  );
}
 
export default EmailPreview;