fix: changed the url flow for academy signup flow

aswathy-deriv · Feb 20, 2024 · 99d00ec · 99d00ec
1 parent 48bc72d
commit 99d00ec
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 27 deletions.
diff --git a/crowdin/messages.json b/crowdin/messages.json
@@ -1813,6 +1813,7 @@
   "1673505406": "An impersonator’s main goal is to steal your sensitive information and funds.",
   "1673824550": "Minimum stake",
   "1674164323": "<0>With a x500 multiplier</0>, if the market goes down 2%, you'll <1>lose only $100</1>. An automatic stop out kicks in if your loss reaches your stake amount.",
+  "1674319947": "Unfortunately, Deriv is not available in this country.",
   "1674798397": "Trade multipliers on our mobile app.",
   "1676292946": "Forex trading gives you the chance to profit from changes in the relative values of currencies on the forex market.",
   "1677027187": "Forex",

diff --git a/src/features/hooks/use-residence-list/index.tsx b/src/features/hooks/use-residence-list/index.tsx
@@ -18,14 +18,23 @@ const formatResidenceList = ({
     }
     return residences
         .filter(({ text: name }) => !restricted.includes(name))
-        .map(({ text: display_name, text: name, value: symbol, phone_idd: prefix }) => {
-            return {
-                name,
-                display_name,
-                symbol,
-                prefix,
-            }
-        })
+        .map(
+            ({
+                text: display_name,
+                text: name,
+                value: symbol,
+                phone_idd: prefix,
+                disabled: disabled,
+            }) => {
+                return {
+                    name,
+                    display_name,
+                    symbol,
+                    prefix,
+                    disabled,
+                }
+            },
+        )
 }
 
 export const useResidenceList = ({
@@ -34,13 +43,7 @@ export const useResidenceList = ({
     restricted_countries?: ['Iran', 'North Korea', 'Myanmar (Burma)', 'Syria', 'Cuba']
 } = {}) => {
     const { send, data } = useWS('residence_list')
-    // console.log(
-    //     data.map((item) => {
-    //         if (item.disabled === 'DISABLED') {
 
-    //         }
-    //     }),
-    // )
     useEffect(() => {
         send()
     }, [send])

diff --git a/src/features/pages/signup-academy-complete/residence-form.tsx b/src/features/pages/signup-academy-complete/residence-form.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { next_btn } from './signup-academy.module.scss'
 import { DropdownSearch } from 'components/elements'
@@ -30,6 +30,7 @@ type CountryType = {
     name: string
     display_name: string
     value: string
+    disabled: string
 }
 type HandleNextType = () => void
 
@@ -50,6 +51,21 @@ const ResidenceForm = ({
     setSelectedValue,
 }: ResidenceFormProps) => {
     const { country, citizenship } = selected_value
+    const [errors, setErrors] = useState(false)
+
+    const handleSelection = (country) => {
+        const is_country_disabled = residence_list.filter((item) => country.name === item.name)?.[0]
+            ?.disabled
+        setSelectedValue((prevState) => ({
+            ...prevState,
+            country: country,
+        }))
+        if (is_country_disabled) {
+            setErrors(true)
+        } else {
+            setErrors(false)
+        }
+    }
 
     const form_inputs = [
         {
@@ -61,6 +77,7 @@ const ResidenceForm = ({
             placeholder_message: localize(
                 '_t_Country of residence is where you currently live._t_',
             ),
+            error_message: '_t_Unfortunately, Deriv is not available in this country._t_',
         },
         {
             id: 'dm-citizenship-select',
@@ -73,7 +90,7 @@ const ResidenceForm = ({
             ),
         },
     ]
-
+    console.log(residence_list)
     return (
         <Flex.Box direction="col" align="start" padding="12x">
             <Typography.Paragraph weight="bold">
@@ -93,17 +110,23 @@ const ResidenceForm = ({
                                         items={item.list}
                                         selected_item={country}
                                         mb="5px"
-                                        onChange={(country) => {
-                                            setSelectedValue((prevState) => ({
-                                                ...prevState,
-                                                country: country,
-                                            }))
-                                        }}
+                                        onChange={(country) => handleSelection(country)}
                                         style={{ marginTop: '16px' }}
                                     />
-                                    <Typography.Paragraph size="xs" padding_inline="8x">
-                                        <Localize translate_text={item.placeholder_message} />
-                                    </Typography.Paragraph>
+                                    {errors && (
+                                        <Typography.Paragraph
+                                            size="small"
+                                            padding_inline="8x"
+                                            textcolor="brand"
+                                        >
+                                            <Localize translate_text={item.error_message} />
+                                        </Typography.Paragraph>
+                                    )}
+                                    {!errors && (
+                                        <Typography.Paragraph size="small" padding_inline="8x">
+                                            <Localize translate_text={item.placeholder_message} />
+                                        </Typography.Paragraph>
+                                    )}
                                 </>
                             )
                         } else {
@@ -124,7 +147,7 @@ const ResidenceForm = ({
                                         }}
                                         style={{ marginTop: '16px' }}
                                     />
-                                    <Typography.Paragraph size="xs" padding_inline="8x">
+                                    <Typography.Paragraph size="small" padding_inline="8x">
                                         <Localize translate_text={item.placeholder_message} />
                                     </Typography.Paragraph>
                                 </>
@@ -134,7 +157,7 @@ const ResidenceForm = ({
                     <div className={next_btn}>
                         <NextButton
                             secondary
-                            disabled={!citizenship || !country}
+                            disabled={!citizenship || !country || errors || !selected_value}
                             onClick={handleNext}
                         >
                             <Localize translate_text="_t_Next_t_" />

diff --git a/src/pages/academy/completesignup/index.tsx → src/pages/academy-complete-signup/index.tsx b/src/pages/academy/completesignup/index.tsx → src/pages/academy-complete-signup/index.tsx
diff --git a/src/pages/academy/signup/index.tsx → src/pages/academy-signup/index.tsx b/src/pages/academy/signup/index.tsx → src/pages/academy-signup/index.tsx