From a8d9a9924fb586ee376ea5587b2a97e07c6c7c51 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Mon, 24 Jun 2024 11:22:09 +0400 Subject: [PATCH 1/3] feat: separate components for tin --- .../src/Components/forms/form-fields/index.ts | 4 +- .../tax-indentification-number.tsx | 65 +++++++++ .../forms/form-fields/tax-residence.tsx | 89 ++++++++++++ .../forms/personal-details-form.jsx | 137 ++---------------- .../Components/cfd-personal-details-form.tsx | 2 +- .../components/src/components/icon/icons.js | 1 - 6 files changed, 167 insertions(+), 131 deletions(-) create mode 100644 packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx create mode 100644 packages/account/src/Components/forms/form-fields/tax-residence.tsx diff --git a/packages/account/src/Components/forms/form-fields/index.ts b/packages/account/src/Components/forms/form-fields/index.ts index 7a4b8e26f76c..335408a2e547 100644 --- a/packages/account/src/Components/forms/form-fields/index.ts +++ b/packages/account/src/Components/forms/form-fields/index.ts @@ -1,5 +1,7 @@ import FormInputField from './form-input-field'; import DateOfBirthField from './date-of-birth-field'; import EmploymentStatusField from './employment-status'; +import TaxResidenceField from './tax-residence'; +import TaxIdentificationNumberField from './tax-indentification-number'; -export { FormInputField, DateOfBirthField, EmploymentStatusField }; +export { FormInputField, DateOfBirthField, EmploymentStatusField, TaxResidenceField, TaxIdentificationNumberField }; diff --git a/packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx b/packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx new file mode 100644 index 000000000000..eb044c77d7da --- /dev/null +++ b/packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx @@ -0,0 +1,65 @@ +import { Localize, localize } from '@deriv/translations'; +import FormInputField from './form-input-field'; +import { Popover } from '@deriv/components'; +import { isDesktop } from '@deriv/shared'; + +type TTaxIdentificationNumberFieldProps = { + required?: boolean; + disabled: boolean; + is_tin_popover_open: boolean; + setIsTinPopoverOpen: (is_open: boolean) => void; + setIsTaxResidencePopoverOpen: (is_open: boolean) => void; +}; + +const TaxIdentificationNumberField = ({ + required = false, + is_tin_popover_open, + setIsTinPopoverOpen, + setIsTaxResidencePopoverOpen, + disabled, +}: TTaxIdentificationNumberFieldProps) => ( +
+ +
{ + setIsTaxResidencePopoverOpen(false); + setIsTinPopoverOpen(true); + if ((e.target as HTMLElement).tagName !== 'A') e.stopPropagation(); + }} + > + here to learn more." + } + components={[ + , + ]} + /> + } + zIndex='9998' + disable_message_icon + /> +
+
+); + +export default TaxIdentificationNumberField; diff --git a/packages/account/src/Components/forms/form-fields/tax-residence.tsx b/packages/account/src/Components/forms/form-fields/tax-residence.tsx new file mode 100644 index 000000000000..c499f67a4ff5 --- /dev/null +++ b/packages/account/src/Components/forms/form-fields/tax-residence.tsx @@ -0,0 +1,89 @@ +import { Field, FieldProps } from 'formik'; +import { ResidenceList } from '@deriv/api-types'; +import { DesktopWrapper, MobileWrapper, Autocomplete, SelectNative, Popover } from '@deriv/components'; +import { localize } from '@deriv/translations'; +import { isDesktop } from '@deriv/shared'; +import { useResidenceList } from '@deriv/hooks'; + +type TTaxResidenceFieldProps = { + required?: boolean; + setIsTaxResidencePopoverOpen: (is_open: boolean) => void; + setIsTinPopoverOpen: (is_open: boolean) => void; + is_tax_residence_popover_open: boolean; + disabled: boolean; +}; + +const TaxResidenceField = ({ + required = false, + setIsTaxResidencePopoverOpen, + setIsTinPopoverOpen, + is_tax_residence_popover_open, + disabled, +}: TTaxResidenceFieldProps) => { + const { data: residence_list } = useResidenceList(); + return ( + + {({ field, form: { setFieldValue }, meta }: FieldProps) => ( +
+ + + setFieldValue('tax_residence', item.value ? item.text : '', true) + } + list_portal_id='modal_root' + data-testid='tax_residence' + disabled={disabled} + required={required} + /> + + + { + field.onChange(e); + setFieldValue('tax_residence', e.target.value, true); + }} + required={required} + data_testid='tax_residence_mobile' + disabled={disabled} + /> + +
{ + setIsTaxResidencePopoverOpen(true); + setIsTinPopoverOpen(false); + e.stopPropagation(); + }} + > + +
+
+ )} + + ); +}; + +export default TaxResidenceField; diff --git a/packages/account/src/Components/forms/personal-details-form.jsx b/packages/account/src/Components/forms/personal-details-form.jsx index 1cbb3983094e..664d28276e75 100644 --- a/packages/account/src/Components/forms/personal-details-form.jsx +++ b/packages/account/src/Components/forms/personal-details-form.jsx @@ -9,16 +9,21 @@ import { Dropdown, InlineMessage, MobileWrapper, - Popover, RadioGroup, SelectNative, Text, } from '@deriv/components'; -import { getLegalEntityName, isDesktop, isMobile, routes, validPhone } from '@deriv/shared'; +import { getLegalEntityName, isMobile, routes, validPhone } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; import { isFieldImmutable, verifyFields } from '../../Helpers/utils'; import FormBodySection from '../form-body-section'; -import { DateOfBirthField, FormInputField, EmploymentStatusField } from './form-fields'; +import { + DateOfBirthField, + FormInputField, + EmploymentStatusField, + TaxResidenceField, + TaxIdentificationNumberField, +} from './form-fields'; import FormSubHeader from '../form-sub-header'; import InlineNoteWithIcon from '../inline-note-with-icon'; @@ -421,13 +426,11 @@ const PersonalDetailsForm = props => { {'tax_residence' in values && ( )} {'tax_identification_number' in values && ( @@ -636,128 +639,6 @@ const PlaceOfBirthField = ({ handleChange, setFieldValue, disabled, residence_li ); -const TaxResidenceField = ({ - setFieldValue, - residence_list, - required = false, - setIsTaxResidencePopoverOpen, - setIsTinPopoverOpen, - is_tax_residence_popover_open, - disabled, -}) => ( - - {({ field, meta }) => ( -
- - setFieldValue('tax_residence', value ? text : '', true)} - list_portal_id='modal_root' - data-testid='tax_residence' - disabled={disabled} - required={required} - /> - - - { - field.onChange(e); - setFieldValue('tax_residence', e.target.value, true); - }} - {...field} - required={required} - data_testid='tax_residence_mobile' - disabled={disabled} - /> - -
{ - setIsTaxResidencePopoverOpen(true); - setIsTinPopoverOpen(false); - e.stopPropagation(); - }} - > - -
-
- )} - -); - -const TaxIdentificationNumberField = ({ - is_tin_popover_open, - setIsTinPopoverOpen, - setIsTaxResidencePopoverOpen, - disabled, - required = false, -}) => ( -
- -
{ - setIsTaxResidencePopoverOpen(false); - setIsTinPopoverOpen(true); - if (e.target.tagName !== 'A') e.stopPropagation(); - }} - > - here to learn more." - } - components={[ - , - ]} - /> - } - zIndex={9998} - disable_message_icon - /> -
-
-); - const AccountOpeningReasonField = ({ no_header, required, account_opening_reason_list, setFieldValue, disabled }) => ( {!no_header && } diff --git a/packages/cfd/src/Components/cfd-personal-details-form.tsx b/packages/cfd/src/Components/cfd-personal-details-form.tsx index f3ad6bb5da16..68c2950f886b 100644 --- a/packages/cfd/src/Components/cfd-personal-details-form.tsx +++ b/packages/cfd/src/Components/cfd-personal-details-form.tsx @@ -385,7 +385,7 @@ const CFDPersonalDetailsForm = ({ disabled={isFieldDisabled('citizen')} list_items={residence_list} onItemSelection={(item: ResidenceList[0]) => - handleItemSelection(item, 'citizen') + setFieldValue('citizen', item.value, true) } list_portal_id='modal_root' required diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index c862d525e10b..d3fa2b4bb30c 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -722,7 +722,6 @@ import './dxtrade/ic-dxtrade-financial-platform.svg'; import './dxtrade/ic-dxtrade-financial.svg'; import './dxtrade/ic-dxtrade-one-password.svg'; import './dxtrade/ic-dxtrade-synthetic-platform.svg'; -//TODO: remove this once korean flag is added in quill-icons import './flag/ic-flag-ko.svg'; import './mt5/ic-mt5-bvi-derived.svg'; import './mt5/ic-mt5-bvi-financial.svg'; From 464ad242eaeb20cb54b8ca5932eba7baf719650e Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Mon, 24 Jun 2024 11:29:25 +0400 Subject: [PATCH 2/3] feat: separate components for tin --- packages/cfd/src/Components/cfd-personal-details-form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cfd/src/Components/cfd-personal-details-form.tsx b/packages/cfd/src/Components/cfd-personal-details-form.tsx index 68c2950f886b..f3ad6bb5da16 100644 --- a/packages/cfd/src/Components/cfd-personal-details-form.tsx +++ b/packages/cfd/src/Components/cfd-personal-details-form.tsx @@ -385,7 +385,7 @@ const CFDPersonalDetailsForm = ({ disabled={isFieldDisabled('citizen')} list_items={residence_list} onItemSelection={(item: ResidenceList[0]) => - setFieldValue('citizen', item.value, true) + handleItemSelection(item, 'citizen') } list_portal_id='modal_root' required From 4c9cab3ce8359f156bdd7a840f7af779f6215089 Mon Sep 17 00:00:00 2001 From: amina-deriv Date: Mon, 24 Jun 2024 11:30:10 +0400 Subject: [PATCH 3/3] feat: separate components for tin --- packages/components/src/components/icon/icons.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index d3fa2b4bb30c..c862d525e10b 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -722,6 +722,7 @@ import './dxtrade/ic-dxtrade-financial-platform.svg'; import './dxtrade/ic-dxtrade-financial.svg'; import './dxtrade/ic-dxtrade-one-password.svg'; import './dxtrade/ic-dxtrade-synthetic-platform.svg'; +//TODO: remove this once korean flag is added in quill-icons import './flag/ic-flag-ko.svg'; import './mt5/ic-mt5-bvi-derived.svg'; import './mt5/ic-mt5-bvi-financial.svg';