[CRO][Translation] MyAffiliate signup form (#5992)

* feat: new affiliate signup page

* fix: urls and phone

* fix: translations

* fix: getting the language

* fix: phone number issue

* fix: enable capital letter for email input

* fix: phone code send wrong values

* auto-pull-translation

* translation: 📚 sync translations from crowdin feature branch

* fix: a lot of minor issues

* chore: fix eslnit issue

* fix: responsive design for modals and arabic language

* fix: terms of use sending to API

* fix: resolving react minify errors

* fix: react minify errors, ab test, validation

* chore: new localise text and wizard size change

* auto-pull-translation

* translation: 📚 sync translations from crowdin feature branch

* fix: datepicker input

* fix: datepicker input and password passing

* fix: ab testing

* fix: add ab test for one more button and fix datapicker input

* fix:  datapicker input

* fix: datepicker, states

* refactor: tracking events, some minor changes with keys, brackets and id

* refactor: handlers and password validation

* refactor: make tracking utility and some refactor around

* refactor: types, state, images

* refactor: state, local constants movement

* fix: security, deployment, console logs

* refactor: validation and state management

* fix: increase length of phone number

* refactor: inputs, filter and data fix by individual account

* chore: console log

* fix: issue with incorrect name

* fix: add mandatory fields

* fix: state empty on try again

* refactor: validate feature movement and prepare for debounce

* fix: api limitations

* fix: deployment issue

* fix: deployment issue

* refactor: button enabling condition

* refactor: step view and date picker on safari fix

* feat: add new text

* auto-pull-translation

* chore: empty commit

* auto-pull-translation

* translation: 📚 sync translations from crowdin feature branch

* chore: empty commit

* fix: update password validation

---------

Co-authored-by: DerivFE <[email protected]>

package.json

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

src/components/custom/signup.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
-import { graphql, useStaticQuery, navigate } from 'gatsby'
+import { graphql, navigate, useStaticQuery } from 'gatsby'
 import styled from 'styled-components'
 import Cookies from 'js-cookie'
 import { getLanguage } from '../../common/utility'
-import { getCookiesObject, getCookiesFields, getDataObjFromCookies } from 'common/cookies'
+import { getCookiesFields, getCookiesObject, getDataObjFromCookies } from 'common/cookies'
 import { Flex } from 'components/containers'
 import Login, { TSocialProvider } from 'common/login'
 import validation from 'common/validation'

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/components/elements/dropdown.tsx

@@ -247,7 +247,6 @@ const UnorderedList = styled.ul<DropdownStyledProps>`
     position: absolute;
     left: 0;
     top: 0.8rem;
-    border-radius: 4px;
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
     transition: opacity 0.1s cubic-bezier(0, 0, 0.38, 0.9),
         max-height 0.25s cubic-bezier(0, 0, 0.38, 0.9);
@@ -313,7 +312,7 @@ export const StyledLabel = styled.label<DropdownStyledProps>`
                     color: var(--color-green);
                     transform: translate(-0.6rem, -2.2rem) scale(0.7);
                     @media ${device.tabletL} {
-                        top: 9px;
+                        top: 15px;
                     }
                 `
     }}

src/components/form/input.tsx

@@ -22,7 +22,7 @@ interface ReactInput extends React.ComponentPropsWithoutRef<'input'> {
     ) => void
 }
 
-type InputProps = ReactInput & InputWrapperProps & StyledInputProps & StyledLabelProps
+export type InputProps = ReactInput & InputWrapperProps & StyledInputProps & StyledLabelProps
 
 type InputWrapperProps = {
     border?: string
@@ -53,10 +53,10 @@ type StyledLabelProps = {
     htmlFor?: string
 }
 
-const RelativeWrapper = styled.div`
+export const RelativeWrapper = styled.div`
     position: relative;
 `
-const InputWrapper = styled.div<InputWrapperProps>`
+export const InputWrapper = styled.div<InputWrapperProps>`
     /* prettier-ignore */
     width: 100%;
     border: ${(props) => props.border || '1px solid var(--color-grey-2)'};
@@ -96,7 +96,7 @@ const InputWrapper = styled.div<InputWrapperProps>`
         `}
 `
 
-const StyledError = styled.img`
+export const StyledError = styled.img`
     position: absolute;
     right: 0.8rem;
     top: 1.2rem;
@@ -112,7 +112,7 @@ const StyledError = styled.img`
     }
 `
 
-const StyledInput = styled.input<StyledInputProps>`
+export const StyledInput = styled.input<StyledInputProps>`
     color: ${({ inputColor }) =>
         inputColor ? `var(--color-${inputColor})` : 'var(--color-black)'};
     font-size: var(--text-size-s);
@@ -130,7 +130,7 @@ const StyledInput = styled.input<StyledInputProps>`
 
         & ~ label {
             font-size: 1.75rem;
-            top: 1.95rem;
+            top: 15px;
         }
     }
     @media ${device.mobileL} {
@@ -154,7 +154,7 @@ const StyledInput = styled.input<StyledInputProps>`
             background-color: ${({ background }) =>
                 background ? `var(--color-${background})` : 'var(--color-grey-1)'};
 
-            @media ${device.mobileL} {
+            @media ${device.tablet} {
                 transform: translate(-0.6rem, -20px) scale(0.7);
             }
         }
@@ -179,21 +179,21 @@ const StyledInput = styled.input<StyledInputProps>`
                         background ? `var(--color-${background})` : 'var(--color-grey-1)'};
 
                     @media ${device.tabletL} {
-                        top: 9px;
+                        top: 15px;
                     }
                 }
             `}
     }
 `
 
-const ErrorMessages = styled(Text)`
+export const ErrorMessages = styled(Text)`
     padding: 6px;
     font-size: 1.2rem;
     min-height: 16px;
     color: var(--color-red-1);
 `
 
-const StyledLabel = styled.label<StyledLabelProps>`
+export const StyledLabel = styled.label<StyledLabelProps>`
     color: ${({ label_color }) =>
         label_color ? `var(--color-${label_color})` : 'var(--color-grey)'};
     font-size: var(--text-size-xs);

src/components/layout/layout.tsx

@@ -15,6 +15,7 @@ import BugBountyNav from 'features/components/templates/navigation/bug-bounty-na
 import CareerNav from 'features/components/templates/navigation/career-nav'
 import MarketNav from 'features/components/templates/navigation/market-nav'
 import PpcProvider from 'features/contexts/ppc-campaign/ppc.provider'
+import AffiliateNav from 'features/components/templates/navigation/affiliates-nav'
 import BannerAlert from 'components/custom/_banner-alert'
 import { bannerTypes } from 'common/constants'
 
@@ -80,6 +81,7 @@ const Navs = {
     careers: <CareerNav />,
 
     'payment-methods': <MainNav />,
+    affiliates: <AffiliateNav />,
 }
 
 const Layout = ({

src/features/components/templates/navigation/affiliates-nav/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import Link from 'features/components/atoms/link'
+import Image from 'features/components/atoms/image'
+import NavTemplate from 'features/components/templates/navigation/template'
+import LanguageSwitcher from 'features/components/molecules/language-switcher'
+import { partners_nav_logo } from 'features/components/templates/navigation/payment-agent-nav/payment-agent-nav.module.scss'
+import PartnerNavLogo from 'images/svg/partner-nav-logo.svg'
+
+const AffiliateNav = () => {
+    return (
+        <NavTemplate
+            renderLogo={() => (
+                <Link url={{ type: 'internal', to: '/partners/' }}>
+                    <Image
+                        src={PartnerNavLogo}
+                        alt={'nav affiliates'}
+                        className={partners_nav_logo}
+                        aria-label="deriv logo link"
+                    />
+                </Link>
+            )}
+        >
+            <LanguageSwitcher />
+        </NavTemplate>
+    )
+}
+
+export default AffiliateNav

src/features/components/templates/navigation/payment-agent-nav/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import NavTemplate from '../template'
 import affiliateNavItems from './data'
-import { partners_nav_logo, partners_buttons } from './payment-agent-nav.module.scss'
+import { partners_buttons, partners_nav_logo } from './payment-agent-nav.module.scss'
 import PrimeLogo from 'images/svg/deriv-prime/deriv-prime-logo.svg'
 import PartnerNavLogo from 'images/svg/partner-nav-logo.svg'
 import Image from 'features/components/atoms/image'
@@ -12,6 +12,7 @@ import Link from 'features/components/atoms/link'
 import Flex from 'features/components/atoms/flex-box'
 import { getLocationPathname } from 'common/utility'
 import useScrollToElement from 'features/hooks/use-scroll-to-element'
+import useAffiliateSignupLink from 'features/hooks/ab-testing/use-partners-signup-link'
 import useRegion from 'components/hooks/use-region'
 import { TString } from 'types/generics'
 import { localize } from 'components/localization'
@@ -25,6 +26,8 @@ const PaymentAgentAffiliateNav = ({ is_prime_page = false }: { is_prime_page?: b
     const clickToScrollHandler = useScrollToElement('getintouch')
 
     const { is_eu } = useRegion()
+    const { affiliate_signup_link } = useAffiliateSignupLink()
+
     const texts: contentType = is_eu
         ? {
               login: '_t_Affiliate log in_t_',
@@ -67,15 +70,15 @@ const PaymentAgentAffiliateNav = ({ is_prime_page = false }: { is_prime_page?: b
                 </Button.Primary>
                 <Button.Primary
                     id="dm-nav-affiliate-signup-button"
-                    onClick={() => window.open('https://login.deriv.com/signup.php', '_blank')}
+                    onClick={() => window.open(affiliate_signup_link, '_blank')}
                     visible={'larger-than-tablet'}
                     className={partners_buttons}
                 >
                     <Localize translate_text={texts.sign_up} />
                 </Button.Primary>
             </>
         )
-    }, [path_name])
+    }, [path_name, affiliate_signup_link])
 
     return (
         <NavTemplate

src/features/hooks/ab-testing/use-partners-signup-link/index.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+import { Analytics } from '@deriv/analytics'
+import { getLanguage } from 'common/utility'
+import { affiliate_signup_url } from 'common/constants'
+
+const useAffiliateSignupLink = () => {
+    const [affiliate_signup_link, setAffiliateSignupLink] = useState('')
+
+    useEffect(() => {
+        const partners_signup_ab_test = Analytics?.getFeatureValue(
+            'partners_signup_ab_test',
+            'fallback',
+        )
+        const language = getLanguage()
+
+        const calculated_link =
+            partners_signup_ab_test === true
+                ? `${window.location.origin}${
+                      language !== 'en' ? '/' + language : ''
+                  }/signup-affiliates`
+                : affiliate_signup_url
+
+        setAffiliateSignupLink(calculated_link)
+    }, [])
+
+    return { affiliate_signup_link }
+}
+
+export default useAffiliateSignupLink

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

@@ -1,29 +1,46 @@
 import { useEffect, useMemo } from 'react'
-import useWS from '../../../components/hooks/useWS'
+import useWS from 'components/hooks/useWS'
 
 export type ResidenceType = {
     text: string
     value: string
 }
 
-const formatResidenceList = (residences) => {
+const formatResidenceList = ({
+    residences,
+    restricted,
+}: {
+    residences: any[]
+    restricted: ['Iran', 'North Korea', 'Myanmar (Burma)', 'Syria', 'Cuba']
+}) => {
     if (!residences.length) {
         return []
     }
-    return residences?.map(({ text: display_name, text: name, value: symbol }) => ({
-        name,
-        display_name,
-        symbol,
-    }))
+    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,
+            }
+        })
 }
 
-export const useResidenceList = () => {
+export const useResidenceList = ({
+    restricted_countries,
+}: {
+    restricted_countries?: ['Iran', 'North Korea', 'Myanmar (Burma)', 'Syria', 'Cuba']
+} = {}) => {
     const { send, data } = useWS('residence_list')
-
     useEffect(() => {
         send()
     }, [send])
 
-    const residence_list = useMemo(() => formatResidenceList(data || []), [data])
+    const residence_list = useMemo(
+        () => formatResidenceList({ residences: data || [], restricted: restricted_countries }),
+        [data],
+    )
     return [residence_list]
 }

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]
+}