forked from binary-com/deriv-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #109 from amina-deriv/amina/components_separate
Amina/components separate
- Loading branch information
Showing
4 changed files
with
166 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }; |
65 changes: 65 additions & 0 deletions
65
packages/account/src/Components/forms/form-fields/tax-indentification-number.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) => ( | ||
| <div className='details-form__tax'> | ||
| <FormInputField | ||
| name='tax_identification_number' | ||
| label={required ? localize('Tax Identification Number*') : localize('Tax Identification Number')} | ||
| placeholder={localize('Tax Identification Number')} | ||
| data-testid='tax_identification_number' | ||
| disabled={disabled} | ||
| required={required} | ||
| /> | ||
| <div | ||
| data-testid='tax_identification_number_pop_over' | ||
| onClick={e => { | ||
| setIsTaxResidencePopoverOpen(false); | ||
| setIsTinPopoverOpen(true); | ||
| if ((e.target as HTMLElement).tagName !== 'A') e.stopPropagation(); | ||
| }} | ||
| > | ||
| <Popover | ||
| alignment={isDesktop() ? 'right' : 'left'} | ||
| icon='info' | ||
| is_open={is_tin_popover_open} | ||
| message={ | ||
| <Localize | ||
| i18n_default_text={ | ||
| "Don't know your tax identification number? Click <0>here</0> to learn more." | ||
| } | ||
| components={[ | ||
| <a | ||
| key={0} | ||
| className='link link--red' | ||
| rel='noopener noreferrer' | ||
| target='_blank' | ||
| href='https://www.oecd.org/tax/automatic-exchange/crs-implementation-and-assistance/tax-identification-numbers/' | ||
| />, | ||
| ]} | ||
| /> | ||
| } | ||
| zIndex='9998' | ||
| disable_message_icon | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| export default TaxIdentificationNumberField; |
89 changes: 89 additions & 0 deletions
89
packages/account/src/Components/forms/form-fields/tax-residence.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 name='tax_residence'> | ||
| {({ field, form: { setFieldValue }, meta }: FieldProps) => ( | ||
| <div className='details-form__tax'> | ||
| <DesktopWrapper> | ||
| <Autocomplete | ||
| {...field} | ||
| data-lpignore='true' | ||
| autoComplete='none' // prevent chrome autocomplete | ||
| label={required ? localize('Tax residence*') : localize('Tax residence')} | ||
| error={meta.touched ? meta.error : undefined} | ||
| list_items={residence_list} | ||
| onItemSelection={(item: ResidenceList[0]) => | ||
| setFieldValue('tax_residence', item.value ? item.text : '', true) | ||
| } | ||
| list_portal_id='modal_root' | ||
| data-testid='tax_residence' | ||
| disabled={disabled} | ||
| required={required} | ||
| /> | ||
| </DesktopWrapper> | ||
| <MobileWrapper> | ||
| <SelectNative | ||
| {...field} | ||
| placeholder={required ? localize('Tax residence*') : localize('Tax residence')} | ||
| name={field.name} | ||
| label={required ? localize('Tax residence*') : localize('Tax residence')} | ||
| list_items={residence_list} | ||
| value={field.value} | ||
| use_text | ||
| error={meta.touched ? meta.error : ''} | ||
| onChange={e => { | ||
| field.onChange(e); | ||
| setFieldValue('tax_residence', e.target.value, true); | ||
| }} | ||
| required={required} | ||
| data_testid='tax_residence_mobile' | ||
| disabled={disabled} | ||
| /> | ||
| </MobileWrapper> | ||
| <div | ||
| data-testid='tax_residence_pop_over' | ||
| onClick={e => { | ||
| setIsTaxResidencePopoverOpen(true); | ||
| setIsTinPopoverOpen(false); | ||
| e.stopPropagation(); | ||
| }} | ||
| > | ||
| <Popover | ||
| alignment={isDesktop() ? 'right' : 'left'} | ||
| icon='info' | ||
| message={localize( | ||
| 'The country in which you meet the criteria for paying taxes. Usually the country in which you physically reside.' | ||
| )} | ||
| zIndex='9998' | ||
| disable_message_icon | ||
| is_open={is_tax_residence_popover_open} | ||
| /> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </Field> | ||
| ); | ||
| }; | ||
|
|
||
| export default TaxResidenceField; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters