Merge branch 'trunk' into fix/preload-after-user

Automattic · Feb 6, 2025 · 5ecb85a · 5ecb85a
2 parents 999bda1 + ee11282
commit 5ecb85a
Show file tree

Hide file tree

Showing 153 changed files with 2,198 additions and 1,790 deletions.
diff --git a/apps/odyssey-stats/src/widget/highlights.tsx b/apps/odyssey-stats/src/widget/highlights.tsx
@@ -1,7 +1,7 @@
-import { formattedNumber, SegmentedControl } from '@automattic/components';
+import { SegmentedControl } from '@automattic/components';
 import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
-import { useTranslate } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import moment from 'moment';
 import { useState, FunctionComponent } from 'react';
 import useReferrersQuery from '../hooks/use-referrers-query';
@@ -64,7 +64,9 @@ const ItemWrapper: FunctionComponent< ItemWrapperProps > = ( {
 			<p>{ item.title }</p>
 			<span>
 				{ translate( '%(views)s Views', {
-					args: { views: formattedNumber( item.views ) },
+					args: {
+						views: numberFormat( item.views ),
+					},
 				} ) }
 			</span>
 		</div>

diff --git a/apps/odyssey-stats/src/widget/modules.tsx b/apps/odyssey-stats/src/widget/modules.tsx
@@ -1,7 +1,7 @@
-import { ShortenedNumber, Button } from '@automattic/components';
+import { Button } from '@automattic/components';
 import { protect, akismet } from '@automattic/components/src/icons';
 import clsx from 'clsx';
-import { useTranslate } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import { useState, FunctionComponent } from 'react';
 import wpcom from 'calypso/lib/wp';
 import useModuleDataQuery from '../hooks/use-module-data-query';
@@ -64,7 +64,14 @@ const ModuleCard: FunctionComponent< ModuleCardProps > = ( {
 				<>
 					{ ( ! isError || ! canManageModule ) && (
 						<div className="stats-widget-module__value">
-							<ShortenedNumber value={ value } />
+							<span>
+								{ numberFormat( value, {
+									numberFormatOptions: {
+										notation: 'compact',
+										maximumFractionDigits: 1,
+									},
+								} ) }
+							</span>
 						</div>
 					) }
 					{ isError && canManageModule && (

diff --git a/client/a8c-for-agencies/data/agencies/use-fetch-schedule-call-link.ts b/client/a8c-for-agencies/data/agencies/use-fetch-schedule-call-link.ts
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import wpcom from 'calypso/lib/wp';
+import { useSelector } from 'calypso/state';
+import { getActiveAgencyId } from 'calypso/state/a8c-for-agencies/agency/selectors';
+
+export default function useFetchScheduleCallLink() {
+	const agencyId = useSelector( getActiveAgencyId );
+
+	return useQuery( {
+		queryKey: [ 'agency-schedule-call-link', agencyId ],
+		queryFn: () =>
+			wpcom.req.get( {
+				apiNamespace: 'wpcom/v2',
+				path: `/agency/${ agencyId }/schedule-call-link`,
+			} ),
+		enabled: false,
+		refetchOnWindowFocus: false,
+	} );
+}
diff --git a/client/a8c-for-agencies/sections/agency-tier/download-badges/download-link.tsx b/client/a8c-for-agencies/sections/agency-tier/download-badges/download-link.tsx
@@ -38,12 +38,12 @@ function DownloadLink( {
 		woocommerce: {
 			'agency-partner': {
 				name: translate( 'Woo Agency Partner' ),
-				href: 'https://automattic.com/wp-content/uploads/2024/10/agency_tier_woo_partner.zip',
+				href: 'https://automattic.com/wp-content/uploads/2025/02/agency_tier_woo_partner.zip',
 				icon: <img src={ WooLogo } alt="WooCommerce" />,
 			},
 			'pro-agency-partner': {
 				name: translate( 'Woo Pro Agency Partner' ),
-				href: 'https://automattic.com/wp-content/uploads/2024/10/agency_tier_woo_pro_partner.zip',
+				href: 'https://automattic.com/wp-content/uploads/2025/02/agency_tier_woo_pro_partner.zip',
 				icon: <img src={ WooLogo } alt="WooCommerce" />,
 			},
 		},

diff --git a/client/a8c-for-agencies/sections/agency-tier/primary/agency-tier-overview/index.tsx b/client/a8c-for-agencies/sections/agency-tier/primary/agency-tier-overview/index.tsx
@@ -34,15 +34,9 @@ export default function AgencyTierOverview() {
 
 	const ALL_TIERS: AgencyTier[] = [ 'emerging-partner', 'agency-partner', 'pro-agency-partner' ];
 
-	// todo: Restore this. We have to hide temporary the 'Download your badges' button until the WooCommerce ones are ready
-	// A4A GH issue: 1500
-	const temporaryHideDownloadBadges = true;
-
 	// Show download badges button for Agency Partner and Pro Agency Partner tiers
 	const showDownloadBadges =
-		! temporaryHideDownloadBadges &&
-		currentAgencyTier &&
-		[ 'agency-partner', 'pro-agency-partner' ].includes( currentAgencyTier );
+		currentAgencyTier && [ 'agency-partner', 'pro-agency-partner' ].includes( currentAgencyTier );
 
 	return (
 		<Layout className="agency-tier-overview" title={ title } wide>

diff --git a/client/a8c-for-agencies/sections/marketplace/hooks/use-product-and-plans.tsx b/client/a8c-for-agencies/sections/marketplace/hooks/use-product-and-plans.tsx
@@ -81,14 +81,15 @@ const getDisplayableFeaturedProducts = (
 	filteredProductsAndBundles: APIProductFamilyProduct[]
 ) => {
 	const featuredProductSlugs = [
-		'woocommerce-advanced-notifications',
-		'jetpack-boost',
-		'woocommerce-bulk-stock-management',
+		'woocommerce-woopayments',
+		'jetpack-security-t1',
+		'woocommerce-subscriptions',
 	]; // For now, we hardcode this until we understand how we want pick featured products.
 
-	return filteredProductsAndBundles.filter( ( product ) =>
-		featuredProductSlugs.includes( product.slug )
-	);
+	// We do it this way to ensure we follow the same order as the featuredProductSlugs.
+	return featuredProductSlugs
+		.map( ( slug ) => filteredProductsAndBundles.find( ( product ) => product.slug === slug ) )
+		.filter( ( product ) => product !== undefined ) as APIProductFamilyProduct[];
 };
 
 const getDisplayableWoocommerceExtensions = (

diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/style.scss b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/style.scss
@@ -41,7 +41,7 @@
 	.hosting-dashboard-layout__header-actions {
 		background-color: var(--color-surface);
 		border-radius: 8px; /* stylelint-disable-line */
-		padding: 8px 16px;
+		padding: 8px 24px 8px 20px;
 
 		.shopping-cart {
 			margin: 0;

diff --git a/...8c-for-agencies/sections/marketplace/products-overview-v2/bundle-price-selector/index.tsx b/...8c-for-agencies/sections/marketplace/products-overview-v2/bundle-price-selector/index.tsx
@@ -1,10 +1,6 @@
-import { Button } from '@wordpress/components';
-import { chevronDown } from '@wordpress/icons';
-import clsx from 'clsx';
-import { useTranslate } from 'i18n-calypso';
-import { useCallback, useRef, useState } from 'react';
-import PopoverMenu from 'calypso/components/popover-menu';
-import PopoverMenuItem from 'calypso/components/popover-menu/item';
+import { SelectControl } from '@wordpress/components';
+import { numberFormat, useTranslate } from 'i18n-calypso';
+import { useCallback } from 'react';
 
 import './style.scss';
 
@@ -16,17 +12,6 @@ type Props = {
 
 export function BundlePriceSelector( { options, value, onChange }: Props ) {
 	const translate = useTranslate();
-	const [ isMenuOpen, setIsMenuOpen ] = useState( false );
-
-	const buttonRef = useRef( null );
-
-	const onSelect = useCallback(
-		( option: number ) => {
-			setIsMenuOpen( false );
-			onChange( option );
-		},
-		[ onChange ]
-	);
 
 	const getDiscountPercentage = useCallback(
 		( bundleSize: number ) => {
@@ -64,43 +49,24 @@ export function BundlePriceSelector( { options, value, onChange }: Props ) {
 	);
 
 	return (
-		<>
-			<div className="bundle-price-selector">
-				<div className="bundle-price-selector__label">{ translate( 'Bundle & save' ) }</div>
-				<Button
-					ref={ buttonRef }
-					className="bundle-price-selector__menu-button"
-					variant="secondary"
-					onClick={ () => setIsMenuOpen( ! isMenuOpen ) }
-					icon={ chevronDown }
-					iconPosition="right"
-				>
-					<span>
-						{ value > 1 ? getLabel( value ) : translate( 'Explore bundle discounts to apply' ) }
-					</span>
-				</Button>
-			</div>
-
-			<PopoverMenu
-				isVisible={ isMenuOpen }
-				onClose={ () => setIsMenuOpen( false ) }
-				context={ buttonRef.current }
-				className="bundle-price-selector__popover"
-				autoPosition={ false }
-				position="bottom right"
-			>
-				{ options.map( ( option ) => (
-					<PopoverMenuItem
-						className={ clsx( {
-							'is-selected': value === option,
-						} ) }
-						onClick={ () => onSelect( option ) }
-						key={ `bundle-price-option-${ option }` }
-					>
-						{ getLabel( option ) }
-					</PopoverMenuItem>
-				) ) }
-			</PopoverMenu>
-		</>
+		<SelectControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label={ translate( 'Bundle size' ) }
+			labelPosition="side"
+			value={ value }
+			onChange={ onChange }
+			options={ [
+				{
+					disabled: true,
+					label: translate( 'Explore bundle discounts to apply' ),
+					value: '1',
+				},
+				...options.map( ( option ) => ( {
+					label: getLabel( option ) as string,
+					value: `${ numberFormat( option ) }`,
+				} ) ),
+			] }
+		/>
 	);
 }
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
@@ -50,7 +50,7 @@ $action-panel-height-mobile: 128px;
 	.hosting-dashboard-layout__header-actions {
 		background-color: var(--color-surface);
 		border-radius: 8px; /* stylelint-disable-line */
-		padding: 8px 16px;
+		padding: 8px 24px 8px 20px;
 
 		.shopping-cart {
 			margin: 0;

diff --git a/...ections/marketplace/products-overview/product-filter/hooks/use-product-filter-options.tsx b/...ections/marketplace/products-overview/product-filter/hooks/use-product-filter-options.tsx
@@ -59,6 +59,11 @@ export default function useProductFilterOptions() {
 						},
 				  ]
 				: [] ),
+			{
+				key: PRODUCT_CATEGORY_PAYMENTS,
+				label: translate( 'Payments' ) as string,
+				icon: currencyDollar,
+			},
 			{
 				key: PRODUCT_CATEGORY_SECURITY,
 				label: translate( 'Security' ) as string,
@@ -71,11 +76,6 @@ export default function useProductFilterOptions() {
 			},
 			{ key: PRODUCT_CATEGORY_SOCIAL, label: translate( 'Social' ) as string, icon: people },
 			{ key: PRODUCT_CATEGORY_GROWTH, label: translate( 'Growth' ) as string, icon: trendingUp },
-			{
-				key: PRODUCT_CATEGORY_PAYMENTS,
-				label: translate( 'Payments' ) as string,
-				icon: currencyDollar,
-			},
 			{
 				key: PRODUCT_CATEGORY_SHIPPING_DELIVERY_FULFILLMENT,
 				label: translate( 'Shipping, Delivery, and Fulfillment' ) as string,

diff --git a/client/a8c-for-agencies/sections/overview/sidebar/growth-accelerator/index.tsx b/client/a8c-for-agencies/sections/overview/sidebar/growth-accelerator/index.tsx
@@ -3,6 +3,7 @@ import { Button, Icon } from '@wordpress/components';
 import { external } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback } from 'react';
+import useFetchScheduleCallLink from 'calypso/a8c-for-agencies/data/agencies/use-fetch-schedule-call-link';
 import { useDispatch, useSelector } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { savePreference } from 'calypso/state/preferences/actions';
@@ -18,10 +19,22 @@ export default function OverviewSidebarGrowthAccelerator() {
 
 	const dispatch = useDispatch();
 
+	const { refetch: fetchScheduleCallLink, isFetching: isFetchingScheduleCallLink } =
+		useFetchScheduleCallLink();
+
 	const onRequestCallClick = useCallback( () => {
 		dispatch( recordTracksEvent( 'calypso_a4a_overview_growth_accelerator_schedule_call_click' ) );
 		dispatch( savePreference( GROWTH_ACCELERATOR_REQUESTED_PREFERENCE, true ) );
-	}, [ dispatch ] );
+
+		fetchScheduleCallLink().then( ( result ) => {
+			window.open(
+				result.data
+					? result.data
+					: 'https://savvycal.com/automattic-for-agencies/agency-success?utm_campaign=overview',
+				'_blank'
+			);
+		} );
+	}, [ dispatch, fetchScheduleCallLink ] );
 
 	const onNotInterestedClick = useCallback( () => {
 		dispatch( recordTracksEvent( 'calypso_a4a_overview_growth_accelerator_not_interested_click' ) );
@@ -56,9 +69,8 @@ export default function OverviewSidebarGrowthAccelerator() {
 				<Button
 					className="overview__growth-accelerator-footer-schedule-call"
 					variant="primary"
-					href="https://savvycal.com/automattic-for-agencies/agency-success?utm_campaign=overview"
-					target="_blank"
-					rel="noopener noreferrer"
+					disabled={ isFetchingScheduleCallLink }
+					isBusy={ isFetchingScheduleCallLink }
 					onClick={ onRequestCallClick }
 				>
 					{ translate( 'Schedule a call' ) }

diff --git a/client/a8c-for-agencies/sections/signup/index.ts b/client/a8c-for-agencies/sections/signup/index.ts
@@ -1,10 +1,13 @@
+import { isEnabled } from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import { makeLayout, render as clientRender } from 'calypso/controller';
 import * as controller from './controller';
 
 export default function () {
 	page( '/signup', controller.signUpContext, makeLayout, clientRender );
 	page( '/signup/finish', controller.finishSignUpContext, makeLayout, clientRender );
-	page( '/signup/wc-asia', controller.wcAsiaSignupContext, makeLayout, clientRender );
+	if ( isEnabled( 'a4a-wc-asia-signup-enabled' ) ) {
+		page( '/signup/wc-asia', controller.wcAsiaSignupContext, makeLayout, clientRender );
+	}
 	page( '/signup/oauth/token', controller.tokenRedirect, makeLayout, clientRender );
 }