[CRO] Amir/CRO-514/signup experimental page

themes/gatsby-theme-deriv/gatsby-browser.js

@@ -2,6 +2,7 @@ import React from 'react'
 import Cookies from 'js-cookie'
 import { isMobile } from 'react-device-detect'
 import { Analytics } from '@deriv-com/analytics'
+import { navigate } from 'gatsby'
 import { WrapPagesWithLocaleContext } from './src/components/localization'
 import { isProduction } from './src/common/websocket/config'
 import { LocalStore } from './src/common/storage'
@@ -81,8 +82,8 @@ export const onInitialClientRender = () => {
     }
 }
 
-export const onClientEntry = () => {
-    // @deriv/analytics
+export const onClientEntry = async () => {
+    // @deriv-com/analytics
     Analytics?.initialise({
         growthbookKey: process.env.GATSBY_GROWTHBOOK_CLIENT_KEY,
         growthbookDecryptionKey: process.env.GATSBY_GROWTHBOOK_DECRYPTION_KEY,
@@ -91,7 +92,14 @@ export const onClientEntry = () => {
         )
             ? process.env.GATSBY_RUDDERSTACK_STAGING_KEY
             : process.env.GATSBY_RUDDERSTACK_PRODUCTION_KEY,
+        growthbookOptions: {
+            navigate: (url) => navigate(url, { replace: true }),
+            antiFlicker: false,
+            navigateDelay: 0,
+        },
     })
+    await Analytics?.getInstances()?.ab?.GrowthBook?.loadFeatures()
+
     const utm_data = JSON?.parse(
         Cookies?.get('utm_data') ||
             `{"utm_source":"common","utm_medium":"common","utm_campaign":"common"}`,
@@ -105,6 +113,7 @@ export const onClientEntry = () => {
         utm_medium: utm_data?.['utm_medium'],
         utm_campaign: utm_data?.['utm_campaign'],
         is_authorised: !!Cookies?.get('client_information'),
+        url: window.location.href
     })
     //datadog
     const dd_options = {
@@ -145,8 +154,8 @@ export const onRouteUpdate = ({ location }) => {
     Analytics.pageView(location.pathname, 'Deriv.com')
 
     checkDomain()
-    // can't be resolved by package function due the gatsby architecture
-    window?._growthbook?.GrowthBook?.setURL(window.location.href)
+
+    Analytics?.getInstances()?.ab?.GrowthBook?.setURL(window.location.href)
 
     const dataLayer = window.dataLayer
     const domain = getDomain()

themes/gatsby-theme-deriv/package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@artsy/fresnel": "^6.2.1",
     "@builder.io/partytown": "^0.8.1",
-    "@deriv-com/analytics": "^1.4.10",
+    "@deriv-com/analytics": "^1.5.0",
     "@deriv-com/blocks": "^0.118.0",
     "@deriv-com/components": "^0.59.0",
     "@deriv-com/hooks": "^0.11.0",

themes/gatsby-theme-deriv/src/components/hooks/use-handle-signup.tsx

@@ -1,5 +1,6 @@
 import { navigate, withPrefix } from 'gatsby'
 import { Analytics } from '@deriv-com/analytics'
+import useGrowthbookFeatureFlag from './use-growthbook-feature-flag'
 import { getLanguage } from 'common/utility'
 import useRegion from 'components/hooks/use-region'
 
@@ -8,13 +9,23 @@ const useHandleSignup = (_is_ppc = false, is_tracked = false) => {
     let current_language = getLanguage() + '/'
     const signUpPath = withPrefix('/')
 
+    const growthbook_feature_flag_experimental_signup_redirect = useGrowthbookFeatureFlag({
+        featureFlag: 'experimental-signup-redirect',
+    })
+
     if (getLanguage() === 'en') current_language = ''
 
     return () => {
         !is_tracked && Analytics?.trackEvent('deriv_com_homepage_cta', { action: 'click' })
         if (is_region_loading) return
-        else if (_is_ppc) navigate(`${signUpPath}${current_language}landing/signup/`)
-        else navigate(`${signUpPath}${current_language}signup/`)
+        else if (_is_ppc)
+            growthbook_feature_flag_experimental_signup_redirect
+                ? navigate(`${signUpPath}${current_language}signup-v2/`)
+                : navigate(`${signUpPath}${current_language}landing/signup/`)
+        else
+            growthbook_feature_flag_experimental_signup_redirect
+                ? navigate(`${signUpPath}${current_language}signup-v2/`)
+                : navigate(`${signUpPath}${current_language}signup/`)
     }
 }
 

themes/gatsby-theme-deriv/src/features/components/molecules/layout-overlay/index.tsx

@@ -15,7 +15,11 @@ const WarningBanner = loadable(() =>
     pMinDelay(import('features/components/quill/layout-overlay/warnings-alerts'), 5000),
 )
 
-const LayoutOverlay = () => {
+const defaultProps = {
+    hide_live_chat: false,
+}
+
+const LayoutOverlay = ({ hide_live_chat }: { hide_live_chat: boolean } = defaultProps) => {
     const cookie = useCookieBanner()
     const is_rtl = useIsRtl()
     const isLiveChat = useThirdPartyFlags('chat.live_chat')
@@ -52,10 +56,12 @@ const LayoutOverlay = () => {
                     <WarningBanner trigger_warning_popuop={trigger_warning_popuop} />
                 </Flex.Box>
 
-                <Flex.Box direction="col">
-                    {isLiveChat && <LiveChatButton />}
-                    {!is_deriv_prime && isWhatsappChat && <WhatsappButton />}
-                </Flex.Box>
+                {!hide_live_chat && (
+                    <Flex.Box direction="col">
+                        {isLiveChat && <LiveChatButton />}
+                        {!is_deriv_prime && isWhatsappChat && <WhatsappButton />}
+                    </Flex.Box>
+                )}
             </Flex.Box>
         </Flex.Box>
     )

themes/gatsby-theme-deriv/src/features/components/templates/layout/index.tsx

@@ -20,6 +20,7 @@ interface LayoutProps {
     is_ppc?: boolean
     is_ppc_redirect?: boolean
     hide_layout_overlay?: boolean
+    hide_live_chat?: boolean
     children: ReactNode
     region: BuildVariantContextType['region']
 }
@@ -35,6 +36,7 @@ const Layout = ({
     is_ppc_redirect = false,
     hide_layout_overlay = false,
     region = 'row',
+    hide_live_chat = false,
 }: LayoutProps) => {
     const { has_platform } = usePlatformQueryParam()
 
@@ -73,10 +75,10 @@ const Layout = ({
                         onLangSelect={onLanguageChange}
                         activeLanguage={activeLang}
                     >
-                        <WarningBanner/>
+                        <WarningBanner />
                         <main className={main_wrapper}>{children}</main>
                         <BrowserUpdateAlert />
-                        {!hide_layout_overlay && <LayoutOverlay />}
+                        {!hide_layout_overlay && <LayoutOverlay hide_live_chat={hide_live_chat} />}
                     </LanguageProvider>
                 </PpcProvider>
             </SharedLinkProvider>

themes/gatsby-theme-deriv/src/features/components/templates/navigation/main-nav-experimental/nav.logo.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { CustomLink } from '@deriv-com/components'
+// eslint-disable-next-line import/no-unresolved
+import { BrandDerivWordmarkWhiteIcon } from '@deriv/quill-icons/Logo'
+
+const MainNavigationLogo = () => {
+    return (
+        <CustomLink href={'/'} data-cy="deriv-logo" aria-label="deriv logo label">
+            <BrandDerivWordmarkWhiteIcon width={73} height={24} />
+        </CustomLink>
+    )
+}
+
+export default MainNavigationLogo

themes/gatsby-theme-deriv/src/features/hooks/use-signup-form/index.tsx

@@ -42,7 +42,10 @@ const schema = yup.object({
 type FormData = yup.InferType<typeof schema>
 
 type TSignupFormOptions = {
-    form_name?: 'default_diel_deriv' | 'virtual_signup_homepage_embedded'
+    form_name?:
+        | 'default_diel_deriv'
+        | 'virtual_signup_homepage_embedded'
+        | 'virtual_signup_web_mobile_exp003'
 }
 
 const useSignupForm = (options?: TSignupFormOptions) => {

themes/gatsby-theme-deriv/src/features/pages/signup-v2/background-gradient/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { signup_left_gradient, signup_bottom_gradient } from '../signup.module.scss'
+import { Box } from 'components/containers'
+
+const BackgroundGradient = () => (
+    <>
+        <Box className={signup_left_gradient} />
+        <Box className={signup_bottom_gradient} />
+    </>
+)
+
+export default BackgroundGradient

themes/gatsby-theme-deriv/src/features/pages/signup-v2/form-container/form-social-buttons.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import { Analytics } from '@deriv-com/analytics'
+import {
+    SocialAppleWhiteIcon,
+    SocialFacebookBrandIcon,
+    SocialGoogleBrandIcon,
+} from '@deriv/quill-icons'
+import { Button } from '@deriv/quill-design'
+import { signup_apple_btn, signup_fb_btn, signup_login_redirect } from '../signup.module.scss'
+import Login from 'common/login'
+import Typography from 'features/components/atoms/typography'
+import { Localize } from 'components/localization'
+import { isBrowser } from 'common/utility'
+import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
+
+const FormSocialButtons = () => {
+    const analyticsData: Parameters<typeof Analytics.trackEvent>[1] = {
+        action: 'started',
+        form_source: isBrowser() && window.location.hostname,
+        form_name: 'virtual_signup_web_mobile_exp003',
+    }
+    const google_signup = useThirdPartyFlags('google_signup')
+    const facebook_signup = useThirdPartyFlags('facebook_signup')
+    const apple_signup = useThirdPartyFlags('apple_signup')
+
+    return (
+        <>
+            {google_signup && (
+                <Button
+                    size="lg"
+                    variant="secondary"
+                    colorStyle="white"
+                    icon={SocialGoogleBrandIcon}
+                    fullWidth={true}
+                    iconPosition="start"
+                    id="dm-signup-google"
+                    // className={signup_fb_btn}
+                    onClick={() => {
+                        Analytics?.trackEvent('ce_virtual_signup_form', {
+                            signup_provider: 'google',
+                            ...analyticsData,
+                        })
+                        Login.initOneAll('google')
+                    }}
+                >
+                    <Localize translate_text={'_t_Google_t_'} />
+                </Button>
+            )}
+            {facebook_signup && (
+                <Button
+                    size="lg"
+                    variant="secondary"
+                    colorStyle="white"
+                    icon={SocialFacebookBrandIcon}
+                    fullWidth={true}
+                    iconPosition="start"
+                    className={signup_fb_btn}
+                    id="dm-signup-facebook"
+                    onClick={() => {
+                        Analytics?.trackEvent('ce_virtual_signup_form', {
+                            signup_provider: 'facebook',
+                            ...analyticsData,
+                        })
+                        Login.initOneAll('facebook')
+                    }}
+                >
+                    <Localize translate_text={'_t_Facebook_t_'} />
+                </Button>
+            )}
+            {apple_signup && (
+                <Button
+                    size="lg"
+                    variant="secondary"
+                    colorStyle="white"
+                    icon={SocialAppleWhiteIcon}
+                    fullWidth={true}
+                    iconPosition="start"
+                    className={signup_apple_btn}
+                    id="dm-signup-apple"
+                    onClick={() => {
+                        Analytics?.trackEvent('ce_virtual_signup_form', {
+                            signup_provider: 'apple',
+                            ...analyticsData,
+                        })
+                        Login.initOneAll('apple')
+                    }}
+                >
+                    <Localize translate_text={'_t_Apple_t_'} />
+                </Button>
+            )}
+            <Typography.Paragraph mt="2x" textcolor="white" align="center">
+                <Localize
+                    translate_text="_t_Already have an account? <0>Log in</0>_t_"
+                    components={[
+                        <Typography.Paragraph
+                            as="span"
+                            textcolor="white"
+                            key={0}
+                            weight='bold'
+                            className={signup_login_redirect}
+                            onClick={(event) => {
+                                event.preventDefault()
+                                Analytics?.trackEvent('ce_virtual_signup_form', {
+                                    action: 'go_to_login',
+                                    form_source: isBrowser() && window.location.hostname,
+                                    form_name: 'virtual_signup_web_mobile_exp003',
+                                })
+                                Login.redirectToLogin()
+                            }}
+                        />,
+                    ]}
+                />
+            </Typography.Paragraph>
+        </>
+    )
+}
+
+export default FormSocialButtons

themes/gatsby-theme-deriv/src/features/pages/signup-v2/form-container/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { LabelPairedXmarkLgBoldIcon } from '@deriv/quill-icons'
+import { signup_form_container, sign_up_header, signup_form_layout } from '../signup.module.scss'
+import FormSocialButtons from './form-social-buttons'
+import SignUpPageForm from './signup-page-form'
+import Flex from 'features/components/atoms/flex-box'
+import Typography from 'features/components/atoms/typography'
+import { Localize } from 'components/localization'
+
+const SignUpFormContainer = ({ onModalClose }: { onModalClose: () => void }) => {
+    return (
+        <Flex.Box
+            basis="full"
+            padding="5x"
+            pl="8x"
+            pr="8x"
+            radius="4x"
+            direction="col"
+            gap="8x"
+            md={{
+                basis: '6-12',
+                padding: '20x',
+            }}
+            className={signup_form_container}
+        >
+            <Flex.Box justify="between" pr="5x" align="center">
+                <Typography.Heading size="xxl" textcolor="white" className={sign_up_header}>
+                    <Localize translate_text="_t_Sign Up_t_" />
+                </Typography.Heading>
+                <LabelPairedXmarkLgBoldIcon onClick={onModalClose} fill="white" />
+            </Flex.Box>
+
+            <Flex.Box className={signup_form_layout} direction="col" pb="6x" gap="8x">
+                <SignUpPageForm />
+                <Flex.Box justify="center" align="center">
+                    <Flex.Item grow="1">
+                        <Typography.Paragraph align="center" textcolor="white">
+                            <Localize translate_text="_t_Or sign up with_t_" />
+                        </Typography.Paragraph>
+                    </Flex.Item>
+                </Flex.Box>
+                <FormSocialButtons />
+            </Flex.Box>
+        </Flex.Box>
+    )
+}
+
+export default SignUpFormContainer