From 11475680d89d5270565a0bbf8f489b0d9f11b66d Mon Sep 17 00:00:00 2001
From: suisin-deriv <103026762+suisin-deriv@users.noreply.github.com>
Date: Mon, 29 Aug 2022 16:17:46 +0800
Subject: [PATCH] Suisin/Updated Sign up Modal Message (#6126)

* Updated Sign up Modal Message

* Updated Localize Value

* Remove selectedCountry

* resolved characters issue

* Make Choose Country empty

* Fixed Highlight Issue

* Update highlight selection functions

* Update function
---
 .../src/components/autocomplete/autocomplete.jsx  | 15 ++++++++++++---
 .../AccountSignupModal/account-signup-modal.jsx   |  3 +++
 .../CitizenshipModal/same-citizenship-modal.jsx   |  2 +-
 .../SetResidenceModal/set-residence-form.jsx      |  3 +++
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/autocomplete/autocomplete.jsx b/packages/components/src/components/autocomplete/autocomplete.jsx
index 20cb84a14885..fca0278f29c2 100644
--- a/packages/components/src/components/autocomplete/autocomplete.jsx
+++ b/packages/components/src/components/autocomplete/autocomplete.jsx
@@ -33,6 +33,7 @@ const Autocomplete = React.memo(props => {
         autoComplete,
         className,
         dropdown_offset,
+        historyValue,
         error,
         has_updating_list = true,
         input_id,
@@ -65,10 +66,18 @@ const Autocomplete = React.memo(props => {
     React.useEffect(() => {
         if (has_updating_list) {
             setFilteredItems(list_items);
-            setActiveIndex(null);
-            setInputValue('');
+            if (historyValue) {
+                const index = filtered_items.findIndex(object => {
+                    return object.text === historyValue;
+                });
+                setInputValue(historyValue);
+                setActiveIndex(index);
+            } else {
+                setInputValue('');
+                setActiveIndex(null);
+            }
         }
-    }, [list_items, has_updating_list]);
+    }, [list_items, has_updating_list, historyValue]);
 
     React.useEffect(() => {
         if (should_show_list && list_item_ref.current) {
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 281633677de5..76bc74e41dcb 100644
--- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
+++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -20,6 +20,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
     const [api_error, setApiError] = React.useState(false);
     const [is_loading, setIsLoading] = React.useState(true);
     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('');
@@ -110,6 +111,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                                     setFieldValue={setFieldValue}
                                     residence_list={residence_list}
                                     default_value={country}
+                                    history_value={history_value.current}
                                 >
                                     <Button
                                         className={classNames('account-signup__btn', {
@@ -119,6 +121,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                                         is_disabled={!values.residence || !!errors.residence}
                                         onClick={() => {
                                             onResidenceSelection(values.residence);
+                                            history_value.current = values.residence;
                                         }}
                                         primary
                                         large
diff --git a/packages/core/src/App/Containers/CitizenshipModal/same-citizenship-modal.jsx b/packages/core/src/App/Containers/CitizenshipModal/same-citizenship-modal.jsx
index ba39b340d9b1..fc9d750c7389 100644
--- a/packages/core/src/App/Containers/CitizenshipModal/same-citizenship-modal.jsx
+++ b/packages/core/src/App/Containers/CitizenshipModal/same-citizenship-modal.jsx
@@ -12,7 +12,7 @@ const SameCitizenshipModal = ({
 }) => (
     <div>
         <Text as='p' className='account-signup__text'>
-            {localize('Are you a citizen of the same country where you live?')}
+            {localize('Are you a citizen of {{- residence}}?', { residence })}
         </Text>
         <div className='account-signup__same-citizenship'>
             <Button
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 277b8d4776a7..9147fc404922 100644
--- a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
+++ b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
@@ -8,6 +8,7 @@ const SetResidenceForm = ({
     class_prefix = 'set-residence',
     children,
     default_value,
+    history_value,
     header_text,
     errors,
     touched,
@@ -42,6 +43,7 @@ const SetResidenceForm = ({
                                 className={`${class_prefix}__residence-field`}
                                 type='text'
                                 label={localize('Choose country')}
+                                historyValue={history_value}
                                 error={touched.residence && errors.residence}
                                 required
                                 list_items={residence_list}
@@ -77,6 +79,7 @@ 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),