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 | 44x 44x 20x 20x 20x 20x 20x 20x | import { Stack } from "@mui/material";
import { CoinsIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import { Controller, useFormContext } from "react-hook-form";
import { GiveInput } from "@shared/GiveInputs/GiveInput";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import GiveSelect from "@shared/GiveInputs/GiveSelect";
import { FEE_PAYER_OPTIONS } from "../consts";
const options = [
{
label: "Processing Fees Covered by Merchant",
value: FEE_PAYER_OPTIONS.MERCHANT,
},
{
label: "Customer has the Option to Cover the Processing Fees",
value: FEE_PAYER_OPTIONS.CUSTOMER_CHOICE,
},
{
label: "Require Customer to Cover Processing Fees",
value: FEE_PAYER_OPTIONS.CUSTOMER,
},
];
interface IProcessingFeesSection {
isAdditionalSupport?: boolean;
}
const ProcessingFeesSection = ({}: IProcessingFeesSection) => {
const methods = useFormContext();
const { methods: leftSidepanelMethods } = usePayBuilderForm();
const { isMobileView } = useCustomThemeV2();
const isSupportRendered =
leftSidepanelMethods.watch().Checkout.feePayer ===
FEE_PAYER_OPTIONS.CUSTOMER_CHOICE;
return (
<Stack gap="12px">
<Stack direction="row" spacing={2}>
<CoinsIcon size={24} />
<GiveText variant="bodyL">Processing Fees</GiveText>
</Stack>
<Controller
control={methods.control}
name="Checkout.feePayer"
render={({ field }) => (
<GiveSelect
withIconOffset={false}
{...field}
useContextualMenu
options={options}
contextualMenuProps={{
color: "secondary",
texture: isMobileView ? "solid" : "blurred",
}}
onChange={(e) => {
field.onChange(e);
methods.setValue(
"Checkout.support.render",
e.target?.value === FEE_PAYER_OPTIONS.CUSTOMER_CHOICE ||
e.target?.value === FEE_PAYER_OPTIONS.CUSTOMER,
);
}}
/>
)}
/>
{isSupportRendered && (
<Controller
control={methods.control}
name="Checkout.support.optionalMessage"
render={({ field }) => (
<GiveInput
label="Note for customer"
{...field}
name="support.optionalMessage"
maxLength={500}
displayCounter
multiline
rows={6}
/>
)}
/>
)}
</Stack>
);
};
export default ProcessingFeesSection;
|