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 67x 67x 67x 67x 67x 67x 67x 67x 3x 3x 3x 2x 2x 1x 67x 67x 67x 3x | import { Stack } from "@mui/material";
import SectionHeader from "./SectionHeader";
import { CoinsIcon } from "@phosphor-icons/react";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import GiveCheckbox from "@shared/GiveCheckbox/GiveCheckbox";
import { Controller, useFormContext } from "react-hook-form";
import { useCart } from "@sections/PayBuilder/provider/CartContext";
import WithCheckoutTooltip from "./CheckoutTooltip";
import { parseAmount } from "@utils/index";
import { CURRENCY, PAY_CARD_FEES_TEXT } from "@constants/constants";
import { FEE_PAYER_OPTIONS } from "../consts";
const SupportPreview = ({
fees,
isDisabledFields,
isPreviewMode,
}: {
fees: number;
isDisabledFields?: boolean;
isPreviewMode?: boolean;
}) => {
const { palette } = useAppTheme();
const {
methods: leftSidepanelMethods,
parsedValues: { inputColor },
} = usePayBuilderForm();
const methods = useFormContext();
const { optionalMessage: supportOptionalMessage } =
leftSidepanelMethods.watch().Checkout.support;
const { setDisplayFees, setFees, displayFees, isCartEmpty, ...props } =
useCart();
const { feePayer } = leftSidepanelMethods.watch().Checkout;
const isCustomerChoice = feePayer === FEE_PAYER_OPTIONS.CUSTOMER_CHOICE;
const handleToggle = (
e: React.ChangeEvent<HTMLInputElement>,
onChange: (...event: any[]) => void,
) => {
const shouldHideFees = e.target.value === "true";
onChange(e);
if (shouldHideFees) {
setDisplayFees(false);
return;
}
setDisplayFees(true);
};
const SupportIcon = CoinsIcon;
return (
<Stack spacing="20px">
{isCustomerChoice && (
<SectionHeader
title="Support"
description={supportOptionalMessage}
icon={<SupportIcon size={24} />}
/>
)}
<Stack
padding="16px"
borderRadius="12px"
border={`1px solid ${palette.border?.secondary}`}
gap="20px"
>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing="20px"
>
{isCustomerChoice && (
<Stack direction="row" spacing="12px" alignItems="center">
<Controller
control={methods.control}
name="customerCoversFees"
render={({ field: { onChange, value } }) => (
<Stack width={5}>
<WithCheckoutTooltip
disabled={isDisabledFields && isPreviewMode}
fullWidth={false}
>
<GiveCheckbox
checked={value}
value={value}
onChange={(e) => handleToggle(e, onChange)}
disabled={isDisabledFields}
sx={{
backgroundColor: inputColor,
}}
inputProps={
{
"data-testid": "customer-covers-fees-checkbox",
} as React.InputHTMLAttributes<HTMLInputElement>
}
/>
</WithCheckoutTooltip>
</Stack>
)}
/>
<Stack spacing={1} display="flex">
<GiveText variant="bodyS">{PAY_CARD_FEES_TEXT}</GiveText>
</Stack>
</Stack>
)}
{Boolean(fees) && displayFees ? (
<GiveText variant="bodyS">
{parseAmount(fees / 100)} {CURRENCY}
</GiveText>
) : null}
</Stack>
</Stack>
</Stack>
);
};
export default SupportPreview;
|