From d56dcad096066a74ab7b284fbec9375a201bf09d Mon Sep 17 00:00:00 2001 From: Hasan Mobarak <126637868+hasan-deriv@users.noreply.github.com> Date: Tue, 16 Jan 2024 15:05:59 +0800 Subject: [PATCH] Hasan/2170/eutestlink hero (#6472) * chore: added region loading condiition * chore: added region loading condition to text * chore: added region loading condition to image * chore: removed console * chore: added is eu domain condition to hero content * auto-pull-translation * chore: updated is_eu condition * chore: updated is_eu condition * chore: hero eu testing * auto-pull-translation * chore: added browser logic to hero imagge * chore: added browser logic to hero imagge * auto-pull-translation * chore: added browser logic to hero image * chore: added browser logic to hero image * chore: added browser logic to hero image * chore: cleanup * chore: cleanup --- package-lock.json | 24 ++++---- package.json | 6 +- src/features/pages/home/hero/award-images.tsx | 6 ++ src/features/pages/home/hero/description.tsx | 22 +++++++ src/features/pages/home/hero/hero-image.tsx | 33 +++++++++++ src/features/pages/home/hero/index.tsx | 59 +++---------------- 6 files changed, 84 insertions(+), 66 deletions(-) create mode 100644 src/features/pages/home/hero/description.tsx create mode 100644 src/features/pages/home/hero/hero-image.tsx diff --git a/package-lock.json b/package-lock.json index f563283b4aa..b869553b8b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,10 +11,10 @@ "dependencies": { "@artsy/fresnel": "^6.2.1", "@builder.io/partytown": "^0.8.1", - "@deriv-com/blocks": "^0.70.0", - "@deriv-com/components": "^0.41.0", + "@deriv-com/blocks": "^0.74.0", + "@deriv-com/components": "^0.44.0", "@deriv-com/hooks": "^0.10.0", - "@deriv-com/providers": "^0.10.0", + "@deriv-com/providers": "^0.11.0", "@deriv/analytics": "^1.4.4", "@deriv/deriv-api": "^1.0.13", "@deriv/quill-design": "^1.3.2", @@ -3009,14 +3009,14 @@ } }, "node_modules/@deriv-com/blocks": { - "version": "0.70.0", - "resolved": "https://npm.pkg.github.com/download/@deriv-com/blocks/0.70.0/2e86661ea6ee95f14c5b3b84d5bf6bb3294d8625", - "integrity": "sha512-vkwAH78zFyEYr77STPRLItiRwM6bkZ1wIpCNBFxfukbJ51AFAgkRmk4EAOYoZj4qdbXxpUFvVWxhxAyu/v28ew==" + "version": "0.74.0", + "resolved": "https://npm.pkg.github.com/download/@deriv-com/blocks/0.74.0/7eee3639feec00750cc137da4413d9863024ae4a", + "integrity": "sha512-joHKYATcsqJWwU9KFt3VvRgsQ2xrslZ0g97uvroJR3rlcsiPK/8k8/8M4TlhaYWm/XZCwJfdsmOVnhE+IT6fGw==" }, "node_modules/@deriv-com/components": { - "version": "0.41.0", - "resolved": "https://npm.pkg.github.com/download/@deriv-com/components/0.41.0/4b8b25f8cc65dab30f9a374587d593d3541366b0", - "integrity": "sha512-QrmcnrkrUsqZV81UP5mGhs7UuIu+mmcfGo+GM/nQXnqJWS5NPy0brAv9/NlyNGokyCE+1ZZM2PfBtrLWp1bLSg==" + "version": "0.44.0", + "resolved": "https://npm.pkg.github.com/download/@deriv-com/components/0.44.0/22d00fcc8215f965ea30701108bedd13adfdd3a5", + "integrity": "sha512-GBLpRwsn45FFVi157lQOkkqllyuZfB5NlPuuhhAv6nLhaJX5tf1l2SBc4PmQPSbp5urjnjojUE9rSkE8GNosQA==" }, "node_modules/@deriv-com/hooks": { "version": "0.10.0", @@ -3024,9 +3024,9 @@ "integrity": "sha512-8BpA5OPjaFx55LDp6BFhqW6gBsP63X7E4GstdD1HAh8h9Dy1tq6nztJC0bSY9O9tjAZ0/hFrshGALv2L9ak6Sw==" }, "node_modules/@deriv-com/providers": { - "version": "0.10.0", - "resolved": "https://npm.pkg.github.com/download/@deriv-com/providers/0.10.0/8e77bc95f5058c59ba665e58585091f270e4d94b", - "integrity": "sha512-FE40EqmS6cmi4JWQurThE/mQDZesg6iBDRfTTwE5YKnc4w+2EqsO8Eigm4vO79elV3iUkvLLeU5Eawv66uwzqQ==" + "version": "0.11.0", + "resolved": "https://npm.pkg.github.com/download/@deriv-com/providers/0.11.0/37be3fb0783e2b1320658830857e373419273b0c", + "integrity": "sha512-DLTNdZniq18Is9nFE7l1zuGB+Hpm5CLY/8ApwMYfa/k/H4iDur37pUeOMTZYbaJO17dqZfdjqEXoSTpiSAIM7Q==" }, "node_modules/@deriv/analytics": { "version": "1.4.8", diff --git a/package.json b/package.json index 873e67c0a2c..ece2367a3f7 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,10 @@ "dependencies": { "@artsy/fresnel": "^6.2.1", "@builder.io/partytown": "^0.8.1", - "@deriv-com/blocks": "^0.70.0", - "@deriv-com/components": "^0.41.0", + "@deriv-com/blocks": "^0.74.0", + "@deriv-com/components": "^0.44.0", "@deriv-com/hooks": "^0.10.0", - "@deriv-com/providers": "^0.10.0", + "@deriv-com/providers": "^0.11.0", "@deriv/analytics": "^1.4.4", "@deriv/deriv-api": "^1.0.13", "@deriv/quill-design": "^1.3.2", diff --git a/src/features/pages/home/hero/award-images.tsx b/src/features/pages/home/hero/award-images.tsx index 3e94dd240ce..5b2790b416b 100644 --- a/src/features/pages/home/hero/award-images.tsx +++ b/src/features/pages/home/hero/award-images.tsx @@ -3,8 +3,14 @@ import clsx from 'clsx' import { StaticImage } from 'gatsby-plugin-image' import { hero_content_award_img } from './styles.module.scss' import { localize } from 'components/localization' +import useRegion from 'components/hooks/use-region' +import { isEuDomain } from 'common/utility' const HeroAwardImages = () => { + const { is_eu } = useRegion() + + if (isEuDomain() || is_eu) return null + return (
{ + const { is_eu } = useRegion() + return isEuDomain() || is_eu ? ( + + + + ) : ( + + + + ) +} + +export default Description diff --git a/src/features/pages/home/hero/hero-image.tsx b/src/features/pages/home/hero/hero-image.tsx new file mode 100644 index 00000000000..9a2a0e9878e --- /dev/null +++ b/src/features/pages/home/hero/hero-image.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { StaticImage } from 'gatsby-plugin-image' +import clsx from 'clsx' +import { hero_img_eu, hero_img } from './styles.module.scss' +import { isEuDomain } from 'common/utility' +import useRegion from 'components/hooks/use-region' + +const HeroImage = () => { + const { is_eu } = useRegion() + return isEuDomain() || is_eu ? ( +
+ +
+ ) : ( +
+ +
+ ) +} + +export default HeroImage diff --git a/src/features/pages/home/hero/index.tsx b/src/features/pages/home/hero/index.tsx index 8bcabaa8b17..286a7680f4e 100644 --- a/src/features/pages/home/hero/index.tsx +++ b/src/features/pages/home/hero/index.tsx @@ -1,22 +1,21 @@ import React, { ReactNode } from 'react' -import { FluidContainer, Heading, Section, Text } from '@deriv/quill-design' +import { FluidContainer, Heading, Section } from '@deriv/quill-design' import clsx from 'clsx' import { StaticImage } from 'gatsby-plugin-image' import { hero_container, hero_content, hero_content_gradient, - hero_img, - hero_img_eu, - hero_content_text, hero_content_btn, } from './styles.module.scss' import HeroAwardImages from './award-images' +import HeroImage from './hero-image' import FloatingCta from './floating-cta' +import Description from './description' import { Localize } from 'components/localization' -import useRegion from 'components/hooks/use-region' import TradersHubCtaButton from 'features/components/molecules/traders-hub-cta-button' import { useFloatingCtaContext } from 'features/contexts/floating-cta/cta.provider' +import { usePageLoaded } from 'components/hooks/use-page-loaded' export interface HomeHeroProps { children?: ReactNode @@ -24,7 +23,7 @@ export interface HomeHeroProps { } const HomeHero: React.FC = () => { - const { is_eu } = useRegion() + const [is_mounted] = usePageLoaded() const { ctaBottom, visibilityPercentage, entryRef } = useFloatingCtaContext() return ( @@ -45,27 +44,7 @@ const HomeHero: React.FC = () => { - {is_eu ? ( - - - - ) : ( - - - - )} + {is_mounted && } = () => { ref={entryRef} />
- {!is_eu && } - {is_eu ? ( -
- -
- ) : ( -
- -
- )} + {is_mounted && } + {is_mounted && }