Merge branch 'add/calypso-status-check' of github.com:Automattic/wp-c…

…alypso into add/calypso-status-check
Automattic · Jul 25, 2024 · 5a656fa · 5a656fa
2 parents e17f50b + 04312a2
commit 5a656fa
Show file tree

Hide file tree

Showing 80 changed files with 1,049 additions and 357 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -150,3 +150,6 @@
 # Renovate config
 /renovate.json5 @noahtallen
 /.github/workflows/renovate.yml @noahtallen
+
+# Support
+/packages/help-center @Automattic/vertex
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview/hosting-list/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview/hosting-list/index.tsx
@@ -27,6 +27,7 @@ export default function HostingList( { selectedSite }: Props ) {
 	const { data } = useProductsQuery( false, true );
 
 	const isAutomatedReferrals = isEnabled( 'a4a-automated-referrals' );
+
 	const { marketplaceType } = useContext( MarketplaceTypeContext );
 
 	// Hide the section if it's automated referrals marketplace

diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview/hosting-v2/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview/hosting-v2/index.tsx
@@ -0,0 +1,12 @@
+import { useTranslate } from 'i18n-calypso';
+
+export default function HostingV2() {
+	const translate = useTranslate();
+
+	return (
+		<>
+			<span>{ translate( "Choose the hosting tailored for your client's needs." ) }</span>
+			Append the URL with `?flags=-a4a-hosting-page-redesign` to see the old design.
+		</>
+	);
+}
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview/index.tsx
@@ -1,3 +1,4 @@
+import { isEnabled } from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
@@ -18,9 +19,11 @@ import withMarketplaceType from '../hoc/with-marketplace-type';
 import useShoppingCart from '../hooks/use-shopping-cart';
 import ShoppingCart from '../shopping-cart';
 import HostingList from './hosting-list';
+import HostingV2 from './hosting-v2';
 
 function Hosting() {
 	const translate = useTranslate();
+	const isNewHostingPage = isEnabled( 'a4a-hosting-page-redesign' );
 
 	const { selectedCartItems, onRemoveCartItem, showCart, setShowCart, toggleCart } =
 		useShoppingCart();
@@ -64,9 +67,7 @@ function Hosting() {
 				</LayoutHeader>
 			</LayoutTop>
 
-			<LayoutBody>
-				<HostingList />
-			</LayoutBody>
+			<LayoutBody>{ isNewHostingPage ? <HostingV2 /> : <HostingList /> }</LayoutBody>
 		</Layout>
 	);
 }

diff --git a/client/a8c-for-agencies/sections/partner-directory/dashboard/index.tsx b/client/a8c-for-agencies/sections/partner-directory/dashboard/index.tsx
@@ -20,7 +20,7 @@ import {
 	PARTNER_DIRECTORY_AGENCY_DETAILS_SLUG,
 	PARTNER_DIRECTORY_AGENCY_EXPERTISE_SLUG,
 } from '../constants';
-import { getBrandMeta } from '../lib/get-brand-meta';
+import { getBrandMeta, BrandMeta } from '../lib/get-brand-meta';
 import { AgencyDirectoryApplication } from '../types';
 import {
 	mapAgencyDetailsFormData,
@@ -101,7 +101,7 @@ const PartnerDirectoryDashboard = () => {
 			response && reduxDispatch( setActiveAgency( response ) );
 
 			reduxDispatch(
-				successNotice( translate( 'Your profile has been published!' ), {
+				successNotice( translate( 'Your profile has been saved!' ), {
 					duration: 6000,
 				} )
 			);
@@ -238,65 +238,85 @@ const PartnerDirectoryDashboard = () => {
 
 	// The Agency application is completed: At least a directory was approved and published
 	if ( isCompleted ) {
+		const getDirectoryDescription = (
+			brandMeta: BrandMeta,
+			application: DirectoryApplicationStatus
+		) => {
+			const showPopoverOnLoad =
+				directoryApplicationStatuses.filter( ( { key } ) => key === 'rejected' ).length === 1;
+
+			if ( application.key === 'approved' && brandMeta.isAvailable ) {
+				// Application approved and visible in the directory
+				return (
+					<>
+						<Button className="a8c-blue-link" borderless href={ brandMeta.url } target="_blank">
+							{ translate( '%(brand)s Partner Directory', {
+								args: { brand: brandMeta.brand },
+							} ) }
+							<Icon icon={ external } size={ 18 } />
+						</Button>
+						<br />
+						<Button
+							className="a8c-blue-link"
+							borderless
+							href={ brandMeta.urlProfile }
+							target="_blank"
+						>
+							{ translate( `Your agency's profile` ) }
+							<Icon icon={ external } size={ 18 } />
+						</Button>
+					</>
+				);
+			}
+			// Application pending or rejected
+			return (
+				<>
+					<DashboardStatusBadge
+						statusProps={ {
+							status: application.status,
+							type: application.type,
+						} }
+						showPopoverOnLoad={ showPopoverOnLoad }
+					/>
+					<div>
+						{
+							// Application approved, but the Directory page is not available yet
+							application.key === 'approved' && ! brandMeta.isAvailable
+								? translate( 'This partner directory is launching soon.' )
+								: ''
+						}
+					</div>
+				</>
+			);
+		};
+
 		return (
 			<div className="partner-directory-dashboard__completed-section">
 				<div className="partner-directory-dashboard__heading">
 					{ translate(
-						'Congratulations! Your agency is now listed in our partner directory.',
-						'Congratulations! Your agency is now listed in our partner directories.',
+						'Thank you! You’ll be notified when the partner directory is live.',
+						'Thank you! You’ll be notified when the partner directories are live.',
+						// todo: Once the partner directory are live use the copy below:
+						//'Congratulations! Your agency is now listed in our partner directory.',
+						//'Congratulations! Your agency is now listed in our partner directories.',
 						{
 							count: directoryApplicationStatuses.filter( ( { key } ) => key === 'approved' )
 								.length,
 						}
 					) }
 				</div>
 				{ directoryApplicationStatuses.length > 0 &&
-					directoryApplicationStatuses.map( ( { brand, status, type, key } ) => {
-						const brandMeta = getBrandMeta( brand, agency );
-						const showPopoverOnLoad =
-							directoryApplicationStatuses.filter( ( { key } ) => key === 'rejected' ).length === 1;
+					directoryApplicationStatuses.map( ( application: DirectoryApplicationStatus ) => {
+						const brandMeta = getBrandMeta( application.brand, agency );
+
 						return (
 							<StepSectionItem
-								key={ brand }
+								key={ application.brand }
 								isNewLayout
 								iconClassName={ clsx( brandMeta.className ) }
 								icon={ brandMeta.icon }
-								heading={ brand }
-								description={
-									key === 'approved' ? (
-										<>
-											<Button
-												className="a8c-blue-link"
-												borderless
-												href={ brandMeta.url }
-												target="_blank"
-											>
-												{ translate( '%(brand)s Partner Directory', {
-													args: { brand },
-												} ) }
-												<Icon icon={ external } size={ 18 } />
-											</Button>
-											<br />
-											<Button
-												className="a8c-blue-link"
-												borderless
-												href={ brandMeta.urlProfile }
-												target="_blank"
-											>
-												{ translate( `Your agency's profile` ) }
-												<Icon icon={ external } size={ 18 } />
-											</Button>
-										</>
-									) : (
-										<DashboardStatusBadge
-											statusProps={ {
-												status,
-												type,
-											} }
-											showPopoverOnLoad={ showPopoverOnLoad }
-										/>
-									)
-								}
+								heading={ application.brand }
+								description={ getDirectoryDescription( brandMeta, application ) }
 							/>
 						);
 					} ) }
@@ -334,7 +354,7 @@ const PartnerDirectoryDashboard = () => {
 	return (
 		<>
 			<div className="partner-directory-dashboard__heading">
-				{ translate( `Boost your agency's visibility across Automattic platforms.` ) }
+				{ translate( `Boost your agency’s visibility across Automattic listings.` ) }
 			</div>
 
 			<div className="partner-directory-dashboard__subtitle">
@@ -413,11 +433,17 @@ const PartnerDirectoryDashboard = () => {
 					stepNumber={ currentApplicationStep > 2 ? undefined : 3 }
 					icon={ currentApplicationStep > 2 ? check : undefined }
 					heading={ translate( 'New clients will find you' ) }
-					description={ translate(
-						'Your agency will appear in the partner directories you select and get approved for, including WordPress.com, Woo.com, Pressable.com, and Jetpack.com.'
-					) }
+					description={
+						<>
+							{ translate(
+								'Your agency will appear in the partner directories you select and get approved for, including WordPress.com, Woo.com, Pressable.com, and Jetpack.com.'
+							) }
+							<br />
+							{ translate( 'These partner directories are launching soon.' ) }
+						</>
+					}
 					buttonProps={ {
-						children: translate( 'Publish' ),
+						children: translate( 'Done' ),
 						onClick: onPublishProfileClick,
 						primary: applicationWasSubmitted,
 						disabled:

diff --git a/client/a8c-for-agencies/sections/partner-directory/lib/get-brand-meta.tsx b/client/a8c-for-agencies/sections/partner-directory/lib/get-brand-meta.tsx
@@ -2,7 +2,16 @@ import { WooLogo, WordPressLogo, JetpackLogo } from '@automattic/components';
 import pressableIcon from 'calypso/assets/images/pressable/pressable-icon.svg';
 import { Agency } from 'calypso/state/a8c-for-agencies/types';
 
-export const getBrandMeta = ( brand: string, agency?: Agency | null ) => {
+export type BrandMeta = {
+	brand: string;
+	icon: JSX.Element | undefined;
+	url: string;
+	urlProfile: string;
+	isAvailable: boolean;
+	className?: string;
+};
+
+export const getBrandMeta = ( brand: string, agency?: Agency | null ): BrandMeta => {
 	const agencySlug =
 		agency?.name
 			.toLowerCase()
@@ -14,40 +23,45 @@ export const getBrandMeta = ( brand: string, agency?: Agency | null ) => {
 	switch ( brand ) {
 		case 'WordPress.com':
 			return {
+				brand: brand,
 				icon: <WordPressLogo />,
 				url: 'https://wordpress.com/development-services/',
 				urlProfile: `https://wordpress.com/development-services/${ agencySlug }/${ agencyId }`,
-				isPublic: true,
+				isAvailable: false,
 			};
 
 		case 'WooCommerce.com':
 			return {
+				brand: brand,
 				icon: <WooLogo />,
 				className: 'partner-directory-dashboard__woo-icon',
 				url: 'https://woocommerce.com/development-services/',
 				urlProfile: `https://woocommerce.com/development-services/${ agencySlug }/${ agencyId }`,
-				isPublic: false,
+				isAvailable: false,
 			};
 		case 'Pressable.com':
 			return {
+				brand: brand,
 				icon: <img src={ pressableIcon } alt="" />,
 				url: 'https://pressable.com/development-services/',
 				urlProfile: `https://pressable.com/development-services/${ agencySlug }/${ agencyId }`,
-				isPublic: false,
+				isAvailable: false,
 			};
 		case 'Jetpack.com':
 			return {
+				brand: brand,
 				icon: <JetpackLogo />,
 				url: 'https://jetpack.com/development-services/',
 				urlProfile: `https://jetpack.com/development-services/${ agencySlug }/${ agencyId }`,
-				isPublic: true,
+				isAvailable: false,
 			};
 		default:
 			return {
+				brand: 'Unknown',
 				icon: undefined,
 				url: '',
 				urlProfile: '',
-				isPublic: false,
+				isAvailable: false,
 			};
 	}
 };