@automattic/plans-grid-next 1.0.0

package/src/components/plan-type-selector/index.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from '@wordpress/element';
+import clsx from 'clsx';
+import * as React from 'react';
+import { StickyContainer } from '../sticky-container';
+import { IntervalTypeSelector } from './components/interval-type-selector';
+import type { PlanTypeSelectorProps } from '../../types';
+
+import './style.scss';
+
+const PlanTypeSelector: React.FunctionComponent< PlanTypeSelectorProps > = ( {
+	kind,
+	enableStickyBehavior = false,
+	layoutClassName,
+	stickyPlanTypeSelectorOffset = 0,
+	...props
+} ) => {
+	useEffect( () => {
+		props.recordTracksEvent?.( 'calypso_plans_plan_type_selector_view', {
+			kind,
+		} );
+	}, [] );
+
+	if ( kind === 'interval' ) {
+		return (
+			<StickyContainer
+				stickyClass="is-sticky-plan-type-selector"
+				disabled={ ! enableStickyBehavior }
+				stickyOffset={ stickyPlanTypeSelectorOffset }
+				zIndex={ 2 }
+			>
+				{ () => (
+					<div className={ clsx( layoutClassName ) }>
+						<div className="plan-type-selector">
+							<IntervalTypeSelector { ...props } />
+						</div>
+					</div>
+				) }
+			</StickyContainer>
+		);
+	}
+	/**
+	 * Allowance for other types of toggles that maybe based on other plan attributes such as customer types
+	 * Eg: Customer type toggle https://github.com/Automattic/wp-calypso/pull/27125
+	 * Potential for a cleanup if such a dynamic is not required and plan type selector will always be based on time intervals, i.e. YAGNI.
+	 */
+
+	return null;
+};
+
+export default PlanTypeSelector;

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

@@ -0,0 +1,196 @@
+@import "../../media-queries";
+
+.plan-type-selector {
+	width: fit-content;
+	min-width: 275px;
+	background-color: var(--studio-white);
+	z-index: 2;
+}
+
+.is-sticky-plan-type-selector {
+	.plan-type-selector {
+		@include plan-type-selector-custom-mobile-breakpoint {
+			width: 100%;
+		}
+	}
+}
+
+.plan-type-selector__title {
+	margin-bottom: 20px;
+}
+
+.plan-type-selector .plan-type-selector__interval-type {
+	width: fit-content;
+	margin: 0 auto;
+	.is-sticky-header-row & {
+		margin: unset;
+	}
+
+	.segmented-control.price-toggle {
+		background-color: #f2f2f2;
+		border-radius: 6px; /* stylelint-disable-line scales/radii */
+		margin-top: 16px;
+		margin-top: 0;
+
+		.segmented-control__item {
+			border: 6px;
+			padding: 2px;
+
+			&.is-selected + .segmented-control__item .segmented-control__link {
+				border-left-color: #f2f2f2;
+				&:hover {
+					border-left-color: var(--studio-gray-10);
+				}
+			}
+
+			.segmented-control__link {
+				color: var(--studio-gray-90);
+				font-weight: 500;
+				padding: 6px 11px;
+				border: 1px solid #f2f2f2;
+				border-radius: 5px; /* stylelint-disable-line scales/radii */
+				&:hover {
+					border: 1px solid var(--studio-gray-10);
+					background-color: unset;
+					border-radius: 5px; /* stylelint-disable-line scales/radii */
+				}
+				&:focus {
+					box-shadow: 0 0 0 1px var(--studio-gray-90);
+					outline: none;
+				}
+			}
+
+			&.is-selected .segmented-control__link {
+				color: var(--studio-gray-80);
+				font-weight: 400;
+				border: 0.5px solid rgba(0, 0, 0, 0.04);
+				box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
+				border-radius: 5px; /* stylelint-disable-line scales/radii */
+				background-color: var(--studio-white);
+				&:hover {
+					background-color: var(--studio-white);
+					border-color: rgba(0, 0, 0, 0.04);
+				}
+			}
+
+			.segmented-control__text {
+				white-space: initial;
+			}
+		}
+	}
+}
+
+.plan-type-selector .plan-type-selector__interval-type-dropdown-container {
+	margin: 0 auto;
+	.is-sticky-plan-type-selector & {
+		width: 100%;
+		margin: unset;
+	}
+	.plan-type-selector__interval-type-dropdown {
+		&,
+		&:visited,
+		&:hover span.name {
+			color: var(--color-text);
+		}
+
+		button {
+			height: auto;
+		}
+
+		button .plan-type-selector__interval-type-dropdown-option {
+			padding-right: 32px;
+		}
+
+		.plan-type-selector__interval-type-dropdown-option {
+			display: flex;
+			padding: 13px 13px 13px 16px;
+			font-size: 0.875rem;
+			text-wrap: nowrap;
+
+			.discount {
+				display: flex;
+				border-radius: 3px;
+				line-height: 20px;
+			}
+		}
+
+		.components-flex {
+			width: 100%;
+			.components-input-control__container {
+				.components-custom-select-control__button {
+					min-width: 225px;
+					padding: 0;
+					height: auto;
+					.is-sticky-plan-type-selector & {
+						height: 64px;
+					}
+				}
+				.components-input-control__backdrop {
+					border-color: var(--studio-gray-10);
+				}
+
+				.components-input-control__suffix > div {
+					padding-right: 13px;
+				}
+			}
+		}
+		.components-custom-select-control__menu {
+			margin: 0;
+			border-radius: 0;
+			border-bottom-right-radius: 2px;
+			border-bottom-left-radius: 2px;
+			box-sizing: border-box;
+			border: 1px solid var(--studio-gray-10);
+			margin-top: -2px;
+
+			.is-sticky-plan-type-selector & {
+				border-bottom-right-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
+		.components-custom-select-control__item {
+			grid-template-columns: auto min-content;
+			padding: 0;
+			.is-highlighted {
+				background-color: var(--studio-gray-0);
+			}
+			.a {
+				padding: 11.5px 16px;
+			}
+
+			.components-custom-select-control__item-icon {
+				display: none;
+			}
+		}
+		.components-custom-select-control__label {
+			display: none;
+		}
+	}
+}
+
+div.is-sticky-plan-type-selector .plan-type-selector__interval-type-dropdown {
+	width: 100%;
+	@include plan-type-selector-custom-mobile-breakpoint {
+		// Display above sticky feature and comparison grid plan headers
+		.components-flex {
+			width: 100vw;
+			padding: 0;
+			border-bottom: 1px solid #e0e0e0;
+			border-bottom-right-radius: 0;
+			border-bottom-left-radius: 0;
+		}
+
+		.components-custom-select-control__menu {
+			width: 100%;
+			border: 1px solid #e0e0e0;
+			/*
+			* Override the default popup menu z index so that it does not appear above other sticky elements.
+			* The default z-index is 1_000_000 which is too high
+			*/
+			z-index: 3;
+		}
+		.components-input-control__backdrop.components-input-control__backdrop {
+			border: none;
+		}
+	}
+}

package/src/components/plans-2023-tooltip.tsx

@@ -0,0 +1,85 @@
+import { Tooltip } from '@automattic/components';
+import styled from '@emotion/styled';
+import { TranslateResult } from 'i18n-calypso';
+import { Dispatch, PropsWithChildren, SetStateAction, useRef } from 'react';
+import { hasTouch } from '../lib/touch-detect';
+
+const HoverAreaContainer = styled.span`
+	max-width: 220px;
+`;
+
+const StyledTooltip = styled( Tooltip )`
+	&.tooltip.popover .popover__inner {
+		background: var( --color-masterbar-background );
+		text-align: start;
+		border-radius: 4px;
+		min-height: 32px;
+		width: 210px;
+		align-items: center;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 1em;
+		padding: 8px 10px;
+		top: -8px;
+		overflow-wrap: break-word;
+	}
+`;
+
+export type Plans2023TooltipProps = PropsWithChildren< {
+	text?: TranslateResult;
+	setActiveTooltipId: Dispatch< SetStateAction< string > >;
+	activeTooltipId: string;
+	id: string;
+	showOnMobile?: boolean;
+} >;
+
+export const Plans2023Tooltip = ( {
+	showOnMobile = true,
+	activeTooltipId,
+	setActiveTooltipId,
+	id,
+	text,
+	children,
+}: Plans2023TooltipProps ) => {
+	const tooltipRef = useRef< HTMLDivElement >( null );
+	const isTouch = hasTouch();
+
+	if ( ! text ) {
+		return <>{ children }</>;
+	}
+
+	const getMobileActiveTooltip = () => {
+		// Close tooltip if the user clicks on an open tooltip.
+		if ( activeTooltipId === id ) {
+			return '';
+		}
+
+		return id;
+	};
+
+	const isVisible = activeTooltipId === id;
+
+	return (
+		<>
+			<HoverAreaContainer
+				className="plans-2023-tooltip__hover-area-container"
+				ref={ tooltipRef }
+				onMouseEnter={ () => ! isTouch && setActiveTooltipId( id ) }
+				onMouseLeave={ () => ! isTouch && setActiveTooltipId( '' ) }
+				onTouchStart={ () => isTouch && setActiveTooltipId( getMobileActiveTooltip() ) }
+				id={ id }
+			>
+				{ children }
+			</HoverAreaContainer>
+			<StyledTooltip
+				isVisible={ isVisible }
+				position="top"
+				context={ tooltipRef.current }
+				hideArrow
+				showOnMobile={ showOnMobile }
+			>
+				{ text }
+			</StyledTooltip>
+		</>
+	);
+};

package/src/components/popular-badge.tsx

@@ -0,0 +1,30 @@
+import { getPlanClass, PlanSlug } from '@automattic/calypso-products';
+import clsx from 'clsx';
+import { usePlansGridContext } from '../grid-context';
+import PlanPill from './shared/plan-pill';
+
+const PopularBadge: React.FunctionComponent< {
+	isInSignup?: boolean;
+	planSlug: PlanSlug;
+	additionalClassName?: string;
+} > = ( { isInSignup, planSlug, additionalClassName } ) => {
+	const { gridPlansIndex } = usePlansGridContext();
+	const classes = clsx(
+		'plan-features-2023-grid__popular-badge',
+		getPlanClass( planSlug ),
+		additionalClassName
+	);
+	const highlightLabel = gridPlansIndex[ planSlug ]?.highlightLabel;
+
+	return (
+		<>
+			{ highlightLabel && (
+				<div className={ classes }>
+					<PlanPill isInSignup={ isInSignup }>{ highlightLabel }</PlanPill>
+				</div>
+			) }
+		</>
+	);
+};
+
+export default PopularBadge;

package/src/components/shared/README.md

@@ -0,0 +1 @@
+# Shared components

package/src/components/shared/action-button/index.tsx

@@ -0,0 +1,205 @@
+import {
+	type PlanSlug,
+	isP2FreePlan,
+	isFreePlan,
+	PLAN_FREE,
+	isWpcomEnterpriseGridPlan,
+} from '@automattic/calypso-products';
+import { AddOns, WpcomPlansUI } from '@automattic/data-stores';
+import { useSelect } from '@wordpress/data';
+import { formatCurrency, useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../../grid-context';
+import useIsLargeCurrency from '../../../hooks/use-is-large-currency';
+import { usePlanPricingInfoFromGridPlans } from '../../../hooks/use-plan-pricing-info-from-grid-plans';
+import PlanButton from '../../plan-button';
+import { useDefaultStorageOption } from '../../shared/storage';
+import type { GridPlan, PlanActionOverrides } from '../../../types';
+import './style.scss';
+
+type ActionButtonProps = {
+	availableForPurchase: boolean;
+	currentSitePlanSlug?: string | null;
+	isPopular?: boolean;
+	isInSignup?: boolean;
+	isMonthlyPlan?: boolean;
+	planSlug: PlanSlug;
+	buttonText?: string;
+	planActionOverrides?: PlanActionOverrides;
+	showMonthlyPrice: boolean;
+	isStuck: boolean;
+	visibleGridPlans: GridPlan[];
+};
+
+const ActionButton = ( {
+	planSlug,
+	currentSitePlanSlug,
+	visibleGridPlans,
+	availableForPurchase,
+	isStuck,
+	isInSignup,
+	isMonthlyPlan,
+}: ActionButtonProps ) => {
+	const translate = useTranslate();
+	const {
+		gridPlansIndex,
+		siteId,
+		helpers: { useAction },
+	} = usePlansGridContext();
+	const {
+		current,
+		planTitle,
+		pricing: { billingPeriod, currencyCode, originalPrice, discountedPrice },
+		freeTrialPlanSlug,
+		cartItemForPlan,
+	} = gridPlansIndex[ planSlug ];
+	const currentPlanBillingPeriod = currentSitePlanSlug
+		? gridPlansIndex[ currentSitePlanSlug ]?.pricing.billingPeriod
+		: undefined;
+	const { prices } = usePlanPricingInfoFromGridPlans( {
+		gridPlans: visibleGridPlans,
+	} );
+	const isLargeCurrency = useIsLargeCurrency( { prices, currencyCode: currencyCode || 'USD' } );
+	const storageAddOns = AddOns.useStorageAddOns( { siteId } );
+	const selectedStorageOptionForPlan = useSelect(
+		( select ) => select( WpcomPlansUI.store ).getSelectedStorageOptionForPlan( planSlug, siteId ),
+		[ planSlug, siteId ]
+	);
+	const selectedStorageAddOn = storageAddOns?.find( ( addOn ) => {
+		return selectedStorageOptionForPlan && addOn
+			? addOn.addOnSlug === selectedStorageOptionForPlan
+			: false;
+	} );
+
+	const priceString = formatCurrency(
+		( discountedPrice.monthly || originalPrice.monthly ) ?? 0,
+		currencyCode || 'USD',
+		{
+			stripZeros: true,
+			isSmallestUnit: true,
+		}
+	);
+
+	const {
+		primary: { callback, text, status, variant },
+		postButtonText,
+	} = useAction( {
+		availableForPurchase,
+		billingPeriod,
+		isLargeCurrency,
+		isStuck,
+		planSlug,
+		planTitle,
+		priceString,
+		cartItemForPlan,
+		currentPlanBillingPeriod,
+		selectedStorageAddOn,
+	} );
+	const {
+		primary: { callback: freeTrialCallback, text: freeTrialText },
+	} = useAction( {
+		billingPeriod,
+		isFreeTrialAction: true,
+		isLargeCurrency,
+		isStuck,
+		// TODO: Unsure about using free plan as a fallback. We should revisit.
+		planSlug: freeTrialPlanSlug ?? PLAN_FREE,
+		planTitle,
+		priceString,
+		cartItemForPlan: { product_slug: freeTrialPlanSlug ?? PLAN_FREE },
+		currentPlanBillingPeriod,
+		selectedStorageAddOn,
+	} );
+
+	const busy = status === 'blocked';
+
+	const defaultStorageOption = useDefaultStorageOption( { planSlug } );
+	const canPurchaseStorageAddOns = storageAddOns?.some(
+		( storageAddOn ) => ! storageAddOn?.purchased
+	);
+
+	const storageAddOnCheckoutHref = storageAddOns?.find(
+		( addOn ) => selectedStorageOptionForPlan && addOn?.addOnSlug === selectedStorageOptionForPlan
+	)?.checkoutLink;
+
+	const nonDefaultStorageOptionSelected =
+		selectedStorageOptionForPlan && defaultStorageOption !== selectedStorageOptionForPlan;
+
+	let actionButton = (
+		<PlanButton
+			planSlug={ planSlug }
+			onClick={ callback }
+			busy={ busy }
+			disabled={ ! callback || 'disabled' === status }
+			classes={ variant === 'secondary' ? 'is-secondary' : '' }
+		>
+			{ text }
+		</PlanButton>
+	);
+
+	if (
+		( isFreePlan( planSlug ) ||
+			( storageAddOns && ! canPurchaseStorageAddOns && nonDefaultStorageOptionSelected ) ) &&
+		isP2FreePlan( planSlug ) &&
+		current
+	) {
+		return null;
+	}
+
+	if ( availableForPurchase || current || isWpcomEnterpriseGridPlan( planSlug ) ) {
+		// TODO: Move the condition below into the useAction hook
+		if (
+			current &&
+			canPurchaseStorageAddOns &&
+			nonDefaultStorageOptionSelected &&
+			! isMonthlyPlan
+		) {
+			actionButton = (
+				<PlanButton
+					planSlug={ planSlug }
+					classes="is-storage-upgradeable"
+					href={ storageAddOnCheckoutHref }
+					busy={ busy }
+				>
+					{ translate( 'Upgrade' ) }
+				</PlanButton>
+			);
+		} else {
+			const hasFreeTrialPlan = isInSignup ? !! freeTrialPlanSlug : false;
+			actionButton = hasFreeTrialPlan ? (
+				<div className="plans-grid-next-action-button__multi">
+					<PlanButton planSlug={ planSlug } onClick={ () => freeTrialCallback() } busy={ busy }>
+						{ freeTrialText }
+					</PlanButton>
+					{ ! isStuck && ( // along side with the free trial CTA, we also provide an option for purchasing the plan directly here
+						<PlanButton planSlug={ planSlug } onClick={ callback } busy={ busy } borderless>
+							{ text }
+						</PlanButton>
+					) }
+				</div>
+			) : (
+				<>
+					<PlanButton
+						planSlug={ planSlug }
+						disabled={ ! callback || 'disabled' === status }
+						busy={ busy }
+						onClick={ callback }
+						current={ current }
+					>
+						{ text }
+					</PlanButton>
+					{ postButtonText && (
+						<span className="plans-grid-next-action-button__label">{ postButtonText }</span>
+					) }
+				</>
+			);
+		}
+	}
+
+	return (
+		<div className="plans-grid-next-action-button">
+			<div className="plans-grid-next-action-button__content">{ actionButton }</div>
+		</div>
+	);
+};
+
+export default ActionButton;

package/src/components/shared/action-button/style.scss

@@ -0,0 +1,12 @@
+.plans-grid-next-action-button__label {
+	text-align: center;
+	font-size: 0.75rem;
+	display: block;
+	margin-top: 10px;
+}
+
+.plans-grid-next-action-button__multi {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}

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

@@ -0,0 +1,106 @@
+import {
+	isWpcomEnterpriseGridPlan,
+	PlanSlug,
+	isWooExpressPlan,
+	isFreePlan,
+} from '@automattic/calypso-products';
+import styled from '@emotion/styled';
+import { useTranslate, formatCurrency } from 'i18n-calypso';
+import { usePlansGridContext } from '../../../grid-context';
+import usePlanBillingDescription from '../../../hooks/data-store/use-plan-billing-description';
+import type { GridPlan } from '../../../types';
+
+const DiscountPromotion = styled.div`
+	text-transform: uppercase;
+	font-weight: 600;
+	color: #306e27;
+	font-size: $font-body-extra-small;
+	margin-top: 6px;
+`;
+
+interface RefundNoticeProps {
+	showRefundPeriod?: boolean;
+	planSlug: string;
+	billingPeriod: GridPlan[ 'pricing' ][ 'billingPeriod' ];
+}
+
+const RefundNotice = ( { planSlug, showRefundPeriod, billingPeriod }: RefundNoticeProps ) => {
+	const translate = useTranslate();
+
+	if ( ! showRefundPeriod || isFreePlan( planSlug ) ) {
+		return null;
+	}
+
+	return (
+		<>
+			<br />
+			{ translate( 'Refundable within %(dayCount)s days. No questions asked.', {
+				args: {
+					dayCount: billingPeriod === 31 ? 7 : 14,
+				},
+			} ) }
+		</>
+	);
+};
+
+interface Props {
+	planSlug: PlanSlug;
+	showRefundPeriod?: boolean;
+}
+
+const BillingTimeframe = ( { showRefundPeriod, planSlug }: Props ) => {
+	const translate = useTranslate();
+	const { helpers, gridPlansIndex, coupon, siteId } = usePlansGridContext();
+	const { isMonthlyPlan, billingTimeframe, pricing } = gridPlansIndex[ planSlug ];
+
+	const { introOffer, billingPeriod } = pricing;
+	const planBillingDescription = usePlanBillingDescription( {
+		siteId,
+		planSlug,
+		pricing,
+		isMonthlyPlan,
+		coupon,
+		useCheckPlanAvailabilityForPurchase: helpers?.useCheckPlanAvailabilityForPurchase,
+	} );
+	const description = planBillingDescription || billingTimeframe;
+
+	if (
+		isWooExpressPlan( planSlug ) &&
+		isMonthlyPlan &&
+		( ! introOffer || introOffer.isOfferComplete )
+	) {
+		return (
+			<div>
+				<div>{ billingTimeframe }</div>
+				<DiscountPromotion>{ planBillingDescription }</DiscountPromotion>
+			</div>
+		);
+	}
+
+	if ( isWpcomEnterpriseGridPlan( planSlug ) ) {
+		const price = formatCurrency( 25000, 'USD' );
+
+		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>
+		);
+	}
+
+	return (
+		<div>
+			{ description }
+			<RefundNotice
+				showRefundPeriod={ showRefundPeriod }
+				planSlug={ planSlug }
+				billingPeriod={ billingPeriod }
+			/>
+		</div>
+	);
+};
+
+export default BillingTimeframe;