Plans: Add price matrix for Jetpack backups, add support in ProductSelector (#37023)

* Blocks: Add price matrix support to ProductSelector

* Plans: Define a Jetpack backup product price matrix

Author: tyxla

client/blocks/product-selector/README.md

@@ -61,4 +61,7 @@ The following props can be passed to the Product Selector block:
 		}
 		```
 	* `optionsLabel`: ( string ) Title of the product options section.
+* `productPriceMatrix`: ( object ) Matrix of product price relationships. Each key is a product slug, and each value is an object with the following structure:
+	* `relatedProduct`: ( string ) Slug of the related product.
+	* `ratio`: ( number ) Ratio between original plan and related plan. Example: for a `yearly` to `monthly` plan, this should be `12`.
 * `siteId`: ( number ) ID of the site we're retrieving purchases for. Used to fetch information about the associated purchases of the selected products.

client/blocks/product-selector/index.jsx

@@ -106,7 +106,8 @@ export class ProductSelector extends Component {
 			return {
 				billingTimeFrame: this.getBillingTimeFrameLabel(),
 				currencyCode: productObject.currency_code,
-				fullPrice: productObject.cost,
+				fullPrice: this.getProductOptionFullPrice( productSlug ),
+				discountedPrice: this.getProductOptionDiscountedPrice( productSlug ),
 				slug: productSlug,
 				title: this.getProductName( product, productSlug ),
 			};
@@ -144,6 +145,40 @@ export class ProductSelector extends Component {
 		);
 	}
 
+	getProductOptionFullPrice( productSlug ) {
+		const { productPriceMatrix, storeProducts } = this.props;
+
+		if ( isEmpty( storeProducts ) ) {
+			return null;
+		}
+
+		const productObject = storeProducts[ productSlug ];
+		const relatedProductObject = productPriceMatrix[ productSlug ];
+
+		if ( relatedProductObject ) {
+			return storeProducts[ relatedProductObject.relatedProduct ].cost * relatedProductObject.ratio;
+		}
+
+		return productObject.cost;
+	}
+
+	getProductOptionDiscountedPrice( productSlug ) {
+		const { productPriceMatrix, storeProducts } = this.props;
+
+		if ( isEmpty( storeProducts ) ) {
+			return null;
+		}
+
+		const productObject = storeProducts[ productSlug ];
+		const relatedProductObject = productPriceMatrix[ productSlug ];
+
+		if ( relatedProductObject ) {
+			return productObject.cost;
+		}
+
+		return null;
+	}
+
 	renderProducts() {
 		const { currencyCode, intervalType, products, storeProducts } = this.props;
 
@@ -171,7 +206,8 @@ export class ProductSelector extends Component {
 					key={ product.id }
 					title={ product.title }
 					billingTimeFrame={ this.getBillingTimeFrameLabel() }
-					fullPrice={ productObject.cost }
+					fullPrice={ this.getProductOptionFullPrice( selectedProductSlug ) }
+					discountedPrice={ this.getProductOptionDiscountedPrice( selectedProductSlug ) }
 					description={ product.description }
 					currencyCode={ currencyCode }
 					purchase={ purchase }
@@ -215,9 +251,16 @@ ProductSelector.propTypes = {
 	products: PropTypes.arrayOf(
 		PropTypes.shape( {
 			title: PropTypes.string,
+			id: PropTypes.string,
+			description: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 			options: PropTypes.objectOf( PropTypes.arrayOf( PropTypes.string ) ).isRequired,
+			optionsLabel: PropTypes.string,
 		} )
 	).isRequired,
+	productPriceMatrix: PropTypes.shape( {
+		relatedProduct: PropTypes.string,
+		ratio: PropTypes.number,
+	} ),
 	siteId: PropTypes.number,
 
 	// Connected props

client/my-sites/plans-features-main/index.jsx

@@ -32,6 +32,10 @@ import {
 	JETPACK_BACKUP_PRODUCTS_MONTHLY,
 	JETPACK_BACKUP_PRODUCTS_YEARLY,
 	PRODUCT_JETPACK_BACKUP,
+	PRODUCT_JETPACK_BACKUP_DAILY,
+	PRODUCT_JETPACK_BACKUP_DAILY_MONTHLY,
+	PRODUCT_JETPACK_BACKUP_REALTIME,
+	PRODUCT_JETPACK_BACKUP_REALTIME_MONTHLY,
 } from 'lib/products-values/constants';
 import { addQueryArgs } from 'lib/url';
 import JetpackFAQ from './jetpack-faq';
@@ -96,6 +100,17 @@ const jetpackProducts = [
 	},
 ];
 
+const jetpackProductPriceMatrix = {
+	[ PRODUCT_JETPACK_BACKUP_DAILY ]: {
+		relatedProduct: PRODUCT_JETPACK_BACKUP_DAILY_MONTHLY,
+		ratio: 12,
+	},
+	[ PRODUCT_JETPACK_BACKUP_REALTIME ]: {
+		relatedProduct: PRODUCT_JETPACK_BACKUP_REALTIME_MONTHLY,
+		ratio: 12,
+	},
+};
+
 export class PlansFeaturesMain extends Component {
 	componentDidUpdate( prevProps ) {
 		/**
@@ -428,7 +443,11 @@ export class PlansFeaturesMain extends Component {
 					subHeaderText="Just looking for backups? We’ve got you covered."
 					compactOnMobile
 				/>
-				<ProductSelector products={ jetpackProducts } intervalType={ intervalType } />
+				<ProductSelector
+					products={ jetpackProducts }
+					intervalType={ intervalType }
+					productPriceMatrix={ jetpackProductPriceMatrix }
+				/>
 			</div>
 		);
 	}