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 | 46x 9x 9x 9x 9x 9x 9x 9x 9x | import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import AmountsSection from "./components/AmountsSection";
import CheckoutDetailsSectionItem from "./components/CheckoutDetailsSectionItem";
import { Controller, useFormContext } from "react-hook-form";
import { FormDataType } from "../utils";
import { GiveInput } from "@shared/GiveInputs/GiveInput";
import { usePayBuilderForm } from "../provider/PayBuilderFormProvider";
import ContactSection from "./components/ContactSection";
import { CheckCircleIcon } from "@phosphor-icons/react";
import { useAppTheme } from "@theme/v2/Provider";
import BillingAdressSection from "./components/BillingAdressSection";
import { SweepstakeAmountsSection } from "./components/SweepstakeAmountsSection";
import useCheckFormType from "../components/hooks/useCheckFormType";
import PayNowButtonSection from "./components/PayNowButtonSection";
import ProcessingFeesSection from "./components/ProcessingFeesSection";
import CustomFieldsSection from "./components/CustomFieldsSection";
import { MAX_CONFIRMATION_MESSAGE_LEN } from "./consts";
const FundraiserCheckoutStep = () => {
const methods = useFormContext();
const { methods: leftSidepanelMethods } = usePayBuilderForm();
const checkoutValues = leftSidepanelMethods.watch().Checkout;
const isThankYouEnabled = checkoutValues.thankYouMessage.render;
const isCustomReceiptMessageEnabled = checkoutValues.receiptMessage.render;
const theme = useAppTheme();
const { isSweepstake } = useCheckFormType();
return (
<Stack gap="32px">
<ContactSection />
{isSweepstake ? <SweepstakeAmountsSection /> : <AmountsSection />}
<BillingAdressSection />
<ProcessingFeesSection />
<CustomFieldsSection />
<Stack gap="8px" alignItems="center" flexDirection="row">
<CheckCircleIcon
fill={theme.palette.icon?.["icon-primary"]}
size="20px"
/>
<GiveText>Configuration</GiveText>
</Stack>
<CheckoutDetailsSectionItem
label={"Custom Thank You Message"}
name={"thankYouMessage" as keyof FormDataType["Checkout"]}
optionalInput={
isThankYouEnabled ? (
<Stack paddingLeft="28px">
<Controller
control={methods.control}
name={`Checkout.thankYouMessage.optionalMessage`}
render={({ field: { onChange, value } }) => {
return (
<GiveInput
name={`thankYouMessage.optionalMessage`}
value={value}
onChange={onChange}
maxLength={MAX_CONFIRMATION_MESSAGE_LEN}
displayCounter
multiline
rows={6}
/>
);
}}
/>
</Stack>
) : (
<></>
)
}
/>
<CheckoutDetailsSectionItem
label={"Custom Message for Receipt"}
name={"receiptMessage" as keyof FormDataType["Checkout"]}
optionalInput={
isCustomReceiptMessageEnabled ? (
<Stack paddingLeft="28px">
<Controller
control={methods.control}
name={`Checkout.receiptMessage.optionalMessage`}
render={({ field: { onChange, value } }) => {
return (
<GiveInput
name={`receiptMessage.optionalMessage`}
value={value}
onChange={onChange}
maxLength={MAX_CONFIRMATION_MESSAGE_LEN}
displayCounter
multiline
rows={6}
/>
);
}}
/>
</Stack>
) : (
<></>
)
}
/>
<PayNowButtonSection />
</Stack>
);
};
export default FundraiserCheckoutStep;
|