From ea3664a6662a146b4fcd96222eef4c5acbf0ee9a Mon Sep 17 00:00:00 2001 From: James Kenneth Guidaven Date: Mon, 9 Dec 2024 17:19:08 +0800 Subject: [PATCH] Additional improvement and bug fixes. --- .../hero-section/index.tsx | 6 +- .../hooks/use-compact-on-scroll.ts | 4 +- .../hosting-content/index.tsx | 65 ++++++++++--------- .../hosting-content/style.scss | 27 +------- .../marketplace/hosting-overview-v3/index.tsx | 5 +- 5 files changed, 43 insertions(+), 64 deletions(-) diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/index.tsx index e6301e444f53d..073209a47064b 100644 --- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/index.tsx +++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/index.tsx @@ -104,11 +104,7 @@ export function HeroSection( /> - + ); } diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts index a606dc6fbfdea..264c4e4970132 100644 --- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts +++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts @@ -1,7 +1,7 @@ import { useCallback, useRef, useState } from 'react'; -const SCROLL_THRESHOLD_PERCENTAGE = 0.5; -const SCROLL_THRESHOLD_BUFFER = 15; +const SCROLL_THRESHOLD_PERCENTAGE = 0.2; +const SCROLL_THRESHOLD_BUFFER = 5; export default function useCompactOnScroll() { const [ isCompact, setIsCompact ] = useState( false ); diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/index.tsx index d0411c47be80c..ca14074845e13 100644 --- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/index.tsx +++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/index.tsx @@ -1,8 +1,5 @@ import { useTranslate } from 'i18n-calypso'; -import { useContext } from 'react'; -import PressableLogo from 'calypso/assets/images/a8c-for-agencies/pressable-logo.svg'; -import VIPLogo from 'calypso/assets/images/a8c-for-agencies/vip-full-logo.svg'; -import WPCOMLogo from 'calypso/assets/images/a8c-for-agencies/wpcom-logo.svg'; +import { useContext, useMemo } from 'react'; import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types'; import { SectionProps } from '..'; import { MarketplaceTypeContext } from '../../context'; @@ -23,36 +20,40 @@ export const HostingContent = ( { section, onAddToCart }: Props ) => { const isReferMode = marketplaceType === 'referral'; - let content; - let logo; - let title; - if ( section === 'wpcom' ) { - content = ; - logo = WPCOM; - title = translate( - 'Optimized and hassle-free hosting for business websites, local merchants, and small online retailers.' - ); - } - if ( section === 'pressable' ) { - content = onAddToCart( product, 1 ) } />; - logo = Pressable; - title = translate( - 'Premier Agency hosting best for large-scale businesses and major eCommerce sites.' - ); - } - if ( section === 'vip' ) { - content = ; - logo = VIP; - title = translate( - 'Deliver unmatched performance with the highest security standards on our enterprise content platform.' - ); - } + const { content, title } = useMemo( () => { + if ( section === 'wpcom' ) { + return { + content: , + title: isReferMode + ? translate( 'Refer a WordPress.com site to your client' ) + : translate( 'Purchase sites individually or in bulk, as you need them' ), + }; + } + if ( section === 'pressable' ) { + return { + content: onAddToCart( product, 1 ) } />, + title: isReferMode + ? translate( 'Refer a variety of plans, or single high-resource sites to your clients' ) + : translate( + 'Choose from a variety of plans, or purchase single high-resource sites as add-ons' + ), + }; + } + if ( section === 'vip' ) { + return { + content: , + title: translate( + 'Deliver unmatched performance with the highest security standards on our enterprise platform' + ), + }; + } + + return { content: null, title: '' }; + }, [ isReferMode, onAddToCart, section, translate ] ); + return (
-
-
{ logo }
-
{ title }
-
+

{ title }

{ content }
); diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/style.scss b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/style.scss index e1ee2c179d149..d6870b5cba76c 100644 --- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/style.scss +++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/style.scss @@ -8,28 +8,7 @@ .hosting-v3__content-header { - display: none; - - @include break-medium { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - gap: 16px; - padding: 0 40px 32px; - - .hosting-v3__content-header-title { - @include a4a-font-body-md; - } - - .hosting-v3__content-logo { - .wordpress-vip-logo { - display: inline-flex; - } - - img { - height: 32px; - } - } - } + @include a4a-font-heading-lg; + text-align: center; + margin-block-end: 32px; } diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx index 6cf162874d303..380f31c5733a0 100644 --- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx +++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx @@ -21,6 +21,7 @@ import { useDispatch } from 'calypso/state'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types'; import ReferralToggle from '../common/referral-toggle'; +import withMarketplaceType from '../hoc/with-marketplace-type'; import useShoppingCart from '../hooks/use-shopping-cart'; import ShoppingCart from '../shopping-cart'; import HeroSection from './hero-section'; @@ -33,7 +34,7 @@ export type SectionProps = { section: 'wpcom' | 'pressable' | 'vip'; }; -export default function HostingOverviewV3( { section }: SectionProps ) { +function HostingOverviewV3( { section }: SectionProps ) { const translate = useTranslate(); const dispatch = useDispatch(); @@ -133,3 +134,5 @@ export default function HostingOverviewV3( { section }: SectionProps ) { ); } + +export default withMarketplaceType( HostingOverviewV3 );