From 406870bb95e037d05e62213b625d62533f289c61 Mon Sep 17 00:00:00 2001 From: James Kenneth Guidaven Date: Wed, 4 Dec 2024 21:03:40 +0800 Subject: [PATCH 1/2] Add 'a4a-hosting-page-redesign-v3' feature flag. --- config/a8c-for-agencies-development.json | 1 + config/a8c-for-agencies-horizon.json | 1 + config/a8c-for-agencies-production.json | 1 + config/a8c-for-agencies-stage.json | 1 + 4 files changed, 4 insertions(+) diff --git a/config/a8c-for-agencies-development.json b/config/a8c-for-agencies-development.json index bb3c7ed55a51c..1fb50f7940048 100644 --- a/config/a8c-for-agencies-development.json +++ b/config/a8c-for-agencies-development.json @@ -41,6 +41,7 @@ "a4a-automated-referrals": true, "a4a-partner-directory": false, "a4a-hosting-page-redesign": true, + "a4a-hosting-page-redesign-v3": true, "a4a-dev-sites": true, "a4a-migrations-page-v2": true, "a8c-for-agencies-agency-tier": true, diff --git a/config/a8c-for-agencies-horizon.json b/config/a8c-for-agencies-horizon.json index 491e8499ed956..946b2e7e75dcc 100644 --- a/config/a8c-for-agencies-horizon.json +++ b/config/a8c-for-agencies-horizon.json @@ -34,6 +34,7 @@ "a4a-automated-referrals": true, "a4a-partner-directory": false, "a4a-hosting-page-redesign": true, + "a4a-hosting-page-redesign-v3": true, "a4a-dev-sites": true, "a4a-migrations-page-v2": true, "a8c-for-agencies-agency-tier": true, diff --git a/config/a8c-for-agencies-production.json b/config/a8c-for-agencies-production.json index 65d04dfe8b662..1f7efa1cd34bf 100644 --- a/config/a8c-for-agencies-production.json +++ b/config/a8c-for-agencies-production.json @@ -34,6 +34,7 @@ "a4a-automated-referrals": true, "a4a-partner-directory": false, "a4a-hosting-page-redesign": true, + "a4a-hosting-page-redesign-v3": false, "a4a-dev-sites": true, "a4a-migrations-page-v2": true, "a8c-for-agencies-agency-tier": true, diff --git a/config/a8c-for-agencies-stage.json b/config/a8c-for-agencies-stage.json index bc5cb86929b95..359b34d62e574 100644 --- a/config/a8c-for-agencies-stage.json +++ b/config/a8c-for-agencies-stage.json @@ -36,6 +36,7 @@ "a4a-automated-referrals": true, "a4a-partner-directory": false, "a4a-hosting-page-redesign": true, + "a4a-hosting-page-redesign-v3": false, "a4a-dev-sites": true, "a4a-migrations-page-v2": true, "a8c-for-agencies-agency-tier": true, From c04f1da9e7cac59d49c7fb2a16dbb4572f491cb1 Mon Sep 17 00:00:00 2001 From: James Kenneth Guidaven Date: Wed, 4 Dec 2024 21:13:45 +0800 Subject: [PATCH 2/2] Add Hosting Overview v3 component. --- .../sections/marketplace/controller.tsx | 9 ++- .../marketplace/hosting-overview-v3/index.tsx | 75 +++++++++++++++++++ 2 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx diff --git a/client/a8c-for-agencies/sections/marketplace/controller.tsx b/client/a8c-for-agencies/sections/marketplace/controller.tsx index 90501eeace93a..e324c9cb3bb46 100644 --- a/client/a8c-for-agencies/sections/marketplace/controller.tsx +++ b/client/a8c-for-agencies/sections/marketplace/controller.tsx @@ -13,6 +13,7 @@ import AssignLicense from './assign-license'; import Checkout from './checkout'; import { MARKETPLACE_TYPE_REFERRAL } from './hoc/with-marketplace-type'; import HostingOverview from './hosting-overview'; +import HostingOverviewV3 from './hosting-overview-v3'; import { getValidHostingSection } from './lib/hosting'; import { getValidBrand } from './lib/product-brand'; import PressableOverview from './pressable-overview'; @@ -62,11 +63,17 @@ export const marketplaceHostingContext: Callback = ( context, next ) => { const section = getValidHostingSection( context.params.section ); + const isV3Enabled = isEnabled( 'a4a-hosting-page-redesign-v3' ); + context.secondary = ; context.primary = ( <> - + { isV3Enabled ? ( + + ) : ( + + ) } ); next(); 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 new file mode 100644 index 0000000000000..074ca7c45bf88 --- /dev/null +++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx @@ -0,0 +1,75 @@ +import page from '@automattic/calypso-router'; +import { useBreakpoint } from '@automattic/viewport-react'; +import { useTranslate } from 'i18n-calypso'; +import Layout from 'calypso/a8c-for-agencies/components/layout'; +import LayoutBody from 'calypso/a8c-for-agencies/components/layout/body'; +import LayoutHeader, { + LayoutHeaderActions as Actions, + LayoutHeaderBreadcrumb as Breadcrumb, +} from 'calypso/a8c-for-agencies/components/layout/header'; +import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top'; +import PressableUsageLimitNotice from 'calypso/a8c-for-agencies/components/pressable-usage-limit-notice'; +import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation'; +import { + A4A_MARKETPLACE_CHECKOUT_LINK, + A4A_MARKETPLACE_LINK, +} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants'; +import QueryProductsList from 'calypso/components/data/query-products-list'; +import ReferralToggle from '../common/referral-toggle'; +import useShoppingCart from '../hooks/use-shopping-cart'; +import ShoppingCart from '../shopping-cart'; + +export default function HostingOverviewV3() { + const translate = useTranslate(); + const isNarrowView = useBreakpoint( '<660px' ); + + const { selectedCartItems, onRemoveCartItem, showCart, setShowCart, toggleCart } = + useShoppingCart(); + + return ( + + + + + + + + + + { + page( A4A_MARKETPLACE_CHECKOUT_LINK ); + } } + /> + + + + + + + Hosting Overview V3 + { /* Content will go here */ } + + + ); +}