Copy styling from Marketplace hosting page to the products overview v…

…2 page.
Automattic · Jan 13, 2025 · 92cc682 · 92cc682
1 parent 3d707e3
commit 92cc682
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 3 deletions.
diff --git a/client/a8c-for-agencies/sections/marketplace/controller.tsx b/client/a8c-for-agencies/sections/marketplace/controller.tsx
@@ -35,7 +35,13 @@ export const marketplaceProductsContext: Callback = ( context, next ) => {
 		<>
 			<PageViewTracker title="Marketplace > Products" path={ context.path } />
 			{ isEnabled( 'a4a-product-page-redesign' ) ? (
-				<ProductsOverviewV2 />
+				<ProductsOverviewV2
+					siteId={ site_id }
+					suggestedProduct={ product_slug }
+					defaultMarketplaceType={ purchaseType }
+					productBrand={ getValidBrand( productBrand ) }
+					searchQuery={ search_query }
+				/>
 			) : (
 				<ProductsOverview
 					siteId={ site_id }

diff --git a/client/a8c-for-agencies/sections/marketplace/products-overview-v2/index.tsx b/client/a8c-for-agencies/sections/marketplace/products-overview-v2/index.tsx
@@ -1,3 +1,122 @@
-export default function ProductsOverviewV2() {
-	return <div>Products Overview V2</div>;
+import page from '@automattic/calypso-router';
+import { SiteDetails } from '@automattic/data-stores';
+import { useBreakpoint } from '@automattic/viewport-react';
+import { useTranslate } from 'i18n-calypso';
+import { useEffect, useState } from 'react';
+import A4AAgencyApprovalNotice from 'calypso/a8c-for-agencies/components/a4a-agency-approval-notice';
+import { LayoutWithGuidedTour as Layout } from 'calypso/a8c-for-agencies/components/layout/layout-with-guided-tour';
+import LayoutTop from 'calypso/a8c-for-agencies/components/layout/layout-with-payment-notification';
+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 LayoutBody from 'calypso/layout/hosting-dashboard/body';
+import LayoutHeader, {
+	LayoutHeaderActions as Actions,
+	LayoutHeaderBreadcrumb as Breadcrumb,
+} from 'calypso/layout/hosting-dashboard/header';
+import { useSelector } from 'calypso/state';
+import getSites from 'calypso/state/selectors/get-sites';
+import ReferralToggle from '../common/referral-toggle';
+import { ShoppingCartContext } from '../context';
+import withMarketplaceType from '../hoc/with-marketplace-type';
+import useShoppingCart from '../hooks/use-shopping-cart';
+import ProductListing from '../products-overview/product-listing';
+import ShoppingCart from '../shopping-cart';
+
+import './style.scss';
+
+type Props = {
+	siteId?: string;
+	suggestedProduct?: string;
+	productBrand: string;
+	searchQuery?: string;
+};
+
+export function ProductsOverviewV2( {
+	siteId,
+	suggestedProduct,
+	productBrand,
+	searchQuery,
+}: Props ) {
+	const [ selectedSite, setSelectedSite ] = useState< SiteDetails | null | undefined >( null );
+
+	const translate = useTranslate();
+
+	const isNarrowView = useBreakpoint( '<660px' );
+
+	const sites = useSelector( getSites );
+
+	const {
+		selectedCartItems,
+		setSelectedCartItems,
+		onRemoveCartItem,
+		showCart,
+		setShowCart,
+		toggleCart,
+	} = useShoppingCart();
+
+	useEffect( () => {
+		if ( siteId && sites.length > 0 ) {
+			const site = siteId ? sites.find( ( site ) => site?.ID === parseInt( siteId ) ) : null;
+			setSelectedSite( site );
+		}
+	}, [ siteId, sites ] );
+
+	return (
+		<Layout
+			className="products-overview-v2"
+			title={ isNarrowView ? '' : translate( 'Products Marketplace' ) }
+			wide
+		>
+			<LayoutTop>
+				<A4AAgencyApprovalNotice />
+				<LayoutHeader>
+					<Breadcrumb
+						items={ [
+							{
+								label: translate( 'Marketplace' ),
+								href: A4A_MARKETPLACE_LINK,
+							},
+							{
+								label: translate( 'Products' ),
+							},
+						] }
+					/>
+
+					<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="products-overview-v2__body">
+				<ShoppingCartContext.Provider value={ { setSelectedCartItems, selectedCartItems } }>
+					{
+						// we will remove this once we have the new product listing component
+						<ProductListing
+							selectedSite={ selectedSite }
+							suggestedProduct={ suggestedProduct }
+							productBrand={ productBrand }
+							searchQuery={ searchQuery }
+						/>
+					}
+				</ShoppingCartContext.Provider>
+			</LayoutBody>
+		</Layout>
+	);
 }
+
+export default withMarketplaceType( ProductsOverviewV2 );
diff --git a/client/a8c-for-agencies/sections/marketplace/products-overview-v2/style.scss b/client/a8c-for-agencies/sections/marketplace/products-overview-v2/style.scss
@@ -0,0 +1,41 @@
+$background-color: #05374A;
+
+.products-overview-v2.main.hosting-dashboard-layout {
+	.hosting-dashboard-layout__container {
+		height: auto;
+		overflow: auto;
+		display: block;
+	}
+
+	.hosting-dashboard-layout__top-wrapper {
+		max-height: auto;
+		background: url( calypso/assets/images/a8c-for-agencies/marketplace-hosting-page-v3-bg.svg ) no-repeat top right $background-color;
+        border-block-end: none;
+		position: sticky;
+		top: 0;
+		z-index: 100;
+    }
+
+	.hosting-dashboard-layout__header-breadcrumb {
+		color: var(--color-neutral-40);
+		fill: var(--color-neutral-40);
+
+		a {
+			color: var(--color-primary-5);
+		}
+	}
+
+	.hosting-dashboard-layout__header-actions {
+		background-color: var(--color-surface);
+		border-radius: 8px; /* stylelint-disable-line */
+		padding: 8px 16px;
+
+		.shopping-cart {
+			margin: 0;
+		}
+	}
+
+	.components-button:is(.is-primary, .is-secondary) {
+		min-height: 40px;
+	}
+}