From 5df94527e77e31c516c3d91cb0f41ffa2ede9946 Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@regentmarkets.com>
Date: Mon, 29 Apr 2024 09:27:53 +0800
Subject: [PATCH] chore: signup modal style fix and add error msg from be

---
 package-lock.json                                  |  8 ++++----
 package.json                                       |  2 +-
 .../Signup/CitizenshipModal/CitizenshipModal.tsx   |  8 ++++----
 .../PasswordSettingModal/PasswordSettingModal.tsx  | 11 ++++++++---
 src/flows/Signup/SignupWrapper/SignupWrapper.tsx   |  7 ++++++-
 src/hooks/useNewVirtualAccount.ts                  | 14 +++++++++++++-
 src/providers/UIProvider/UIProvider.tsx            |  1 +
 7 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b01df6d..3dfb76d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
             "dependencies": {
                 "@deriv-com/analytics": "~1.4.13",
                 "@deriv-com/api-hooks": "^0.1.11",
-                "@deriv-com/ui": "1.14.2",
+                "@deriv-com/ui": "1.14.5",
                 "@deriv-com/utils": "^0.0.11",
                 "@deriv/quill-icons": "latest",
                 "@svgr/core": "^8.1.0",
@@ -1763,9 +1763,9 @@
             }
         },
         "node_modules/@deriv-com/ui": {
-            "version": "1.14.2",
-            "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.14.2.tgz",
-            "integrity": "sha512-7O06rLPPtWMsyQRI6pIxbAME3+KYathbhmraHCgwAct7dUG1yAmAMGSgIWZuF55psi5San77cYVEb2Ui8GnckQ==",
+            "version": "1.14.5",
+            "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.14.5.tgz",
+            "integrity": "sha512-GzRIzl9ZIGCzqjKcNm9/pam8Ef7gkYfow/pgsk5lHaU0Vkxi4kpStKIvmAVVy85K4bSkRxJuWKwYIaEkyoCOqw==",
             "dependencies": {
                 "@types/react-modal": "^3.16.3"
             },
diff --git a/package.json b/package.json
index 5a60a60..9639f42 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "dependencies": {
         "@deriv-com/api-hooks": "^0.1.11",
         "@deriv-com/analytics": "~1.4.13",
-        "@deriv-com/ui": "1.14.2",
+        "@deriv-com/ui": "1.14.5",
         "@deriv-com/utils": "^0.0.11",
         "@deriv/quill-icons": "latest",
         "@svgr/core": "^8.1.0",
diff --git a/src/flows/Signup/CitizenshipModal/CitizenshipModal.tsx b/src/flows/Signup/CitizenshipModal/CitizenshipModal.tsx
index 1181bee..049f0d0 100644
--- a/src/flows/Signup/CitizenshipModal/CitizenshipModal.tsx
+++ b/src/flows/Signup/CitizenshipModal/CitizenshipModal.tsx
@@ -27,12 +27,12 @@ export const CitizenshipModal = ({ onClickNext }: TCitizenshipModal) => {
         }
     }, [clientCountry, setFieldValue, residenceList, values.country]);
 
-    // Add <Loading /> here later when it's created
-
     return (
-        <div className='h-full rounded-default max-w-[328px] lg:max-w-[440px] bg-system-light-primary-background'>
+        <div className='bg-system-light-primary-background rounded-xl'>
             <div className='flex flex-col p-16 space-y-16 lg:space-y-24 lg:p-24'>
-                <Text weight='bold'>Select your country and citizenship:</Text>
+                <Text className='text-default lg:text-lg' weight='bold'>
+                    Select your country and citizenship:
+                </Text>
                 <Dropdown
                     dropdownIcon={<LabelPairedChevronDownMdRegularIcon />}
                     errorMessage='Country of residence is where you currently live.'
diff --git a/src/flows/Signup/PasswordSettingModal/PasswordSettingModal.tsx b/src/flows/Signup/PasswordSettingModal/PasswordSettingModal.tsx
index 02b2e8b..34f850a 100644
--- a/src/flows/Signup/PasswordSettingModal/PasswordSettingModal.tsx
+++ b/src/flows/Signup/PasswordSettingModal/PasswordSettingModal.tsx
@@ -3,21 +3,25 @@ import { useFormikContext } from 'formik';
 
 import { Button, PasswordInput, Text } from '@deriv-com/ui';
 
+import { useUIContext } from '@/providers';
 import { validPassword } from '@/utils';
 
 import { TSignupFormValues } from '../SignupWrapper/SignupWrapper';
 
 export const PasswordSettingModal = () => {
     const { values, setFieldValue } = useFormikContext<TSignupFormValues>();
+    const { uiState } = useUIContext();
+
+    const { errorMessage } = uiState;
 
     const onPasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
         setFieldValue('password', e.target.value);
     };
 
     return (
-        <div className='h-full rounded-default max-w-[328px] lg:max-w-[440px] bg-system-light-primary-background'>
-            <div className='flex flex-col p-16 space-y-16 lg:space-y-24 lg:p-24'>
-                <Text align='center' weight='bold'>
+        <div className='rounded-xl bg-system-light-primary-background'>
+            <div className='flex flex-col p-16 space-y-16 lg:space-y-24 lg:p-24 rounded-xl'>
+                <Text align='center' weight='bold' className='text-default lg:text-lg'>
                     Keep your account secure with a password
                 </Text>
                 <PasswordInput
@@ -25,6 +29,7 @@ export const PasswordSettingModal = () => {
                     label='Create a password'
                     onChange={onPasswordChange}
                     value={values.password}
+                    customErrorMessage={errorMessage}
                 />
                 <Text align='center' size='xs'>
                     Strong passwords contain at least 8 characters. combine uppercase and lowercase letters, numbers,
diff --git a/src/flows/Signup/SignupWrapper/SignupWrapper.tsx b/src/flows/Signup/SignupWrapper/SignupWrapper.tsx
index b8f015f..55526ba 100644
--- a/src/flows/Signup/SignupWrapper/SignupWrapper.tsx
+++ b/src/flows/Signup/SignupWrapper/SignupWrapper.tsx
@@ -30,7 +30,12 @@ export const SignupWrapper = () => {
     };
 
     return (
-        <Modal ariaHideApp={false} isOpen={isModalOpen('Signup')} shouldCloseOnOverlayClick={false}>
+        <Modal
+            ariaHideApp={false}
+            isOpen={isModalOpen('Signup')}
+            shouldCloseOnOverlayClick={false}
+            className='max-w-[328px] lg:max-w-[440px] h-auto rounded-xl'
+        >
             <Formik initialValues={initialValues} onSubmit={handleSubmit} validationSchema={signup}>
                 <Form>
                     <SignupScreens setStep={setStep} step={step} />
diff --git a/src/hooks/useNewVirtualAccount.ts b/src/hooks/useNewVirtualAccount.ts
index 8684f5f..24c1b3b 100644
--- a/src/hooks/useNewVirtualAccount.ts
+++ b/src/hooks/useNewVirtualAccount.ts
@@ -21,7 +21,19 @@ export const useNewVirtualAccount = () => {
     const navigate = useNavigate();
     const { openModal } = useQueryParams();
     const { setUIState } = useUIContext();
-    const { data: newTradingAccountData, mutate: createAccount, status, ...rest } = useNewAccountVirtual();
+    const {
+        data: newTradingAccountData,
+        mutate: createAccount,
+        status,
+        error: newAccountError,
+        ...rest
+    } = useNewAccountVirtual();
+
+    useEffect(() => {
+        if (newAccountError) {
+            setUIState({ errorMessage: newAccountError.error.message });
+        }
+    }, [newAccountError, setUIState, status]);
 
     const { appendAccountCookie } = useAuthData();
 
diff --git a/src/providers/UIProvider/UIProvider.tsx b/src/providers/UIProvider/UIProvider.tsx
index 85aecf4..a45075d 100644
--- a/src/providers/UIProvider/UIProvider.tsx
+++ b/src/providers/UIProvider/UIProvider.tsx
@@ -5,6 +5,7 @@ type TUIState = {
     accountType?: string;
     isSignupWizardOpen?: boolean;
     regulation?: string;
+    errorMessage?: string;
 };
 
 type TUIContext = {