From 42c46986552b2400bd963aa5a55675e4f55be383 Mon Sep 17 00:00:00 2001
From: James Kenneth Guidaven <jkguidaven@gmail.com>
Date: Wed, 11 Dec 2024 16:39:17 +0800
Subject: [PATCH] A4A: Implement Pressable hosting section v3. (#97236)

---
 .../index.tsx                                 |  12 +-
 .../style.scss                                |  23 +++-
 .../hosting-content/index.tsx                 |   4 +-
 .../premier-agency-hosting/index.tsx          | 104 ++++++++++++++++++
 .../premier-agency-hosting/style.scss         |  12 ++
 5 files changed, 143 insertions(+), 12 deletions(-)
 create mode 100644 client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/index.tsx
 create mode 100644 client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/style.scss

diff --git a/client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/index.tsx b/client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/index.tsx
index ec5bec336d0a5..2314d63caed37 100644
--- a/client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/index.tsx
+++ b/client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/index.tsx
@@ -1,13 +1,15 @@
 import { Icon, check } from '@wordpress/icons';
 import clsx from 'clsx';
+import { TranslateResult } from 'i18n-calypso';
 import PageSection, { PageSectionProps } from 'calypso/a8c-for-agencies/components/page-section';
 
 import './style.scss';
 
 type Props = Omit< PageSectionProps, 'children' > & {
-	items: string[];
-	fiveRows?: boolean;
+	items: TranslateResult[];
 	threeRows?: boolean;
+	fourRows?: boolean;
+	fiveRows?: boolean;
 };
 
 export default function HostingAdditionalFeaturesSection( {
@@ -17,8 +19,9 @@ export default function HostingAdditionalFeaturesSection( {
 	background,
 	description,
 	items,
-	fiveRows,
 	threeRows,
+	fourRows,
+	fiveRows,
 }: Props ) {
 	return (
 		<PageSection
@@ -30,8 +33,9 @@ export default function HostingAdditionalFeaturesSection( {
 		>
 			<ul
 				className={ clsx( 'hosting-additional-features', {
-					'is-five-rows': fiveRows,
 					'is-three-rows': threeRows,
+					'is-four-rows': fourRows,
+					'is-five-rows': fiveRows,
 				} ) }
 			>
 				{ items.map( ( item, itemIndex ) => (
diff --git a/client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/style.scss b/client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/style.scss
index 6ca191e20be1e..aa21f711cf0eb 100644
--- a/client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/style.scss
+++ b/client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/style.scss
@@ -44,27 +44,38 @@ ul.hosting-additional-features {
 	}
 }
 
+ul.hosting-additional-features.is-three-rows {
+	@include break-xlarge {
+		grid-template-rows: repeat(6, 1fr);
+		grid-auto-flow: column;
+	}
 
-ul.hosting-additional-features.is-five-rows {
+	@include break-wide {
+		grid-template-rows: repeat(3, 1fr);
+		grid-auto-flow: column;
+	}
+}
+
+ul.hosting-additional-features.is-four-rows {
 	@include break-xlarge {
-		grid-template-rows: repeat(10, 1fr);
+		grid-template-rows: repeat(8, 1fr);
 		grid-auto-flow: column;
 	}
 
 	@include break-wide {
-		grid-template-rows: repeat(5, 1fr);
+		grid-template-rows: repeat(4, 1fr);
 		grid-auto-flow: column;
 	}
 }
 
-ul.hosting-additional-features.is-three-rows {
+ul.hosting-additional-features.is-five-rows {
 	@include break-xlarge {
-		grid-template-rows: repeat(6, 1fr);
+		grid-template-rows: repeat(10, 1fr);
 		grid-auto-flow: column;
 	}
 
 	@include break-wide {
-		grid-template-rows: repeat(3, 1fr);
+		grid-template-rows: repeat(5, 1fr);
 		grid-auto-flow: column;
 	}
 }
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 dd24394ce1065..c660054ace048 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
@@ -4,7 +4,7 @@ import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
 import { SectionProps } from '..';
 import { MarketplaceTypeContext } from '../../context';
 import EnterpriseAgencyHosting from '../../hosting-overview/hosting-v2/enterprise-agency-hosting';
-import PremierAgencyHosting from '../../hosting-overview/hosting-v2/premier-agency-hosting';
+import PremierAgencyHosting from './premier-agency-hosting';
 import StandardAgencyHosting from './standard-agency-hosting';
 
 import './style.scss';
@@ -31,7 +31,7 @@ export const HostingContent = ( { section, onAddToCart }: Props ) => {
 		}
 		if ( section === 'pressable' ) {
 			return {
-				content: <PremierAgencyHosting onAddToCart={ ( product ) => onAddToCart( product, 1 ) } />,
+				content: <PremierAgencyHosting />,
 				title: isReferMode
 					? translate( 'Refer a variety of plans, or single high-resource sites to your clients' )
 					: translate(
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/index.tsx
new file mode 100644
index 0000000000000..1c6e292f926a2
--- /dev/null
+++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/index.tsx
@@ -0,0 +1,104 @@
+import { JetpackLogo } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import { BackgroundType10 } from 'calypso/a8c-for-agencies/components/page-section/backgrounds';
+import ProfileAvatar1 from 'calypso/assets/images/a8c-for-agencies/hosting/premier-testimonial-1.png';
+import ProfileAvatar2 from 'calypso/assets/images/a8c-for-agencies/hosting/premier-testimonial-2.png';
+import { useDispatch } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import HostingAdditionalFeaturesSection from '../../../common/hosting-additional-features-section';
+import HostingTestimonialsSection from '../../../common/hosting-testimonials-section';
+import ClientRelationships from '../common/client-relationships';
+import HostingFeatures from '../common/hosting-features';
+
+import './style.scss';
+
+export default function PremierAgencyHosting() {
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+
+	const onJetpackCompleteMoreLinkClick = () => {
+		dispatch( recordTracksEvent( 'a4a_hosting_premier_jetpack_complete_more_link_click' ) );
+	};
+
+	return (
+		<div className="premier-agency-hosting">
+			<section className="premier-agency-hosting__plan-selector-container">TODO</section>
+
+			<HostingFeatures heading={ translate( 'Included with every Pressable site' ) } />
+
+			<HostingAdditionalFeaturesSection
+				icon={ <JetpackLogo size={ 16 } /> }
+				heading={ translate( 'Jetpack Complete included' ) }
+				subheading={ translate( "Supercharge your clients' sites" ) }
+				description={ translate(
+					'Every Pressable site comes with a free Jetpack Complete license — an $899/year/site value.'
+				) }
+				items={ [
+					translate( 'VaultPress Backup w/ 1TB storage' ),
+					translate( 'Scan w/ WAF' ),
+					translate( 'Akismet Anti-spam w/ 60k API calls/mo' ),
+					translate( 'Stats w/ 100k views/mo (Commercial use)' ),
+					translate( 'VideoPress w/ 1TB storage' ),
+					translate( 'Boost w/ Auto CSS Generation' ),
+					translate( 'Social Advanced w/ unlimited shares' ),
+					translate( 'Site Search up to 100k records and 100k requests/mo' ),
+					translate( 'CRM Entrepreneur' ),
+					translate( 'All Jetpack features' ),
+					translate( '{{a}}And more{{/a}} ↗', {
+						components: {
+							a: (
+								<a
+									href="https://jetpack.com/complete/"
+									target="_blank"
+									rel="noopener noreferrer"
+									onClick={ onJetpackCompleteMoreLinkClick }
+								/>
+							),
+						},
+					} ),
+				] }
+				fourRows
+			/>
+
+			<HostingTestimonialsSection
+				heading={ translate( 'Love for Pressable hosting' ) }
+				subheading={ translate( 'What agencies say' ) }
+				background={ BackgroundType10 }
+				items={ [
+					{
+						profile: {
+							avatar: ProfileAvatar1,
+							name: 'Ben Giordano',
+							title: translate( 'Founder, %(companyName)s', {
+								args: {
+									companyName: 'Freshy',
+								},
+								comment: '%(companyName)s is the name of the company the testimonial is about.',
+							} ),
+							site: 'freshysites.com',
+						},
+						testimonial:
+							"We needed a hosting provider that was as knowledgeable about WordPress as we are. With Pressable's affiliation with Automattic, the same people behind WordPress.com and WordPress VIP, we knew we'd found the right home for our client portfolio.",
+					},
+					{
+						profile: {
+							name: 'Justin Barrett',
+							avatar: ProfileAvatar2,
+							title: translate( 'Director of Technology, %(companyName)s', {
+								args: {
+									companyName: 'Autoshop Solutions',
+								},
+								comment: '%(companyName)s is the name of the company the testimonial is about.',
+							} ),
+							site: 'autoshopsolutions.com',
+						},
+						testimonial:
+							'As an agency with hundreds of clients, Pressable changed the game for our ability to grow as a business and offer best-in-class products for our clients. With fantastic support, superior uptime, and solutions to make even the largest challenges possible, Pressable is always there.',
+					},
+				] }
+			/>
+
+			<ClientRelationships />
+		</div>
+	);
+}
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/style.scss b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/style.scss
new file mode 100644
index 0000000000000..642f7bf6295c9
--- /dev/null
+++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/style.scss
@@ -0,0 +1,12 @@
+.premier-agency-hosting ul.hosting-additional-features {
+	.gridicon {
+		fill: var(--studio-jetpack-green);
+	}
+
+	a,
+	a:visited,
+	a:hover {
+		text-decoration: underline;
+		color: var(--color-text);
+	}
+}