Storage Add Ons: Implement dropdown checkout functionality

client/landing/stepper/declarative-flow/internals/steps-repository/plans/plans-wrapper.tsx

@@ -25,6 +25,7 @@ import { connect } from 'react-redux';
 import QueryPlans from 'calypso/components/data/query-plans';
 import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
 import { useSite } from 'calypso/landing/stepper/hooks/use-site';
+import { getPlanCartItem } from 'calypso/lib/cart-values/cart-items';
 import PlansFeaturesMain from 'calypso/my-sites/plans-features-main';
 import PlanFAQ from 'calypso/my-sites/plans-features-main/components/plan-faq';
 import StepWrapper from 'calypso/signup/step-wrapper';
@@ -92,11 +93,11 @@ const PlansWrapper: React.FC< Props > = ( props ) => {
 		? reduxHideFreePlan && 'plans-blog-onboarding' === plansIntent
 		: reduxHideFreePlan;
 
-	const onSelectPlan = ( selectedPlan: any ) => {
-		if ( selectedPlan ) {
+	const onSelectPlan = ( cartItems?: MinimalRequestCartProduct[] | null ) => {
+		const planCartItem = getPlanCartItem( cartItems );
+		if ( planCartItem ) {
 			recordTracksEvent( 'calypso_signup_plan_select', {
-				product_slug: selectedPlan?.product_slug,
-				free_trial: selectedPlan?.free_trial,
+				product_slug: planCartItem?.product_slug,
 				from_section: 'default',
 			} );
 		} else {
@@ -105,8 +106,8 @@ const PlansWrapper: React.FC< Props > = ( props ) => {
 			} );
 		}
 
-		setPlanCartItem( selectedPlan );
-		props.onSubmit?.( selectedPlan );
+		setPlanCartItem( planCartItem );
+		props.onSubmit?.( planCartItem );
 	};
 
 	const getPaidDomainName = () => {

client/lib/cart-values/cart-items.ts

@@ -44,6 +44,7 @@ import {
 	isAkismetProduct,
 	isWpcomEnterpriseGridPlan,
 	is100Year,
+	PLAN_FREE,
 } from '@automattic/calypso-products';
 import { isWpComProductRenewal as isRenewal } from '@automattic/wpcom-checkout';
 import { getTld } from 'calypso/lib/domains';
@@ -898,3 +899,17 @@ export function hasStaleItem( cart: ObjectWithProducts ): boolean {
 		);
 	} );
 }
+
+export function getPlanCartItem( cartItems?: MinimalRequestCartProduct[] | null ) {
+	/**
+	 * A null planCartItem corresponds to a free plan. It seems like this is case throughout the signup/plans
+	 * onboarding codebase. There are, however, tests in client/signup/steps/plans/test/index.jsx that
+	 * represent a free plan as a non null product.
+	 *
+	 * Additionally, free plans are, in fact, represented as products with product slugs elsewhere in the
+	 * codebase. This is why we check for both cases here. When we conduct a more thorough investigation and
+	 * determine that PLAN_FREE is no longer, in fact, used to represent free plans in signup/onboarding, we
+	 * can remove PLAN_FREE check. p4TIVU-aLF-p2
+	 */
+	return cartItems?.find( ( item ) => isPlan( item ) || item.product_slug === PLAN_FREE ) ?? null;
+}

client/lib/signup/flow-controller.ts

@@ -45,6 +45,7 @@ import {
 import { ProgressState } from 'calypso/state/signup/progress/schema';
 import { getSignupProgress } from 'calypso/state/signup/progress/selectors';
 import { getSiteSlug } from 'calypso/state/sites/selectors';
+import { getPlanCartItem } from '../cart-values/cart-items';
 import type { Flow, Dependencies } from '../../signup/types';
 
 const debug = debugModule( 'calypso:signup' );
@@ -442,7 +443,14 @@ export default class SignupFlowController {
 
 	_getNeedsToGoThroughCheckout() {
 		const progress = getSignupDependencyProgress( this._reduxStore.getState() );
-		return !! progress?.plans?.cartItem;
+
+		if ( ! progress?.plans?.cartItems ) {
+			return false;
+		}
+
+		return (
+			progress.plans.cartItems.length && Boolean( getPlanCartItem( progress.plans.cartItems ) )
+		);
 	}
 
 	_destination( dependencies: Dependencies ): string {

client/lib/signup/step-actions/index.js

@@ -20,6 +20,7 @@ import {
 	supportsPrivacyProtectionPurchase,
 	planItem as getCartItemForPlan,
 	marketplaceThemeProduct,
+	getPlanCartItem,
 } from 'calypso/lib/cart-values/cart-items';
 import { getLocaleSlug } from 'calypso/lib/i18n-utils';
 import { fetchSitesAndUser } from 'calypso/lib/signup/step-actions/fetch-sites-and-user';
@@ -507,12 +508,12 @@ function findMarketplacePlugin( state, pluginSlug, billingPeriod = '' ) {
 }
 
 export function addWithThemePlanToCart( callback, dependencies, stepProvidedItems, reduxStore ) {
-	const { cartItem } = stepProvidedItems;
-
+	const { cartItems } = stepProvidedItems;
+	const planCartItem = getPlanCartItem( cartItems );
 	/**
 	 * If the user selected the free option, then we should abort the checkout part.
 	 */
-	if ( ! cartItem ) {
+	if ( ! planCartItem ) {
 		defer( callback );
 		return;
 	}
@@ -528,7 +529,7 @@ export function addWithThemePlanToCart( callback, dependencies, stepProvidedItem
 				reduxStore.dispatch,
 				themeSlug,
 				dependencies.siteSlug,
-				cartItem
+				planCartItem
 			).then( () => {} );
 		} else {
 			addPlanToCart( callback, dependencies, stepProvidedItems, reduxStore );
@@ -607,8 +608,8 @@ export function addPlanToCart( callback, dependencies, stepProvidedItems, reduxS
 	// Note that we pull in emailItem to avoid race conditions from multiple step API functions
 	// trying to fetch and update the cart simultaneously, as both of those actions are asynchronous.
 	const { emailItem, siteSlug, plugin, billing_period: billingPeriod } = dependencies;
-	const { cartItem, lastKnownFlow } = stepProvidedItems;
-	if ( isEmpty( cartItem ) && isEmpty( emailItem ) ) {
+	const { cartItems, lastKnownFlow } = stepProvidedItems;
+	if ( isEmpty( cartItems ) && isEmpty( emailItem ) ) {
 		// the user selected the free plan
 		defer( callback );
 
@@ -620,9 +621,10 @@ export function addPlanToCart( callback, dependencies, stepProvidedItems, reduxS
 		pluginItem = findMarketplacePlugin( reduxStore.getState(), plugin, billingPeriod );
 	}
 
-	const providedDependencies = { cartItem };
-	const newCartItems = [ cartItem, emailItem, pluginItem ].filter( ( item ) => item );
-
+	const providedDependencies = { cartItems };
+	const newCartItems = [ ...( cartItems ? cartItems : [] ), emailItem, pluginItem ].filter(
+		( item ) => item
+	);
 	processItemCart( providedDependencies, newCartItems, callback, reduxStore, siteSlug, {
 		lastKnownFlow,
 	} );
@@ -1219,29 +1221,29 @@ export function isPlanFulfilled( stepName, defaultDependencies, nextProps ) {
 		isDomainTransfer( signupDependencies.domainItem );
 
 	if ( isPaidPlan ) {
-		const cartItem = undefined;
+		const cartItems = undefined;
 		submitSignupStep(
-			{ stepName, cartItem, wasSkipped: true },
-			{ cartItem, ...dependenciesFromDefaults }
+			{ stepName, cartItems, wasSkipped: true },
+			{ cartItems, ...dependenciesFromDefaults }
 		);
 		recordExcludeStepEvent( stepName, sitePlanSlug );
-		fulfilledDependencies.push( 'cartItem' );
+		fulfilledDependencies.push( 'cartItems' );
 	} else if ( defaultDependencies && defaultDependencies.cartItem ) {
-		const cartItem = getCartItemForPlan( defaultDependencies.cartItem );
+		const cartItems = [ getCartItemForPlan( defaultDependencies.cartItem ) ];
 		submitSignupStep(
-			{ stepName, cartItem, wasSkipped: true },
-			{ cartItem, ...dependenciesFromDefaults }
+			{ stepName, cartItems, wasSkipped: true },
+			{ cartItems, ...dependenciesFromDefaults }
 		);
 		recordExcludeStepEvent( stepName, defaultDependencies.cartItem );
-		fulfilledDependencies.push( 'cartItem' );
+		fulfilledDependencies.push( 'cartItems' );
 	} else if ( isTransferSelectedInDomainTransferFlow ) {
-		const cartItem = null;
+		const cartItems = null;
 		submitSignupStep(
-			{ stepName, cartItem, wasSkipped: true },
-			{ cartItem, ...dependenciesFromDefaults }
+			{ stepName, cartItems, wasSkipped: true },
+			{ cartItems, ...dependenciesFromDefaults }
 		);
 		recordExcludeStepEvent( stepName, sitePlanSlug );
-		fulfilledDependencies.push( 'cartItem' );
+		fulfilledDependencies.push( 'cartItems' );
 	}
 
 	if ( shouldExcludeStep( stepName, fulfilledDependencies ) ) {
@@ -1270,7 +1272,7 @@ export function isNewOrExistingSiteFulfilled( stepName, defaultDependencies, nex
 	}
 }
 
-export const buildUpgradeFunction = ( planProps, cartItem ) => {
+export const buildUpgradeFunction = ( planProps, cartItems ) => {
 	const {
 		additionalStepData,
 		flowName,
@@ -1282,11 +1284,12 @@ export const buildUpgradeFunction = ( planProps, cartItem ) => {
 		goToNextStep,
 		submitSignupStep,
 	} = planProps;
+	const planCartItem = getPlanCartItem( cartItems );
 
-	if ( cartItem ) {
+	if ( planCartItem ) {
 		planProps.recordTracksEvent( 'calypso_signup_plan_select', {
-			product_slug: cartItem.product_slug,
-			free_trial: cartItem.free_trial,
+			product_slug: planCartItem.product_slug,
+			free_trial: planCartItem.free_trial,
 			from_section: stepSectionName ? stepSectionName : 'default',
 		} );
 
@@ -1295,9 +1298,9 @@ export const buildUpgradeFunction = ( planProps, cartItem ) => {
 		// activated at the end of the checkout process.
 		if (
 			flowName === 'ecommerce' &&
-			planHasFeature( cartItem.product_slug, FEATURE_UPLOAD_THEMES_PLUGINS )
+			planHasFeature( planCartItem.product_slug, FEATURE_UPLOAD_THEMES_PLUGINS )
 		) {
-			cartItem.extra = Object.assign( cartItem.extra || {}, {
+			planCartItem.extra = Object.assign( planCartItem.extra || {}, {
 				is_store_signup: true,
 			} );
 		}
@@ -1310,28 +1313,25 @@ export const buildUpgradeFunction = ( planProps, cartItem ) => {
 	const step = {
 		stepName,
 		stepSectionName,
-		cartItem,
+		cartItems,
 		...additionalStepData,
 	};
 
-	if ( selectedSite && flowName === 'site-selected' && ! cartItem ) {
-		submitSignupStep( step, {
-			cartItem,
-		} );
+	if ( selectedSite && flowName === 'site-selected' && ! planCartItem ) {
+		submitSignupStep( step, { cartItems } );
 		goToNextStep();
 		return;
 	}
 
 	const signupVals = {
-		cartItem,
+		cartItems,
 		...( themeSlugWithRepo && { themeSlugWithRepo } ),
 		...( launchSite && { comingSoon: 0 } ),
 	};
 
-	if ( cartItem && isEcommerce( cartItem ) ) {
+	if ( planCartItem && isEcommerce( planCartItem ) ) {
 		signupVals.themeSlugWithRepo = 'pub/twentytwentytwo';
 	}
-
 	submitSignupStep( step, signupVals );
 	goToNextStep();
 };

client/lib/signup/test/mocks/signup/config/steps.js

@@ -73,7 +73,7 @@ export default {
 	plans: {
 		stepName: 'plans',
 		dependencies: [ 'siteSlug' ],
-		providesDependencies: [ 'cartItem' ],
+		providesDependencies: [ 'cartItems' ],
 	},
 
 	'site-type': {

client/lib/signup/test/step-actions.js

@@ -202,16 +202,16 @@ describe( 'isPlanFulfilled()', () => {
 			submitSignupStep,
 		};
 		const defaultDependencies = { cartItem: 'testPlan' };
-		const cartItem = { product_slug: defaultDependencies.cartItem };
+		const cartItems = [ { product_slug: defaultDependencies.cartItem } ];
 
 		expect( flows.excludeStep ).not.toHaveBeenCalled();
 		expect( submitSignupStep ).not.toHaveBeenCalled();
 
 		isPlanFulfilled( stepName, defaultDependencies, nextProps );
 
 		expect( submitSignupStep ).toHaveBeenCalledWith(
-			{ stepName, cartItem, wasSkipped: true },
-			{ cartItem }
+			{ stepName, cartItems, wasSkipped: true },
+			{ cartItems }
 		);
 		expect( flows.excludeStep ).toHaveBeenCalledWith( stepName );
 	} );
@@ -236,8 +236,8 @@ describe( 'isPlanFulfilled()', () => {
 		isPlanFulfilled( stepName, undefined, nextProps );
 
 		expect( submitSignupStep ).toHaveBeenCalledWith(
-			{ stepName, cartItem: null, wasSkipped: true },
-			{ cartItem: null }
+			{ stepName, cartItems: null, wasSkipped: true },
+			{ cartItems: null }
 		);
 		expect( flows.excludeStep ).toHaveBeenCalledWith( stepName );
 	} );

client/my-sites/add-ons/hooks/use-add-ons.ts

@@ -35,7 +35,7 @@ import useAddOnPrices from './use-add-on-prices';
 import type { AddOnMeta } from '@automattic/data-stores';
 
 // some memoization. executes far too many times
-const useAddOns = ( siteId?: number ): ( AddOnMeta | null )[] => {
+const useAddOns = ( siteId?: number, isInSignup = false ): ( AddOnMeta | null )[] => {
 	const translate = useTranslate();
 
 	const addOnsActive = [
@@ -124,28 +124,28 @@ const useAddOns = ( siteId?: number ): ( AddOnMeta | null )[] => {
 	// if upgrade is bought - show as manage
 	// if upgrade is not bought - only show it if available storage and if it's larger than previously bought upgrade
 	const { data: mediaStorage } = useMediaStorageQuery( siteId );
-	const { billingTransactions, isLoading } = usePastBillingTransactions();
+	const { billingTransactions, isLoading } = usePastBillingTransactions( isInSignup );
 
 	return useSelector( ( state ): ( AddOnMeta | null )[] => {
 		// get the list of supported features
 		const siteFeatures = getFeaturesBySiteId( state, siteId );
-		const filter = getBillingTransactionFilters( state, 'past' );
-		const filteredTransactions =
-			billingTransactions && filterTransactions( billingTransactions, filter, siteId );
-
 		const spaceUpgradesPurchased: number[] = [];
 
-		if ( filteredTransactions?.length ) {
-			for ( const transaction of filteredTransactions ) {
-				transaction.items?.length &&
-					spaceUpgradesPurchased.push(
-						...transaction.items
-							.filter( ( item ) => item.wpcom_product_slug === PRODUCT_1GB_SPACE )
-							.map( ( item ) => Number( item.licensed_quantity ) )
-					);
+		if ( billingTransactions && ! isInSignup ) {
+			const filter = getBillingTransactionFilters( state, 'past' );
+			const filteredTransactions = filterTransactions( billingTransactions, filter, siteId );
+
+			if ( filteredTransactions?.length ) {
+				for ( const transaction of filteredTransactions ) {
+					transaction.items?.length &&
+						spaceUpgradesPurchased.push(
+							...transaction.items
+								.filter( ( item ) => item.wpcom_product_slug === PRODUCT_1GB_SPACE )
+								.map( ( item ) => Number( item.licensed_quantity ) )
+						);
+				}
 			}
 		}
-
 		// Determine which Stats Add-On to show based on the site's commercial classification.
 		const isSiteMarkedCommercial = getSiteOption( state, siteId, 'is_commercial' );
 

client/my-sites/plan-features-2023-grid/hooks/npm-ready/data-store/use-grid-plans.tsx

@@ -71,12 +71,10 @@ export type UsePricingMetaForGridPlans = ( {
 	planSlugs,
 	withoutProRatedCredits,
 	storageAddOns,
-	currencyCode,
 }: {
 	planSlugs: PlanSlug[];
 	withoutProRatedCredits?: boolean;
 	storageAddOns: ( AddOnMeta | null )[] | null;
-	currencyCode?: string | null;
 } ) => { [ planSlug: string ]: PricingMetaForGridPlan } | null;
 
 // TODO clk: move to types. will consume plan properties