All files / app/orderComments OrderComments.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
 
8x
 
8x
8x
 
8x
101x
 
 
 
 
 
101x
 
 
 
 
 
 
 
77x
 
 
 
 
 
77x
 
 
 
 
 
 
 
 
8x
 
import { FieldProps } from 'formik';
import React, { useCallback, useMemo, FunctionComponent } from 'react';
 
import { TranslatedString } from '../locale';
import { Fieldset, FormField, Label, Legend, TextInput } from '../ui/form';
 
const OrderComments: FunctionComponent = () => {
    const renderLabel = useCallback(name => (
        <Label hidden htmlFor={ name }>
            <TranslatedString id="shipping.order_comment_label" />
        </Label>
    ), []);
 
    const renderInput = useCallback(({ field }: FieldProps) => (
        <TextInput
            { ...field }
            autoComplete={ 'off' }
            maxLength={ 2000 }
        />
    ), []);
 
    const legend = useMemo(() => (
        <Legend>
            <TranslatedString id="shipping.order_comment_label" />
        </Legend>
    ), []);
 
    return <Fieldset legend={ legend } testId="checkout-shipping-comments">
        <FormField
            input={ renderInput }
            label={ renderLabel }
            name="orderComment"
        />
    </Fieldset>;
};
 
export default OrderComments;