Merge pull request #130 from thisyahlen-deriv/thisyahlen/signup-ui-an…

…d-error-message chore: signup modal style fix and add error msg from be
deriv-com · Apr 29, 2024 · 4c368ce · 4c368ce
2 parents ca5ab14 + 5df9452
commit 4c368ce
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -3,28 +3,33 @@ 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
                     isFullWidth
                     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
@@ -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
@@ -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
@@ -5,6 +5,7 @@ type TUIState = {
     accountType?: string;
     isSignupWizardOpen?: boolean;
     regulation?: string;
+    errorMessage?: string;
 };
 
 type TUIContext = {