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 124 125 126 127 128 129 130 131 | 6x 6x 6x 6x 6x 6x 6x 6x 2x 2x 2x 2x 6x 77x 77x 77x 77x 77x 77x 77x 77x 2x 77x 187x 187x 187x 1x 186x 6x 186x 186x 186x 186x 186x 186x 186x 186x 186x 6x | import { PaymentMethod } from '@bigcommerce/checkout-sdk';
import { find, get, noop } from 'lodash';
import React, { memo, useCallback, useMemo, FunctionComponent } from 'react';
import { connectFormik, ConnectFormikProps } from '../../common/form';
import { isMobile } from '../../common/utility';
import { Checklist, ChecklistItem } from '../../ui/form';
import getUniquePaymentMethodId, { parseUniquePaymentMethodId } from './getUniquePaymentMethodId';
import { default as PaymentMethodComponent } from './PaymentMethod';
import PaymentMethodTitle from './PaymentMethodTitle';
export interface PaymentMethodListProps {
isEmbedded?: boolean;
isInitializingPayment?: boolean;
isUsingMultiShipping?: boolean;
methods: PaymentMethod[];
onSelect?(method: PaymentMethod): void;
onUnhandledError?(error: Error): void;
}
function getPaymentMethodFromListValue(methods: PaymentMethod[], value: string): PaymentMethod {
const { gatewayId: gateway, methodId: id } = parseUniquePaymentMethodId(value);
const method = gateway ? find(methods, { gateway, id }) : find(methods, { id });
Iif (!method) {
throw new Error(`Unable to find payment method with id: ${id}`);
}
return method;
}
const PaymentMethodList: FunctionComponent<
PaymentMethodListProps &
ConnectFormikProps<{ paymentProviderRadio?: string }>
> = ({
formik: { values },
isEmbedded,
isInitializingPayment,
isUsingMultiShipping,
methods,
onSelect = noop,
onUnhandledError,
}) => {
const handleSelect = useCallback((value: string) => {
onSelect(getPaymentMethodFromListValue(methods, value));
}, [
methods,
onSelect,
]);
return <Checklist
defaultSelectedItemId={ values.paymentProviderRadio }
isDisabled={ isInitializingPayment }
name="paymentProviderRadio"
onSelect={ handleSelect }
>
{ methods.map(method => {
const value = getUniquePaymentMethodId(method.id, method.gateway);
const showOnlyOnMobileDevices = get(method, 'initializationData.showOnlyOnMobileDevices', false);
if (showOnlyOnMobileDevices && !isMobile()) {
return;
}
return (
<PaymentMethodListItem
isDisabled={ isInitializingPayment }
isEmbedded={ isEmbedded }
isUsingMultiShipping={ isUsingMultiShipping }
key={ value }
method={ method }
onUnhandledError={ onUnhandledError }
value={ value }
/>
);
}) }
</Checklist>;
};
interface PaymentMethodListItemProps {
isDisabled?: boolean;
isEmbedded?: boolean;
isUsingMultiShipping?: boolean;
method: PaymentMethod;
value: string;
onUnhandledError?(error: Error): void;
}
const PaymentMethodListItem: FunctionComponent<PaymentMethodListItemProps> = ({
isDisabled,
isEmbedded,
isUsingMultiShipping,
method,
onUnhandledError,
value,
}) => {
const renderPaymentMethod = useMemo(() => (
<PaymentMethodComponent
isEmbedded={ isEmbedded }
isUsingMultiShipping={ isUsingMultiShipping }
method={ method }
onUnhandledError={ onUnhandledError }
/>
), [
isEmbedded,
isUsingMultiShipping,
method,
onUnhandledError,
]);
const renderPaymentMethodTitle = useCallback((isSelected: boolean) => (
<PaymentMethodTitle
isSelected={ isSelected }
method={ method }
/>
), [method]);
return (
<ChecklistItem
content={ renderPaymentMethod }
htmlId={ `radio-${value}` }
isDisabled={ isDisabled }
label={ renderPaymentMethodTitle }
value={ value }
/>
);
};
export default connectFormik(memo(PaymentMethodList));
|