From d4bd19f690aeaf995f922ebf7c4318ca95229d2a Mon Sep 17 00:00:00 2001
From: James Kenneth Guidaven <jkguidaven@gmail.com>
Date: Wed, 4 Dec 2024 21:13:45 +0800
Subject: [PATCH] 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 90501eeace93ad..e324c9cb3bb463 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 = <MarketplaceSidebar path={ context.path } />;
 	context.primary = (
 		<>
 			<PageViewTracker title="Marketplace > Hosting" path={ context.path } />
-			<HostingOverview defaultMarketplaceType={ purchaseType } section={ section } />
+			{ isV3Enabled ? (
+				<HostingOverviewV3 />
+			) : (
+				<HostingOverview defaultMarketplaceType={ purchaseType } section={ section } />
+			) }
 		</>
 	);
 	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 00000000000000..074ca7c45bf88d
--- /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 (
+		<Layout
+			className="hosting-overview-v3"
+			title={ isNarrowView ? translate( 'Hosting' ) : translate( 'Hosting Marketplace' ) }
+			wide
+			withBorder
+		>
+			<LayoutTop>
+				<PressableUsageLimitNotice />
+				<LayoutHeader>
+					<Breadcrumb
+						items={ [
+							{
+								label: translate( 'Marketplace' ),
+								href: A4A_MARKETPLACE_LINK,
+							},
+							{
+								label: translate( 'Hosting' ),
+							},
+						] }
+					/>
+
+					<Actions className="a4a-marketplace__header-actions">
+						<MobileSidebarNavigation />
+						<ReferralToggle />
+						<ShoppingCart
+							showCart={ showCart }
+							setShowCart={ setShowCart }
+							toggleCart={ toggleCart }
+							items={ selectedCartItems }
+							onRemoveItem={ onRemoveCartItem }
+							onCheckout={ () => {
+								page( A4A_MARKETPLACE_CHECKOUT_LINK );
+							} }
+						/>
+					</Actions>
+				</LayoutHeader>
+			</LayoutTop>
+
+			<LayoutBody className="hosting-overview-v3__body">
+				<QueryProductsList currency="USD" />
+				Hosting Overview V3
+				{ /* Content will go here */ }
+			</LayoutBody>
+		</Layout>
+	);
+}