Skip to content

Commit

Permalink
Amina /77701_make signup form fields immutable if they are immutable …
Browse files Browse the repository at this point in the history 
…from BE (binary-com#7544)

* adding validation

* changeablle fields from client store

* mutate address fields

* fix: test case

* fix: test case

* fix: spec_file

* fix: making employment status immutable

* fix: trading assessment

* fix: trading assessment

* fix: trading assessment

* fix: test case after merge conflict

* fix: hide idv section when client is age verified

* fix: remove idv_disallowed check

* chore: merge master

* fix: add new status

---------

Co-authored-by: hirad-deriv <hirad@re-work.dev>
  • Loading branch information
@amina-deriv @hirad-deriv
amina-deriv and hirad-deriv committed Mar 28, 2023
1 parent 447e91a commit bd82288
Show file tree
Hide file tree
Showing 13 changed files with 165 additions and 75 deletions.
16 changes: 16 additions & 0 deletions packages/account/src/Components/address-details/__tests__/address-details.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ describe('<AddressDetails/>', () => {
address_state: 'Default test state',
},
validate: jest.fn(),
disabled_items: [],
};

const svgCommonRenderCheck = () => {
Expand Down Expand Up @@ -262,4 +263,19 @@ describe('<AddressDetails/>', () => {
expect(address_state_input.value).toBe('State 1');
});
});

it('should disable the field if it is immuatble from BE', async () => {
mock_props.disabled_items = ['address_line_1', 'address_line_2'];
mock_props.value.address_state = '';

render(<AddressDetails {...mock_props} />);

expect(screen.getByPlaceholderText(address_line_1)).toBeDisabled();
expect(screen.getByPlaceholderText(address_line_2)).toBeDisabled();
await waitFor(() => {
expect(screen.getByRole('textbox', { name: 'State/Province' })).toBeEnabled();
});
expect(screen.getByPlaceholderText(address_town)).toBeEnabled();
expect(screen.getByPlaceholderText(address_postcode)).toBeEnabled();
});
});
32 changes: 25 additions & 7 deletions packages/account/src/Components/address-details/address-details.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const AddressDetails = ({
is_gb_residence,
onSubmitEnabledChange,
selected_step_ref,
disabled_items,
has_real_account,
...props
}) => {
Expand Down Expand Up @@ -159,7 +160,10 @@ const AddressDetails = ({
}
maxLength={255}
placeholder={localize('First line of address')}
disabled={props.value?.address_line_1 && has_real_account}
disabled={
disabled_items.includes('address_line_1') ||
(props.value?.address_line_1 && has_real_account)
}
/>
<InputField
name='address_line_2'
Expand All @@ -171,7 +175,10 @@ const AddressDetails = ({
}
maxLength={255}
placeholder={localize('Second line of address')}
disabled={props.value?.address_line_2 && has_real_account}
disabled={
disabled_items.includes('address_line_2') ||
(props.value?.address_line_2 && has_real_account)
}
/>
<InputField
name='address_city'
Expand All @@ -182,7 +189,10 @@ const AddressDetails = ({
: localize('Town/City')
}
placeholder={localize('Town/City')}
disabled={props.value?.address_city && has_real_account}
disabled={
disabled_items.includes('address_city') ||
(props.value?.address_city && has_real_account)
}
/>
{!has_fetched_states_list && (
<div className='details-form__loader'>
Expand Down Expand Up @@ -214,7 +224,8 @@ const AddressDetails = ({
}}
list_portal_id={is_appstore ? '' : 'modal_root'}
disabled={
props.value?.address_state && has_real_account
disabled_items.includes('address_state') ||
(props.value?.address_state && has_real_account)
}
/>
</DesktopWrapper>
Expand All @@ -234,7 +245,8 @@ const AddressDetails = ({
setAddressStateToDisplay('');
}}
disabled={
props.value?.address_state && has_real_account
disabled_items.includes('address_state') ||
(props.value?.address_state && has_real_account)
}
/>
</MobileWrapper>
Expand All @@ -247,7 +259,10 @@ const AddressDetails = ({
name='address_state'
label={localize('State/Province')}
placeholder={localize('State/Province')}
disabled={props.value?.address_state && has_real_account}
disabled={
disabled_items.includes('address_state') ||
(props.value?.address_state && has_real_account)
}
/>
)}
<InputField
Expand All @@ -261,7 +276,10 @@ const AddressDetails = ({
setFieldTouched('address_postcode', true);
handleChange(e);
}}
disabled={props.value?.address_postcode && has_real_account}
disabled={
disabled_items.includes('address_postcode') ||
(props.value?.address_postcode && has_real_account)
}
/>
</div>
</ThemedScrollbars>
Expand Down
4 changes: 1 addition & 3 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 @@ -384,8 +384,6 @@ describe('<PersonalDetails/>', () => {
'first_name',
'last_name',
'date_of_birth',
'place_of_birth',
'citizen',
'account_opening_reason',
]}
/>
Expand All @@ -397,7 +395,7 @@ describe('<PersonalDetails/>', () => {
expect(screen.getByTestId('last_name')).toBeDisabled();
expect(screen.getByTestId('date_of_birth')).toBeDisabled();
expect(screen.getByTestId('place_of_birth')).not.toBeDisabled();
expect(screen.getByTestId('citizenship')).toBeEnabled(); // citizenship value is empty, so enable the field
expect(screen.getByTestId('citizenship')).toBeEnabled(); // citizenship value is not disabled by BE, so enable the field
});

it('should disable citizen field if the client is_fully_authenticated', () => {
Expand Down
27 changes: 17 additions & 10 deletions packages/account/src/Components/personal-details/personal-details.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,8 +316,7 @@ const PersonalDetails = ({
<Autocomplete
{...field}
disabled={
(!!props.value.place_of_birth &&
disabled_items.includes('place_of_birth')) ||
disabled_items.includes('place_of_birth') ||
(props.value?.place_of_birth && has_real_account)
}
data-lpignore='true'
Expand Down Expand Up @@ -346,8 +345,7 @@ const PersonalDetails = ({
placeholder={localize('Place of birth')}
name={field.name}
disabled={
(!!props.value.place_of_birth &&
disabled_items.includes('place_of_birth')) ||
disabled_items.includes('place_of_birth') ||
(props.value?.place_of_birth && has_real_account)
}
label={
Expand Down Expand Up @@ -395,9 +393,8 @@ const PersonalDetails = ({
}
error={touched.citizen && errors.citizen}
disabled={
(props.value.citizen && is_fully_authenticated) ||
(!!props.value.citizen &&
disabled_items.includes('citizen')) ||
(props.value?.citizen && is_fully_authenticated) ||
disabled_items.includes('citizen') ||
(props.value?.citizen && has_real_account)
}
list_items={residence_list}
Expand All @@ -414,9 +411,8 @@ const PersonalDetails = ({
placeholder={localize('Citizenship')}
name={field.name}
disabled={
(props.value.citizen && is_fully_authenticated) ||
(!!props.value.citizen &&
disabled_items.includes('citizen')) ||
(props.value?.citizen && is_fully_authenticated) ||
disabled_items.includes('citizen') ||
(props.value?.citizen && has_real_account)
}
label={
Expand Down Expand Up @@ -500,6 +496,9 @@ const PersonalDetails = ({
}
list_portal_id='modal_root'
data-testid='tax_residence'
disabled={disabled_items.includes(
'tax_residence'
)}
/>
</DesktopWrapper>
<MobileWrapper>
Expand Down Expand Up @@ -529,6 +528,9 @@ const PersonalDetails = ({
{...field}
required
data_testid='tax_residence_mobile'
disabled={disabled_items.includes(
'tax_residence'
)}
/>
</MobileWrapper>
<div
Expand Down Expand Up @@ -630,6 +632,7 @@ const PersonalDetails = ({
touched.employment_status &&
errors.employment_status
}
disabled={disabled_items.includes('employment_status')}
/>
</DesktopWrapper>
<MobileWrapper>
Expand All @@ -651,6 +654,7 @@ const PersonalDetails = ({
setFieldTouched('employment_status', true);
handleChange(e);
}}
disabled={disabled_items.includes('employment_status')}
/>
</MobileWrapper>
</fieldset>
Expand Down Expand Up @@ -742,6 +746,9 @@ const PersonalDetails = ({
{...field}
required
data_testid='account_opening_reason_mobile'
disabled={disabled_items.includes(
'account_opening_reason'
)}
/>
</MobileWrapper>
</React.Fragment>
Expand Down
11 changes: 10 additions & 1 deletion packages/account/src/Components/trading-assessment/trading-assessment-dropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,14 @@ import { DesktopWrapper, Dropdown, MobileWrapper, Text, SelectNative } from '@de
import { localize, getLanguage } from '@deriv/translations';
import classNames from 'classnames';

const TradingAssessmentDropdown = ({ item_list, onChange, values, setFieldValue, setEnableNextSection }) => {
const TradingAssessmentDropdown = ({
disabled_items,
item_list,
onChange,
values,
setFieldValue,
setEnableNextSection,
}) => {
React.useEffect(() => {
checkIfAllFieldsFilled();
}, [values]);
Expand Down Expand Up @@ -44,6 +51,7 @@ const TradingAssessmentDropdown = ({ item_list, onChange, values, setFieldValue,
list={question?.answer_options}
onChange={e => onChange(e, question.form_control, setFieldValue)}
value={values[question.form_control]}
disabled={disabled_items.includes(question.form_control)}
/>
</DesktopWrapper>
<MobileWrapper>
Expand All @@ -60,6 +68,7 @@ const TradingAssessmentDropdown = ({ item_list, onChange, values, setFieldValue,
}}
value={values[question.form_control]}
hide_top_placeholder
disabled={disabled_items.includes(question.form_control)}
/>
</MobileWrapper>
</React.Fragment>
Expand Down
3 changes: 3 additions & 0 deletions packages/account/src/Components/trading-assessment/trading-assessment-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import TradingAssessmentDropdown from './trading-assessment-dropdown.jsx';
const TradingAssessmentForm = ({
assessment_questions,
class_name,
disabled_items,
form_value,
onSubmit,
onCancel,
Expand Down Expand Up @@ -143,6 +144,7 @@ const TradingAssessmentForm = ({
values={values}
setFieldValue={setFieldValue}
setEnableNextSection={setIsSectionFilled}
disabled_items={disabled_items ?? []}
/>
) : (
<TradingAssessmentRadioButton
Expand All @@ -152,6 +154,7 @@ const TradingAssessmentForm = ({
values={values}
form_control={form_control}
setEnableNextSection={setIsSectionFilled}
disabled_items={disabled_items ?? []}
/>
)}
</div>
Expand Down
2 changes: 2 additions & 0 deletions packages/account/src/Components/trading-assessment/trading-assessment-new-user.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import TradingAssessmentForm from './trading-assessment-form';

const TradingAssessmentNewUser = ({
assessment_questions,
disabled_items,
goToNextStep,
goToPreviousStep,
onSave,
Expand Down Expand Up @@ -39,6 +40,7 @@ const TradingAssessmentNewUser = ({
onSubmit={handleSubmit}
onCancel={handleCancel}
setSubSectionIndex={setSubSectionIndex}
disabled_items={disabled_items}
/>
);
};
Expand Down
11 changes: 10 additions & 1 deletion packages/account/src/Components/trading-assessment/trading-assessment-radio-buttons.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@ import React from 'react';
import { Field } from 'formik';
import { Text, RadioGroup } from '@deriv/components';

const TradingAssessmentRadioButton = ({ text, list, onChange, values, form_control, setEnableNextSection }) => {
const TradingAssessmentRadioButton = ({
disabled_items,
text,
list,
onChange,
values,
form_control,
setEnableNextSection,
}) => {
React.useEffect(() => {
setEnableNextSection(!!values[form_control]);
}, [form_control]);
Expand Down Expand Up @@ -31,6 +39,7 @@ const TradingAssessmentRadioButton = ({ text, list, onChange, values, form_contr
key={answer.value}
label={answer?.text}
value={answer?.value}
disabled={disabled_items.includes(form_control)}
/>
))}
</RadioGroup>
Expand Down
Loading

0 comments on commit bd82288

Please sign in to comment.