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 | 25x 25x 25x 25x 25x 25x 25x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 2x 2x 2x 16x 8x 2x 2x 8x 1x 1x 1x 1x 8x 25x | import { noop } from 'lodash';
import React, { createRef, useCallback, useRef, useState, FunctionComponent, RefObject } from 'react';
import { TranslatedString } from '../../locale';
import { Modal } from '../../ui/modal';
import { withHostedCreditCardFieldset, WithInjectedHostedCreditCardFieldsetProps } from '../hostedCreditCard';
import CreditCardPaymentMethod, { CreditCardPaymentMethodProps } from './CreditCardPaymentMethod';
export type BraintreeCreditCardPaymentMethodProps = CreditCardPaymentMethodProps;
interface BraintreeCreditCardPaymentMethodRef {
threeDSecureContentRef: RefObject<HTMLDivElement>;
cancelThreeDSecureVerification?(): void;
}
const BraintreeCreditCardPaymentMethod: FunctionComponent<
BraintreeCreditCardPaymentMethodProps &
WithInjectedHostedCreditCardFieldsetProps
> = ({
getHostedFormOptions,
getHostedStoredCardValidationFieldset,
hostedFieldset,
hostedStoredCardValidationSchema,
hostedValidationSchema,
initializePayment,
onUnhandledError = noop,
...rest
}) => {
const [threeDSecureContent, setThreeDSecureContent] = useState<HTMLElement>();
const ref = useRef<BraintreeCreditCardPaymentMethodRef>({
threeDSecureContentRef: createRef(),
});
const initializeBraintreePayment: BraintreeCreditCardPaymentMethodProps['initializePayment'] = useCallback(async (options, selectedInstrument) => {
return initializePayment({
...options,
braintree: {
threeDSecure: {
addFrame(error, content, cancel) {
Iif (error) {
return onUnhandledError(error);
}
setThreeDSecureContent(content);
ref.current.cancelThreeDSecureVerification = cancel;
},
removeFrame() {
setThreeDSecureContent(undefined);
ref.current.cancelThreeDSecureVerification = undefined;
},
},
form: IgetHostedFormOptions && await getHostedFormOptions(selectedInstrument),
},
});
}, [
getHostedFormOptions,
initializePayment,
onUnhandledError,
]);
const appendThreeDSecureContent = useCallback(() => {
Eif (ref.current.threeDSecureContentRef.current && threeDSecureContent) {
ref.current.threeDSecureContentRef.current.appendChild(threeDSecureContent);
}
}, [threeDSecureContent]);
const cancelThreeDSecureModalFlow = useCallback(() => {
setThreeDSecureContent(undefined);
Eif (ref.current.cancelThreeDSecureVerification) {
ref.current.cancelThreeDSecureVerification();
ref.current.cancelThreeDSecureVerification = undefined;
}
}, []);
return <>
<CreditCardPaymentMethod
{ ...rest }
cardFieldset={ hostedFieldset }
cardValidationSchema={ hostedValidationSchema }
getStoredCardValidationFieldset={ getHostedStoredCardValidationFieldset }
initializePayment={ initializeBraintreePayment }
storedCardValidationSchema={ hostedStoredCardValidationSchema }
/>
<Modal
additionalBodyClassName="modal-body--center"
closeButtonLabel={ <TranslatedString id="common.close_action" /> }
isOpen={ !!threeDSecureContent }
onAfterOpen={ appendThreeDSecureContent }
onRequestClose={ cancelThreeDSecureModalFlow }
>
<div ref={ ref.current.threeDSecureContentRef } />
</Modal>
</>;
};
export default withHostedCreditCardFieldset(BraintreeCreditCardPaymentMethod);
|