Aswathy/DPROD-3448/Deriv Academy new Sign Up flow

package.json

@@ -81,7 +81,9 @@
         "use-query-params": "^1.2.3",
         "usehooks-ts": "^2.9.1",
         "webpack": "^5.89.0",
-        "yup": "^1.3.2"
+        "yup": "^1.3.2",
+        "@zxcvbn-ts/core": "^3.0.4",
+        "@zxcvbn-ts/language-common": "^3.0.4"
     },
     "devDependencies": {
         "@commitlint/cli": "^16.3.0",

src/common/login.ts

@@ -2,12 +2,15 @@ import Cookies from 'js-cookie'
 import { isStorageSupported } from './storage'
 import { getCookiesFields, getCookiesObject, getDataLink, getDataObjFromCookies } from './cookies'
 import { getAppId } from './websocket/config'
-import { redirectToTradingPlatform } from './utility'
+import { isBrowser, redirectToTradingPlatform } from './utility'
 import { brand_name, deriv_app_id, oauth_url } from 'common/constants'
 
 export type TSocialProvider = 'google' | 'facebook' | 'apple'
 
 const Login = (() => {
+    const url = isBrowser() && window.location.href
+    const is_academy = isBrowser() && url.includes('academy')
+
     const redirectToLogin = () => {
         if (isStorageSupported(sessionStorage)) {
             window.location.href = loginUrl()
@@ -31,9 +34,17 @@ const Login = (() => {
 
         const sub_url = redirectToTradingPlatform()
 
-        return server_url && /qa/.test(server_url)
-            ? `https://${server_url}/oauth2/authorize?app_id=${getAppId()}&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}`
-            : `${oauth_url}/oauth2/authorize?app_id=${deriv_app_id}&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}`
+        if (is_academy) {
+            if (server_url && /qa/.test(server_url)) {
+                return `https://${server_url}/oauth2/authorize?app_id=37228&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}`
+            }
+            return `${oauth_url}/oauth2/authorize?app_id=37228&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}`
+        } else {
+            if (server_url && /qa/.test(server_url)) {
+                return `https://${server_url}/oauth2/authorize?app_id=${getAppId()}&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}`
+            }
+            return `${oauth_url}/oauth2/authorize?app_id=${deriv_app_id}&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}`
+        }
     }
 
     const initOneAll = (provider: TSocialProvider, utm_content?: string): void => {

src/common/websocket/config.ts

@@ -69,7 +69,8 @@ const isStaging = () => isBrowser() && domain_config.staging.hostname === window
 const isBeta = () => isBrowser() && domain_config.beta.hostname === window.location.hostname
 const isLive = () => isProduction() || isStaging() || isBeta()
 const isLocalHost = () => isBrowser() && domain_config.local.hostname === window.location.hostname
-
+const url = isBrowser() && window.location.href
+const is_academy = isBrowser() && url.includes('academy')
 const getAppId = (): null | number | string => {
     let app_id = null
     const user_app_id = '' // you can insert Application ID of your registered application here
@@ -83,24 +84,28 @@ const getAppId = (): null | number | string => {
 
         const config_app_id = window.localStorage.getItem('config.app_id')
 
-        if (url_app_id) {
-            app_id = url_app_id
-        } else if (config_app_id) {
-            app_id = config_app_id
-        } else if (isStaging()) {
-            window.localStorage.removeItem('config.default_app_id')
-            app_id = domain_config.staging.app_id
-        } else if (isBeta()) {
-            window.localStorage.removeItem('config.default_app_id')
-            app_id = domain_config.beta.app_id
-        } else if (user_app_id.length) {
-            window.localStorage.setItem('config.default_app_id', user_app_id) // it's being used in endpoint chrome extension - please do not remove
-            app_id = user_app_id
-        } else if (isLocalHost()) {
-            app_id = domain_config.local.app_id
+        if (is_academy) {
+            app_id = 37228
         } else {
-            window.localStorage.removeItem('config.default_app_id')
-            app_id = isProduction() ? prod_app_id : domain_config.test.app_id
+            if (url_app_id) {
+                app_id = url_app_id
+            } else if (config_app_id) {
+                app_id = config_app_id
+            } else if (isStaging()) {
+                window.localStorage.removeItem('config.default_app_id')
+                app_id = domain_config.staging.app_id
+            } else if (isBeta()) {
+                window.localStorage.removeItem('config.default_app_id')
+                app_id = domain_config.beta.app_id
+            } else if (user_app_id.length) {
+                window.localStorage.setItem('config.default_app_id', user_app_id) // it's being used in endpoint chrome extension - please do not remove
+                app_id = user_app_id
+            } else if (isLocalHost()) {
+                app_id = domain_config.local.app_id
+            } else {
+                window.localStorage.removeItem('config.default_app_id')
+                app_id = isProduction() ? prod_app_id : domain_config.test.app_id
+            }
         }
     }
     return app_id

src/components/elements/dropdown-search.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 import {
     Arrow,
@@ -41,6 +41,7 @@ const DropdownInput = styled.input<DropdownInputProps>`
     display: flex;
     align-items: center;
     justify-content: flex-start;
+
     ${(props) =>
         props.has_short_name &&
         css`
@@ -78,12 +79,19 @@ const DropdownSearch = ({
     onChange,
     selected_item,
     is_alternate_style,
+    onClearInput,
+    placeholder,
     ...props
 }: DropdownProps) => {
     const [input_value, setInputValue] = useState('')
     const [dropdown_items, setDropdownItems] = useState([...items])
     const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] =
         useDropdown(onChange)
+    const inputRef = useRef(null)
+
+    useEffect(() => {
+        !is_open && inputRef.current.blur()
+    }, [is_open])
 
     // Auto select default value
     useEffect(() => {
@@ -99,6 +107,7 @@ const DropdownSearch = ({
     const handleInputChange = (e) => {
         setInputValue(e.target.value)
         toggleListVisibility(e)
+        onClearInput?.()
     }
 
     const handleSelectItem = (option: SelectedType, handled_error: FormikErrorsType) => {
@@ -139,6 +148,7 @@ const DropdownSearch = ({
                     </StyledLabel>
                     <DropdownInput
                         id="selected_dropdown"
+                        ref={inputRef}
                         tabIndex={0}
                         onClick={toggleListVisibility}
                         onChange={handleInputChange}
@@ -149,7 +159,7 @@ const DropdownSearch = ({
                         value={input_value}
                         is_active={is_open}
                         is_alternate_style={is_alternate_style}
-                        placeholder={label}
+                        placeholder={placeholder}
                     />
                     <Arrow onClick={toggleListVisibility} expanded={is_open} />
                 </Flex>

src/components/elements/dropdown.tsx

@@ -286,17 +286,20 @@ export const StyledLabel = styled.label<DropdownStyledProps>`
     transition: 0.25s ease transform;
     transform: translateZ(0);
     padding: 0 0.8rem;
+    margin-top: 3px;
 
     ${(props) =>
         !props.is_alternate_style &&
         css`
             @media ${device.tabletL} {
                 font-size: 1.65rem;
                 top: 1.4rem;
+                margin-top: 0px;
             }
             @media ${device.mobileL} {
                 font-size: 1.5rem;
                 top: 1.6rem;
+                margin-top: 0px;
             }
         `}
 
@@ -439,8 +442,10 @@ export type DropdownProps = {
     value?: string
     disabled?: boolean
     autocomplete?: string
+    placeholder?: string
     mb?: string
     is_alternate_style?: boolean
+    onClearInput?: () => void
 } & Pick<ItemsType, 'contractSize'>
 
 const Dropdown = ({

src/features/components/templates/navigation/academy-nav/academy-nav.module.scss

@@ -0,0 +1,11 @@
+@use 'features/styles/theme/theme-mixins' as *;
+
+.static_nav_logo {
+    inline-size: 19.9rem;
+    block-size: 3.19rem;
+
+    @include breakpoints(tablet) {
+        inline-size: 19.9rem;
+        block-size: 3.19rem;
+    }
+}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import NavTemplate from '../template'
+import { static_nav_logo } from './academy-nav.module.scss'
+import LogoImage from 'images/common/academy.svg'
+import Link from 'features/components/atoms/link'
+import Image from 'features/components/atoms/image'
+
+const AcademyNav = () => {
+    return (
+        <NavTemplate
+            has_centered_items
+            has_centered_logo
+            renderLogo={() => (
+                <Link url={{ type: 'internal', to: '/' }}>
+                    <Image src={LogoImage} className={static_nav_logo} />
+                </Link>
+            )}
+        />
+    )
+}
+
+export default AcademyNav

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,6 +43,7 @@ export const useResidenceList = ({
     restricted_countries?: ['Iran', 'North Korea', 'Myanmar (Burma)', 'Syria', 'Cuba']
 } = {}) => {
     const { send, data } = useWS('residence_list')
+
     useEffect(() => {
         send()
     }, [send])

src/features/pages/academy-complete/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import Layout from 'features/components/templates/layout'
+import { nav_logo } from './signup-academy-complete.module.scss'
+import PopUpMenu from './pop-up-menu'
+import NavTemplate from 'features/components/templates/navigation/template'
+import LogoImage from 'images/common/deriv_academy.svg'
+import Link from 'features/components/atoms/link'
+import Image from 'features/components/atoms/image'
+
+const SignupCompleteAcademy = () => {
+    return (
+        <Layout>
+            <NavTemplate
+                has_centered_items
+                has_centered_logo
+                renderLogo={() => (
+                    <Link url={{ type: 'internal', to: '/' }}>
+                        <Image src={LogoImage} className={nav_logo} />
+                    </Link>
+                )}
+            />
+            <PopUpMenu />
+        </Layout>
+    )
+}
+export default SignupCompleteAcademy

src/features/pages/academy-complete/password/Input/HelperMessage.scss

@@ -0,0 +1,24 @@
+$inactive_color: #999999;
+$success_color: #4bb4b3;
+$warning_color: #ffad3a;
+$error_field: #ec3f3f;
+
+.deriv-helper-message {
+    font-size: 12px;
+    line-height: 1;
+    font-style: normal;
+    font-weight: 400;
+    color: $inactive_color;
+    &--general {
+        color: $inactive_color;
+    }
+    &--success {
+        color: $success_color;
+    }
+    &--warning {
+        color: $warning_color;
+    }
+    &--error {
+        color: $error_field;
+    }
+}

src/features/pages/academy-complete/password/Input/HelperMessage.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react'
+import clsx from 'clsx'
+import { InputVariants } from '.'
+import './HelperMessage.scss'
+
+export interface HelperMessageProps {
+    error?: boolean
+    message?: ReactNode
+    variant?: InputVariants
+    disabled?: boolean
+}
+type TMessageVariant = Exclude<InputVariants, 'disabled'>
+const MessageVariant: Record<TMessageVariant, string> = {
+    general: 'deriv-helper-message--general',
+    success: 'deriv-helper-message--success',
+    warning: 'deriv-helper-message--warning',
+    error: 'deriv-helper-message--error',
+}
+
+const HelperMessage = ({ error, message, variant = 'general', disabled }: HelperMessageProps) => (
+    <p
+        className={clsx('deriv-helper-message', {
+            [MessageVariant['general']]: disabled,
+            [MessageVariant[error ? 'error' : (variant as TMessageVariant)]]: !disabled,
+        })}
+    >
+        {message}
+    </p>
+)
+
+export default HelperMessage