Skip to content

Commit

Permalink
Merge branch 'binary-com:master' into accounts_team/accounts_package_…
Browse files Browse the repository at this point in the history 
…ts_migration/sprint_6
  • Loading branch information
@utkarsha-deriv
utkarsha-deriv committed Sep 11, 2023
2 parents d9f61de + cd3154a commit 0564f03
Show file tree
Hide file tree
Showing 217 changed files with 7,020 additions and 5,951 deletions.
2 changes: 1 addition & 1 deletion .stylelintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ module.exports = {
'shorthand-property-no-redundant-values': true,
'string-no-newline': true,
'time-min-milliseconds': 100,
'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
'value-keyword-case': 'lower',
},
extends: [
Expand Down
1,011 changes: 563 additions & 448 deletions packages/account/src/Components/forms/personal-details-form.jsx
View file

Large diffs are not rendered by default.

83 changes: 43 additions & 40 deletions packages/account/src/Components/personal-details/__tests__/personal-details.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ 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 = () => {
const runCommonFormfieldsTests = is_svg => {
expect(screen.getByRole('radio', { name: /mr/i })).toBeInTheDocument();
expect(screen.getByRole('radio', { name: /ms/i })).toBeInTheDocument();
expect(screen.getByTestId('first_name')).toBeInTheDocument();
Expand All @@ -74,10 +74,6 @@ const runCommonFormfieldsTests = () => {
screen.getByText(/Please enter your date of birth as in your official identity documents./i)
).toBeInTheDocument();

expect(screen.getByText('Place of birth')).toBeInTheDocument();
expect(screen.getByText('Citizenship')).toBeInTheDocument();
expect(screen.getByText('Tax residence')).toBeInTheDocument();

const tax_residence_pop_over = screen.queryByTestId('tax_residence_pop_over');
expect(tax_residence_pop_over).toBeInTheDocument();

Expand All @@ -98,7 +94,12 @@ const runCommonFormfieldsTests = () => {
'https://www.oecd.org/tax/automatic-exchange/crs-implementation-and-assistance/tax-identification-numbers/'
);

expect(screen.getByRole('heading', { name: /account opening reason/i })).toBeInTheDocument();
if (is_svg)
expect(
screen.getByRole('heading', {
name: /additional information/i,
})
).toBeInTheDocument();
expect(screen.queryByTestId('dti_dropdown_display')).toBeInTheDocument();
expect(screen.queryByTestId('account_opening_reason_mobile')).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
Expand All @@ -108,6 +109,7 @@ const runCommonFormfieldsTests = () => {
describe('<PersonalDetails/>', () => {
const props = {
is_svg: true,
is_high_risk: false,
account_opening_reason_list: [
{
text: 'Hedging',
Expand Down Expand Up @@ -239,6 +241,24 @@ describe('<PersonalDetails/>', () => {
render(<BrowserRouter>{component}</BrowserRouter>);
};

it('should autopopulate tax_residence for MF clients', () => {
const new_props = {
...props,
is_svg: false,
is_mf: true,
value: {
...props.value,
tax_residence: 'Malta',
},
};
renderwithRouter(<PersonalDetails {...new_props} />);
expect(
screen.getByRole('textbox', {
name: /tax residence\*/i,
})
).toHaveValue('Malta');
});

it('should render PersonalDetails component', () => {
renderwithRouter(<PersonalDetails {...props} />);
expect(screen.getByTestId('personal_details_form')).toBeInTheDocument();
Expand Down Expand Up @@ -326,7 +346,7 @@ describe('<PersonalDetails/>', () => {
it('should display the correct field details when is_appstore is true ', () => {
renderwithRouter(
<PlatformContext.Provider value={{ is_appstore: true }}>
<PersonalDetails {...props} is_svg={false} />
<PersonalDetails {...props} />
</PlatformContext.Provider>
);

Expand All @@ -336,7 +356,7 @@ describe('<PersonalDetails/>', () => {
expect(screen.getByText(/phone number\*/i)).toBeInTheDocument();
expect(screen.getByLabelText(/phone number\*/i)).toBeInTheDocument();

runCommonFormfieldsTests();
runCommonFormfieldsTests(props.is_svg);
});

it('should display the correct field details when is_appstore is false and is_svg is true ', () => {
Expand All @@ -354,7 +374,7 @@ describe('<PersonalDetails/>', () => {
expect(screen.getByText(/phone number\*/i)).toBeInTheDocument();
expect(screen.getByLabelText(/phone number\*/i)).toBeInTheDocument();

runCommonFormfieldsTests();
runCommonFormfieldsTests(props.is_svg);
});

it('should display the correct field details when is_appstore is false and is_svg is false ', () => {
Expand All @@ -370,10 +390,8 @@ describe('<PersonalDetails/>', () => {
expect(screen.getByText('First name')).toBeInTheDocument();
expect(screen.getByText('Last name')).toBeInTheDocument();
expect(screen.getByText('Date of birth')).toBeInTheDocument();
expect(screen.getByText('Phone number')).toBeInTheDocument();
expect(screen.getByLabelText('Phone number')).toBeInTheDocument();

runCommonFormfieldsTests();
runCommonFormfieldsTests(false);
});

it('should not enable fields which are disabled and empty', () => {
Expand Down Expand Up @@ -522,27 +540,25 @@ describe('<PersonalDetails/>', () => {
).toBeInTheDocument();
});

it('should show warning', async () => {
it('should show error for invalid TIN', async () => {
const newvalidate = {
warnings: {
tax_identification_number:
'This Tax Identification Number (TIN) is invalid. You may continue using it, but to facilitate future payment processes, valid tax information will be required.',
errors: {
...mock_errors,
tax_identification_number: 'Tax Identification Number is not properly formatted.',
},
errors: { ...mock_errors },
};
splitValidationResultTypes.mockReturnValue(newvalidate);
renderwithRouter(
<PlatformContext.Provider value={{ is_appstore: false }}>
(<PersonalDetails {...props} />
);
<PersonalDetails {...props} />
</PlatformContext.Provider>
);
const tax_identification_number = screen.getByTestId('tax_identification_number');

expect(
await screen.findByText(
/this tax identification number \(tin\) is invalid\. you may continue using it, but to facilitate future payment processes, valid tax information will be required\./i
)
).toBeInTheDocument();
fireEvent.blur(tax_identification_number);
fireEvent.change(tax_identification_number, { target: { value: '123456789012345678901234567890' } });

expect(await screen.findByText(/tax identification number is not properly formatted/i)).toBeInTheDocument();
});

it('should submit the form if there is no validation error on desktop', async () => {
Expand Down Expand Up @@ -586,6 +602,7 @@ describe('<PersonalDetails/>', () => {
splitValidationResultTypes.mockReturnValue({ warnings: {}, errors: {} });
const new_props = {
...props,
is_svg: false,
value: {
account_opening_reason: '',
citizen: '',
Expand Down Expand Up @@ -666,7 +683,7 @@ describe('<PersonalDetails/>', () => {
});

it('should close tax_residence pop-over when clicked outside', () => {
renderwithRouter(<PersonalDetails {...props} />);
renderwithRouter(<PersonalDetails {...props} is_svg={false} />);

const tax_residence_pop_over = screen.getByTestId('tax_residence_pop_over');
expect(tax_residence_pop_over).toBeInTheDocument();
Expand All @@ -680,7 +697,7 @@ describe('<PersonalDetails/>', () => {
});

it('should close tax_identification_number_pop_over when clicked outside', () => {
renderwithRouter(<PersonalDetails {...props} />);
renderwithRouter(<PersonalDetails {...props} is_svg={false} />);

const tin_pop_over = screen.getByTestId('tax_identification_number_pop_over');
expect(tin_pop_over).toBeInTheDocument();
Expand Down Expand Up @@ -728,20 +745,6 @@ describe('<PersonalDetails/>', () => {
expect(screen.queryByRole('link', { name: 'here' })).not.toBeInTheDocument();
});

it('should autopopulate tax_residence for MF clients', () => {
const new_props = {
...props,
is_mf: true,
value: {
...props.value,
tax_residence: 'Malta',
},
};
renderwithRouter(<PersonalDetails {...new_props} />);
const el_tax_residence = screen.getByTestId('selected_value');
expect(el_tax_residence).toHaveTextContent('Malta');
});

it('should disable tax_residence field if it is immutable from BE', () => {
isMobile.mockReturnValue(false);
isDesktop.mockReturnValue(true);
Expand Down
65 changes: 24 additions & 41 deletions packages/account/src/Components/personal-details/personal-details.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ const PersonalDetails = ({
const { account_status, account_settings, residence, real_account_signup_target } = props;
const { is_appstore } = React.useContext(PlatformContext);
const [should_close_tooltip, setShouldCloseTooltip] = React.useState(false);
const [warning_items, setWarningItems] = React.useState({});
const is_submit_disabled_ref = React.useRef(true);

const isSubmitDisabled = errors => {
Expand Down Expand Up @@ -107,9 +106,8 @@ const PersonalDetails = ({
if (is_qualified_for_idv) {
idv_error = validateIDV(values);
}
const { errors, warnings } = splitValidationResultTypes(validate(values));
const { errors } = splitValidationResultTypes(validate(values));
const error_data = { ...idv_error, ...errors };
setWarningItems(warnings);
checkSubmitStatus(error_data);
return error_data;
};
Expand Down Expand Up @@ -137,7 +135,7 @@ const PersonalDetails = ({
onSubmit(getCurrentStep() - 1, values, actions.setSubmitting, goToNextStep);
}}
>
{({ handleSubmit, errors, setFieldValue, setFieldTouched, touched, values, handleChange, handleBlur }) => (
{({ handleSubmit, errors, setFieldValue, touched, values, handleChange, handleBlur }) => (
<AutoHeightWrapper default_height={380} height_offset={isDesktop() ? 81 : null}>
{({ setRef, height }) => (
<Form
Expand Down Expand Up @@ -193,43 +191,28 @@ const PersonalDetails = ({
<FormSubHeader title={localize('Details')} />
</React.Fragment>
)}
<React.Fragment>
<div
className={classNames({
'account-form__poi-confirm-example_container':
is_qualified_for_idv &&
!shouldHideHelperImage(values?.document_type?.id),
})}
>
<PersonalDetailsForm
errors={errors}
touched={touched}
values={values}
handleChange={handleChange}
handleBlur={handleBlur}
setFieldValue={setFieldValue}
setFieldTouched={setFieldTouched}
is_virtual={is_virtual}
is_svg={is_svg}
is_mf={is_mf}
is_qualified_for_idv={is_qualified_for_idv}
is_appstore={is_appstore}
editable_fields={editable_fields}
residence_list={residence_list}
has_real_account={has_real_account}
is_fully_authenticated={is_fully_authenticated}
closeRealAccountSignup={closeRealAccountSignup}
salutation_list={salutation_list}
warning_items={warning_items}
account_opening_reason_list={account_opening_reason_list}
should_close_tooltip={should_close_tooltip}
setShouldCloseTooltip={setShouldCloseTooltip}
should_hide_helper_image={shouldHideHelperImage(
values?.document_type?.id
)}
/>
</div>
</React.Fragment>
<PersonalDetailsForm
class_name={classNames({
'account-form__poi-confirm-example_container':
is_qualified_for_idv &&
!shouldHideHelperImage(values?.document_type?.id),
})}
is_virtual={is_virtual}
is_svg={is_svg}
is_mf={is_mf}
is_qualified_for_idv={is_qualified_for_idv}
is_appstore={is_appstore}
editable_fields={editable_fields}
residence_list={residence_list}
has_real_account={has_real_account}
is_fully_authenticated={is_fully_authenticated}
closeRealAccountSignup={closeRealAccountSignup}
salutation_list={salutation_list}
account_opening_reason_list={account_opening_reason_list}
should_close_tooltip={should_close_tooltip}
setShouldCloseTooltip={setShouldCloseTooltip}
should_hide_helper_image={shouldHideHelperImage(values?.document_type?.id)}
/>
</div>
</ThemedScrollbars>
</Div100vhContainer>
Expand Down
25 changes: 7 additions & 18 deletions packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,6 @@ const IdvDocumentSubmit = ({
isSubmitting,
isValid,
setFieldValue,
setFieldTouched,
touched,
values,
}) => (
Expand All @@ -189,27 +188,17 @@ const IdvDocumentSubmit = ({
/>

<FormSubHeader title={localize('Details')} />
<div
className={classNames({
<PersonalDetailsForm
class_name={classNames({
'account-form__poi-confirm-example_container': !shouldHideHelperImage(
values?.document_type?.id
),
})}
>
<PersonalDetailsForm
errors={errors}
touched={touched}
values={values}
handleChange={handleChange}
handleBlur={handleBlur}
setFieldValue={setFieldValue}
setFieldTouched={setFieldTouched}
is_qualified_for_idv={true}
is_appstore
should_hide_helper_image={shouldHideHelperImage(values?.document_type?.id)}
editable_fields={changeable_fields}
/>
</div>
is_qualified_for_idv
is_appstore
should_hide_helper_image={shouldHideHelperImage(values?.document_type?.id)}
editable_fields={changeable_fields}
/>
</section>
<FormFooter className='proof-of-identity__footer'>
{isDesktop() && (
Expand Down
20 changes: 1 addition & 19 deletions ...s/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,28 +134,10 @@ const PoiConfirmWithExampleFormContainer = ({

return (
<Formik initialValues={form_initial_values} enableReinitialize onSubmit={onSubmit} validate={validateFields}>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
setFieldValue,
setFieldTouched,
status,
}) => (
{({ errors, handleSubmit, isSubmitting, status }) => (
<Form className='account-form__poi-confirm-example' onSubmit={handleSubmit}>
<FormBody>
<PersonalDetailsForm
errors={errors}
touched={touched}
values={values}
handleChange={handleChange}
handleBlur={handleBlur}
setFieldValue={setFieldValue}
setFieldTouched={setFieldTouched}
editable_fields={rest_state.changeable_fields}
is_rendered_for_onfido
warning_items={undefined}
Expand Down
Loading

0 comments on commit 0564f03

Please sign in to comment.