Checkout: clarify line item sub label for storage add-ons (#97912)

Automattic · Jan 13, 2025 · b931027 · b931027
1 parent 7a04656
commit b931027
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/packages/wpcom-checkout/src/checkout-line-items.tsx b/packages/wpcom-checkout/src/checkout-line-items.tsx
@@ -670,13 +670,17 @@ export function LineItemSublabelAndPrice( { product }: { product: ResponseCartPr
 	if ( isTieredVolumeSpaceAddon( product ) ) {
 		const productQuantity = product?.quantity ?? 1;
 		const currentQuantity = product?.current_quantity ?? 1;
-		const spaceQuantity = productQuantity > 1 ? productQuantity : currentQuantity;
+		const spaceQuantity = productQuantity > 1 ? productQuantity - currentQuantity : currentQuantity;
 
 		return (
 			<>
 				{ translate( '%(quantity)s GB extra space, %(price)s per year', {
 					args: { quantity: spaceQuantity, price },
 				} ) }
+				<br></br>
+				{ translate( 'Total extra space after purchase: %(totalSpace)s GB', {
+					args: { totalSpace: product.is_renewal ? currentQuantity : productQuantity },
+				} ) }
 			</>
 		);
 	}

diff --git a/packages/wpcom-checkout/test/checkout-line-items.tsx b/packages/wpcom-checkout/test/checkout-line-items.tsx
@@ -70,4 +70,53 @@ describe( 'LineItemSublabelAndPrice', () => {
 			);
 		} );
 	} );
+
+	describe( 'Tiered Volume Space AddOn', () => {
+		const spaceAddOnProduct = {
+			...getEmptyResponseCartProduct(),
+			product_slug: 'wordpress_com_1gb_space_addon_yearly',
+		};
+
+		test( 'should display correct space quantities for new purchase with current quantity as 0', async () => {
+			const product = {
+				...spaceAddOnProduct,
+				quantity: 50,
+				current_quantity: 0,
+				item_original_subtotal_integer: 1000,
+				is_renewal: false,
+			};
+			const { container } = render( <LineItemSublabelAndPrice product={ product } /> );
+			expect( container.innerHTML ).toEqual(
+				'50 GB extra space, $10 per year<br>Total extra space after purchase: 50 GB'
+			);
+		} );
+
+		test( 'should display correct space quantities for new purchase with current quantity > 0', async () => {
+			const product = {
+				...spaceAddOnProduct,
+				quantity: 100,
+				current_quantity: 50,
+				item_original_subtotal_integer: 1000,
+				is_renewal: false,
+			};
+			const { container } = render( <LineItemSublabelAndPrice product={ product } /> );
+			expect( container.innerHTML ).toEqual(
+				'50 GB extra space, $10 per year<br>Total extra space after purchase: 100 GB'
+			);
+		} );
+
+		test( 'should display correct space quantities for renewal purchase', async () => {
+			const product = {
+				...spaceAddOnProduct,
+				quantity: null,
+				current_quantity: 50,
+				item_original_subtotal_integer: 1000,
+				is_renewal: true,
+			};
+			const { container } = render( <LineItemSublabelAndPrice product={ product } /> );
+			expect( container.innerHTML ).toEqual(
+				'50 GB extra space, $10 per year<br>Total extra space after purchase: 50 GB'
+			);
+		} );
+	} );
 } );