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 | 12x 108x 108x 108x 23x 23x 115x 23x 108x 108x | import Payment, { getPaymentFields } from "componentsV2/Payment/Payment";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import { InputProps } from "@shared/GiveInputs/GiveInput";
import PayBuilderCardNumberField from "@sections/PayBuilder/Checkout/components/PayBuilderCardNumberField";
import { useMemo } from "react";
import SectionHeader from "@sections/PayBuilder/Checkout/components/SectionHeader";
import { CreditCardIcon } from "@phosphor-icons/react";
interface IPayBuilderPayment {
isMobileView?: boolean;
isDeclined?: boolean;
isDisabledFields?: boolean;
isPreviewMode?: boolean;
}
const PayBuilderPayment = ({
isMobileView,
isDeclined,
isDisabledFields,
isPreviewMode,
}: IPayBuilderPayment) => {
const {
methods: leftSidepanelMethods,
parsedValues: {
paymentSectionBackground,
checkoutInputStyles,
accentColor,
},
} = usePayBuilderForm();
const { render: isSupportEnabled } =
leftSidepanelMethods.watch().Checkout.support;
const customInputFields = useMemo(() => {
const defaultFields = getPaymentFields({ isDisabledFields, isDeclined });
return defaultFields.map((field, index) => {
if (index !== 0) return field;
return {
...field,
Component: (props: InputProps) => (
<PayBuilderCardNumberField
{...props}
isSupportEnabled={isSupportEnabled}
/>
),
};
});
}, [isDisabledFields, isDeclined, isSupportEnabled]);
return (
<Payment
HeaderComponent={
<SectionHeader title="Payment" icon={<CreditCardIcon size={24} />} />
}
styles={{
checkoutInputStyles,
paymentSectionStyles: {
backgroundColor: paymentSectionBackground,
},
}}
isMobileView={isMobileView}
customInputFields={customInputFields}
isDisabledFields={isDisabledFields}
showTooltip={isDisabledFields && isPreviewMode}
/>
);
};
export default PayBuilderPayment;
|