@automattic/plans-grid-next 1.0.0 → 1.0.1

package/src/components/comparison-grid/index.tsx

@@ -936,11 +936,11 @@ const ComparisonGrid = ( {
 	const [ visiblePlans, setVisiblePlans ] = useState< PlanSlug[] >( [] );
 
 	const displayedGridPlans = useMemo( () => {
-		return sortPlans( gridPlans, currentSitePlanSlug, 'small' === gridSize );
-	}, [ gridPlans, currentSitePlanSlug, gridSize ] );
+		return sortPlans( gridPlans, currentSitePlanSlug );
+	}, [ gridPlans, currentSitePlanSlug ] );
 
 	useEffect( () => {
-		setVisiblePlans( ( prev ) => {
+		setVisiblePlans( () => {
 			let visibleLength = displayedGridPlans.length;
 			switch ( gridSize ) {
 				case 'large':
@@ -955,27 +955,7 @@ const ComparisonGrid = ( {
 					break;
 			}
 
-			// visible length changed, update with the current gridPlans
-			// - we don't care about previous order
-			if ( prev.length !== visibleLength ) {
-				return displayedGridPlans.slice( 0, visibleLength ).map( ( { planSlug } ) => planSlug );
-			}
-
-			// prev state out of sync with current gridPlans (e.g. gridPlans updated to a different term)
-			// - we care about previous order
-			const isPrevStale = prev.some( ( planSlug ) => ! gridPlansIndex[ planSlug ] );
-			if ( isPrevStale ) {
-				return prev.map( ( planSlug ) => {
-					const gridPlan = displayedGridPlans.find(
-						( gridPlan ) => getPlanClass( gridPlan.planSlug ) === getPlanClass( planSlug )
-					);
-
-					return gridPlan?.planSlug ?? planSlug;
-				} );
-			}
-
-			// nothing to update
-			return prev;
+			return displayedGridPlans.slice( 0, visibleLength ).map( ( { planSlug } ) => planSlug );
 		} );
 	}, [ gridSize, displayedGridPlans, gridPlansIndex ] );
 
@@ -1124,14 +1104,6 @@ const ComparisonGrid = ( {
 	);
 };
 
-const GRID_BREAKPOINTS = new Map( [
-	[ 'small', 0 ],
-	[ 'smedium', 686 ],
-	[ 'medium', 835 ], // enough to fit Enterpreneur plan. was 686
-	[ 'large', 1005 ], // enough to fit Enterpreneur plan. was 870
-	[ 'xlarge', 1180 ],
-] );
-
 // TODO
 // Now that everything under is functional component, we can deprecate this wrapper and only keep ComparisonGrid instead.
 // More details can be found in https://github.com/Automattic/wp-calypso/issues/87047
@@ -1144,6 +1116,7 @@ const WrappedComparisonGrid = ( {
 	recordTracksEvent,
 	allFeaturesList,
 	intervalType,
+	isInSiteDashboard,
 	isInSignup,
 	currentSitePlanSlug,
 	selectedPlan,
@@ -1162,10 +1135,22 @@ const WrappedComparisonGrid = ( {
 }: ComparisonGridExternalProps ) => {
 	const gridContainerRef = useRef< HTMLDivElement >( null );
 
+	const gridBreakpoints = useMemo( () => {
+		// we want to fit up to the Commerce plan in this breakpoint
+		const xlargeBreakpoint = isInSiteDashboard ? 1114 : 1180;
+		return new Map( [
+			[ 'small', 0 ],
+			[ 'smedium', 686 ],
+			[ 'medium', 835 ],
+			[ 'large', 1005 ],
+			[ 'xlarge', xlargeBreakpoint ],
+		] );
+	}, [ isInSiteDashboard ] );
+
 	// TODO: this will be deprecated along side removing the wrapper component
 	const gridSize = useGridSize( {
 		containerRef: gridContainerRef,
-		containerBreakpoints: GRID_BREAKPOINTS,
+		containerBreakpoints: gridBreakpoints,
 	} );
 
 	const classNames = clsx( 'plans-grid-next', className, {
@@ -1196,6 +1181,7 @@ const WrappedComparisonGrid = ( {
 			>
 				<ComparisonGrid
 					intervalType={ intervalType }
+					isInSiteDashboard={ isInSiteDashboard }
 					isInSignup={ isInSignup }
 					currentSitePlanSlug={ currentSitePlanSlug }
 					siteId={ siteId }

package/src/components/comparison-grid/style.scss

@@ -282,23 +282,6 @@
 		@include plans-grid-medium-large {
 			margin: 7px 0 10px;
 		}
-
-		.plans-grid-next__billing-timeframe-vip-price {
-			font-size: $font-body;
-			line-height: 24px;
-			font-weight: 400;
-			color: var(--studio-gray-80);
-
-			@include plans-grid-medium-large {
-				font-size: $font-body-small;
-				line-height: 20px;
-			}
-
-			@include plans-grid-large {
-				font-size: $font-body-extra-small;
-				line-height: 16px;
-			}
-		}
 	}
 
 	.plans-grid-next-action-button {

package/src/components/dropdown-option.tsx

@@ -16,7 +16,7 @@ const Container = styled.div`
 	}
 
 	span {
-		color: var( --studio-green-50 );
+		color: var( --studio-green-60 );
 	}
 
 	.title {

package/src/components/features-grid/index.stories.tsx

@@ -68,6 +68,7 @@ const defaultProps = {
 	hideUnavailableFeatures: false,
 	isCustomDomainAllowedOnFreePlan: false,
 	isInAdmin: false,
+	isInSiteDashboard: false,
 	isInSignup: true,
 	onStorageAddOnClick: () => {},
 	planActionOverrides: undefined,

package/src/components/features-grid/index.tsx

@@ -376,6 +376,7 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 		allFeaturesList,
 		coupon,
 		isInAdmin,
+		isInSiteDashboard,
 		className,
 		enableFeatureTooltips,
 		enableCategorisedFeatures,
@@ -390,15 +391,26 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 
 	const gridContainerRef = useRef< HTMLDivElement >( null );
 
-	const gridBreakpoints = useMemo(
-		() =>
-			new Map( [
-				[ 'small', 0 ],
-				[ 'medium', 740 ],
-				[ 'large', isInAdmin ? 1180 : 1320 ], // 1320 to fit Enterpreneur plan, 1180 to work in admin
-			] ),
-		[ isInAdmin ]
-	);
+	const gridBreakpoints = useMemo( () => {
+		// we want to fit up to the Commerce plan in this breakpoint
+		let largeBreakpoint;
+		if ( isInSiteDashboard ) {
+			largeBreakpoint = 1042;
+		} else if ( isInAdmin ) {
+			largeBreakpoint = 1180;
+		} else {
+			largeBreakpoint = 1320;
+		}
+
+		// we want to fit 3 plans per row in this breakpoint
+		const mediumBreakpoint = isInSiteDashboard ? 667 : 741;
+
+		return new Map( [
+			[ 'small', 0 ],
+			[ 'medium', mediumBreakpoint ],
+			[ 'large', largeBreakpoint ],
+		] );
+	}, [ isInAdmin, isInSiteDashboard ] );
 
 	// TODO: this will be deprecated along side removing the wrapper component
 	const gridSize = useGridSize( {

package/src/components/features-grid/style.scss

@@ -222,6 +222,7 @@
 		line-height: 16px;
 		padding-bottom: 8px;
 		min-height: 50px;
+		text-wrap: balance;
 	}
 }
 
@@ -349,6 +350,7 @@
 		font-weight: 400;
 		line-height: 20px;
 		overflow-wrap: break-word;
+		text-wrap: balance;
 		margin: 0;
 		flex: 1 0 0;
 		width: 100%;
@@ -441,18 +443,6 @@
 		@include plans-grid-medium-large {
 			padding-bottom: 0;
 		}
-
-		.plans-grid-next__billing-timeframe-vip-price {
-			@include plans-grid-medium-large {
-				font-size: $font-body-small;
-				line-height: 20px;
-			}
-
-			@include plans-grid-large {
-				font-size: $font-body-extra-small;
-				line-height: 16px;
-			}
-		}
 	}
 
 	&.popular-plan-parent-class {
@@ -501,13 +491,6 @@
 			font-weight: 400;
 			font-size: $font-body-extra-small;
 			padding: 0 19px 24px 20px;
-
-			.plans-grid-next__billing-timeframe-vip-price {
-				font-size: $font-body;
-				line-height: 24px;
-				font-weight: 400;
-				color: var(--studio-gray-80);
-			}
 		}
 
 		&.popular-plan-parent-class {

package/src/components/plan-button/style.scss

@@ -6,6 +6,7 @@
 	padding: 10px 12px;
 	border: unset;
 	text-align: center;
+	text-wrap: balance;
 	width: 100%;
 	color: var(--color-text-inverted);
 
@@ -51,10 +52,10 @@
 	}
 
 	&.is-business-plan {
-		background-color: var(--studio-woocommerce-purple-50);
+		background-color: var(--studio-woocommerce-purple-60);
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-50);
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-60);
 		}
 
 		&:hover {
@@ -64,11 +65,11 @@
 		+ .button.is-borderless {
 			background: transparent;
 			font-size: $font-body-small;
-			color: var(--studio-woocommerce-purple-50);
+			color: var(--studio-woocommerce-purple-60);
 			text-decoration: none;
 
 			&:focus {
-				box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-50);
+				box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-60);
 			}
 		}
 	}
@@ -101,14 +102,14 @@
 	}
 
 	&.is-ecommerce-plan {
-		background-color: var(--studio-woocommerce-purple-70);
+		background-color: var(--studio-woocommerce-purple-40);
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-70);
+			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-40);
 		}
 
 		&:hover {
-			background-color: var(--studio-woocommerce-purple-80);
+			background-color: var(--studio-woocommerce-purple-50);
 		}
 	}
 

package/src/components/plan-type-selector/style.scss

@@ -162,7 +162,9 @@
 				display: none;
 			}
 		}
-		.components-custom-select-control__label {
+
+		.components-custom-select-control__label,
+		.components-base-control__label {
 			display: none;
 		}
 	}

package/src/components/shared/billing-timeframe/index.tsx

@@ -5,7 +5,7 @@ import {
 	isFreePlan,
 } from '@automattic/calypso-products';
 import styled from '@emotion/styled';
-import { useTranslate, formatCurrency } from 'i18n-calypso';
+import { useTranslate, formatCurrency, fixMe } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../grid-context';
 import usePlanBillingDescription from '../../../hooks/data-store/use-plan-billing-description';
 import type { GridPlan } from '../../../types';
@@ -78,14 +78,22 @@ const BillingTimeframe = ( { showRefundPeriod, planSlug }: Props ) => {
 	}
 
 	if ( isWpcomEnterpriseGridPlan( planSlug ) ) {
-		const price = formatCurrency( 25000, 'USD' );
+		const price = formatCurrency( 25000, 'USD', { stripZeros: true } );
 
 		return (
-			<div className="plans-grid-next__billing-timeframe-vip-price">
-				{ translate( 'Starts at {{b}}%(price)s{{/b}} yearly', {
-					args: { price },
-					components: { b: <b /> },
-					comment: 'Translators: the price is in US dollars for all users (US$25,000)',
+			<div>
+				{ fixMe( {
+					text: 'Starts at {{b}}%(price)s{{/b}} annually',
+					newCopy: translate( 'Starts at {{b}}%(price)s{{/b}} annually', {
+						args: { price },
+						components: { b: <b /> },
+						comment: 'Translators: the price is in US dollars for all users (US$25,000)',
+					} ),
+					oldCopy: translate( 'Starts at {{b}}%(price)s{{/b}} yearly', {
+						args: { price },
+						components: { b: <b /> },
+						comment: 'Translators: the price is in US dollars for all users (US$25,000)',
+					} ),
 				} ) }
 			</div>
 		);

package/src/components/shared/header-price/style.scss

@@ -76,9 +76,9 @@
 }
 
 .plans-grid-next-header-price__badge {
-	background-color: var(--studio-green-0);
+	background-color: var(--studio-green-5);
 	border-radius: 4px;
-	color: var(--studio-green-40);
+	color: var(--studio-green-80);
 	display: inline-block;
 	font-size: 0.75rem;
 	font-weight: 500;

package/src/components/sticky-container.tsx

@@ -1,7 +1,7 @@
 import { Global, css } from '@emotion/react';
 import styled from '@emotion/styled';
 import clsx from 'clsx';
-import { useRef, type ElementType, useState, useLayoutEffect, ReactNode } from 'react';
+import { useRef, type ElementType, useState, useLayoutEffect, ReactNode, useEffect } from 'react';
 
 type Props = {
 	/**
@@ -41,17 +41,19 @@ type Props = {
 const styles = ( {
 	disabled,
 	stickyOffset,
+	stickyPadding,
 	zIndex,
 }: {
 	disabled: boolean;
 	stickyOffset: number;
+	stickyPadding: number;
 	zIndex: number;
 } ) =>
 	disabled
 		? ''
 		: css`
 				position: sticky;
-				top: ${ stickyOffset + 'px' };
+				top: ${ stickyOffset - stickyPadding + 'px' };
 				z-index: ${ zIndex };
 		  `;
 
@@ -59,6 +61,28 @@ const Container = styled.div`
 	${ styles }
 `;
 
+/**
+ * Renders a sticky container.
+ *
+ * The following is an illustration on how the container's top property is calculated.
+ *
+ *                                    +~~~~~~~~ stickyParent (where the container scrolls)
+ * stickyOffset  ~~~~~~~~~~+          |
+ * (e.g. masterbar)        |          |
+ *                         v          v
+ *                  +------#-----------------+
+ *                  |      #        |<~~~~~~~+~~~~~ stickyPadding
+ *                  | +----#--------------+  |
+ *                  | |    #   @          |<~+~~~~~ stickyParent's content area
+ *                  | |    #   @          |  |
+ *                  | |    #   @ <~~~~~~~~+~~+~~~~~ the container's top
+ *                  | |    #   @          |  |      (= stickyOffset - stickyPadding)
+ *                  | |  =============    |  |
+ *                  | |     ^             |  |
+ *                  | |     |             |  |
+ *                  | |     +~~~~~~~~~~~~~+~~+~~~~~ the container
+ *                  | |                   |  |
+ */
 export function StickyContainer( props: Props ) {
 	const {
 		stickyOffset = 0,
@@ -70,8 +94,53 @@ export function StickyContainer( props: Props ) {
 	} = props;
 
 	const stickyRef = useRef( null );
+	const [ stickyParent, setStickyParent ] = useState< HTMLElement | null >( null );
+	const [ stickyPadding, setStickyPadding ] = useState( 0 );
 	const [ isStuck, setIsStuck ] = useState( false );
 
+	/**
+	 * Calculate the first scrollable parent and its padding-top.
+	 */
+	useEffect( () => {
+		if ( ! stickyRef.current || typeof getComputedStyle === 'undefined' ) {
+			return;
+		}
+
+		let scrollParent = stickyRef.current as HTMLElement | null;
+		while ( scrollParent ) {
+			const style = getComputedStyle( scrollParent );
+			const overflowY = style.overflowY;
+			if ( overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay' ) {
+				break;
+			}
+			scrollParent = scrollParent.parentElement;
+		}
+
+		const receiveScrollParent = ( el: HTMLElement ) => {
+			const styles = getComputedStyle( el );
+			const paddingTop = parseFloat( styles.paddingTop );
+			setStickyParent( scrollParent );
+			setStickyPadding( paddingTop );
+		};
+
+		if ( scrollParent ) {
+			scrollParent.style.position = 'relative';
+			receiveScrollParent( scrollParent );
+
+			if ( typeof ResizeObserver !== 'undefined' ) {
+				const observer = new ResizeObserver(
+					( [ parent ]: Parameters< ResizeObserverCallback >[ 0 ] ) => {
+						receiveScrollParent( parent.target as HTMLElement );
+					}
+				);
+				observer.observe( scrollParent );
+				return () => {
+					observer.disconnect();
+				};
+			}
+		}
+	}, [] );
+
 	/**
 	 * This effect sets the value of `isStuck` state when it detects that
 	 * the element is sticky.
@@ -102,6 +171,7 @@ export function StickyContainer( props: Props ) {
 				}
 			},
 			{
+				root: stickyParent,
 				rootMargin: `-${ stickyOffset + 1 }px 0px 0px 0px`,
 				threshold: [ 0, 1 ],
 			}
@@ -114,7 +184,7 @@ export function StickyContainer( props: Props ) {
 		return () => {
 			observer.disconnect();
 		};
-	}, [ disabled, stickyOffset ] );
+	}, [ disabled, stickyParent, stickyOffset, stickyPadding ] );
 
 	const isStuckFinalState = ! disabled && isStuck;
 	return (
@@ -135,6 +205,7 @@ export function StickyContainer( props: Props ) {
 				as={ element }
 				ref={ stickyRef }
 				stickyOffset={ stickyOffset }
+				stickyPadding={ stickyPadding }
 				disabled={ disabled }
 				className={ clsx( { [ stickyClass ]: isStuckFinalState } ) }
 				zIndex={ zIndex }

package/src/components/test/billing-timeframe.tsx

@@ -49,7 +49,7 @@ describe( 'BillingTimeframe', () => {
 		jest.clearAllMocks();
 	} );
 
-	test( `should show savings with yearly when plan is monthly`, () => {
+	test( 'should show savings with yearly when plan is monthly', () => {
 		const planMonthlyPricing = {
 			currencyCode: 'USD',
 			originalPrice: { full: 120, monthly: 10 },
@@ -309,7 +309,7 @@ describe( 'BillingTimeframe', () => {
 		expect( getByText( /Refundable within 7 days. No questions asked./ ) ).toBeInTheDocument();
 	} );
 
-	test( `refund period can't be shown for free plan`, () => {
+	test( "refund period can't be shown for free plan", () => {
 		const pricing = {
 			currencyCode: 'USD',
 			originalPrice: { full: 0, monthly: 0 },

package/src/hooks/data-store/types.ts

@@ -10,6 +10,7 @@ export interface UseGridPlansParams {
 	eligibleForFreeHostingTrial?: boolean;
 	hasRedeemedDomainCredit?: boolean;
 	hiddenPlans?: HiddenPlans;
+	hideCurrentPlan?: boolean;
 	intent?: PlansIntent;
 	isDisplayingPlansNeededForFeature?: boolean;
 	isInSignup?: boolean;

package/src/hooks/data-store/use-grid-plans-for-features-grid.ts

@@ -10,6 +10,7 @@ const useGridPlansForFeaturesGrid = ( {
 	eligibleForFreeHostingTrial,
 	hasRedeemedDomainCredit,
 	hiddenPlans,
+	hideCurrentPlan,
 	intent,
 	isDisplayingPlansNeededForFeature,
 	isInSignup,
@@ -62,18 +63,21 @@ const useGridPlansForFeaturesGrid = ( {
 		}
 
 		return gridPlans.reduce( ( acc, gridPlan ) => {
-			if ( gridPlan.isVisible ) {
-				return [
-					...acc,
-					{
-						...gridPlan,
-						features: planFeaturesForFeaturesGrid[ gridPlan.planSlug ],
-					},
-				];
+			if ( ! gridPlan.isVisible ) {
+				return acc;
 			}
-			return acc;
+			if ( hideCurrentPlan && gridPlan.current ) {
+				return acc;
+			}
+			return [
+				...acc,
+				{
+					...gridPlan,
+					features: planFeaturesForFeaturesGrid[ gridPlan.planSlug ],
+				},
+			];
 		}, [] as GridPlan[] );
-	}, [ gridPlans, planFeaturesForFeaturesGrid ] );
+	}, [ gridPlans, planFeaturesForFeaturesGrid, hideCurrentPlan ] );
 };
 
 export default useGridPlansForFeaturesGrid;

package/src/hooks/data-store/use-plan-billing-description.tsx

@@ -73,7 +73,7 @@ export default function usePlanBillingDescription( {
 			yearlyVariantMaybeDiscountedPrice &&
 			yearlyVariantMaybeDiscountedPrice < originalPrice.monthly
 		) {
-			return translate( `Save %(discountRate)s%% by paying annually`, {
+			return translate( 'Save %(discountRate)s%% by paying annually', {
 				args: {
 					discountRate: Math.floor(
 						( 100 * ( originalPrice.monthly - yearlyVariantMaybeDiscountedPrice ) ) /

package/src/hooks/use-grid-size.ts

@@ -1,5 +1,4 @@
 import { useLayoutEffect, useState } from '@wordpress/element';
-import ResizeObserver from 'resize-observer-polyfill';
 
 interface Props {
 	containerRef: React.MutableRefObject< HTMLDivElement | null >;

package/src/lib/sort-plan-properties.ts

@@ -1,46 +1,27 @@
-import { isFreePlan } from '@automattic/calypso-products';
-import { isPopularPlan } from '../hooks/data-store/is-popular-plan';
 import type { GridPlan } from '../types';
 
 export function sortPlans(
 	gridPlans: GridPlan[],
-	currentSitePlanProductSlug?: string | null,
-	isMobile?: boolean
+	currentSitePlanProductSlug?: string | null
 ): GridPlan[] {
-	let firstPlanIndex = -1;
-
-	// Try to find the current paid plan in the plans list
-	if ( currentSitePlanProductSlug && ! isFreePlan( currentSitePlanProductSlug ) ) {
-		firstPlanIndex = gridPlans.findIndex( ( gridPlan ) => {
-			return gridPlan.planSlug === currentSitePlanProductSlug;
-		} );
+	// If we don't have plans to sort, return empty array
+	if ( ! gridPlans.length ) {
+		return [];
 	}
-
-	if ( firstPlanIndex < 0 ) {
-		// Site is on a free plan or the current plan is not in the list. Try to find the popular plan.
-		firstPlanIndex = gridPlans.findIndex( ( { planSlug } ) => {
-			return isPopularPlan( planSlug );
+	// If we have a current site plan and we're on mobile, sort to prioritize it
+	if ( currentSitePlanProductSlug ) {
+		return [ ...gridPlans ].sort( ( planA, planB ) => {
+			// If planA is the current plan, it should come first (-1 moves it up)
+			if ( planA.planSlug === currentSitePlanProductSlug ) {
+				return -1;
+			}
+			// If planB is the current plan, it should come first (1 moves planA down)
+			if ( planB.planSlug === currentSitePlanProductSlug ) {
+				return 1;
+			}
+			// Otherwise, maintain original order
+			return 0;
 		} );
-		// If the popular plan exists, on mobile, it will be second plan for comparison.
-		if ( firstPlanIndex > 0 && isMobile ) {
-			firstPlanIndex = firstPlanIndex - 1;
-		}
 	}
-
-	if ( firstPlanIndex < 0 ) {
-		return gridPlans;
-	}
-
-	return [
-		// The first plan
-		gridPlans[ firstPlanIndex ],
-		// Rest of the plans in default order
-		...gridPlans.slice( firstPlanIndex + 1 ),
-		// Leftover plans (before the first plan) in descending order of value
-		...gridPlans.slice( 0, firstPlanIndex ).sort( ( planA, planB ) => {
-			return (
-				( planB?.pricing.originalPrice.full || 0 ) - ( planA?.pricing.originalPrice.full || 0 )
-			);
-		} ),
-	].filter( ( gridPlan ) => Boolean( gridPlan ) );
+	return [ ...gridPlans ];
 }