All files / app/payment/creditCard CreditCardExpiryField.tsx

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
52x
 
52x
 
52x
52x
 
52x
 
 
 
 
 
52x
74x
74x
 
74x
93x
2x
 
 
 
93x
 
 
 
 
 
 
 
 
 
 
74x
 
 
 
74x
 
 
 
 
 
 
 
52x
 
import { memoizeOne } from '@bigcommerce/memoize';
import { FieldProps } from 'formik';
import React, { memo, useCallback, useMemo, ChangeEvent, FunctionComponent } from 'react';
 
import { withLanguage, TranslatedString, WithLanguageProps } from '../../locale';
import { FormField, TextInput } from '../../ui/form';
 
import formatCreditCardExpiryDate from './formatCreditCardExpiryDate';
 
export interface CreditCardExpiryFieldProps {
    name: string;
}
 
const CreditCardExpiryField: FunctionComponent<CreditCardExpiryFieldProps & WithLanguageProps> = ({
    language,
    name,
}) => {
    const handleChange = useCallback(memoizeOne((field: FieldProps['field'], form: FieldProps['form']) => {
        return (event: ChangeEvent<any>) => {
            form.setFieldValue(field.name, formatCreditCardExpiryDate(event.target.value));
        };
    }), []);
 
    const renderInput = useCallback(({ field, form }: FieldProps) => (
        <TextInput
            { ...field }
            autoComplete="cc-exp"
            id={ field.name }
            onChange={ handleChange(field, form) }
            placeholder={ language.translate('payment.credit_card_expiration_placeholder_text') }
            type="tel"
        />
    ), [handleChange, language]);
 
    const labelContent = useMemo(() => (
        <TranslatedString id="payment.credit_card_expiration_label" />
    ), []);
 
    return <FormField
        additionalClassName="form-field--ccExpiry"
        input={ renderInput }
        labelContent={ labelContent }
        name={ name }
    />;
};
 
export default memo(withLanguage(CreditCardExpiryField));