Skip to content

Commit

Permalink
chore: implement new changes to the singup modal (#7955)
Browse files Browse the repository at this point in the history 
* chore: implement new changes to the singup modal

* fix: updated changes based on comments and updated stylings aswell

* fix: made changes based on comments

* fix: remove react.fragment

* fix: updated changes based on the comments and suggestions

* fix: remove gap between fields based on comments

* fix: made code improvements based on suggestions

* fix: make changes based on recommendations

* fix: make changes based on comments

* chore: updated captions for the fields and shorten code

* fix: update the caption for residence

* fix: updated copywrite and fix password modal

* fix: updated description for citizenship

---------

Co-authored-by: Yashim Wong <yashim@deriv.com>
  • Loading branch information
@aizad-deriv @yashim-deriv
aizad-deriv and yashim-deriv committed Mar 30, 2023
1 parent 514ee6f commit cbfed07
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 247 deletions.
153 changes: 55 additions & 98 deletions packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@ import classNames from 'classnames';
import { Formik, Form } from 'formik';
import PropTypes from 'prop-types';
import React from 'react';
import { Button, Dialog, Loading } from '@deriv/components';
import { Button, Dialog, Loading, Text } from '@deriv/components';
import { getLocation, PlatformContext } from '@deriv/shared';
import { localize } from '@deriv/translations';
import { WS } from 'Services';
import { connect } from 'Stores/connect';
import SameCitizenshipModal from '../CitizenshipModal/same-citizenship-modal.jsx';
import PasswordSelectionModal from '../PasswordSelectionModal/password-selection-modal.jsx';
import ResidenceForm from '../SetResidenceModal/set-residence-form.jsx';
import CitizenshipForm from '../CitizenshipModal/set-citizenship-form.jsx';
Expand All @@ -22,26 +21,14 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
const [country, setCountry] = React.useState('');
const history_value = React.useRef();
const [pw_input, setPWInput] = React.useState('');
const [selected_residence, setSelectedResidence] = React.useState('');
const [selected_citizenship, setSelectedCitizenship] = React.useState('');
const [is_citizenship_modal, setIsCitizenshipModal] = React.useState(false);
const [is_same_citizenship_modal, setIsSameCitizenshipModal] = React.useState(false);
const [is_pasword_modal, setIsPasswordModal] = React.useState(false);
const [is_password_modal, setIsPasswordModal] = React.useState(false);
const disableBtn = (values, errors) =>
!values.residence || !!errors.residence || !values.citizenship || !!errors.citizenship;

const updatePassword = new_password => {
setPWInput(new_password);
};

const onResidenceSelection = residence => {
setSelectedResidence(residence);
setIsSameCitizenshipModal(true);
};

const onCitizenshipSelection = citizenship => {
setSelectedCitizenship(citizenship);
setIsPasswordModal(true);
};

// didMount lifecycle hook
React.useEffect(() => {
WS.wait('website_status', 'residence_list').then(() => {
Expand Down Expand Up @@ -78,7 +65,6 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
enableApp();
}
};

return (
<div className='account-signup'>
{is_loading ? (
Expand All @@ -101,89 +87,60 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
touched,
}) => (
<Form>
{!selected_residence || !is_same_citizenship_modal ? (
<ResidenceForm
header_text={localize('Thanks for verifying your email')}
class_prefix='account-signup'
{!is_password_modal ? (
<div className='account-signup__main'>
<Text as='h1' weight='bold' className='account-signup__heading'>
{localize('Select your country and citizenship:')}
</Text>
<ResidenceForm
class_prefix='account-signup'
errors={errors}
touched={touched}
setFieldTouched={setFieldTouched}
setFieldValue={setFieldValue}
residence_list={residence_list}
default_value={country}
history_value={history_value.current}
/>
<CitizenshipForm
class_prefix='account-signup'
errors={errors}
touched={touched}
setFieldTouched={setFieldTouched}
setFieldValue={setFieldValue}
citizenship_list={residence_list}
/>
<div className='account-signup__footer'>
<Button
className={classNames('account-signup__btn', {
'account-signup__btn--disabled': disableBtn(values, errors),
})}
type='button'
onClick={() => {
history_value.current = values;
setIsPasswordModal(true);
}}
primary
large
text={localize('Next')}
/>
</div>
</div>
) : (
<PasswordSelectionModal
api_error={api_error}
errors={errors}
handleBlur={handleBlur}
handleChange={handleChange}
is_appstore={is_appstore}
isModalVisible={isModalVisible}
isSubmitting={isSubmitting}
touched={touched}
pw_input={pw_input}
setFieldTouched={setFieldTouched}
setFieldValue={setFieldValue}
residence_list={residence_list}
default_value={country}
history_value={history_value.current}
>
<Button
className={classNames('account-signup__btn', {
'account-signup__btn--disabled': !values.residence || errors.residence,
})}
type='button'
is_disabled={!values.residence || !!errors.residence}
onClick={() => {
onResidenceSelection(values.residence);
history_value.current = values.residence;
}}
primary
large
text={localize('Next')}
/>
</ResidenceForm>
) : (
<>
{!is_pasword_modal && !is_citizenship_modal ? (
<SameCitizenshipModal
onCitizenshipSelection={onCitizenshipSelection}
residence={values.residence}
setFieldValue={setFieldValue}
setIsCitizenshipModal={setIsCitizenshipModal}
setIsPasswordModal={setIsPasswordModal}
setIsSameCitizenshipModal={setIsSameCitizenshipModal}
/>
) : (
<>
{selected_citizenship && is_pasword_modal ? (
<PasswordSelectionModal
api_error={api_error}
errors={errors}
handleBlur={handleBlur}
handleChange={handleChange}
is_appstore={is_appstore}
isModalVisible={isModalVisible}
isSubmitting={isSubmitting}
touched={touched}
pw_input={pw_input}
setFieldTouched={setFieldTouched}
updatePassword={updatePassword}
values={values}
/>
) : (
<CitizenshipForm
class_prefix='account-signup'
errors={errors}
touched={touched}
setFieldTouched={setFieldTouched}
setFieldValue={setFieldValue}
citizenship_list={residence_list}
>
<Button
className={classNames('account-signup__btn', {
'account-signup__btn--disabled':
!values.citizenship || errors.citizenship,
})}
type='button'
is_disabled={!values.citizenship || !!errors.citizenship}
onClick={() => {
onCitizenshipSelection(values.citizenship);
}}
primary
large
text={localize('Next')}
/>
</CitizenshipForm>
)}
</>
)}
</>
updatePassword={updatePassword}
values={values}
/>
)}
</Form>
)}
Expand Down
56 changes: 0 additions & 56 deletions packages/core/src/App/Containers/CitizenshipModal/same-citizenship-modal.jsx
View file

This file was deleted.

20 changes: 5 additions & 15 deletions packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,10 @@ import { Field } from 'formik';
import PropTypes from 'prop-types';
import React from 'react';
import { Autocomplete, DesktopWrapper, MobileWrapper, SelectNative, Text } from '@deriv/components';
import { localize } from '@deriv/translations';
import { Localize, localize } from '@deriv/translations';

const SetCitizenshipForm = ({
class_prefix,
children,
errors,
touched,
setFieldTouched,
setFieldValue,
citizenship_list,
}) => (
const SetCitizenshipForm = ({ class_prefix, errors, touched, setFieldTouched, setFieldValue, citizenship_list }) => (
<div className={`${class_prefix}__residence-selection`}>
<Text as='p' align='center' weight='bold' className={`${class_prefix}__heading-citizen`}>
{localize('Choose your citizenship')}
</Text>
<Field name='citizenship'>
{({ field }) => (
<React.Fragment>
Expand Down Expand Up @@ -53,12 +42,13 @@ const SetCitizenshipForm = ({
</React.Fragment>
)}
</Field>
{children}
<Text as='p' size='xxs' className='account-signup__subtext' color='less-prominent'>
<Localize i18n_default_text='Select your citizenship/nationality as it appears on your passport or other government-issued ID.' />
</Text>
</div>
);

SetCitizenshipForm.propTypes = {
children: PropTypes.node,
class_prefix: PropTypes.string,
citizenship_list: PropTypes.arrayOf(PropTypes.object),
errors: PropTypes.object,
Expand Down
24 changes: 13 additions & 11 deletions packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,17 +88,19 @@ const PasswordSelectionModal = ({
</div>
</React.Fragment>
) : (
<Button
className={classNames('account-signup__btn', {
'account-signup__btn--disabled': !values.password || errors.password || isSubmitting,
})}
id='dt_core_account-signup-modal_submit-btn'
type='submit'
is_disabled={!values.password || !!errors.password || isSubmitting}
text={localize('Start trading')}
large
primary
/>
<div className='account-signup__footer'>
<Button
className={classNames('account-signup__btn', {
'account-signup__btn--disabled': !values.password || errors.password || isSubmitting,
})}
id='dt_core_account-signup-modal_submit-btn'
type='submit'
is_disabled={!values.password || !!errors.password || isSubmitting}
text={localize('Start trading')}
large
primary
/>
</div>
)}
</div>
);
Expand Down
19 changes: 6 additions & 13 deletions packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@ import { localize } from '@deriv/translations';

const SetResidenceForm = ({
class_prefix = 'set-residence',
children,
default_value,
history_value,
header_text,
errors,
touched,
setFieldTouched,
Expand All @@ -22,16 +20,9 @@ const SetResidenceForm = ({
setFieldValue('residence', default_value, true);
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps

return (
<div className={`${class_prefix}__residence-selection`}>
{!!header_text && (
<Text as='p' align='center' weight='bold' className={`${class_prefix}__heading`}>
{header_text}
</Text>
)}
<Text as='p' className={`${class_prefix}__${header_text ? 'text' : 'heading'}`}>
{localize('Where do you live?')}
</Text>
<Field name='residence'>
{({ field }) => (
<React.Fragment>
Expand Down Expand Up @@ -70,18 +61,20 @@ const SetResidenceForm = ({
</React.Fragment>
)}
</Field>
{children}
{!errors?.residence?.length > 0 ? (
<Text as='p' size='xxs' className='account-signup__subtext' color='less-prominent'>
{localize('Country of residence is where you currently live.')}
</Text>
) : null}
</div>
);
};

SetResidenceForm.propTypes = {
children: PropTypes.node,
class_prefix: PropTypes.string,
default_value: PropTypes.string,
history_value: PropTypes.string,
errors: PropTypes.object,
header_text: PropTypes.string,
residence_list: PropTypes.arrayOf(PropTypes.object),
setFieldTouched: PropTypes.func,
setFieldValue: PropTypes.func,
Expand Down
Loading

1 comment on commit cbfed07

@vercel
Copy link

@vercel vercel bot commented on cbfed07 Mar 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

deriv-app – ./

deriv-app.vercel.app
deriv-app.binary.sx
binary.sx
deriv-app-git-master.binary.sx

Please sign in to comment.