Experiment streamlining the plans grid + checkout: Update the plan interval dropdown (#103418)

* Restore wpcom plan variants as radio buttons

* Show the radio buttons for the corresponding assignments

* Restrict showing all variants to wpcom plans

* Use generic params for styling the RadioButton

* Show all product term variants

* Add absolute discount function

* Assign experiment styling to the corresponding variation

* Use generic params for styling the Dropdown

* Use optimistic UI for dropdown selection

* Remove duplicate radio/dropdown treatment variation check

* Refactor discount util function to support absolute values

* Show the monthly savings for intro offers

Author: claudiucelfilip

client/my-sites/checkout/src/components/checkout-sidebar-plan-upsell/index.tsx

@@ -18,7 +18,7 @@ import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { useGetProductVariants } from '../../hooks/product-variants';
 import {
 	getItemVariantCompareToPrice,
-	getItemVariantDiscountPercentage,
+	getItemVariantDiscount,
 } from '../item-variation-picker/util';
 import type { WPCOMProductVariant } from '../item-variation-picker';
 import './style.scss';
@@ -187,7 +187,7 @@ export function CheckoutSidebarPlanUpsell() {
 		upsellVariant,
 		currentVariant
 	);
-	const percentSavings = getItemVariantDiscountPercentage( upsellVariant, currentVariant );
+	const percentSavings = getItemVariantDiscount( upsellVariant, currentVariant );
 	if ( percentSavings === 0 ) {
 		debug( 'percent savings is too low', percentSavings );
 		return null;

client/my-sites/checkout/src/components/item-variation-picker/item-variation-dropdown.tsx

@@ -2,13 +2,18 @@ import {
 	isJetpackPlan,
 	isJetpackProduct,
 	isMultiYearDomainProduct,
+	isWpComPlan,
 } from '@automattic/calypso-products';
 import { Gridicon } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
-import { FunctionComponent, useCallback, useEffect, useState } from 'react';
+import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import isJetpackCheckout from 'calypso/lib/jetpack/is-jetpack-checkout';
+import {
+	useStreamlinedPriceExperiment,
+	isStreamlinedPriceDropdownTreatment,
+} from 'calypso/my-sites/plans-features-main/hooks/use-streamlined-price-experiment';
 import { JetpackItemVariantDropDownPrice } from './jetpack-variant-dropdown-price';
-import { CurrentOption, Dropdown, OptionList, Option } from './styles';
+import { CurrentOption, Dropdown, OptionList, Option, WPCheckoutCheckIcon } from './styles';
 import { ItemVariantDropDownPrice } from './variant-dropdown-price';
 import type { ItemVariationPickerProps, WPCOMProductVariant } from './types';
 import type { ResponseCartProduct } from '@automattic/shopping-cart';
@@ -27,15 +32,32 @@ export const ItemVariationDropDown: FunctionComponent< ItemVariationPickerProps
 } ) => {
 	const translate = useTranslate();
 	const [ highlightedVariantIndex, setHighlightedVariantIndex ] = useState< number | null >( null );
+	const [ , streamlinedPriceExperimentAssignment ] = useStreamlinedPriceExperiment();
+	const isStreamlinedPrice =
+		isStreamlinedPriceDropdownTreatment( streamlinedPriceExperimentAssignment ) &&
+		isWpComPlan( selectedItem.product_slug );
+
+	const [ optimisticSelectedItem, setOptimisticSelectedItem ] = useState< string | null >( null );
+
+	useEffect( () => {
+		if ( isStreamlinedPrice ) {
+			setOptimisticSelectedItem( selectedItem.product_slug );
+		}
+	}, [ selectedItem.product_slug, isStreamlinedPrice ] );
 
 	// Multi-year domain products must be compared by volume because they have the same product id.
-	const selectedVariantIndexRaw = variants.findIndex( ( variant ) =>
-		isMultiYearDomainProduct( selectedItem )
-			? selectedItem.volume === variant.volume
-			: selectedItem.product_id === variant.productId
-	);
-	// findIndex returns -1 if it fails and we want null.
-	const selectedVariantIndex = selectedVariantIndexRaw > -1 ? selectedVariantIndexRaw : null;
+	const selectedVariantIndex = useMemo( () => {
+		const rawIndex = variants.findIndex( ( variant ) => {
+			if ( isStreamlinedPrice && optimisticSelectedItem ) {
+				return variant.productSlug === optimisticSelectedItem;
+			}
+			// If not optimistic, or optimisticSelectedItem is not set, use the original logic
+			return isMultiYearDomainProduct( selectedItem )
+				? selectedItem.volume === variant.volume && variant.productId === selectedItem.product_id
+				: selectedItem.product_id === variant.productId;
+		} );
+		return rawIndex > -1 ? rawIndex : null;
+	}, [ variants, isStreamlinedPrice, optimisticSelectedItem, selectedItem ] );
 
 	// reset the dropdown highlight when the selected product changes
 	useEffect( () => {
@@ -45,10 +67,13 @@ export const ItemVariationDropDown: FunctionComponent< ItemVariationPickerProps
 	// wrapper around onChangeItemVariant to close up dropdown on change
 	const handleChange = useCallback(
 		( uuid: string, productSlug: string, productId: number, volume?: number ) => {
+			if ( isStreamlinedPrice ) {
+				setOptimisticSelectedItem( productSlug );
+			}
 			onChangeItemVariant( uuid, productSlug, productId, volume );
 			toggle( null );
 		},
-		[ onChangeItemVariant, toggle ]
+		[ onChangeItemVariant, toggle, isStreamlinedPrice ]
 	);
 
 	const selectNextVariant = useCallback( () => {
@@ -121,13 +146,22 @@ export const ItemVariationDropDown: FunctionComponent< ItemVariationPickerProps
 		return null;
 	}
 
+	let compareTo = undefined;
+	if ( isStreamlinedPrice ) {
+		compareTo = variants.find( ( variant ) => variant.termIntervalInMonths === 1 );
+	}
 	const ItemVariantDropDownPriceWrapper: FunctionComponent< { variant: WPCOMProductVariant } > = (
 		props
 	) =>
 		isJetpack( props.variant ) ? (
 			<JetpackItemVariantDropDownPrice { ...props } allVariants={ variants } />
 		) : (
-			<ItemVariantDropDownPrice { ...props } product={ selectedItem } />
+			<ItemVariantDropDownPrice
+				{ ...props }
+				product={ selectedItem }
+				isStreamlinedPrice={ isStreamlinedPrice }
+				compareTo={ compareTo }
+			/>
 		);
 
 	return (
@@ -143,6 +177,7 @@ export const ItemVariationDropDown: FunctionComponent< ItemVariationPickerProps
 				onClick={ () => toggle( id ) }
 				open={ isOpen }
 				role="button"
+				detached={ isStreamlinedPrice }
 			>
 				{ selectedVariantIndex !== null ? (
 					<ItemVariantDropDownPriceWrapper variant={ variants[ selectedVariantIndex ] } />
@@ -157,6 +192,7 @@ export const ItemVariationDropDown: FunctionComponent< ItemVariationPickerProps
 					highlightedVariantIndex={ highlightedVariantIndex }
 					selectedItem={ selectedItem }
 					handleChange={ handleChange }
+					isStreamlinedPrice={ isStreamlinedPrice }
 				/>
 			) }
 		</Dropdown>
@@ -168,15 +204,19 @@ function ItemVariantOptionList( {
 	highlightedVariantIndex,
 	selectedItem,
 	handleChange,
+	isStreamlinedPrice,
 }: {
 	variants: WPCOMProductVariant[];
 	highlightedVariantIndex: number | null;
 	selectedItem: ResponseCartProduct;
 	handleChange: ( uuid: string, productSlug: string, productId: number, volume?: number ) => void;
+	isStreamlinedPrice: boolean;
 } ) {
-	const compareTo = variants.find( ( variant ) => variant.productId === selectedItem.product_id );
+	const compareTo = isStreamlinedPrice
+		? variants.find( ( variant ) => variant.termIntervalInMonths === 1 )
+		: variants.find( ( variant ) => variant.productId === selectedItem.product_id );
 	return (
-		<OptionList role="listbox" tabIndex={ -1 }>
+		<OptionList role="listbox" tabIndex={ -1 } detached={ isStreamlinedPrice }>
 			{ variants.map( ( variant, index ) => (
 				<ItemVariantOption
 					key={ variant.productSlug + variant.variantLabel.noun }
@@ -193,6 +233,7 @@ function ItemVariantOptionList( {
 					variant={ variant }
 					allVariants={ variants }
 					selectedItem={ selectedItem }
+					isStreamlinedPrice={ isStreamlinedPrice }
 				/>
 			) ) }
 		</OptionList>
@@ -206,13 +247,15 @@ function ItemVariantOption( {
 	variant,
 	allVariants,
 	selectedItem,
+	isStreamlinedPrice,
 }: {
 	isSelected: boolean;
 	onSelect: () => void;
 	compareTo?: WPCOMProductVariant;
 	variant: WPCOMProductVariant;
 	allVariants: WPCOMProductVariant[];
 	selectedItem: ResponseCartProduct;
+	isStreamlinedPrice: boolean;
 } ) {
 	const { variantLabel, productId, productSlug } = variant;
 	return (
@@ -224,6 +267,7 @@ function ItemVariantOption( {
 			role="option"
 			onClick={ onSelect }
 			selected={ isSelected }
+			detached={ isStreamlinedPrice }
 		>
 			{ isJetpack( variant ) ? (
 				<JetpackItemVariantDropDownPrice variant={ variant } allVariants={ allVariants } />
@@ -232,8 +276,10 @@ function ItemVariantOption( {
 					variant={ variant }
 					compareTo={ compareTo }
 					product={ selectedItem }
+					isStreamlinedPrice={ isStreamlinedPrice }
 				/>
 			) }
+			{ isStreamlinedPrice && isSelected && <WPCheckoutCheckIcon /> }
 		</Option>
 	);
 }

client/my-sites/checkout/src/components/item-variation-picker/styles.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { CheckIcon } from '../check-icon';
 import { CurrentOptionProps, OptionProps } from './types';
 
 export const CurrentOption = styled.button< CurrentOptionProps >`
@@ -21,6 +22,7 @@ export const CurrentOption = styled.button< CurrentOptionProps >`
 
 	${ ( props ) =>
 		props.open &&
+		! props.detached &&
 		css`
 			border-radius: 3px 3px 0 0;
 		` }
@@ -39,14 +41,46 @@ export const Option = styled.li< OptionProps >`
 	align-items: center;
 	/* the calc aligns the price with the price in CurrentOption */
 	padding: 10px calc( 14px + 24px + 16px ) 10px 16px;
+	position: relative;
+
+	${ ( props ) =>
+		props.detached &&
+		css`
+			padding-top: 14px;
+			padding-bottom: 14px;
+		` }
 
 	&:hover {
 		background: var( --studio-wordpress-blue-5 );
 	}
 
-	&.item-variant-option--selected {
-		background: var( --studio-wordpress-blue-50 );
-		color: #fff;
+	${ ( props ) =>
+		! props.detached
+			? css`
+					&.item-variant-option--selected {
+						background: var( --studio-wordpress-blue-50 );
+						color: #fff;
+					}
+			  `
+			: css`
+					&.item-variant-option--selected * {
+						color: var( --studio-black );
+					}
+			  ` }
+`;
+
+export const WPCheckoutCheckIcon = styled( CheckIcon )`
+	fill: ${ ( props ) => props.theme.colors.success };
+	margin-right: 4px;
+	position: absolute;
+	top: 50%;
+	right: 16px;
+	transform: translateY( -50% );
+	.rtl & {
+		margin-right: 0;
+		margin-left: 4px;
+		right: auto;
+		left: 16px;
 	}
 `;
 
@@ -60,12 +94,27 @@ export const Dropdown = styled.div`
 	}
 `;
 
-export const OptionList = styled.ul`
+export const OptionList = styled.ul< { detached: boolean } >`
 	position: absolute;
 	width: 100%;
 	z-index: 4;
 	margin: 0;
 	box-shadow: rgba( 0, 0, 0, 0.16 ) 0px 1px 4px;
+	${ ( props ) =>
+		props.detached &&
+		css`
+			box-shadow:
+				0px 50px 43px 0px rgba( 0, 0, 0, 0.02 ),
+				0px 30px 36px 0px rgba( 0, 0, 0, 0.04 ),
+				0px 15px 27px 0px rgba( 0, 0, 0, 0.07 ),
+				0px 5px 15px 0px rgba( 0, 0, 0, 0.08 );
+			margin-top: 10px;
+
+			${ Option }:first-of-type {
+				border-top-left-radius: 3px;
+				border-top-right-radius: 3px;
+			}
+		` }
 
 	${ Option } {
 		margin-top: -1px;
@@ -100,6 +149,28 @@ export const Discount = styled.span`
 	}
 `;
 
+export const DiscountAbsolute = styled.span< {
+	color: string;
+	backgroundColor: string;
+} >`
+	text-align: center;
+	color: ${ ( props ) => props.color };
+	display: block;
+	background-color: ${ ( props ) => props.backgroundColor };
+	padding: 0 10px;
+	border-radius: 4px;
+	font-size: 12px;
+	line-height: 20px;
+	.rtl & {
+		margin-right: 0;
+		margin-left: 8px;
+	}
+	// Keep selected state override for now, adjust if needed
+	.item-variant-option--selected & {
+		color: ${ ( props ) => props.color };
+	}
+`;
+
 export const DoNotPayThis = styled.del`
 	text-decoration: line-through;
 	margin-right: 8px;
@@ -173,4 +244,7 @@ export const IntroPricingText = styled.span`
 export const PriceTextContainer = styled.span`
 	font-size: 14px;
 	text-align: right;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
 `;

client/my-sites/checkout/src/components/item-variation-picker/types.ts

@@ -42,8 +42,10 @@ export type OnChangeItemVariant = (
 
 export type CurrentOptionProps = {
 	open: boolean;
+	detached?: boolean;
 };
 
 export type OptionProps = {
 	selected: boolean;
+	detached?: boolean;
 };

client/my-sites/checkout/src/components/item-variation-picker/util.ts

@@ -61,9 +61,10 @@ export function getItemVariantCompareToPrice(
 	return ( compareTo.priceInteger / compareTo.termIntervalInMonths ) * variant.termIntervalInMonths;
 }
 
-export function getItemVariantDiscountPercentage(
+export function getItemVariantDiscount(
 	variant: WPCOMProductVariant,
-	compareTo?: WPCOMProductVariant
+	compareTo?: WPCOMProductVariant,
+	discountType: 'percentage' | 'absolute' = 'percentage'
 ): number {
 	const compareToPriceForVariantTerm = getItemVariantCompareToPrice( variant, compareTo );
 
@@ -73,11 +74,19 @@ export function getItemVariantDiscountPercentage(
 			? variant.priceBeforeDiscounts
 			: variant.priceInteger;
 
+	if ( ! compareToPriceForVariantTerm ) {
+		return 0;
+	}
+
+	if ( discountType === 'absolute' ) {
+		return compareToPriceForVariantTerm - variantPrice;
+	}
+
 	// Extremely low "discounts" are possible if the price of the longer term has been rounded
 	// if they cannot be rounded to at least a percentage point we should not show them.
-	const discountPercentage = compareToPriceForVariantTerm
-		? Math.round( 100 - ( variantPrice / compareToPriceForVariantTerm ) * 100 )
-		: 0;
+	const discountPercentage = Math.round(
+		100 - ( variantPrice / compareToPriceForVariantTerm ) * 100
+	);
 
 	return discountPercentage;
 }