Skip to content

Commit

Permalink
Fasih/TRAH-3793/ Removed popup (#16048)
Browse files Browse the repository at this point in the history 
* chore: removed popup

* chore: removed from additional kyc info form

* chore: removed unused code

* chore: removed some props and states as well
  • Loading branch information
@fasihali-deriv
fasihali-deriv authored Jul 19, 2024
1 parent 297d0f3 commit 06d5e1a
Show file tree
Hide file tree
Showing 3 changed files with 2 additions and 126 deletions.
18 changes: 0 additions & 18 deletions packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import clsx from 'clsx';
import { Form, Formik } from 'formik';
import React from 'react';
import { useSettings } from '@deriv/api';
import { OECD_TIN_FORMAT_URL } from '../../Constants/external-urls';
import FormFieldInfo from '../form-field-info';
import { FormInputField } from '../forms/form-fields';
import FormSelectField from '../forms/form-select-field';
Expand Down Expand Up @@ -120,23 +119,6 @@ export const AdditionalKycInfoForm = observer(({ setError }: TAdditionalKycInfoF
{...fields.tax_identification_number}
data_testId='dt_tax_identification_number'
/>
<FormFieldInfo
message={
<Localize
i18n_default_text="Don't know your tax identification number? <1 />Click <0>here</0> to learn more."
components={[
<a
key={0}
className='link'
target='_blank'
rel='noopener noreferrer'
href={OECD_TIN_FORMAT_URL}
/>,
<br key={1} />,
]}
/>
}
/>
</fieldset>
<fieldset className='additional-kyc-info-modal__form-field'>
<FormSelectField
Expand Down
57 changes: 2 additions & 55 deletions packages/account/src/Components/forms/personal-details-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,14 @@ const PersonalDetailsForm = props => {
const is_svg_only = is_svg && !is_eu_user;

const [is_tax_residence_popover_open, setIsTaxResidencePopoverOpen] = React.useState(false);
const [is_tin_popover_open, setIsTinPopoverOpen] = React.useState(false);

const { errors, touched, values, setFieldValue, handleChange, handleBlur, setFieldTouched } = useFormikContext();

const handleToolTipStatus = React.useCallback(() => {
if (is_tax_residence_popover_open) {
setIsTaxResidencePopoverOpen(false);
}
if (is_tin_popover_open) {
setIsTinPopoverOpen(false);
}
}, [is_tax_residence_popover_open, is_tin_popover_open]);
}, [is_tax_residence_popover_open]);

React.useEffect(() => {
if (should_close_tooltip) {
Expand Down Expand Up @@ -425,15 +421,11 @@ const PersonalDetailsForm = props => {
residence_list={residence_list}
required
setIsTaxResidencePopoverOpen={setIsTaxResidencePopoverOpen}
setIsTinPopoverOpen={setIsTinPopoverOpen}
is_tax_residence_popover_open={is_tax_residence_popover_open}
/>
)}
{'tax_identification_number' in values && (
<TaxIdentificationNumberField
is_tin_popover_open={is_tin_popover_open}
setIsTinPopoverOpen={setIsTinPopoverOpen}
setIsTaxResidencePopoverOpen={setIsTaxResidencePopoverOpen}
disabled={isFieldImmutable('tax_identification_number', editable_fields)}
required
/>
Expand Down Expand Up @@ -565,15 +557,11 @@ const PersonalDetailsForm = props => {
disabled={isFieldImmutable('tax_residence', editable_fields)}
residence_list={residence_list}
setIsTaxResidencePopoverOpen={setIsTaxResidencePopoverOpen}
setIsTinPopoverOpen={setIsTinPopoverOpen}
is_tax_residence_popover_open={is_tax_residence_popover_open}
/>
)}
{'tax_identification_number' in values && (
<TaxIdentificationNumberField
is_tin_popover_open={is_tin_popover_open}
setIsTinPopoverOpen={setIsTinPopoverOpen}
setIsTaxResidencePopoverOpen={setIsTaxResidencePopoverOpen}
disabled={isFieldImmutable('tax_identification_number', editable_fields)}
/>
)}
Expand Down Expand Up @@ -681,7 +669,6 @@ const TaxResidenceField = ({
residence_list,
required = false,
setIsTaxResidencePopoverOpen,
setIsTinPopoverOpen,
is_tax_residence_popover_open,
disabled,
}) => {
Expand Down Expand Up @@ -730,7 +717,6 @@ const TaxResidenceField = ({
data-testid='tax_residence_pop_over'
onClick={e => {
setIsTaxResidencePopoverOpen(true);
setIsTinPopoverOpen(false);
e.stopPropagation();
}}
>
Expand All @@ -751,14 +737,7 @@ const TaxResidenceField = ({
);
};

const TaxIdentificationNumberField = ({
is_tin_popover_open,
setIsTinPopoverOpen,
setIsTaxResidencePopoverOpen,
disabled,
required = false,
}) => {
const { isDesktop } = useDevice();
const TaxIdentificationNumberField = ({ disabled, required = false }) => {
return (
<div className='details-form__tax'>
<FormInputField
Expand All @@ -769,38 +748,6 @@ const TaxIdentificationNumberField = ({
disabled={disabled}
required={required}
/>
<div
data-testid='tax_identification_number_pop_over'
onClick={e => {
setIsTaxResidencePopoverOpen(false);
setIsTinPopoverOpen(true);
if (e.target.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>
);
};
Expand Down
53 changes: 0 additions & 53 deletions packages/account/src/Components/personal-details/__tests__/personal-details.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ const mock_errors: FormikErrors<TPersonalDetailsSectionForm> = {

const tax_residence_pop_over_text =
/the country in which you meet the criteria for paying taxes\. usually the country in which you physically reside\./i;
const tin_pop_over_text = /don't know your tax identification number\?/i;

const runCommonFormfieldsTests = (is_svg: boolean) => {
expect(screen.getByRole('radio', { name: /mr/i })).toBeInTheDocument();
Expand Down Expand Up @@ -99,24 +98,6 @@ const runCommonFormfieldsTests = (is_svg: boolean) => {
).toBeInTheDocument();
}

const tax_residence_pop_over = screen.queryByTestId('tax_residence_pop_over');
if (tax_residence_pop_over) {
fireEvent.click(tax_residence_pop_over);
}

expect(screen.getByText(tax_residence_pop_over_text)).toBeInTheDocument();

expect(screen.getByLabelText(/tax identification number/i)).toBeInTheDocument();
const tax_identification_number_pop_over = screen.queryByTestId('tax_identification_number_pop_over');
expect(tax_identification_number_pop_over).toBeInTheDocument();

if (tax_identification_number_pop_over) {
fireEvent.click(tax_identification_number_pop_over);
}

expect(screen.getByText(tin_pop_over_text)).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'here' })).toBeInTheDocument();

if (is_svg)
expect(
screen.getByRole('heading', {
Expand Down Expand Up @@ -819,23 +800,6 @@ describe('<PersonalDetails/>', () => {
expect(screen.queryByText(tax_residence_pop_over_text)).not.toBeInTheDocument();
});

it('should close tax_identification_number_pop_over when clicked outside', () => {
const new_props = { ...mock_props, is_svg: false };
renderwithRouter({ props: new_props });

const tin_pop_over = screen.getByTestId('tax_identification_number_pop_over');
expect(tin_pop_over).toBeInTheDocument();
fireEvent.click(tin_pop_over);

expect(screen.getByText(tin_pop_over_text)).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'here' })).toBeInTheDocument();

fireEvent.click(screen.getByRole('heading', { name: /account opening reason/i }));

expect(screen.queryByText(tin_pop_over_text)).not.toBeInTheDocument();
expect(screen.queryByRole('link', { name: 'here' })).not.toBeInTheDocument();
});

it('should close tax_residence pop-over when scrolled', () => {
renderwithRouter({});

Expand All @@ -852,23 +816,6 @@ describe('<PersonalDetails/>', () => {
expect(screen.queryByText(tax_residence_pop_over_text)).not.toBeInTheDocument();
});

it('should close tax_identification_number_pop_over when scrolled', () => {
renderwithRouter({});

const tax_identification_number_pop_over = screen.getByTestId('tax_identification_number_pop_over');
expect(tax_identification_number_pop_over).toBeInTheDocument();
fireEvent.click(tax_identification_number_pop_over);
expect(screen.getByText(tin_pop_over_text)).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'here' })).toBeInTheDocument();

fireEvent.scroll(screen.getByTestId('dt_personal_details_container'), {
target: { scrollY: 100 },
});

expect(screen.queryByText(tax_residence_pop_over_text)).not.toBeInTheDocument();
expect(screen.queryByRole('link', { name: 'here' })).not.toBeInTheDocument();
});

it('should validate idv values when a document type is selected', async () => {
(shouldShowIdentityInformation as jest.Mock).mockReturnValue(true);
const new_props = {
Expand Down

0 comments on commit 06d5e1a

Please sign in to comment.