All files / app/payment/hostedCreditCard HostedCreditCardValidation.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
49
50
51
52
53
54
29x
 
29x
 
29x
29x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29x
22x
22x
22x
22x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29x
 
import React, { FunctionComponent } from 'react';
 
import { TranslatedString } from '../../locale';
 
import HostedCreditCardCodeField from './HostedCreditCardCodeField';
import HostedCreditCardNumberField from './HostedCreditCardNumberField';
 
export interface HostedCreditCardValidationProps {
    cardCodeId?: string;
    cardNumberId?: string;
    focusedFieldType?: string;
}
 
export interface HostedCreditCardValidationValues {
    hostedForm: {
        errors?: {
            cardCodeVerification?: string;
            cardNumberVerification?: string;
        };
    };
}
 
const HostedCreditCardValidation: FunctionComponent<HostedCreditCardValidationProps> = ({
    cardCodeId,
    cardNumberId,
    focusedFieldType,
}) => (<>
    { cardNumberId && <p>
        <strong>
            <TranslatedString id="payment.instrument_trusted_shipping_address_title_text" />
        </strong>
 
        <br />
 
        <TranslatedString id="payment.instrument_trusted_shipping_address_text" />
    </p> }
 
    <div className="form-ccFields">
        { cardNumberId && <HostedCreditCardNumberField
            appearFocused={ focusedFieldType === 'cardNumber' }
            id={ cardNumberId }
            name="hostedForm.errors.cardNumberVerification"
        /> }
 
        { cardCodeId && <HostedCreditCardCodeField
            appearFocused={ focusedFieldType === 'cardCode' }
            id={ cardCodeId }
            name="hostedForm.errors.cardCodeVerification"
        /> }
    </div>
</>);
 
export default HostedCreditCardValidation;