refactor: ts errors and some fixes

crowdin/messages.json

@@ -179,7 +179,6 @@
   "176773798": "0.5%",
   "176823932": "We may decline your verification documents if they are insufficiently clear, invalid, expired, or have cropped edges.",
   "176972763": "<0>GLD.US</0> The SPDR Gold Shares ETF tracks the price of gold bullion in the over-the-counter (OTC) market.",
-  "179083332": "Date",
   "179737767": "Our legacy options trading platform.",
   "180412186": "Predict whether the exit spot will be strictly higher or lower than the entry spot at the end of the contract period.",
   "181754600": "How can I identify emails from impersonators of Deriv customer support?",
@@ -637,6 +636,7 @@
   "617759430": "Earn commissions when your referral deposits 100 USD – whether it's a single deposit or accumulated over time.",
   "618453683": "On Deriv, you can trade CFDs with high leverage, enabling you to pay just a fraction of the contract’s value. It will amplify your potential gain and also increase your potential loss.",
   "619354706": "Max(6.83, -10) ",
+  "619481945": "Mobile number is required",
   "619610610": "Close your account at any time you want.",
   "621291584": "0.75",
   "622253642": "Save time – no need to open, monitor, and close trades.",
@@ -933,7 +933,6 @@
   "896028940": "Got more questions?",
   "896455617": "BAT/USD",
   "897072394": "deriv.app platform video",
-  "897219665": "Please enter a valid {{field_name}}",
   "897325464": "Instruments available for CFD trading",
   "897732167": "Deriv MT5 logo",
   "898646134": "To see your account’s trading limits, go to Settings > Security and safety > <0>Account limits</0>.",
@@ -984,6 +983,7 @@
   "943716510": "Introduction to cryptocurrencies",
   "944896800": "How does it transform our partnership?",
   "947541466": "Trade 24/7 on our proprietary synthetics that simulate real-world market movements. These indices are unaffected by regular<br /> market hours, global events, or market and liquidity risks. Manage your exposure by selecting the volatility level to suit your risk appetite.",
+  "947758334": "City is required",
   "948545552": "150+",
   "949617971": "Your Deriv X password is linked to the standalone Deriv X trading platform while your Deriv password gives you access to platforms hosted on our website such as DTrader and DBot.",
   "949859957": "Submit",
@@ -1120,7 +1120,6 @@
   "1084407062": "These indices correspond to simulated markets with <0>constant volatilities of 10%, 25%, 50%, 75%, and 100%.</0> There is an equal probability of an up or down jump <0>every 20 minutes</0>, on average. The jump size is <0>around 30 times</0> the normal price movement, on average.",
   "1084960586": "Disclose the terms of all contracts",
   "1088428939": "These indices correspond to financial markets with volatilities of 10% and 20%. One tick is generated for every tick of the corresponding forex pair.",
-  "1089085289": "Mobile number",
   "1089110190": "You accidentally gave us another email address (usually a work or a personal one instead of the one you meant).",
   "1089165018": "Get in touch",
   "1090964405": "Monthly volume requirement",
@@ -1969,6 +1968,7 @@
   "1872384056": "Light and dark mode features for a more enjoyable experience",
   "1872568231": "GBP/TRY",
   "1872607463": "banner",
+  "1873174451": "Postcode is required",
   "1873188024": "A deal for 1 lot of the Volatility Index 75 for a price of USD 500,000 per USD 100,000 turnover will pay out a commission of USD 5. The minimum volume required to receive the minimum commission of USD 0.01 is determined using this formula:",
   "1874424045": "I lost my phone. How can I disable two-factor authentication (2FA)?",
   "1875123330": "24.88",
@@ -2218,6 +2218,7 @@
   "2088836522": "1. CVV failure. Please contact your bank to check.",
   "2089257874": "internal audit department",
   "2092654058": "To onboard with Deriv Prime’s liquidity solution and trading services, you will need to follow a streamlined process:",
+  "2094921906": "Street is required",
   "2095230169": "Reliable",
   "2097023111": "A low-cost way to trade diverse asset groups",
   "2097310605": "Why trade synthetics on Deriv",
@@ -2235,6 +2236,7 @@
   "2109279238": "derived",
   "2109387636": "How many trading platforms do you offer?",
   "2109391373": "Fund your account.",
+  "2109960759": "Company name is required",
   "2112006652": "FIL/USD",
   "2112510770": "Check if your browser and device are updated. If they're not, compatibility issues may prevent the email from reaching you.",
   "2113590447": "To promote Deriv.com, you will need a Deriv.com affiliate link.",
@@ -4208,6 +4210,7 @@
   "-498923246": "Want to sign up as a trader?",
   "-1760596315": "Create a Deriv account",
   "-1986150937": "Thank you for signing up",
+  "-2017825013": "Got it",
   "-881644591": "We've having trouble signing you up right now. Please try again in 2 minutes",
   "-1830091000": "Username already exists. Please enter another:",
   "-260364285": "Change username",
@@ -4217,14 +4220,15 @@
   "-1541554430": "Next",
   "-26610045": "Add an affiliate account",
   "-435672026": "Wrong email",
-  "-1267880283": "{{field_name}} is required",
   "-1787546919": "You should enter ${min_digit}-${max_digit} characters.",
   "-840841662": "Only Latin characters",
+  "-1430656728": "Password is required",
   "-1049534775": "Please enter a valid postcode with Latin characters.",
+  "-420140433": "Company registration number is required",
+  "-2146980219": "Please enter a valid state",
   "-1857429287": "Last Name",
-  "-1706047929": "Postcode",
+  "-378415317": "State is required",
   "-1478320346": "Currency is required",
-  "-1831906031": "Company registeration number",
   "-706927392": "Important Guidelines",
   "-2086585870": "Partners Guide",
   "-776458472": "General terms of use",

package.json

@@ -59,7 +59,6 @@
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-date-picker": "8.4.0",
-        "react": "^18.2.0",
         "react-device-detect": "^2.2.2",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",

src/components/elements/dropdown-search.tsx

@@ -92,6 +92,10 @@ const DropdownSearch = ({
         }
     }, [selected_item])
 
+    useEffect(() => {
+        setDropdownItems([...items])
+    }, [items])
+
     const handleInputChange = (e) => {
         setInputValue(e.target.value)
         toggleListVisibility(e)

src/features/hooks/use-states-list/index.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useMemo } from 'react'
+import useWS from '../../../components/hooks/useWS'
+
+export type ResidenceType = {
+    text: string
+    value: string
+}
+
+const formatStatesList = (states) => {
+    if (!states.length) {
+        return []
+    }
+
+    return states?.map(
+        ({ text }) =>
+            typeof text !== undefined && {
+                name: text,
+                display_name: text,
+            },
+    )
+}
+
+export const useStatesList = (country_code) => {
+    const { send, data } = useWS('states_list')
+
+    useEffect(() => {
+        send({ states_list: country_code })
+    }, [country_code])
+
+    const states_list = useMemo(() => formatStatesList(data || []), [data])
+    return [states_list]
+}

src/pages/signup-affiliates/_types.ts

@@ -7,7 +7,7 @@ type AffiliateAccountTypes = {
     account: { type: number; plan: number }
     address_details: {
         country: CountryType
-        state: string
+        state: { name?: string; display_name?: string }
         city: string
         street: string
         postal_code: string
@@ -17,7 +17,7 @@ type AffiliateAccountTypes = {
         username: string
         first_name: string
         last_name: string
-        date_birth: string
+        date_birth: Date
         website_url: string
         social_media_url: string
         password: string
@@ -26,9 +26,9 @@ type AffiliateAccountTypes = {
         currency: string
     }
     terms_of_use: {
-        non_pep_declaration: boolean
+        non_pep_declaration_accepted: boolean
         tnc_accepted: boolean
-        general_terms: boolean
+        general_terms_accepted: boolean
         is_eu_checked: boolean
         is_partner_checked: boolean
     }
@@ -113,7 +113,7 @@ type WizardComponentsProps = WizardComponentTypes & WizardProps
 type AffiliateData = keyof AffiliateAccountTypes
 
 type WizardStepProps = {
-    affiliate_data: AffiliateAccountTypes[AffiliateData]
+    affiliate_account: AffiliateAccountTypes
     updateData: (value: AffiliateAccountTypes[AffiliateData]) => void
     onValidate: (value: boolean) => void
     residence_list?: CountryType[]

src/pages/signup-affiliates/components/_account-details.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { WizardStepProps } from '../_types'
 import AffiliateInput from '../utils/_affiliate-input'
 import affiliate_validation from '../validations/_affilaite_validation'
+import { useStatesList } from 'features/hooks/use-states-list'
 import { DropdownSearch } from 'components/elements'
 import { localize } from 'components/localization'
 import device from 'themes/device'
@@ -27,11 +28,12 @@ const InputWrapper = styled.div`
 `
 
 const AccountDetails = ({
-    affiliate_data,
+    affiliate_account,
     updateData,
     onValidate,
     residence_list,
 }: WizardStepProps) => {
+    const affiliate_data = affiliate_account.address_details
     const [country, setCountry] = useState(affiliate_data.country)
     const [state, setState] = useState(affiliate_data.state)
     const [city, setCity] = useState(affiliate_data.city)
@@ -43,6 +45,8 @@ const AccountDetails = ({
     const [street_error_msg, setStreetErrorMsg] = useState('')
     const [postcode_error_msg, setPostCodeErrorMsg] = useState('')
 
+    const [states_list] = useStatesList(affiliate_data.country?.symbol)
+
     useEffect(() => {
         updateData({
             ...affiliate_data,
@@ -56,7 +60,7 @@ const AccountDetails = ({
 
     const validate =
         country?.name &&
-        state &&
+        state?.name &&
         city &&
         street &&
         postal_code &&
@@ -85,15 +89,14 @@ const AccountDetails = ({
         {
             id: 'dm-state',
             name: 'state',
-            type: 'text',
-            error: state_error_msg,
+            type: 'select',
             label: localize('_t_State/province_t_'),
             placeholder: 'State/province',
-            extra_info: ' ',
             required: true,
+            error: state_error_msg,
             value: state,
+            list: states_list,
             value_set: setState,
-            error_set: setStateErrorMsg,
         },
         {
             id: 'dm-town',
@@ -165,16 +168,16 @@ const AccountDetails = ({
         <InputGroup>
             <InputWrapper>
                 {form_inputs.map((item) => {
-                    if (item.name === 'country') {
+                    if (item.name === 'country' || item.name === 'state') {
                         return (
                             <DropdownSearch
                                 key={item.id}
                                 id={item.id}
-                                selected_item={item.value}
-                                onChange={(country) => item.value_set(country)}
-                                error={item.error}
+                                label={item.label}
                                 items={item.list}
-                                label={localize('_t_Country of residence_t_')}
+                                error={item.error}
+                                selected_item={item.value}
+                                onChange={(value) => item.value_set(value)}
                             />
                         )
                     } else {

src/pages/signup-affiliates/components/_account-personal-details.tsx

@@ -31,10 +31,11 @@ const InputWrapper = styled.div`
 
 const PersonalDetails = ({
     is_individual,
-    affiliate_data,
+    affiliate_account,
     updateData,
     onValidate,
 }: WizardStepProps) => {
+    const affiliate_data = affiliate_account.personal_details
     const [username, setUsername] = useState(affiliate_data.username)
     const [first_name, setFirstName] = useState(affiliate_data.first_name)
     const [last_name, setLastName] = useState(affiliate_data.last_name)
@@ -47,14 +48,14 @@ const PersonalDetails = ({
     const [social_media_url, setSocialMedia] = useState(affiliate_data.social_media_url)
     const [password, setPassword] = useState(affiliate_data.password)
 
-    const [user_name_error_msg, setUserNameErrorMsg] = useState()
-    const [first_name_error_msg, setFirstNameErrorMsg] = useState()
-    const [last_name_error_msg, setLastNameErrorMsg] = useState()
-    const [company_name_error_msg, setCompanyNameErrorMsg] = useState()
-    const [company_registration_error_msg, setCompanyRegistrationErrorMsg] = useState()
-    const [website_url_error_msg, setWebsiteUrlErrorMsg] = useState()
-    const [social_media_url_error_msg, setSocialMediaErrorMsg] = useState()
-    const [password_error_msg, setPasswordErrorMsg] = useState()
+    const [user_name_error_msg, setUserNameErrorMsg] = useState<string>()
+    const [first_name_error_msg, setFirstNameErrorMsg] = useState<string>()
+    const [last_name_error_msg, setLastNameErrorMsg] = useState<string>()
+    const [company_name_error_msg, setCompanyNameErrorMsg] = useState<string>()
+    const [company_registration_error_msg, setCompanyRegistrationErrorMsg] = useState<string>()
+    const [website_url_error_msg, setWebsiteUrlErrorMsg] = useState<string>()
+    const [social_media_url_error_msg, setSocialMediaErrorMsg] = useState<string>()
+    const [password_error_msg, setPasswordErrorMsg] = useState<string>()
 
     const form_inputs = [
         {
@@ -287,45 +288,43 @@ const PersonalDetails = ({
     return (
         <InputGroup>
             <InputWrapper>
-                <form>
-                    {getFormFields().map((item) => {
-                        if (item.name === 'date_birth') {
-                            return (
-                                <BirthForm
-                                    id={item.id}
-                                    key={item.id}
-                                    error={item.error}
-                                    value={item.value}
-                                    label={localize(item.label)}
-                                    setFieldValue={item.value_set}
-                                />
-                            )
-                        } else {
-                            return (
-                                <AffiliateInput
-                                    id={item.id}
-                                    key={item.id}
-                                    name={item.name}
-                                    type={item.type}
-                                    value={item.value}
-                                    error={item.error}
-                                    required={item.required}
-                                    extra_info={item.extra_info}
-                                    label={localize(item.label)}
-                                    placeholder={item.placeholder}
-                                    password_icon={item.type == 'password'}
-                                    onChange={handleInput}
-                                    onBlur={handleInput}
-                                    data-lpignore="true"
-                                    handleError={() => {
-                                        item?.value_set('')
-                                        item?.error_set('')
-                                    }}
-                                />
-                            )
-                        }
-                    })}
-                </form>
+                {getFormFields().map((item) => {
+                    if (item.name === 'date_birth') {
+                        return (
+                            <BirthForm
+                                id={item.id}
+                                key={item.id}
+                                error={item.error}
+                                value={item.value}
+                                label={item.label}
+                                setFieldValue={item.value_set}
+                            />
+                        )
+                    } else {
+                        return (
+                            <AffiliateInput
+                                id={item.id}
+                                key={item.id}
+                                name={item.name}
+                                type={item.type}
+                                label={item.label}
+                                value={item.value}
+                                error={item.error}
+                                required={item.required}
+                                extra_info={item.extra_info}
+                                placeholder={item.placeholder}
+                                password_icon={item.type == 'password'}
+                                onChange={handleInput}
+                                onBlur={handleInput}
+                                data-lpignore="true"
+                                handleError={() => {
+                                    item?.value_set('')
+                                    item?.error_set('')
+                                }}
+                            />
+                        )
+                    }
+                })}
             </InputWrapper>
         </InputGroup>
     )