Plans Grid: fix default state of storage dropdown when an addon is pu…

…rchased (#99310) * Plans Grid: fix default state of storage dropdown when an addon is purchased * StorageDropdown: enhance type definitions for default storage add-on meta
Automattic · Feb 6, 2025 · bb95ced · bb95ced
1 parent b2c3c92
commit bb95ced
Showing 1 changed file with 27 additions and 21 deletions.
diff --git a/packages/plans-grid-next/src/components/shared/storage/components/storage-dropdown.tsx b/packages/plans-grid-next/src/components/shared/storage/components/storage-dropdown.tsx
@@ -1,4 +1,4 @@
-import { AddOns, WpcomPlansUI } from '@automattic/data-stores';
+import { type AddOnMeta, AddOns, WpcomPlansUI } from '@automattic/data-stores';
 import { CustomSelectControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useMemo } from '@wordpress/element';
@@ -9,7 +9,7 @@ import DropdownOption from '../../../dropdown-option';
 import useDefaultStorageOption from '../hooks/use-default-storage-option';
 import usePlanStorage from '../hooks/use-plan-storage';
 import useStorageString from '../hooks/use-storage-string';
-import type { PlanSlug } from '@automattic/calypso-products';
+import type { PlanSlug, WPComPlanStorageFeatureSlug } from '@automattic/calypso-products';
 
 type StorageDropdownProps = {
 	planSlug: PlanSlug;
@@ -93,52 +93,58 @@ const StorageDropdown = ( {
 		( select ) => select( WpcomPlansUI.store ).getSelectedStorageOptionForPlan( planSlug, siteId ),
 		[ planSlug, siteId ]
 	);
-	const defaultStorageOption = useDefaultStorageOption( { planSlug } );
+	const defaultStorageOptionSlug = useDefaultStorageOption( { planSlug } );
 	const availableStorageAddOns = AddOns.useAvailableStorageAddOns( { siteId } );
 	const planStorage = usePlanStorage( planSlug );
 
 	useEffect( () => {
 		if ( ! selectedStorageOptionForPlan ) {
-			defaultStorageOption &&
+			defaultStorageOptionSlug &&
 				setSelectedStorageOptionForPlan( {
-					addOnSlug: defaultStorageOption,
+					addOnSlug: defaultStorageOptionSlug,
 					planSlug,
 					siteId,
 				} );
 		}
 	}, [
-		defaultStorageOption,
+		defaultStorageOptionSlug,
 		planSlug,
 		selectedStorageOptionForPlan,
 		setSelectedStorageOptionForPlan,
 		siteId,
 	] );
 
-	const defaultStorageItem = useMemo(
-		() => ( {
-			key: defaultStorageOption || '',
-			name: (
-				<StorageDropdownOption price="" totalStorage={ planStorage } />
-			 ) as unknown as string,
-		} ),
-		[ defaultStorageOption, planStorage ]
-	);
+	const selectControlOptions = useMemo( () => {
+		// Get the default storage add-on meta or the storage included with the plan
+		let defaultStorageAddOnMeta:
+			| AddOnMeta
+			| {
+					addOnSlug: AddOns.StorageAddOnSlug | WPComPlanStorageFeatureSlug;
+					prices: AddOnMeta[ 'prices' ] | null;
+					quantity: AddOnMeta[ 'quantity' ];
+			  }
+			| undefined
+			| null = getSelectedStorageAddOn( storageAddOns, defaultStorageOptionSlug || '' );
+
+		// If the default storage add-on is not available, create a new object with the default storage option slug
+		if ( ! defaultStorageAddOnMeta && defaultStorageOptionSlug ) {
+			defaultStorageAddOnMeta = { addOnSlug: defaultStorageOptionSlug, prices: null, quantity: 0 };
+		}
 
-	const selectControlOptions = [ defaultStorageItem ].concat(
-		availableStorageAddOns?.map( ( addOn ) => {
-			const addOnStorage = addOn.quantity ?? 0;
+		return [ defaultStorageAddOnMeta, ...availableStorageAddOns ]?.map( ( addOn ) => {
+			const addOnStorage = addOn?.quantity ?? 0;
 
 			return {
-				key: addOn.addOnSlug,
+				key: addOn?.addOnSlug || '',
 				name: (
 					<StorageDropdownOption
 						price={ addOn?.prices?.formattedMonthlyPrice }
 						totalStorage={ planStorage + addOnStorage }
 					/>
 				 ) as unknown as string,
 			};
-		} )
-	);
+		} );
+	}, [ availableStorageAddOns, defaultStorageOptionSlug, planStorage, storageAddOns ] );
 
 	const selectedStorageAddOn = getSelectedStorageAddOn(
 		storageAddOns,