From 06c74659db5cf86fbdc3a7c81e18e0a09d7f9789 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Sun, 19 Mar 2023 18:02:30 +0800
Subject: [PATCH 01/13] chore: implement new changes to the singup modal

---
 .../account-signup-modal.jsx                  | 160 ++++++++----------
 .../CitizenshipModal/set-citizenship-form.jsx |  19 +--
 .../SetResidenceModal/set-residence-form.jsx  |  19 +--
 .../src/sass/app/modules/account-signup.scss  |  88 ++++------
 4 files changed, 114 insertions(+), 172 deletions(-)

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
index a5b0531acad7..af36d2a620b4 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -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';
@@ -24,21 +23,15 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
     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 updatePassword = new_password => {
         setPWInput(new_password);
     };
 
-    const onResidenceSelection = residence => {
-        setSelectedResidence(residence);
-        setIsSameCitizenshipModal(true);
-    };
-
-    const onCitizenshipSelection = citizenship => {
+    const onFormSingup = (residence, citizenship) => {
         setSelectedCitizenship(citizenship);
+        setSelectedResidence(residence);
         setIsPasswordModal(true);
     };
 
@@ -101,89 +94,78 @@ 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'
-                                    errors={errors}
-                                    touched={touched}
-                                    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>
-                            ) : (
+                            {(!selected_residence && !selected_citizenship) || !is_pasword_modal ? (
                                 <>
-                                    {!is_pasword_modal && !is_citizenship_modal ? (
-                                        <SameCitizenshipModal
-                                            onCitizenshipSelection={onCitizenshipSelection}
-                                            residence={values.residence}
+                                    <div className='account-signup__main'>
+                                        <Text
+                                            as='h1'
+                                            size='s'
+                                            align='left'
+                                            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}
-                                            setIsCitizenshipModal={setIsCitizenshipModal}
-                                            setIsPasswordModal={setIsPasswordModal}
-                                            setIsSameCitizenshipModal={setIsSameCitizenshipModal}
+                                            citizenship_list={residence_list}
                                         />
-                                    ) : (
-                                        <>
-                                            {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>
-                                            )}
-                                        </>
-                                    )}
+                                        <div className='acount-signup__footer'>
+                                            <Button
+                                                className={classNames('account-signup__btn', {
+                                                    'account-signup__btn--disabled':
+                                                        !values.residence ||
+                                                        !!errors.residence ||
+                                                        !values.citizenship ||
+                                                        !!errors.citizenship,
+                                                })}
+                                                type='button'
+                                                is_disabled={
+                                                    !values.residence ||
+                                                    !!errors.residence ||
+                                                    !values.citizenship ||
+                                                    !!errors.citizenship
+                                                }
+                                                onClick={() => {
+                                                    onFormSingup(values.residence, values.citizenship);
+                                                    history_value.current = values.residence;
+                                                }}
+                                                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}
+                                    updatePassword={updatePassword}
+                                    values={values}
+                                />
                             )}
                         </Form>
                     )}
diff --git a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
index 7e430a6c008f..d1a144d5eaa6 100644
--- a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
+++ b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
@@ -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>
@@ -53,7 +42,9 @@ const SetCitizenshipForm = ({
                 </React.Fragment>
             )}
         </Field>
-        {children}
+        <Text as='p' size='xxs' className='account-signup__subtext' align='left' color='less-prominent'>
+            <Localize i18n_default_text='Country of citizenship or nationality is the country that issues your passport or other national identity document.' />
+        </Text>
     </div>
 );
 
diff --git a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
index 9147fc404922..f59ee60b0d14 100644
--- a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
+++ b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
@@ -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,
@@ -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>
@@ -70,7 +61,13 @@ const SetResidenceForm = ({
                     </React.Fragment>
                 )}
             </Field>
-            {children}
+            {!errors?.residence || errors?.residence === true ? (
+                <Text as='p' size='xxs' className='account-signup__subtext' align='left' color='less-prominent'>
+                    {localize(
+                        'Country of residence is where you currently live, work, pay taxes and receive government services.'
+                    )}
+                </Text>
+            ) : null}
         </div>
     );
 };
diff --git a/packages/core/src/sass/app/modules/account-signup.scss b/packages/core/src/sass/app/modules/account-signup.scss
index fb1f3c354934..421e76b891af 100644
--- a/packages/core/src/sass/app/modules/account-signup.scss
+++ b/packages/core/src/sass/app/modules/account-signup.scss
@@ -35,7 +35,35 @@
             margin-left: unset;
         }
     }
-    &__residence-selection,
+    &__main {
+        @include mobile {
+            padding: 9rem 1.6rem;
+        }
+        .dc-select-native {
+            margin-bottom: 0.2rem;
+        }
+        .account-signup__residence-selection {
+            height: 8.6rem;
+            margin-bottom: 2.4rem;
+            .account-signup__subtext {
+                margin-left: 1.6rem;
+                margin-top: 1rem;
+            }
+            .dc-field--error {
+                margin-left: 1.6rem;
+                margin-top: 1rem;
+                padding-left: unset;
+            }
+        }
+        .account-signup__heading {
+            margin-bottom: 2.4rem;
+        }
+
+        .acount-signup__footer {
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
     &__password-selection {
         display: flex;
         justify-content: center;
@@ -53,60 +81,11 @@
             background-color: var(--general-main-2);
         }
     }
-    &__same-citizenship {
-        display: flex;
-        justify-content: space-between;
-        &-buttons {
-            display: flex;
-            gap: 1rem;
-        }
-    }
     .dc-password-input {
         &__visibility-icon {
             background-color: var(--general-main-2);
         }
     }
-    &__residence-selection {
-        .dc-select-native {
-            margin-bottom: 2.5rem;
-        }
-        @include mobile {
-            height: 100%;
-            & .dc-select-native {
-                margin-bottom: 4.8rem;
-            }
-        }
-    }
-    &__password-selection {
-        .account-signup__heading {
-            padding-top: 1.5rem;
-            margin-bottom: 4.3rem;
-
-            @include mobile {
-                padding-top: 0;
-                text-align: center;
-                margin-top: -3rem;
-            }
-        }
-        & .dc-password-meter__container {
-            max-height: 4rem;
-            margin-bottom: 3.3rem;
-            @include desktop {
-                width: calc(100% - 3.2rem);
-            }
-            @include mobile {
-                width: 100%;
-            }
-        }
-        & .dc-field--error {
-            top: 4.4rem;
-        }
-        .initial-loader__barspinner {
-            @include mobile {
-                margin: 0;
-            }
-        }
-    }
     &__heading {
         margin-bottom: 2.4rem;
         &-citizen {
@@ -150,7 +129,7 @@
         }
         @include mobile {
             height: 4rem;
-            bottom: 2rem;
+            bottom: 3rem;
             left: 0;
             right: 0;
             position: absolute;
@@ -158,13 +137,6 @@
             margin: 0 auto;
         }
     }
-    &__residence-field {
-        margin-bottom: 4.4rem;
-
-        @include desktop {
-            min-width: 30rem;
-        }
-    }
     &__password-field {
         width: 100%;
     }

From 3bbc06bdd20c409e2fece5b426f4d2b95ca1d88f Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Mon, 20 Mar 2023 11:14:33 +0800
Subject: [PATCH 02/13] fix: updated changes based on comments and updated
 stylings aswell

---
 .../account-signup-modal.jsx                  | 48 ++++++++--------
 .../CitizenshipModal/set-citizenship-form.jsx |  3 +-
 .../password-selection-modal.jsx              | 24 ++++----
 .../SetResidenceModal/set-residence-form.jsx  |  3 +-
 .../src/sass/app/modules/account-signup.scss  | 55 +++++++++++++------
 5 files changed, 76 insertions(+), 57 deletions(-)

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
index af36d2a620b4..e5058590d213 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -97,34 +97,30 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                             {(!selected_residence && !selected_citizenship) || !is_pasword_modal ? (
                                 <>
                                     <div className='account-signup__main'>
-                                        <Text
-                                            as='h1'
-                                            size='s'
-                                            align='left'
-                                            weight='bold'
-                                            className='account-signup__heading'
-                                        >
+                                        <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='acount-signup__footer'>
+                                        <div className='account-signup__body'>
+                                            <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>
+                                        <div className='account-signup__footer'>
                                             <Button
                                                 className={classNames('account-signup__btn', {
                                                     'account-signup__btn--disabled':
diff --git a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
index d1a144d5eaa6..e9545be70473 100644
--- a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
+++ b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
@@ -42,14 +42,13 @@ const SetCitizenshipForm = ({ class_prefix, errors, touched, setFieldTouched, se
                 </React.Fragment>
             )}
         </Field>
-        <Text as='p' size='xxs' className='account-signup__subtext' align='left' color='less-prominent'>
+        <Text as='p' size='xxs' className='account-signup__subtext' color='less-prominent'>
             <Localize i18n_default_text='Country of citizenship or nationality is the country that issues your passport or other national identity document.' />
         </Text>
     </div>
 );
 
 SetCitizenshipForm.propTypes = {
-    children: PropTypes.node,
     class_prefix: PropTypes.string,
     citizenship_list: PropTypes.arrayOf(PropTypes.object),
     errors: PropTypes.object,
diff --git a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx
index 46bec0bc098a..e82f4af31fa6 100644
--- a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx
+++ b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx
@@ -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>
 );
diff --git a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
index f59ee60b0d14..bffd1cc09ef8 100644
--- a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
+++ b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
@@ -62,7 +62,7 @@ const SetResidenceForm = ({
                 )}
             </Field>
             {!errors?.residence || errors?.residence === true ? (
-                <Text as='p' size='xxs' className='account-signup__subtext' align='left' color='less-prominent'>
+                <Text as='p' size='xxs' className='account-signup__subtext' color='less-prominent'>
                     {localize(
                         'Country of residence is where you currently live, work, pay taxes and receive government services.'
                     )}
@@ -73,7 +73,6 @@ const SetResidenceForm = ({
 };
 
 SetResidenceForm.propTypes = {
-    children: PropTypes.node,
     class_prefix: PropTypes.string,
     default_value: PropTypes.string,
     history_value: PropTypes.string,
diff --git a/packages/core/src/sass/app/modules/account-signup.scss b/packages/core/src/sass/app/modules/account-signup.scss
index 421e76b891af..e8e2011c6ec7 100644
--- a/packages/core/src/sass/app/modules/account-signup.scss
+++ b/packages/core/src/sass/app/modules/account-signup.scss
@@ -42,9 +42,14 @@
         .dc-select-native {
             margin-bottom: 0.2rem;
         }
+        .account-signup__body {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
         .account-signup__residence-selection {
             height: 8.6rem;
-            margin-bottom: 2.4rem;
+            margin-bottom: 1rem;
             .account-signup__subtext {
                 margin-left: 1.6rem;
                 margin-top: 1rem;
@@ -59,26 +64,39 @@
             margin-bottom: 2.4rem;
         }
 
-        .acount-signup__footer {
+        .account-signup__footer {
             display: flex;
             justify-content: flex-end;
         }
     }
     &__password-selection {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-flow: nowrap column;
-        background-color: var(--general-main-2);
-        border-radius: 1rem;
-        position: relative;
-        left: 50%;
-        transform: translate(-50%);
+        .account-signup__heading {
+            padding-top: 1.5rem;
+            margin-bottom: 4.3rem;
 
-        @include mobile {
-            width: calc(90vw - 10px);
-            padding: 6rem 4rem;
-            background-color: var(--general-main-2);
+            @include mobile {
+                padding-top: 0;
+                text-align: center;
+                margin-top: -3rem;
+            }
+        }
+        & .dc-password-meter__container {
+            max-height: 4rem;
+            margin-bottom: 3.3rem;
+            @include desktop {
+                width: calc(100% - 3.2rem);
+            }
+            @include mobile {
+                width: 100%;
+            }
+        }
+        & .dc-field--error {
+            top: 4.4rem;
+        }
+        .initial-loader__barspinner {
+            @include mobile {
+                margin: 0;
+            }
         }
     }
     .dc-password-input {
@@ -113,6 +131,10 @@
             }
         }
     }
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+    }
     &__btn {
         align-self: flex-end;
         margin: 0;
@@ -142,7 +164,8 @@
     }
     @include mobile {
         &__password-selection {
-            height: 36.5rem !important;
+            height: 32.8rem !important;
+            padding: 6rem 1.6rem;
         }
         width: calc(90vw - 10px);
         border-radius: 1rem;

From 9bf7657839ca5f17da39f1d721dcdba243549f7a Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Mon, 20 Mar 2023 11:30:49 +0800
Subject: [PATCH 03/13] fix: made changes based on comments

---
 .../account-signup-modal.jsx                  |  4 +-
 .../same-citizenship-modal.jsx                | 56 -------------------
 .../SetResidenceModal/set-residence-form.jsx  |  2 +-
 3 files changed, 3 insertions(+), 59 deletions(-)
 delete mode 100644 packages/core/src/App/Containers/CitizenshipModal/same-citizenship-modal.jsx

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
index e5058590d213..52bc1e328d49 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -95,7 +95,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                     }) => (
                         <Form>
                             {(!selected_residence && !selected_citizenship) || !is_pasword_modal ? (
-                                <>
+                                <React.Fragment>
                                     <div className='account-signup__main'>
                                         <Text as='h1' weight='bold' className='account-signup__heading'>
                                             {localize('Select your country and citizenship:')}
@@ -146,7 +146,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                                             />
                                         </div>
                                     </div>
-                                </>
+                                </React.Fragment>
                             ) : (
                                 <PasswordSelectionModal
                                     api_error={api_error}
diff --git a/packages/core/src/App/Containers/CitizenshipModal/same-citizenship-modal.jsx b/packages/core/src/App/Containers/CitizenshipModal/same-citizenship-modal.jsx
deleted file mode 100644
index 1ede446970ef..000000000000
--- a/packages/core/src/App/Containers/CitizenshipModal/same-citizenship-modal.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { Button, Text } from '@deriv/components';
-import { localize } from '@deriv/translations';
-
-const SameCitizenshipModal = ({
-    onCitizenshipSelection,
-    residence,
-    setFieldValue,
-    setIsCitizenshipModal,
-    setIsPasswordModal,
-    setIsSameCitizenshipModal,
-}) => (
-    <div>
-        <Text as='h1' weight='bold' className='account-signup__text'>
-            {localize('Citizenship')}
-        </Text>
-        <Text as='p' className='account-signup__text'>
-            {localize('Are you a citizen of {{- residence}}?', { residence })}
-        </Text>
-        <div className='account-signup__same-citizenship'>
-            <Button
-                type='button'
-                onClick={() => {
-                    setIsSameCitizenshipModal(false);
-                }}
-                tertiary
-                large
-                text={localize('Back')}
-            />
-            <div className='account-signup__same-citizenship-buttons'>
-                <Button
-                    type='button'
-                    onClick={() => {
-                        setIsCitizenshipModal(true);
-                    }}
-                    secondary
-                    large
-                    text={localize('No')}
-                />
-                <Button
-                    type='button'
-                    onClick={() => {
-                        setFieldValue('citizenship', residence, true);
-                        onCitizenshipSelection(residence);
-                        setIsPasswordModal(true);
-                    }}
-                    secondary
-                    large
-                    text={localize('Yes')}
-                />
-            </div>
-        </div>
-    </div>
-);
-
-export default SameCitizenshipModal;
diff --git a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
index bffd1cc09ef8..05c5d64a95ce 100644
--- a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
+++ b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
@@ -19,7 +19,7 @@ const SetResidenceForm = ({
             setFieldTouched('residence', true);
             setFieldValue('residence', default_value, true);
         }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    }, []);
 
     return (
         <div className={`${class_prefix}__residence-selection`}>

From b88374a62ef11e373d32ee71d7a8906e29bed046 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Mon, 20 Mar 2023 11:54:26 +0800
Subject: [PATCH 04/13] fix: remove react.fragment

---
 .../account-signup-modal.jsx                  | 94 +++++++++----------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
index 52bc1e328d49..124e526492a8 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -95,58 +95,56 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                     }) => (
                         <Form>
                             {(!selected_residence && !selected_citizenship) || !is_pasword_modal ? (
-                                <React.Fragment>
-                                    <div className='account-signup__main'>
-                                        <Text as='h1' weight='bold' className='account-signup__heading'>
-                                            {localize('Select your country and citizenship:')}
-                                        </Text>
-                                        <div className='account-signup__body'>
-                                            <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>
-                                        <div className='account-signup__footer'>
-                                            <Button
-                                                className={classNames('account-signup__btn', {
-                                                    'account-signup__btn--disabled':
-                                                        !values.residence ||
-                                                        !!errors.residence ||
-                                                        !values.citizenship ||
-                                                        !!errors.citizenship,
-                                                })}
-                                                type='button'
-                                                is_disabled={
+                                <div className='account-signup__main'>
+                                    <Text as='h1' weight='bold' className='account-signup__heading'>
+                                        {localize('Select your country and citizenship:')}
+                                    </Text>
+                                    <div className='account-signup__body'>
+                                        <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>
+                                    <div className='account-signup__footer'>
+                                        <Button
+                                            className={classNames('account-signup__btn', {
+                                                'account-signup__btn--disabled':
                                                     !values.residence ||
                                                     !!errors.residence ||
                                                     !values.citizenship ||
-                                                    !!errors.citizenship
-                                                }
-                                                onClick={() => {
-                                                    onFormSingup(values.residence, values.citizenship);
-                                                    history_value.current = values.residence;
-                                                }}
-                                                primary
-                                                large
-                                                text={localize('Next')}
-                                            />
-                                        </div>
+                                                    !!errors.citizenship,
+                                            })}
+                                            type='button'
+                                            is_disabled={
+                                                !values.residence ||
+                                                !!errors.residence ||
+                                                !values.citizenship ||
+                                                !!errors.citizenship
+                                            }
+                                            onClick={() => {
+                                                onFormSingup(values.residence, values.citizenship);
+                                                history_value.current = values.residence;
+                                            }}
+                                            primary
+                                            large
+                                            text={localize('Next')}
+                                        />
                                     </div>
-                                </React.Fragment>
+                                </div>
                             ) : (
                                 <PasswordSelectionModal
                                     api_error={api_error}

From 328bad1942cf482ea62687c1794c919f3ffa8edd Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Mon, 20 Mar 2023 12:34:57 +0800
Subject: [PATCH 05/13] fix: updated changes based on the comments and
 suggestions

---
 .../App/Containers/SetResidenceModal/set-residence-form.jsx  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
index 05c5d64a95ce..c73bf73daa32 100644
--- a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
+++ b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
@@ -19,7 +19,7 @@ const SetResidenceForm = ({
             setFieldTouched('residence', true);
             setFieldValue('residence', default_value, true);
         }
-    }, []);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
         <div className={`${class_prefix}__residence-selection`}>
@@ -61,7 +61,7 @@ const SetResidenceForm = ({
                     </React.Fragment>
                 )}
             </Field>
-            {!errors?.residence || errors?.residence === true ? (
+            {!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, work, pay taxes and receive government services.'
@@ -77,7 +77,6 @@ SetResidenceForm.propTypes = {
     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,

From bd6b846667e7f45368b57c02f780c5b392a82d4c Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Mon, 20 Mar 2023 13:48:04 +0800
Subject: [PATCH 06/13] fix: remove gap between fields based on comments

---
 .../account-signup-modal.jsx                  | 38 +++++++++----------
 .../src/sass/app/modules/account-signup.scss  |  6 ---
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
index 124e526492a8..7ad988935ceb 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -99,26 +99,24 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                                     <Text as='h1' weight='bold' className='account-signup__heading'>
                                         {localize('Select your country and citizenship:')}
                                     </Text>
-                                    <div className='account-signup__body'>
-                                        <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>
+                                    <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', {
diff --git a/packages/core/src/sass/app/modules/account-signup.scss b/packages/core/src/sass/app/modules/account-signup.scss
index e8e2011c6ec7..fb7fc4067f42 100644
--- a/packages/core/src/sass/app/modules/account-signup.scss
+++ b/packages/core/src/sass/app/modules/account-signup.scss
@@ -42,11 +42,6 @@
         .dc-select-native {
             margin-bottom: 0.2rem;
         }
-        .account-signup__body {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
         .account-signup__residence-selection {
             height: 8.6rem;
             margin-bottom: 1rem;
@@ -136,7 +131,6 @@
         justify-content: flex-end;
     }
     &__btn {
-        align-self: flex-end;
         margin: 0;
         background-color: var(--button-primary-default);
         font-weight: bold;

From efae3ffde4cb99e6a7a3b168b54daf2658ea5aa0 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Mon, 20 Mar 2023 15:29:03 +0800
Subject: [PATCH 07/13] fix: made code improvements based on suggestions

---
 .../AccountSignupModal/account-signup-modal.jsx    | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
index 7ad988935ceb..07c7d6bd2097 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -21,17 +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_pasword_modal, setIsPasswordModal] = React.useState(false);
 
     const updatePassword = new_password => {
         setPWInput(new_password);
     };
 
-    const onFormSingup = (residence, citizenship) => {
-        setSelectedCitizenship(citizenship);
-        setSelectedResidence(residence);
+    const handleFormSubmit = values => {
+        history_value.current = values;
         setIsPasswordModal(true);
     };
 
@@ -94,7 +91,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                         touched,
                     }) => (
                         <Form>
-                            {(!selected_residence && !selected_citizenship) || !is_pasword_modal ? (
+                            {!is_pasword_modal ? (
                                 <div className='account-signup__main'>
                                     <Text as='h1' weight='bold' className='account-signup__heading'>
                                         {localize('Select your country and citizenship:')}
@@ -133,10 +130,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                                                 !values.citizenship ||
                                                 !!errors.citizenship
                                             }
-                                            onClick={() => {
-                                                onFormSingup(values.residence, values.citizenship);
-                                                history_value.current = values.residence;
-                                            }}
+                                            onClick={handleFormSubmit(values.residence)}
                                             primary
                                             large
                                             text={localize('Next')}

From bb0729846ae557c3bc4414056cd4d16b4c422ee7 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Mon, 20 Mar 2023 18:18:49 +0800
Subject: [PATCH 08/13] fix: make changes based on recommendations

---
 .../account-signup-modal.jsx                  | 28 +++++++++----------
 .../src/sass/app/modules/account-signup.scss  |  7 ++---
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
index 07c7d6bd2097..f1ac8e0b824a 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -22,13 +22,18 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
     const history_value = React.useRef();
     const [pw_input, setPWInput] = React.useState('');
     const [is_pasword_modal, setIsPasswordModal] = React.useState(false);
+    const [selected_residence, setSelectedResidence] = React.useState('');
+    const [selected_citizenship, setSelectedCitizenship] = React.useState('');
+    const disable_btn = (values, errors) =>
+        !values.residence || !!errors.residence || !values.citizenship || !!errors.citizenship;
 
     const updatePassword = new_password => {
         setPWInput(new_password);
     };
 
-    const handleFormSubmit = values => {
-        history_value.current = values;
+    const handleFormSubmit = (residence, citizenship) => {
+        setSelectedResidence(residence);
+        setSelectedCitizenship(citizenship);
         setIsPasswordModal(true);
     };
 
@@ -91,7 +96,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                         touched,
                     }) => (
                         <Form>
-                            {!is_pasword_modal ? (
+                            {(!selected_residence && !selected_citizenship) || !is_pasword_modal ? (
                                 <div className='account-signup__main'>
                                     <Text as='h1' weight='bold' className='account-signup__heading'>
                                         {localize('Select your country and citizenship:')}
@@ -117,20 +122,13 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                                     <div className='account-signup__footer'>
                                         <Button
                                             className={classNames('account-signup__btn', {
-                                                'account-signup__btn--disabled':
-                                                    !values.residence ||
-                                                    !!errors.residence ||
-                                                    !values.citizenship ||
-                                                    !!errors.citizenship,
+                                                'account-signup__btn--disabled': disable_btn(values, errors),
                                             })}
                                             type='button'
-                                            is_disabled={
-                                                !values.residence ||
-                                                !!errors.residence ||
-                                                !values.citizenship ||
-                                                !!errors.citizenship
-                                            }
-                                            onClick={handleFormSubmit(values.residence)}
+                                            onClick={() => {
+                                                history_value.current = values;
+                                                handleFormSubmit(values.residence, values.citizenship);
+                                            }}
                                             primary
                                             large
                                             text={localize('Next')}
diff --git a/packages/core/src/sass/app/modules/account-signup.scss b/packages/core/src/sass/app/modules/account-signup.scss
index fb7fc4067f42..747b9673b39f 100644
--- a/packages/core/src/sass/app/modules/account-signup.scss
+++ b/packages/core/src/sass/app/modules/account-signup.scss
@@ -45,13 +45,10 @@
         .account-signup__residence-selection {
             height: 8.6rem;
             margin-bottom: 1rem;
+            .dc-field--error,
             .account-signup__subtext {
                 margin-left: 1.6rem;
                 margin-top: 1rem;
-            }
-            .dc-field--error {
-                margin-left: 1.6rem;
-                margin-top: 1rem;
                 padding-left: unset;
             }
         }
@@ -158,7 +155,7 @@
     }
     @include mobile {
         &__password-selection {
-            height: 32.8rem !important;
+            height: 32.8rem;
             padding: 6rem 1.6rem;
         }
         width: calc(90vw - 10px);

From c217a7771d4f36868d1b9bd7ca5b3100d02126ef Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Mon, 20 Mar 2023 18:33:18 +0800
Subject: [PATCH 09/13] fix: make changes based on comments

---
 .../AccountSignupModal/account-signup-modal.jsx           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
index f1ac8e0b824a..cdf828ef262a 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -21,10 +21,10 @@ 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 [is_pasword_modal, setIsPasswordModal] = React.useState(false);
+    const [is_password_modal, setIsPasswordModal] = React.useState(false);
     const [selected_residence, setSelectedResidence] = React.useState('');
     const [selected_citizenship, setSelectedCitizenship] = React.useState('');
-    const disable_btn = (values, errors) =>
+    const disableBtn = (values, errors) =>
         !values.residence || !!errors.residence || !values.citizenship || !!errors.citizenship;
 
     const updatePassword = new_password => {
@@ -96,7 +96,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                         touched,
                     }) => (
                         <Form>
-                            {(!selected_residence && !selected_citizenship) || !is_pasword_modal ? (
+                            {(!selected_residence && !selected_citizenship) || !is_password_modal ? (
                                 <div className='account-signup__main'>
                                     <Text as='h1' weight='bold' className='account-signup__heading'>
                                         {localize('Select your country and citizenship:')}
@@ -122,7 +122,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                                     <div className='account-signup__footer'>
                                         <Button
                                             className={classNames('account-signup__btn', {
-                                                'account-signup__btn--disabled': disable_btn(values, errors),
+                                                'account-signup__btn--disabled': disableBtn(values, errors),
                                             })}
                                             type='button'
                                             onClick={() => {

From eafc160a8f24eca88f98dd49436f9160ed5d5370 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 24 Mar 2023 10:40:16 +0800
Subject: [PATCH 10/13] chore: updated captions for the fields and shorten code

---
 .../AccountSignupModal/account-signup-modal.jsx     | 13 ++-----------
 .../CitizenshipModal/set-citizenship-form.jsx       |  2 +-
 .../SetResidenceModal/set-residence-form.jsx        |  2 +-
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
index cdf828ef262a..6c8e0a80f138 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -22,8 +22,6 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
     const history_value = React.useRef();
     const [pw_input, setPWInput] = React.useState('');
     const [is_password_modal, setIsPasswordModal] = React.useState(false);
-    const [selected_residence, setSelectedResidence] = React.useState('');
-    const [selected_citizenship, setSelectedCitizenship] = React.useState('');
     const disableBtn = (values, errors) =>
         !values.residence || !!errors.residence || !values.citizenship || !!errors.citizenship;
 
@@ -31,12 +29,6 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
         setPWInput(new_password);
     };
 
-    const handleFormSubmit = (residence, citizenship) => {
-        setSelectedResidence(residence);
-        setSelectedCitizenship(citizenship);
-        setIsPasswordModal(true);
-    };
-
     // didMount lifecycle hook
     React.useEffect(() => {
         WS.wait('website_status', 'residence_list').then(() => {
@@ -73,7 +65,6 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
             enableApp();
         }
     };
-
     return (
         <div className='account-signup'>
             {is_loading ? (
@@ -96,7 +87,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                         touched,
                     }) => (
                         <Form>
-                            {(!selected_residence && !selected_citizenship) || !is_password_modal ? (
+                            {!is_password_modal ? (
                                 <div className='account-signup__main'>
                                     <Text as='h1' weight='bold' className='account-signup__heading'>
                                         {localize('Select your country and citizenship:')}
@@ -127,7 +118,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                                             type='button'
                                             onClick={() => {
                                                 history_value.current = values;
-                                                handleFormSubmit(values.residence, values.citizenship);
+                                                setIsPasswordModal(true);
                                             }}
                                             primary
                                             large
diff --git a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
index e9545be70473..60cc06c9e1af 100644
--- a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
+++ b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
@@ -43,7 +43,7 @@ const SetCitizenshipForm = ({ class_prefix, errors, touched, setFieldTouched, se
             )}
         </Field>
         <Text as='p' size='xxs' className='account-signup__subtext' color='less-prominent'>
-            <Localize i18n_default_text='Country of citizenship or nationality is the country that issues your passport or other national identity document.' />
+            <Localize i18n_default_text='Select your citizenship/nationality as it appears on your passport or other government-issued ID.' />
         </Text>
     </div>
 );
diff --git a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
index c73bf73daa32..547df2cbc1d1 100644
--- a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
+++ b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
@@ -64,7 +64,7 @@ const SetResidenceForm = ({
             {!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, work, pay taxes and receive government services.'
+                        'Select the country where you currently live, work, pay taxes, and receive government services.'
                     )}
                 </Text>
             ) : null}

From 84fde1deb5d73a8310f0fade564a08971e06e571 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 24 Mar 2023 11:59:06 +0800
Subject: [PATCH 11/13] fix: update the caption for residence

---
 .../App/Containers/SetResidenceModal/set-residence-form.jsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
index 547df2cbc1d1..d9d4d68c0da4 100644
--- a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
+++ b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
@@ -63,9 +63,7 @@ const SetResidenceForm = ({
             </Field>
             {!errors?.residence?.length > 0 ? (
                 <Text as='p' size='xxs' className='account-signup__subtext' color='less-prominent'>
-                    {localize(
-                        'Select the country where you currently live, work, pay taxes, and receive government services.'
-                    )}
+                    {localize('Select the country where you currently live.')}
                 </Text>
             ) : null}
         </div>

From 88b966a6fcd8b2d98ed9cf3a8c53c520cbb2661c Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 24 Mar 2023 13:15:35 +0800
Subject: [PATCH 12/13] fix: updated copywrite and fix password modal

---
 .../CitizenshipModal/set-citizenship-form.jsx       |  2 +-
 .../SetResidenceModal/set-residence-form.jsx        |  2 +-
 .../core/src/sass/app/modules/account-signup.scss   | 13 ++++---------
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
index 60cc06c9e1af..e9545be70473 100644
--- a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
+++ b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
@@ -43,7 +43,7 @@ const SetCitizenshipForm = ({ class_prefix, errors, touched, setFieldTouched, se
             )}
         </Field>
         <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.' />
+            <Localize i18n_default_text='Country of citizenship or nationality is the country that issues your passport or other national identity document.' />
         </Text>
     </div>
 );
diff --git a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
index d9d4d68c0da4..49e80399cb54 100644
--- a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
+++ b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
@@ -63,7 +63,7 @@ const SetResidenceForm = ({
             </Field>
             {!errors?.residence?.length > 0 ? (
                 <Text as='p' size='xxs' className='account-signup__subtext' color='less-prominent'>
-                    {localize('Select the country where you currently live.')}
+                    {localize('Country of residence is where you currently live.')}
                 </Text>
             ) : null}
         </div>
diff --git a/packages/core/src/sass/app/modules/account-signup.scss b/packages/core/src/sass/app/modules/account-signup.scss
index 747b9673b39f..933f6285068b 100644
--- a/packages/core/src/sass/app/modules/account-signup.scss
+++ b/packages/core/src/sass/app/modules/account-signup.scss
@@ -64,7 +64,7 @@
     &__password-selection {
         .account-signup__heading {
             padding-top: 1.5rem;
-            margin-bottom: 4.3rem;
+            margin-bottom: 2.4rem;
 
             @include mobile {
                 padding-top: 0;
@@ -73,14 +73,9 @@
             }
         }
         & .dc-password-meter__container {
-            max-height: 4rem;
-            margin-bottom: 3.3rem;
-            @include desktop {
-                width: calc(100% - 3.2rem);
-            }
-            @include mobile {
-                width: 100%;
-            }
+            max-height: 6rem;
+            margin-bottom: 2.4rem;
+            width: 100%;
         }
         & .dc-field--error {
             top: 4.4rem;

From ca2bd77b80703666a0d207b1f86226043c11579a Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 24 Mar 2023 15:48:03 +0800
Subject: [PATCH 13/13] fix: updated description for citizenship

---
 .../App/Containers/CitizenshipModal/set-citizenship-form.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
index e9545be70473..60cc06c9e1af 100644
--- a/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
+++ b/packages/core/src/App/Containers/CitizenshipModal/set-citizenship-form.jsx
@@ -43,7 +43,7 @@ const SetCitizenshipForm = ({ class_prefix, errors, touched, setFieldTouched, se
             )}
         </Field>
         <Text as='p' size='xxs' className='account-signup__subtext' color='less-prominent'>
-            <Localize i18n_default_text='Country of citizenship or nationality is the country that issues your passport or other national identity document.' />
+            <Localize i18n_default_text='Select your citizenship/nationality as it appears on your passport or other government-issued ID.' />
         </Text>
     </div>
 );