This repository has been archived by the owner on Sep 26, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 181
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CRO] Amir/CRO-514/signup experimental page (#7635)
* feat: signup experimental page * chore: install latest analytics package and move new signup page to signup v2 route * chore: remove console * fix: vh on bullet content * fix: remove antiflicker as it is causing blank screen * fix: url set issue * fix: content issue and cta redirect * chore: add url attribute and analytics package update * chore: update lock
- Loading branch information
1 parent
7e2e0a1
commit f47f374
Showing
19 changed files
with
933 additions
and
155 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
...eme-deriv/src/features/components/templates/navigation/main-nav-experimental/nav.logo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
themes/gatsby-theme-deriv/src/features/pages/signup-v2/background-gradient/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
118 changes: 118 additions & 0 deletions
118
...es/gatsby-theme-deriv/src/features/pages/signup-v2/form-container/form-social-buttons.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
48 changes: 48 additions & 0 deletions
48
themes/gatsby-theme-deriv/src/features/pages/signup-v2/form-container/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
Oops, something went wrong.