Plans: show default storage option in storage drop down

Automattic · Jan 24, 2025 · 6de18db · 6de18db
1 parent 05d7c71
commit 6de18db
Showing 1 changed file with 32 additions and 14 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
@@ -24,7 +24,7 @@ type StorageDropdownOptionProps = {
 	priceOnSeparateLine?: boolean;
 };
 
-const getSelecetedStorageAddOn = (
+const getSelectedStorageAddOn = (
 	storageAddOnsForPlan: ( AddOns.AddOnMeta | null )[] | null,
 	storageOptionSlug: string
 ) => {
@@ -106,23 +106,41 @@ const StorageDropdown = ( {
 					siteId,
 				} );
 		}
-	}, [] );
+	}, [
+		defaultStorageOption,
+		planSlug,
+		selectedStorageOptionForPlan,
+		setSelectedStorageOptionForPlan,
+		siteId,
+	] );
 
-	const selectControlOptions = availableStorageAddOns?.map( ( addOn ) => {
-		const addOnStorage = addOn.quantity ?? 0;
-
-		return {
-			key: addOn.addOnSlug,
+	const defaultStorageItem = useMemo(
+		() => ( {
+			key: defaultStorageOption || '',
 			name: (
-				<StorageDropdownOption
-					price={ addOn?.prices?.formattedMonthlyPrice }
-					totalStorage={ planStorage + addOnStorage }
-				/>
+				<StorageDropdownOption price="" totalStorage={ planStorage } />
 			 ) as unknown as string,
-		};
-	} );
+		} ),
+		[ defaultStorageOption, planStorage ]
+	);
+
+	const selectControlOptions = [ defaultStorageItem ].concat(
+		availableStorageAddOns?.map( ( addOn ) => {
+			const addOnStorage = addOn.quantity ?? 0;
+
+			return {
+				key: addOn.addOnSlug,
+				name: (
+					<StorageDropdownOption
+						price={ addOn?.prices?.formattedMonthlyPrice }
+						totalStorage={ planStorage + addOnStorage }
+					/>
+				 ) as unknown as string,
+			};
+		} )
+	);
 
-	const selectedStorageAddOn = getSelecetedStorageAddOn(
+	const selectedStorageAddOn = getSelectedStorageAddOn(
 		storageAddOns,
 		selectedStorageOptionForPlan
 	);