[CRO] MyAffiliate signup form

package.json

@@ -6,7 +6,7 @@
     "dependencies": {
         "@artsy/fresnel": "^6.1.0",
         "@builder.io/partytown": "^0.8.1",
-        "@deriv/analytics": "^1.3.4",
+        "@deriv/analytics": "^1.4.4",
         "@deriv/deriv-api": "^1.0.11",
         "@hookform/resolvers": "^3.0.1",
         "@livechat/customer-sdk": "^3.1.0",
@@ -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'
 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 = ({