Skip to content

Commit

Permalink
Fasih/TRAH-3827/ Enable tooltip again (#16175)
Browse files Browse the repository at this point in the history 
* Revert "Fasih/TRAH-3793/ Removed popup (#16048)"

This reverts commit 06d5e1a.

* chore: imported URL from external URL file

* chore: fixed build issue
  • Loading branch information
@fasihali-deriv
fasihali-deriv committed Jul 25, 2024
1 parent 632e990 commit 2b5a801
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 2 deletions.
18 changes: 18 additions & 0 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,6 +5,7 @@ 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 @@ -119,6 +120,23 @@ 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
58 changes: 56 additions & 2 deletions packages/account/src/Components/forms/personal-details-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { DateOfBirthField, FormInputField } from './form-fields';
import FormSubHeader from '../form-sub-header';
import InlineNoteWithIcon from '../inline-note-with-icon';
import { useDevice } from '@deriv-com/ui';
import { OECD_TIN_FORMAT_URL } from '../../Constants/external-urls';

const PersonalDetailsForm = props => {
const { isDesktop } = useDevice();
Expand Down Expand Up @@ -52,14 +53,18 @@ 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);
}
}, [is_tax_residence_popover_open]);
if (is_tin_popover_open) {
setIsTinPopoverOpen(false);
}
}, [is_tax_residence_popover_open, is_tin_popover_open]);

React.useEffect(() => {
if (should_close_tooltip) {
Expand Down Expand Up @@ -421,11 +426,15 @@ 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 @@ -557,11 +566,15 @@ 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 @@ -669,6 +682,7 @@ const TaxResidenceField = ({
residence_list,
required = false,
setIsTaxResidencePopoverOpen,
setIsTinPopoverOpen,
is_tax_residence_popover_open,
disabled,
}) => {
Expand Down Expand Up @@ -717,6 +731,7 @@ const TaxResidenceField = ({
data-testid='tax_residence_pop_over'
onClick={e => {
setIsTaxResidencePopoverOpen(true);
setIsTinPopoverOpen(false);
e.stopPropagation();
}}
>
Expand All @@ -737,7 +752,14 @@ const TaxResidenceField = ({
);
};

const TaxIdentificationNumberField = ({ disabled, required = false }) => {
const TaxIdentificationNumberField = ({
is_tin_popover_open,
setIsTinPopoverOpen,
setIsTaxResidencePopoverOpen,
disabled,
required = false,
}) => {
const { isDesktop } = useDevice();
return (
<div className='details-form__tax'>
<FormInputField
Expand All @@ -748,6 +770,38 @@ const TaxIdentificationNumberField = ({ disabled, required = false }) => {
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={OECD_TIN_FORMAT_URL}
/>,
]}
/>
}
zIndex={9998}
disable_message_icon
/>
</div>
</div>
);
};
Expand Down
53 changes: 53 additions & 0 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,6 +63,7 @@ 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 @@ -98,6 +99,24 @@ 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 @@ -800,6 +819,23 @@ 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 @@ -816,6 +852,23 @@ 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 2b5a801

Please sign in to comment.