@automattic/plans-grid-next 1.0.0

package/src/components/shared/storage/components/storage-feature-label.tsx

@@ -0,0 +1,68 @@
+import { PlanSlug } from '@automattic/calypso-products';
+import clsx from 'clsx';
+import { formatCurrency, useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../../../grid-context';
+import useIsLargeCurrency from '../../../../hooks/use-is-large-currency';
+import usePlanStorage from '../hooks/use-plan-storage';
+import usePurchasedStorageAddOn from '../hooks/use-purchased-storage-add-on';
+import useStorageString from '../hooks/use-storage-string';
+
+interface Props {
+	planSlug: PlanSlug;
+}
+
+const StorageFeatureLabel = ( { planSlug }: Props ) => {
+	const translate = useTranslate();
+	const { gridPlansIndex, enableStorageAsBadge = true } = usePlansGridContext();
+	const {
+		pricing: { currencyCode },
+	} = gridPlansIndex[ planSlug ];
+	const planStorage = usePlanStorage( planSlug );
+	const purchasedStorageAddOn = usePurchasedStorageAddOn();
+
+	const monthlyAddedCost = purchasedStorageAddOn?.prices?.monthlyPrice ?? 0;
+	const formattedMonthlyAddedCost =
+		monthlyAddedCost &&
+		currencyCode &&
+		formatCurrency( monthlyAddedCost, currencyCode, { isSmallestUnit: true } );
+	const isLargeCurrency = useIsLargeCurrency( {
+		prices: [ monthlyAddedCost ],
+		isAddOn: true,
+		currencyCode: currencyCode ?? 'USD',
+	} );
+	const totalStorageString = useStorageString(
+		planStorage + ( purchasedStorageAddOn?.quantity ?? 0 )
+	);
+
+	const containerClasses = clsx( 'plans-grid-next-storage-feature-label__container', {
+		'is-row': ! isLargeCurrency,
+	} );
+
+	const volumeJSX = enableStorageAsBadge ? (
+		<div className="plans-grid-next-storage-feature-label__volume is-badge">
+			{ totalStorageString }
+		</div>
+	) : (
+		<div className="plans-grid-next-storage-feature-label__volume">
+			{ translate( '%s storage', {
+				args: [ totalStorageString ],
+				comment: '%s is the amount of storage, including the unit. For example "10 GB"',
+			} ) }
+		</div>
+	);
+
+	return formattedMonthlyAddedCost ? (
+		<div className={ containerClasses }>
+			{ volumeJSX }
+			<div className="plans-grid-next-storage-feature-label__offset-price">
+				{ translate( '+ %(formattedMonthlyAddedCost)s/month', {
+					args: { formattedMonthlyAddedCost },
+				} ) }
+			</div>
+		</div>
+	) : (
+		volumeJSX
+	);
+};
+
+export default StorageFeatureLabel;

package/src/components/shared/storage/constants.ts

@@ -0,0 +1,3 @@
+import { PLAN_BUSINESS, PLAN_ECOMMERCE } from '@automattic/calypso-products';
+
+export const ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE = [ PLAN_BUSINESS, PLAN_ECOMMERCE ];

package/src/components/shared/storage/hooks/use-default-storage-option.ts

@@ -0,0 +1,34 @@
+import { type PlanSlug, type WPComPlanStorageFeatureSlug } from '@automattic/calypso-products';
+import { AddOns } from '@automattic/data-stores';
+import { usePlansGridContext } from '../../../../grid-context';
+import { ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE } from '../constants';
+import usePurchasedStorageAddOn from './use-purchased-storage-add-on';
+
+type Props = {
+	planSlug: PlanSlug;
+};
+
+/**
+ * Returns the storage add-on upsell option to display to
+ * the user on initial load. If the user has purchased a
+ * storage add-on, that will be the default. Otherwise,
+ * the storage included with any given plan will be used.
+ */
+export default function useDefaultStorageOption( {
+	planSlug,
+}: Props ): AddOns.StorageAddOnSlug | WPComPlanStorageFeatureSlug | undefined {
+	const { gridPlansIndex } = usePlansGridContext();
+	const {
+		features: { storageFeature },
+	} = gridPlansIndex[ planSlug ];
+	const purchasedStorageAddOn = usePurchasedStorageAddOn();
+	const planStorageFeatureSlug = storageFeature?.getSlug() as WPComPlanStorageFeatureSlug;
+
+	if ( ! purchasedStorageAddOn ) {
+		return planStorageFeatureSlug;
+	}
+
+	return ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE.includes( planSlug )
+		? ( purchasedStorageAddOn.addOnSlug as AddOns.StorageAddOnSlug )
+		: planStorageFeatureSlug;
+}

package/src/components/shared/storage/hooks/use-plan-storage.ts

@@ -0,0 +1,41 @@
+import {
+	FEATURE_1GB_STORAGE,
+	FEATURE_6GB_STORAGE,
+	FEATURE_13GB_STORAGE,
+	FEATURE_50GB_STORAGE,
+	FEATURE_200GB_STORAGE,
+	FEATURE_P2_3GB_STORAGE,
+	FEATURE_P2_13GB_STORAGE,
+	type PlanSlug,
+	type WPComPlanStorageFeatureSlug,
+} from '@automattic/calypso-products';
+import { usePlansGridContext } from '../../../../grid-context';
+
+function usePlanStorage( planSlug: PlanSlug ) {
+	const { gridPlansIndex } = usePlansGridContext();
+	const {
+		features: { storageFeature },
+	} = gridPlansIndex[ planSlug ];
+	const storageFeatureSlug = storageFeature?.getSlug() as WPComPlanStorageFeatureSlug | undefined;
+
+	switch ( storageFeatureSlug ) {
+		case FEATURE_1GB_STORAGE:
+			return 1;
+		case FEATURE_6GB_STORAGE:
+			return 6;
+		case FEATURE_13GB_STORAGE:
+			return 13;
+		case FEATURE_50GB_STORAGE:
+			return 50;
+		case FEATURE_P2_3GB_STORAGE:
+			return 3;
+		case FEATURE_P2_13GB_STORAGE:
+			return 13;
+		case FEATURE_200GB_STORAGE:
+			return 200;
+		default:
+			return 0;
+	}
+}
+
+export default usePlanStorage;

package/src/components/shared/storage/hooks/use-purchased-storage-add-on.ts

@@ -0,0 +1,53 @@
+import { PRODUCT_1GB_SPACE } from '@automattic/calypso-products';
+import { Purchases, AddOns } from '@automattic/data-stores';
+import { useMemo } from '@wordpress/element';
+import { usePlansGridContext } from '../../../../grid-context';
+
+// TODO
+// how can we eliminate the need of mapping like this?
+// ideally, there shouldn't be additional add on slug, but only the consistent product slug being used
+// throughout the backend and the frontend.
+const quantityToAddOnSlug = ( quantity: number ): AddOns.StorageAddOnSlug | null => {
+	switch ( quantity ) {
+		case 50:
+			return AddOns.ADD_ON_50GB_STORAGE;
+		case 100:
+			return AddOns.ADD_ON_100GB_STORAGE;
+		case 150:
+			return AddOns.ADD_ON_150GB_STORAGE;
+		case 200:
+			return AddOns.ADD_ON_200GB_STORAGE;
+		case 250:
+			return AddOns.ADD_ON_250GB_STORAGE;
+		case 300:
+			return AddOns.ADD_ON_300GB_STORAGE;
+		case 350:
+			return AddOns.ADD_ON_350GB_STORAGE;
+		default:
+			return null;
+	}
+};
+
+export default function usePurchasedStorageAddOn(): AddOns.AddOnMeta | null {
+	const { siteId } = usePlansGridContext();
+	const spaceUpgradesPurchased = Purchases.useSitePurchasesByProductSlug( {
+		siteId,
+		productSlug: PRODUCT_1GB_SPACE,
+	} );
+	const storageAddOns = AddOns.useStorageAddOns( { siteId } );
+
+	return useMemo( () => {
+		if ( ! spaceUpgradesPurchased ) {
+			return null;
+		}
+
+		// storage add-on is a tiered product, so we can assume it contains only one product entry here.
+		const purchasedAddOnSlug = quantityToAddOnSlug(
+			Object.values( spaceUpgradesPurchased )[ 0 ].purchaseRenewalQuantity
+		);
+		const purchasedAddOn = storageAddOns
+			.filter( ( addOn ): addOn is AddOns.AddOnMeta => addOn !== null ) // TODO: fix the related hooks so this won't be needed
+			.find( ( { addOnSlug } ) => purchasedAddOnSlug === addOnSlug );
+		return purchasedAddOn ?? null;
+	}, [ spaceUpgradesPurchased, storageAddOns ] );
+}

package/src/components/shared/storage/hooks/use-storage-string.ts

@@ -0,0 +1,13 @@
+import { useTranslate } from 'i18n-calypso';
+
+function useStorageString( quantity: number ) {
+	const translate = useTranslate();
+
+	return translate( '%(quantity)d GB', {
+		args: {
+			quantity,
+		},
+	} );
+}
+
+export default useStorageString;

package/src/components/shared/storage/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Hooks
+ */
+export { default as useDefaultStorageOption } from './hooks/use-default-storage-option';
+
+/**
+ * Components
+ */
+export { default as PlanStorage } from './components/plan-storage';

package/src/components/sticky-container.tsx

@@ -0,0 +1,146 @@
+import { Global, css } from '@emotion/react';
+import styled from '@emotion/styled';
+import clsx from 'clsx';
+import { useRef, type ElementType, useState, useLayoutEffect, ReactNode } from 'react';
+
+type Props = {
+	/**
+	 * Function that renders the content when the element is stuck
+	 * @param isStuck - Indicates if the element is stuck
+	 * @returns ReactNode
+	 */
+	children: ( isStuck: boolean ) => ReactNode;
+
+	/**
+	 * CSS class applied when the element is "stuck"
+	 */
+	stickyClass?: string;
+
+	/**
+	 * Element type to render (defaults to div)
+	 */
+	element?: ElementType;
+
+	/**
+	 * Offset from the top of the scrolling container to trigger stickiness (default 0)
+	 */
+	stickyOffset?: number;
+
+	/**
+	 * Set to true to disable sticky behavior
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Manually set z-index. Useful for managing the stacking order of sticky elements when multiple components compete.
+	 * Higher z-index values will make the element appear on top of elements with lower z-index values.
+	 */
+	zIndex?: number;
+};
+
+const styles = ( {
+	disabled,
+	stickyOffset,
+	zIndex,
+}: {
+	disabled: boolean;
+	stickyOffset: number;
+	zIndex: number;
+} ) =>
+	disabled
+		? ''
+		: css`
+				position: sticky;
+				top: ${ stickyOffset + 'px' };
+				z-index: ${ zIndex };
+		  `;
+
+const Container = styled.div`
+	${ styles }
+`;
+
+export function StickyContainer( props: Props ) {
+	const {
+		stickyOffset = 0,
+		zIndex = 2,
+		stickyClass = '',
+		element = 'div',
+		disabled = false,
+		children,
+	} = props;
+
+	const stickyRef = useRef( null );
+	const [ isStuck, setIsStuck ] = useState( false );
+
+	/**
+	 * This effect sets the value of `isStuck` state when it detects that
+	 * the element is sticky.
+	 * The top property of the root margin is set at -1px (plus optional offset).
+	 * So when position:sticky takes effect, the intersection ratio will always be ~99%
+	 */
+	useLayoutEffect( () => {
+		if ( typeof IntersectionObserver === 'undefined' ) {
+			return;
+		}
+		const observer = new IntersectionObserver(
+			( [ entry ] ) => {
+				if ( disabled ) {
+					return;
+				}
+				if ( entry.intersectionRatio === 0 ) {
+					// The element is out of view
+					setIsStuck( false );
+				} else if (
+					entry.rootBounds?.bottom !== undefined &&
+					entry.boundingClientRect.bottom >= entry.rootBounds?.bottom
+				) {
+					// The element is intersecting, but it is at the bottom of the screen
+					setIsStuck( false );
+				} else {
+					// The element is in the "stuck" state
+					setIsStuck( entry.intersectionRatio < 1 );
+				}
+			},
+			{
+				rootMargin: `-${ stickyOffset + 1 }px 0px 0px 0px`,
+				threshold: [ 0, 1 ],
+			}
+		);
+
+		if ( stickyRef.current ) {
+			observer.observe( stickyRef.current );
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [ disabled, stickyOffset ] );
+
+	const isStuckFinalState = ! disabled && isStuck;
+	return (
+		<>
+			<Global
+				styles={ css`
+					/**
+				 * .layout__content has overflow set to hidden, which prevents position: sticky from working.
+				 * Instead of removing it globally, this CSS only unsets the property when this component is rendered.
+				 */
+					.layout__content {
+						overflow: unset;
+					}
+				` }
+			/>
+			<Container
+				{ ...props }
+				as={ element }
+				ref={ stickyRef }
+				stickyOffset={ stickyOffset }
+				disabled={ disabled }
+				className={ clsx( { [ stickyClass ]: isStuckFinalState } ) }
+				zIndex={ zIndex }
+			>
+				{ children( isStuckFinalState ) }
+			</Container>
+		</>
+	);
+}