-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
BeneficialOwnerCheckUBO.tsx
66 lines (58 loc) · 2.2 KB
/
BeneficialOwnerCheckUBO.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
55
56
57
58
59
60
61
62
63
64
65
66
import React, {useMemo, useState} from 'react';
import FormProvider from '@components/Form/FormProvider';
import type {Choice} from '@components/RadioButtons';
import RadioButtons from '@components/RadioButtons';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import ONYXKEYS from '@src/ONYXKEYS';
type BeneficialOwnerCheckUBOProps = {
/** The title of the question */
title: string;
/** The default value of the radio button */
defaultValue: boolean;
/** Callback when the value is selected */
onSelectedValue: (value: boolean) => void;
};
function BeneficialOwnerCheckUBO({title, onSelectedValue, defaultValue}: BeneficialOwnerCheckUBOProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const [value, setValue] = useState(defaultValue);
const handleSubmit = () => {
onSelectedValue(value);
};
const handleSelectUBOValue = (newValue: string) => setValue(newValue === 'true');
const options = useMemo<Choice[]>(
() => [
{
label: translate('common.yes'),
value: 'true',
},
{
label: translate('common.no'),
value: 'false',
},
],
[translate],
);
return (
<FormProvider
formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
submitButtonText={translate('common.confirm')}
onSubmit={handleSubmit}
style={[styles.mh5, styles.flexGrow1]}
submitButtonStyles={[styles.mb0]}
>
<Text style={[styles.textHeadlineLineHeightXXL]}>{title}</Text>
<Text style={[styles.pv3, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
<RadioButtons
items={options}
onPress={handleSelectUBOValue}
defaultCheckedValue={defaultValue.toString()}
radioButtonStyle={[styles.mb6]}
/>
</FormProvider>
);
}
BeneficialOwnerCheckUBO.displayName = 'BeneficialOwnerCheckUBO';
export default BeneficialOwnerCheckUBO;