@automattic/plans-grid-next 1.0.2 → 1.0.3

package/dist/cjs/components/shared/action-button/index.js

@@ -4,7 +4,9 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const calypso_products_1 = require("@automattic/calypso-products");
 const data_stores_1 = require("@automattic/data-stores");
+const number_formatters_1 = require("@automattic/number-formatters");
 const data_1 = require("@wordpress/data");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const i18n_calypso_1 = require("i18n-calypso");
 const grid_context_1 = require("../../../grid-context");
 const use_is_large_currency_1 = tslib_1.__importDefault(require("../../../hooks/use-is-large-currency"));
@@ -12,9 +14,9 @@ const use_plan_pricing_info_from_grid_plans_1 = require("../../../hooks/use-plan
 const plan_button_1 = tslib_1.__importDefault(require("../../plan-button"));
 const storage_1 = require("../../shared/storage");
 require("./style.scss");
-const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availableForPurchase, isStuck, isInSignup, isMonthlyPlan, }) => {
+const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availableForPurchase, isStuck, isInSignup, isMonthlyPlan, showPostButtonText = true, }) => {
     const translate = (0, i18n_calypso_1.useTranslate)();
-    const { gridPlansIndex, siteId, helpers: { useAction }, } = (0, grid_context_1.usePlansGridContext)();
+    const { gridPlansIndex, siteId, helpers: { useAction }, showBillingDescriptionForIncreasedRenewalPrice, } = (0, grid_context_1.usePlansGridContext)();
     const { current, planTitle, pricing: { billingPeriod, currencyCode, originalPrice, discountedPrice }, freeTrialPlanSlug, cartItemForPlan, } = gridPlansIndex[planSlug];
     const currentPlanBillingPeriod = currentSitePlanSlug
         ? gridPlansIndex[currentSitePlanSlug]?.pricing.billingPeriod
@@ -30,11 +32,11 @@ const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availab
             ? addOn.addOnSlug === selectedStorageOptionForPlan
             : false;
     });
-    const priceString = (0, i18n_calypso_1.formatCurrency)((discountedPrice.monthly || originalPrice.monthly) ?? 0, currencyCode || 'USD', {
+    const priceString = (0, number_formatters_1.formatCurrency)((discountedPrice.monthly || originalPrice.monthly) ?? 0, currencyCode || 'USD', {
         stripZeros: true,
         isSmallestUnit: true,
     });
-    const { primary: { callback, text, status, variant }, postButtonText, } = useAction({
+    const { primary: { callback, text, status, variant, ariaLabel }, postButtonText, } = useAction({
         availableForPurchase,
         billingPeriod,
         isLargeCurrency,
@@ -45,6 +47,8 @@ const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availab
         cartItemForPlan,
         currentPlanBillingPeriod,
         selectedStorageAddOn,
+        pricing: gridPlansIndex[planSlug]?.pricing,
+        isMonthlyPlan,
     });
     const { primary: { callback: freeTrialCallback, text: freeTrialText }, } = useAction({
         billingPeriod,
@@ -58,13 +62,15 @@ const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availab
         cartItemForPlan: { product_slug: freeTrialPlanSlug ?? calypso_products_1.PLAN_FREE },
         currentPlanBillingPeriod,
         selectedStorageAddOn,
+        pricing: gridPlansIndex[freeTrialPlanSlug ?? calypso_products_1.PLAN_FREE]?.pricing,
+        isMonthlyPlan,
     });
     const busy = status === 'blocked';
     const defaultStorageOption = (0, storage_1.useDefaultStorageOption)({ planSlug });
     const canPurchaseStorageAddOns = storageAddOns?.some((storageAddOn) => !storageAddOn?.purchased);
     const storageAddOnCheckoutHref = storageAddOns?.find((addOn) => selectedStorageOptionForPlan && addOn?.addOnSlug === selectedStorageOptionForPlan)?.checkoutLink;
     const nonDefaultStorageOptionSelected = selectedStorageOptionForPlan && defaultStorageOption !== selectedStorageOptionForPlan;
-    let actionButton = ((0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, onClick: callback, busy: busy, disabled: !callback || 'disabled' === status, classes: variant === 'secondary' ? 'is-secondary' : '', children: text }));
+    let actionButton = ((0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, onClick: callback, busy: busy, disabled: !callback || 'disabled' === status, classes: variant === 'secondary' ? 'is-secondary' : '', ariaLabel: String(ariaLabel || ''), children: text }));
     if (((0, calypso_products_1.isFreePlan)(planSlug) ||
         (storageAddOns && !canPurchaseStorageAddOns && nonDefaultStorageOptionSelected)) &&
         (0, calypso_products_1.isP2FreePlan)(planSlug) &&
@@ -77,14 +83,23 @@ const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availab
             canPurchaseStorageAddOns &&
             nonDefaultStorageOptionSelected &&
             !isMonthlyPlan) {
-            actionButton = ((0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, classes: "is-storage-upgradeable", href: storageAddOnCheckoutHref, busy: busy, children: translate('Upgrade') }));
+            actionButton = ((0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, classes: "is-storage-upgradeable", href: storageAddOnCheckoutHref, busy: busy, ariaLabel: translate('Upgrade storage for this plan').toString(), children: translate('Upgrade') }));
         }
         else {
             const hasFreeTrialPlan = isInSignup ? !!freeTrialPlanSlug : false;
             actionButton = hasFreeTrialPlan ? ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-action-button__multi", children: [(0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, onClick: () => freeTrialCallback(), busy: busy, children: freeTrialText }), !isStuck && ( // along side with the free trial CTA, we also provide an option for purchasing the plan directly here
-                    (0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, onClick: callback, busy: busy, borderless: true, children: text }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, disabled: !callback || 'disabled' === status, busy: busy, onClick: callback, current: current, children: text }), postButtonText && ((0, jsx_runtime_1.jsx)("span", { className: "plans-grid-next-action-button__label", children: postButtonText }))] }));
+                    (0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, onClick: callback, busy: busy, borderless: true, ariaLabel: String(ariaLabel || ''), children: text }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(plan_button_1.default, { planSlug: planSlug, disabled: !callback || 'disabled' === status, busy: busy, onClick: callback, current: current, ariaLabel: String(ariaLabel || ''), children: text }), showPostButtonText && postButtonText && ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)('plans-grid-next-action-button__label', {
+                            'is-left-aligned': showBillingDescriptionForIncreasedRenewalPrice,
+                        }), children: postButtonText }))] }));
         }
     }
+    else if (showPostButtonText &&
+        postButtonText &&
+        showBillingDescriptionForIncreasedRenewalPrice) {
+        actionButton = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [actionButton, (0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)('plans-grid-next-action-button__label', {
+                        'is-left-aligned': showBillingDescriptionForIncreasedRenewalPrice,
+                    }), children: postButtonText })] }));
+    }
     return ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-action-button", children: (0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-action-button__content", children: actionButton }) }));
 };
 exports.default = ActionButton;

package/dist/cjs/components/shared/action-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/action-button/index.tsx"],"names":[],"mappings":";;;;AAAA,mEAMsC;AACtC,yDAA+D;AAC/D,0CAA4C;AAC5C,+CAA4D;AAC5D,wDAA4D;AAC5D,yGAAsE;AACtE,gHAAuG;AACvG,4EAA2C;AAC3C,kDAA+D;AAE/D,wBAAsB;AAgBtB,MAAM,YAAY,GAAG,CAAE,EACtB,QAAQ,EACR,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,OAAO,EACP,UAAU,EACV,aAAa,GACM,EAAG,EAAE;IACxB,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,EACL,cAAc,EACd,MAAM,EACN,OAAO,EAAE,EAAE,SAAS,EAAE,GACtB,GAAG,IAAA,kCAAmB,GAAE,CAAC;IAC1B,MAAM,EACL,OAAO,EACP,SAAS,EACT,OAAO,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,EACxE,iBAAiB,EACjB,eAAe,GACf,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,wBAAwB,GAAG,mBAAmB;QACnD,CAAC,CAAC,cAAc,CAAE,mBAAmB,CAAE,EAAE,OAAO,CAAC,aAAa;QAC9D,CAAC,CAAC,SAAS,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,uEAA+B,EAAE;QACnD,SAAS,EAAE,gBAAgB;KAC3B,CAAE,CAAC;IACJ,MAAM,eAAe,GAAG,IAAA,+BAAkB,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,IAAI,KAAK,EAAE,CAAE,CAAC;IAC9F,MAAM,aAAa,GAAG,oBAAM,CAAC,gBAAgB,CAAE,EAAE,MAAM,EAAE,CAAE,CAAC;IAC5D,MAAM,4BAA4B,GAAG,IAAA,gBAAS,EAC7C,CAAE,MAAM,EAAG,EAAE,CAAC,MAAM,CAAE,0BAAY,CAAC,KAAK,CAAE,CAAC,+BAA+B,CAAE,QAAQ,EAAE,MAAM,CAAE,EAC9F,CAAE,QAAQ,EAAE,MAAM,CAAE,CACpB,CAAC;IACF,MAAM,oBAAoB,GAAG,aAAa,EAAE,IAAI,CAAE,CAAE,KAAK,EAAG,EAAE;QAC7D,OAAO,4BAA4B,IAAI,KAAK;YAC3C,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,4BAA4B;YAClD,CAAC,CAAC,KAAK,CAAC;IACV,CAAC,CAAE,CAAC;IAEJ,MAAM,WAAW,GAAG,IAAA,6BAAc,EACjC,CAAE,eAAe,CAAC,OAAO,IAAI,aAAa,CAAC,OAAO,CAAE,IAAI,CAAC,EACzD,YAAY,IAAI,KAAK,EACrB;QACC,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;KACpB,CACD,CAAC;IAEF,MAAM,EACL,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAC5C,cAAc,GACd,GAAG,SAAS,CAAE;QACd,oBAAoB;QACpB,aAAa;QACb,eAAe;QACf,OAAO;QACP,QAAQ;QACR,SAAS;QACT,WAAW;QACX,eAAe;QACf,wBAAwB;QACxB,oBAAoB;KACpB,CAAE,CAAC;IACJ,MAAM,EACL,OAAO,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,aAAa,EAAE,GAC7D,GAAG,SAAS,CAAE;QACd,aAAa;QACb,iBAAiB,EAAE,IAAI;QACvB,eAAe;QACf,OAAO;QACP,uEAAuE;QACvE,QAAQ,EAAE,iBAAiB,IAAI,4BAAS;QACxC,SAAS;QACT,WAAW;QACX,eAAe,EAAE,EAAE,YAAY,EAAE,iBAAiB,IAAI,4BAAS,EAAE;QACjE,wBAAwB;QACxB,oBAAoB;KACpB,CAAE,CAAC;IAEJ,MAAM,IAAI,GAAG,MAAM,KAAK,SAAS,CAAC;IAElC,MAAM,oBAAoB,GAAG,IAAA,iCAAuB,EAAE,EAAE,QAAQ,EAAE,CAAE,CAAC;IACrE,MAAM,wBAAwB,GAAG,aAAa,EAAE,IAAI,CACnD,CAAE,YAAY,EAAG,EAAE,CAAC,CAAE,YAAY,EAAE,SAAS,CAC7C,CAAC;IAEF,MAAM,wBAAwB,GAAG,aAAa,EAAE,IAAI,CACnD,CAAE,KAAK,EAAG,EAAE,CAAC,4BAA4B,IAAI,KAAK,EAAE,SAAS,KAAK,4BAA4B,CAC9F,EAAE,YAAY,CAAC;IAEhB,MAAM,+BAA+B,GACpC,4BAA4B,IAAI,oBAAoB,KAAK,4BAA4B,CAAC;IAEvF,IAAI,YAAY,GAAG,CAClB,uBAAC,qBAAU,IACV,QAAQ,EAAG,QAAQ,EACnB,OAAO,EAAG,QAAQ,EAClB,IAAI,EAAG,IAAI,EACX,QAAQ,EAAG,CAAE,QAAQ,IAAI,UAAU,KAAK,MAAM,EAC9C,OAAO,EAAG,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAErD,IAAI,GACM,CACb,CAAC;IAEF,IACC,CAAE,IAAA,6BAAU,EAAE,QAAQ,CAAE;QACvB,CAAE,aAAa,IAAI,CAAE,wBAAwB,IAAI,+BAA+B,CAAE,CAAE;QACrF,IAAA,+BAAY,EAAE,QAAQ,CAAE;QACxB,OAAO,EACN,CAAC;QACF,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAK,oBAAoB,IAAI,OAAO,IAAI,IAAA,4CAAyB,EAAE,QAAQ,CAAE,EAAG,CAAC;QAChF,yDAAyD;QACzD,IACC,OAAO;YACP,wBAAwB;YACxB,+BAA+B;YAC/B,CAAE,aAAa,EACd,CAAC;YACF,YAAY,GAAG,CACd,uBAAC,qBAAU,IACV,QAAQ,EAAG,QAAQ,EACnB,OAAO,EAAC,wBAAwB,EAChC,IAAI,EAAG,wBAAwB,EAC/B,IAAI,EAAG,IAAI,YAET,SAAS,CAAE,SAAS,CAAE,GACZ,CACb,CAAC;QACH,CAAC;aAAM,CAAC;YACP,MAAM,gBAAgB,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;YACnE,YAAY,GAAG,gBAAgB,CAAC,CAAC,CAAC,CACjC,iCAAK,SAAS,EAAC,sCAAsC,aACpD,uBAAC,qBAAU,IAAC,QAAQ,EAAG,QAAQ,EAAG,OAAO,EAAG,GAAG,EAAE,CAAC,iBAAiB,EAAE,EAAG,IAAI,EAAG,IAAI,YAChF,aAAa,GACH,EACX,CAAE,OAAO,IAAI,EAAE,sGAAsG;oBACtH,uBAAC,qBAAU,IAAC,QAAQ,EAAG,QAAQ,EAAG,OAAO,EAAG,QAAQ,EAAG,IAAI,EAAG,IAAI,EAAG,UAAU,kBAC5E,IAAI,GACM,CACb,IACI,CACN,CAAC,CAAC,CAAC,CACH,6DACC,uBAAC,qBAAU,IACV,QAAQ,EAAG,QAAQ,EACnB,QAAQ,EAAG,CAAE,QAAQ,IAAI,UAAU,KAAK,MAAM,EAC9C,IAAI,EAAG,IAAI,EACX,OAAO,EAAG,QAAQ,EAClB,OAAO,EAAG,OAAO,YAEf,IAAI,GACM,EACX,cAAc,IAAI,CACnB,iCAAM,SAAS,EAAC,sCAAsC,YAAG,cAAc,GAAS,CAChF,IACC,CACH,CAAC;QACH,CAAC;IACF,CAAC;IAED,OAAO,CACN,gCAAK,SAAS,EAAC,+BAA+B,YAC7C,gCAAK,SAAS,EAAC,wCAAwC,YAAG,YAAY,GAAQ,GACzE,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/action-button/index.tsx"],"names":[],"mappings":";;;;AAAA,mEAMsC;AACtC,yDAA+D;AAC/D,qEAA+D;AAC/D,0CAA4C;AAC5C,wDAAwB;AACxB,+CAA4C;AAC5C,wDAA4D;AAC5D,yGAAsE;AACtE,gHAAuG;AACvG,4EAA2C;AAC3C,kDAA+D;AAE/D,wBAAsB;AAiBtB,MAAM,YAAY,GAAG,CAAE,EACtB,QAAQ,EACR,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,OAAO,EACP,UAAU,EACV,aAAa,EACb,kBAAkB,GAAG,IAAI,GACN,EAAG,EAAE;IACxB,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,EACL,cAAc,EACd,MAAM,EACN,OAAO,EAAE,EAAE,SAAS,EAAE,EACtB,8CAA8C,GAC9C,GAAG,IAAA,kCAAmB,GAAE,CAAC;IAC1B,MAAM,EACL,OAAO,EACP,SAAS,EACT,OAAO,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,EACxE,iBAAiB,EACjB,eAAe,GACf,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,wBAAwB,GAAG,mBAAmB;QACnD,CAAC,CAAC,cAAc,CAAE,mBAAmB,CAAE,EAAE,OAAO,CAAC,aAAa;QAC9D,CAAC,CAAC,SAAS,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,uEAA+B,EAAE;QACnD,SAAS,EAAE,gBAAgB;KAC3B,CAAE,CAAC;IACJ,MAAM,eAAe,GAAG,IAAA,+BAAkB,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,IAAI,KAAK,EAAE,CAAE,CAAC;IAC9F,MAAM,aAAa,GAAG,oBAAM,CAAC,gBAAgB,CAAE,EAAE,MAAM,EAAE,CAAE,CAAC;IAC5D,MAAM,4BAA4B,GAAG,IAAA,gBAAS,EAC7C,CAAE,MAAM,EAAG,EAAE,CAAC,MAAM,CAAE,0BAAY,CAAC,KAAK,CAAE,CAAC,+BAA+B,CAAE,QAAQ,EAAE,MAAM,CAAE,EAC9F,CAAE,QAAQ,EAAE,MAAM,CAAE,CACpB,CAAC;IACF,MAAM,oBAAoB,GAAG,aAAa,EAAE,IAAI,CAAE,CAAE,KAAK,EAAG,EAAE;QAC7D,OAAO,4BAA4B,IAAI,KAAK;YAC3C,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,4BAA4B;YAClD,CAAC,CAAC,KAAK,CAAC;IACV,CAAC,CAAE,CAAC;IAEJ,MAAM,WAAW,GAAG,IAAA,kCAAc,EACjC,CAAE,eAAe,CAAC,OAAO,IAAI,aAAa,CAAC,OAAO,CAAE,IAAI,CAAC,EACzD,YAAY,IAAI,KAAK,EACrB;QACC,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;KACpB,CACD,CAAC;IAEF,MAAM,EACL,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,cAAc,GACd,GAAG,SAAS,CAAE;QACd,oBAAoB;QACpB,aAAa;QACb,eAAe;QACf,OAAO;QACP,QAAQ;QACR,SAAS;QACT,WAAW;QACX,eAAe;QACf,wBAAwB;QACxB,oBAAoB;QACpB,OAAO,EAAE,cAAc,CAAE,QAAQ,CAAE,EAAE,OAAO;QAC5C,aAAa;KACb,CAAE,CAAC;IACJ,MAAM,EACL,OAAO,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,aAAa,EAAE,GAC7D,GAAG,SAAS,CAAE;QACd,aAAa;QACb,iBAAiB,EAAE,IAAI;QACvB,eAAe;QACf,OAAO;QACP,uEAAuE;QACvE,QAAQ,EAAE,iBAAiB,IAAI,4BAAS;QACxC,SAAS;QACT,WAAW;QACX,eAAe,EAAE,EAAE,YAAY,EAAE,iBAAiB,IAAI,4BAAS,EAAE;QACjE,wBAAwB;QACxB,oBAAoB;QACpB,OAAO,EAAE,cAAc,CAAE,iBAAiB,IAAI,4BAAS,CAAE,EAAE,OAAO;QAClE,aAAa;KACb,CAAE,CAAC;IAEJ,MAAM,IAAI,GAAG,MAAM,KAAK,SAAS,CAAC;IAElC,MAAM,oBAAoB,GAAG,IAAA,iCAAuB,EAAE,EAAE,QAAQ,EAAE,CAAE,CAAC;IACrE,MAAM,wBAAwB,GAAG,aAAa,EAAE,IAAI,CACnD,CAAE,YAAY,EAAG,EAAE,CAAC,CAAE,YAAY,EAAE,SAAS,CAC7C,CAAC;IAEF,MAAM,wBAAwB,GAAG,aAAa,EAAE,IAAI,CACnD,CAAE,KAAK,EAAG,EAAE,CAAC,4BAA4B,IAAI,KAAK,EAAE,SAAS,KAAK,4BAA4B,CAC9F,EAAE,YAAY,CAAC;IAEhB,MAAM,+BAA+B,GACpC,4BAA4B,IAAI,oBAAoB,KAAK,4BAA4B,CAAC;IAEvF,IAAI,YAAY,GAAG,CAClB,uBAAC,qBAAU,IACV,QAAQ,EAAG,QAAQ,EACnB,OAAO,EAAG,QAAQ,EAClB,IAAI,EAAG,IAAI,EACX,QAAQ,EAAG,CAAE,QAAQ,IAAI,UAAU,KAAK,MAAM,EAC9C,OAAO,EAAG,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EACvD,SAAS,EAAG,MAAM,CAAE,SAAS,IAAI,EAAE,CAAE,YAEnC,IAAI,GACM,CACb,CAAC;IAEF,IACC,CAAE,IAAA,6BAAU,EAAE,QAAQ,CAAE;QACvB,CAAE,aAAa,IAAI,CAAE,wBAAwB,IAAI,+BAA+B,CAAE,CAAE;QACrF,IAAA,+BAAY,EAAE,QAAQ,CAAE;QACxB,OAAO,EACN,CAAC;QACF,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAK,oBAAoB,IAAI,OAAO,IAAI,IAAA,4CAAyB,EAAE,QAAQ,CAAE,EAAG,CAAC;QAChF,yDAAyD;QACzD,IACC,OAAO;YACP,wBAAwB;YACxB,+BAA+B;YAC/B,CAAE,aAAa,EACd,CAAC;YACF,YAAY,GAAG,CACd,uBAAC,qBAAU,IACV,QAAQ,EAAG,QAAQ,EACnB,OAAO,EAAC,wBAAwB,EAChC,IAAI,EAAG,wBAAwB,EAC/B,IAAI,EAAG,IAAI,EACX,SAAS,EAAG,SAAS,CAAE,+BAA+B,CAAE,CAAC,QAAQ,EAAE,YAEjE,SAAS,CAAE,SAAS,CAAE,GACZ,CACb,CAAC;QACH,CAAC;aAAM,CAAC;YACP,MAAM,gBAAgB,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;YACnE,YAAY,GAAG,gBAAgB,CAAC,CAAC,CAAC,CACjC,iCAAK,SAAS,EAAC,sCAAsC,aACpD,uBAAC,qBAAU,IAAC,QAAQ,EAAG,QAAQ,EAAG,OAAO,EAAG,GAAG,EAAE,CAAC,iBAAiB,EAAE,EAAG,IAAI,EAAG,IAAI,YAChF,aAAa,GACH,EACX,CAAE,OAAO,IAAI,EAAE,sGAAsG;oBACtH,uBAAC,qBAAU,IACV,QAAQ,EAAG,QAAQ,EACnB,OAAO,EAAG,QAAQ,EAClB,IAAI,EAAG,IAAI,EACX,UAAU,QACV,SAAS,EAAG,MAAM,CAAE,SAAS,IAAI,EAAE,CAAE,YAEnC,IAAI,GACM,CACb,IACI,CACN,CAAC,CAAC,CAAC,CACH,6DACC,uBAAC,qBAAU,IACV,QAAQ,EAAG,QAAQ,EACnB,QAAQ,EAAG,CAAE,QAAQ,IAAI,UAAU,KAAK,MAAM,EAC9C,IAAI,EAAG,IAAI,EACX,OAAO,EAAG,QAAQ,EAClB,OAAO,EAAG,OAAO,EACjB,SAAS,EAAG,MAAM,CAAE,SAAS,IAAI,EAAE,CAAE,YAEnC,IAAI,GACM,EACX,kBAAkB,IAAI,cAAc,IAAI,CACzC,iCACC,SAAS,EAAG,IAAA,cAAI,EAAE,sCAAsC,EAAE;4BACzD,iBAAiB,EAAE,8CAA8C;yBACjE,CAAE,YAED,cAAc,GACV,CACP,IACC,CACH,CAAC;QACH,CAAC;IACF,CAAC;SAAM,IACN,kBAAkB;QAClB,cAAc;QACd,8CAA8C,EAC7C,CAAC;QACF,YAAY,GAAG,CACd,6DACG,YAAY,EACd,iCACC,SAAS,EAAG,IAAA,cAAI,EAAE,sCAAsC,EAAE;wBACzD,iBAAiB,EAAE,8CAA8C;qBACjE,CAAE,YAED,cAAc,GACV,IACL,CACH,CAAC;IACH,CAAC;IAED,OAAO,CACN,gCAAK,SAAS,EAAC,+BAA+B,YAC7C,gCAAK,SAAS,EAAC,wCAAwC,YAAG,YAAY,GAAQ,GACzE,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC"}

package/dist/cjs/components/shared/action-button/style.scss

@@ -3,6 +3,10 @@
 	font-size: 0.75rem;
 	display: block;
 	margin-top: 10px;
+
+	&.is-left-aligned {
+		text-align: left;
+	}
 }
 
 .plans-grid-next-action-button__multi {

package/dist/cjs/components/shared/billing-timeframe/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const calypso_products_1 = require("@automattic/calypso-products");
+const number_formatters_1 = require("@automattic/number-formatters");
 const styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
 const i18n_calypso_1 = require("i18n-calypso");
 const grid_context_1 = require("../../../grid-context");
@@ -14,6 +15,9 @@ const DiscountPromotion = styled_1.default.div `
 	font-size: $font-body-extra-small;
 	margin-top: 6px;
 `;
+const BillingTimeframeContainer = styled_1.default.p `
+	margin-bottom: 0;
+`;
 const RefundNotice = ({ planSlug, showRefundPeriod, billingPeriod }) => {
     const translate = (0, i18n_calypso_1.useTranslate)();
     if (!showRefundPeriod || (0, calypso_products_1.isFreePlan)(planSlug)) {
@@ -42,11 +46,11 @@ const BillingTimeframe = ({ showRefundPeriod, planSlug }) => {
     if ((0, calypso_products_1.isWooExpressPlan)(planSlug) &&
         isMonthlyPlan &&
         (!introOffer || introOffer.isOfferComplete)) {
-        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: billingTimeframe }), (0, jsx_runtime_1.jsx)(DiscountPromotion, { children: planBillingDescription })] }));
+        return ((0, jsx_runtime_1.jsxs)(BillingTimeframeContainer, { children: [(0, jsx_runtime_1.jsx)("div", { children: billingTimeframe }), (0, jsx_runtime_1.jsx)(DiscountPromotion, { children: planBillingDescription })] }));
     }
     if ((0, calypso_products_1.isWpcomEnterpriseGridPlan)(planSlug)) {
-        const price = (0, i18n_calypso_1.formatCurrency)(25000, 'USD', { stripZeros: true });
-        return ((0, jsx_runtime_1.jsx)("div", { children: (0, i18n_calypso_1.fixMe)({
+        const price = (0, number_formatters_1.formatCurrency)(25000, 'USD', { stripZeros: true });
+        return ((0, jsx_runtime_1.jsx)(BillingTimeframeContainer, { children: (0, i18n_calypso_1.fixMe)({
                 text: 'Starts at {{b}}%(price)s{{/b}} annually',
                 newCopy: translate('Starts at {{b}}%(price)s{{/b}} annually', {
                     args: { price },
@@ -60,7 +64,7 @@ const BillingTimeframe = ({ showRefundPeriod, planSlug }) => {
                 }),
             }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [description, (0, jsx_runtime_1.jsx)(RefundNotice, { showRefundPeriod: showRefundPeriod, planSlug: planSlug, billingPeriod: billingPeriod })] }));
+    return ((0, jsx_runtime_1.jsxs)(BillingTimeframeContainer, { children: [description, (0, jsx_runtime_1.jsx)(RefundNotice, { showRefundPeriod: showRefundPeriod, planSlug: planSlug, billingPeriod: billingPeriod })] }));
 };
 exports.default = BillingTimeframe;
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/shared/billing-timeframe/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/billing-timeframe/index.tsx"],"names":[],"mappings":";;;;AAAA,mEAKsC;AACtC,qEAAqC;AACrC,+CAAmE;AACnE,wDAA4D;AAC5D,kIAA+F;AAG/F,MAAM,iBAAiB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAQF,MAAM,YAAY,GAAG,CAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,aAAa,EAAqB,EAAG,EAAE;IAC3F,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IAEjC,IAAK,CAAE,gBAAgB,IAAI,IAAA,6BAAU,EAAE,QAAQ,CAAE,EAAG,CAAC;QACpD,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,6DACC,gCAAM,EACJ,SAAS,CAAE,0DAA0D,EAAE;gBACxE,IAAI,EAAE;oBACL,QAAQ,EAAE,aAAa,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;iBACvC;aACD,CAAE,IACD,CACH,CAAC;AACH,CAAC,CAAC;AAOF,MAAM,gBAAgB,GAAG,CAAE,EAAE,gBAAgB,EAAE,QAAQ,EAAS,EAAG,EAAE;IACpE,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IAC1E,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAEhF,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC;IAC9C,MAAM,sBAAsB,GAAG,IAAA,sCAAyB,EAAE;QACzD,MAAM;QACN,QAAQ;QACR,OAAO;QACP,aAAa;QACb,MAAM;QACN,mCAAmC,EAAE,OAAO,EAAE,mCAAmC;KACjF,CAAE,CAAC;IACJ,MAAM,WAAW,GAAG,sBAAsB,IAAI,gBAAgB,CAAC;IAE/D,IACC,IAAA,mCAAgB,EAAE,QAAQ,CAAE;QAC5B,aAAa;QACb,CAAE,CAAE,UAAU,IAAI,UAAU,CAAC,eAAe,CAAE,EAC7C,CAAC;QACF,OAAO,CACN,4CACC,0CAAO,gBAAgB,GAAQ,EAC/B,uBAAC,iBAAiB,cAAG,sBAAsB,GAAsB,IAC5D,CACN,CAAC;IACH,CAAC;IAED,IAAK,IAAA,4CAAyB,EAAE,QAAQ,CAAE,EAAG,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAA,6BAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAE,CAAC;QAEnE,OAAO,CACN,0CACG,IAAA,oBAAK,EAAE;gBACR,IAAI,EAAE,yCAAyC;gBAC/C,OAAO,EAAE,SAAS,CAAE,yCAAyC,EAAE;oBAC9D,IAAI,EAAE,EAAE,KAAK,EAAE;oBACf,UAAU,EAAE,EAAE,CAAC,EAAE,+BAAK,EAAE;oBACxB,OAAO,EAAE,mEAAmE;iBAC5E,CAAE;gBACH,OAAO,EAAE,SAAS,CAAE,uCAAuC,EAAE;oBAC5D,IAAI,EAAE,EAAE,KAAK,EAAE;oBACf,UAAU,EAAE,EAAE,CAAC,EAAE,+BAAK,EAAE;oBACxB,OAAO,EAAE,mEAAmE;iBAC5E,CAAE;aACH,CAAE,GACE,CACN,CAAC;IACH,CAAC;IAED,OAAO,CACN,4CACG,WAAW,EACb,uBAAC,YAAY,IACZ,gBAAgB,EAAG,gBAAgB,EACnC,QAAQ,EAAG,QAAQ,EACnB,aAAa,EAAG,aAAa,GAC5B,IACG,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/billing-timeframe/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/shared/header-price/index.js

@@ -11,6 +11,7 @@ const i18n_calypso_1 = require("i18n-calypso");
 const grid_context_1 = require("../../../grid-context");
 const use_is_large_currency_1 = tslib_1.__importDefault(require("../../../hooks/use-is-large-currency"));
 const use_plan_pricing_info_from_grid_plans_1 = require("../../../hooks/use-plan-pricing-info-from-grid-plans");
+const plan_pricing_utils_1 = require("../../../lib/plan-pricing-utils");
 const header_price_context_1 = require("./header-price-context");
 require("./style.scss");
 /**
@@ -26,9 +27,12 @@ const useTermVariantPlanSlugForSavings = ({ planSlug, billingPeriod, }) => {
 };
 const HeaderPrice = ({ planSlug, visibleGridPlans }) => {
     const translate = (0, i18n_calypso_1.useTranslate)();
-    const { gridPlansIndex, enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices, siteId, coupon, helpers, } = (0, grid_context_1.usePlansGridContext)();
+    const { gridPlansIndex, enableTermSavingsPriceDisplay, reflectStorageSelectionInPlanPrices, siteId, coupon, helpers, showBillingDescriptionForIncreasedRenewalPrice, isExperimentVariant, } = (0, grid_context_1.usePlansGridContext)();
+    const pricingBadgeClassName = (0, clsx_1.default)('plans-grid-next-header-price__badge', {
+        'is-plan-differentiators-experiment-badge': isExperimentVariant,
+    });
     const { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted } = (0, header_price_context_1.useHeaderPriceContext)();
-    const { current, pricing: { currencyCode, originalPrice, discountedPrice, introOffer, billingPeriod }, } = gridPlansIndex[planSlug];
+    const { current, pricing: { currencyCode, originalPrice, discountedPrice, introOffer, billingPeriod }, isMonthlyPlan, } = gridPlansIndex[planSlug];
     const isPricedPlan = null !== originalPrice.monthly;
     /**
      * If this discount is related to a `Plan upgrade credit`
@@ -42,7 +46,7 @@ const HeaderPrice = ({ planSlug, visibleGridPlans }) => {
         prices,
         currencyCode: currencyCode || 'USD',
         ignoreWhitespace: true,
-    });
+    }) && !showBillingDescriptionForIncreasedRenewalPrice; // a temporary fix to handle an issue with isLargeCurrency logic for intro offers
     const termVariantPlanSlug = useTermVariantPlanSlugForSavings({ planSlug, billingPeriod });
     const termVariantPricing = data_stores_1.Plans.usePricingMetaForGridPlans({
         planSlugs: termVariantPlanSlug ? [termVariantPlanSlug] : [],
@@ -51,15 +55,18 @@ const HeaderPrice = ({ planSlug, visibleGridPlans }) => {
         siteId,
         useCheckPlanAvailabilityForPurchase: helpers?.useCheckPlanAvailabilityForPurchase,
     })?.[termVariantPlanSlug ?? ''];
-    const termVariantPrice = termVariantPricing?.discountedPrice.monthly ?? termVariantPricing?.originalPrice.monthly ?? 0;
-    const planPrice = discountedPrice.monthly ?? originalPrice.monthly ?? 0;
-    const savings = termVariantPrice > planPrice
-        ? Math.floor(((termVariantPrice - planPrice) / termVariantPrice) * 100)
+    const termVariantInfo = termVariantPricing
+        ? (0, plan_pricing_utils_1.fromPricingMetaForGridPlan)(termVariantPricing)
+        : null;
+    const currentPlanInfo = (0, plan_pricing_utils_1.fromPricingMetaForGridPlan)(gridPlansIndex[planSlug].pricing);
+    let savings = termVariantInfo && currentPlanInfo
+        ? (0, plan_pricing_utils_1.calculateDiscountPercentage)((0, plan_pricing_utils_1.getPlanPriceForDuration)(termVariantInfo, currentPlanInfo.termMonths), (0, plan_pricing_utils_1.getPlanPriceForDuration)(currentPlanInfo, currentPlanInfo.termMonths)) ?? 0
         : 0;
     (0, element_1.useEffect)(() => {
         if (isGridPlanOneTimeDiscounted ||
             isGridPlanOnIntroOffer ||
-            (enableTermSavingsPriceDisplay && savings)) {
+            (enableTermSavingsPriceDisplay && savings) ||
+            (showBillingDescriptionForIncreasedRenewalPrice && !!termVariantPricing)) {
             setIsAnyPlanPriceDiscounted(true);
         }
     }, [
@@ -68,24 +75,59 @@ const HeaderPrice = ({ planSlug, visibleGridPlans }) => {
         isGridPlanOneTimeDiscounted,
         savings,
         setIsAnyPlanPriceDiscounted,
+        showBillingDescriptionForIncreasedRenewalPrice,
+        termVariantPricing,
     ]);
     if ((0, calypso_products_1.isWpcomEnterpriseGridPlan)(planSlug) || !isPricedPlan) {
         return null;
     }
     if (isGridPlanOnIntroOffer) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [!current && ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price__badge", children: translate('Special Offer') })), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('plans-grid-next-header-price__pricing-group', {
+        // Use the monthly plan price for renewal pricing, instead of the intro offer renewal price
+        const compareToMonthlyPrice = (showBillingDescriptionForIncreasedRenewalPrice && termVariantPricing
+            ? termVariantPricing.originalPrice.monthly
+            : originalPrice.monthly) ?? 0;
+        const monthlyPrice = typeof discountedPrice.monthly === 'number'
+            ? discountedPrice.monthly
+            : introOffer.rawPrice.monthly;
+        // Recalculate the savings for Monthly plans with introductory offers
+        // since we are comparing the introductory price with the same plan
+        // renewal price, instead of comparing yearly to monthly costs for
+        // the same period.
+        if (showBillingDescriptionForIncreasedRenewalPrice &&
+            compareToMonthlyPrice > monthlyPrice &&
+            isMonthlyPlan) {
+            savings = (0, plan_pricing_utils_1.calculateDiscountPercentage)(compareToMonthlyPrice, monthlyPrice) ?? 0;
+        }
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [!current && ((0, jsx_runtime_1.jsx)("div", { className: pricingBadgeClassName, children: showBillingDescriptionForIncreasedRenewalPrice
+                        ? translate('Save %(savings)d%%', {
+                            args: { savings },
+                            comment: 'Example: Save 35%',
+                        })
+                        : translate('Special Offer') })), current && visibleGridPlans.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(pricingBadgeClassName, 'is-hidden'), children: "' '" })), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('plans-grid-next-header-price__pricing-group', {
                         'is-large-currency': isLargeCurrency,
-                    }), children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: typeof discountedPrice.monthly === 'number'
-                                ? discountedPrice.monthly
-                                : introOffer.rawPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })] }));
+                    }), children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: compareToMonthlyPrice, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: monthlyPrice, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })] }));
+    }
+    // Handle cases where a plan is ineligible for intro offer, but we still
+    // want to show the crossed-out monthly price.
+    if (showBillingDescriptionForIncreasedRenewalPrice && termVariantPricing) {
+        const compareToMonthlyPrice = termVariantPricing.originalPrice.monthly ?? 0;
+        const monthlyPrice = typeof discountedPrice.monthly === 'number'
+            ? discountedPrice.monthly
+            : originalPrice.monthly ?? 0;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [!current && savings > 0 && ((0, jsx_runtime_1.jsx)("div", { className: pricingBadgeClassName, children: translate('Save %(savings)d%%', {
+                        args: { savings },
+                        comment: 'Example: Save 35%',
+                    }) })), ((!current && savings <= 0) || (current && visibleGridPlans.length > 1)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(pricingBadgeClassName, 'is-hidden'), children: "' '" })), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('plans-grid-next-header-price__pricing-group', {
+                        'is-large-currency': isLargeCurrency,
+                    }), children: [compareToMonthlyPrice > monthlyPrice && ((0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: compareToMonthlyPrice, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true })), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: monthlyPrice, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })] }));
     }
     if (isGridPlanOneTimeDiscounted) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [(0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price__badge", children: translate('One time discount') }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('plans-grid-next-header-price__pricing-group', {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [(0, jsx_runtime_1.jsx)("div", { className: pricingBadgeClassName, children: translate('One time discount') }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('plans-grid-next-header-price__pricing-group', {
                         'is-large-currency': isLargeCurrency,
                     }), children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: discountedPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })] }));
     }
     if (enableTermSavingsPriceDisplay && termVariantPricing && savings) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [(0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price__badge", children: translate('Save %(savings)d%%', {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [(0, jsx_runtime_1.jsx)("div", { className: pricingBadgeClassName, children: translate('Save %(savings)d%%', {
                         args: { savings },
                         comment: 'Example: Save 35%',
                     }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('plans-grid-next-header-price__pricing-group', {
@@ -93,7 +135,10 @@ const HeaderPrice = ({ planSlug, visibleGridPlans }) => {
                     }), children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: termVariantPricing.originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", original: true }), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: discountedPrice.monthly ?? originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })] }));
     }
     if (isAnyPlanPriceDiscounted) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [(0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price__badge is-hidden", children: "' '" }), isLargeCurrency ? ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price__pricing-group is-large-currency", children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: 0, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", className: "is-placeholder-price" // This is a placeholder price to keep the layout consistent
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price", children: [showBillingDescriptionForIncreasedRenewalPrice && savings ? ((0, jsx_runtime_1.jsx)("div", { className: pricingBadgeClassName, children: translate('Save %(savings)d%%', {
+                        args: { savings },
+                        comment: 'Example: Save 35%',
+                    }) })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(pricingBadgeClassName, 'is-hidden'), children: "' '" })), isLargeCurrency ? ((0, jsx_runtime_1.jsxs)("div", { className: "plans-grid-next-header-price__pricing-group is-large-currency", children: [(0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: 0, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", className: "is-placeholder-price" // This is a placeholder price to keep the layout consistent
                             , original: true }), (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: true, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper", discounted: true })] })) : ((0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper" }))] }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-header-price", children: (0, jsx_runtime_1.jsx)(components_1.PlanPrice, { currencyCode: currencyCode, rawPrice: originalPrice.monthly, displayPerMonthNotation: false, isLargeCurrency: isLargeCurrency, isSmallestUnit: true, priceDisplayWrapperClassName: "plans-grid-next-header-price__display-wrapper" }) }));

package/dist/cjs/components/shared/header-price/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/header-price/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/shared/header-price/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/shared/header-price/style.scss

@@ -1,4 +1,4 @@
-@import "@automattic/typography/styles/variables";
+@import "@automattic/typography/styles/fonts";
 
 .plans-grid-next-header-price {
 	padding: 0 20px;
@@ -25,7 +25,7 @@
 
 			.plan-price__currency-symbol,
 			.plan-price__tax-amount {
-				color: var(--color-text-subtle);
+				color: var(--studio-gray-20);
 			}
 
 			.plan-price__integer {
@@ -95,6 +95,12 @@
 	white-space: nowrap;
 	width: fit-content;
 
+	// Same colors as Badge type="info-green" (@automattic/components); only for pricing differentiators experiment (non-control).
+	&.is-plan-differentiators-experiment-badge {
+		background-color: rgba(184, 230, 191, 0.64);
+		color: var(--studio-green-80);
+	}
+
 	&.is-hidden {
 		visibility: hidden;
 	}
@@ -104,7 +110,7 @@
 	justify-content: flex-end;
 	display: flex;
 	flex-direction: row-reverse;
-	align-items: flex-end;
+	align-items: last baseline;
 	gap: 4px;
 
 	&.is-large-currency {

package/dist/cjs/components/shared/storage/components/plan-storage.js

@@ -10,7 +10,7 @@ const storage_dropdown_1 = tslib_1.__importDefault(require("./storage-dropdown")
 const storage_feature_label_1 = tslib_1.__importDefault(require("./storage-feature-label"));
 const PlanStorage = ({ onStorageAddOnClick, planSlug, options, showUpgradeableStorage, }) => {
     const { siteId, gridPlansIndex } = (0, grid_context_1.usePlansGridContext)();
-    const { availableForPurchase, current } = gridPlansIndex[planSlug];
+    const { availableForPurchase, current, planTitle } = gridPlansIndex[planSlug];
     const availableStorageAddOns = data_stores_1.AddOns.useAvailableStorageAddOns({ siteId });
     if (!options?.isTableCell && (0, calypso_products_1.isWpcomEnterpriseGridPlan)(planSlug)) {
         return null;
@@ -22,7 +22,7 @@ const PlanStorage = ({ onStorageAddOnClick, planSlug, options, showUpgradeableSt
         showUpgradeableStorage &&
         availableStorageAddOns.length &&
         constants_1.ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE.includes(planSlug);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-plan-storage", children: canUpgradeStorageForPlan ? ((0, jsx_runtime_1.jsx)(storage_dropdown_1.default, { planSlug: planSlug, onStorageAddOnClick: onStorageAddOnClick })) : ((0, jsx_runtime_1.jsx)(storage_feature_label_1.default, { planSlug: planSlug })) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-plan-storage", "data-plan-title": planTitle, children: canUpgradeStorageForPlan ? ((0, jsx_runtime_1.jsx)(storage_dropdown_1.default, { planSlug: planSlug, onStorageAddOnClick: onStorageAddOnClick })) : ((0, jsx_runtime_1.jsx)(storage_feature_label_1.default, { planSlug: planSlug })) }));
 };
 exports.default = PlanStorage;
 //# sourceMappingURL=plan-storage.js.map

package/dist/cjs/components/shared/storage/components/plan-storage.js.map

@@ -1 +1 @@
-{"version":3,"file":"plan-storage.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/components/plan-storage.tsx"],"names":[],"mappings":";;;;AAAA,mEAAwF;AACxF,yDAAiD;AACjD,2DAA+D;AAC/D,4CAAkE;AAClE,kFAAiD;AACjD,4FAA0D;AAW1D,MAAM,WAAW,GAAG,CAAE,EACrB,mBAAmB,EACnB,QAAQ,EACR,OAAO,EACP,sBAAsB,GACf,EAAG,EAAE;IACZ,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACzD,MAAM,EAAE,oBAAoB,EAAE,OAAO,EAAE,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IACrE,MAAM,sBAAsB,GAAG,oBAAM,CAAC,yBAAyB,CAAE,EAAE,MAAM,EAAE,CAAE,CAAC;IAE9E,IAAK,CAAE,OAAO,EAAE,WAAW,IAAI,IAAA,4CAAyB,EAAE,QAAQ,CAAE,EAAG,CAAC;QACvE,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;OAEG;IACH,MAAM,wBAAwB,GAC7B,CAAE,OAAO,IAAI,oBAAoB,CAAE;QACnC,sBAAsB;QACtB,sBAAsB,CAAC,MAAM;QAC7B,8CAAkC,CAAC,QAAQ,CAAE,QAAQ,CAAE,CAAC;IAEzD,OAAO,CACN,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,wBAAwB,CAAC,CAAC,CAAC,CAC5B,uBAAC,0BAAe,IAAC,QAAQ,EAAG,QAAQ,EAAG,mBAAmB,EAAG,mBAAmB,GAAK,CACrF,CAAC,CAAC,CAAC,CACH,uBAAC,+BAAmB,IAAC,QAAQ,EAAG,QAAQ,GAAK,CAC7C,GACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}
+{"version":3,"file":"plan-storage.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/components/plan-storage.tsx"],"names":[],"mappings":";;;;AAAA,mEAAwF;AACxF,yDAAiD;AACjD,2DAA+D;AAC/D,4CAAkE;AAClE,kFAAiD;AACjD,4FAA0D;AAW1D,MAAM,WAAW,GAAG,CAAE,EACrB,mBAAmB,EACnB,QAAQ,EACR,OAAO,EACP,sBAAsB,GACf,EAAG,EAAE;IACZ,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACzD,MAAM,EAAE,oBAAoB,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAChF,MAAM,sBAAsB,GAAG,oBAAM,CAAC,yBAAyB,CAAE,EAAE,MAAM,EAAE,CAAE,CAAC;IAE9E,IAAK,CAAE,OAAO,EAAE,WAAW,IAAI,IAAA,4CAAyB,EAAE,QAAQ,CAAE,EAAG,CAAC;QACvE,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;OAEG;IACH,MAAM,wBAAwB,GAC7B,CAAE,OAAO,IAAI,oBAAoB,CAAE;QACnC,sBAAsB;QACtB,sBAAsB,CAAC,MAAM;QAC7B,8CAAkC,CAAC,QAAQ,CAAE,QAAQ,CAAE,CAAC;IAEzD,OAAO,CACN,gCAAK,SAAS,EAAC,8BAA8B,qBAAmB,SAAS,YACtE,wBAAwB,CAAC,CAAC,CAAC,CAC5B,uBAAC,0BAAe,IAAC,QAAQ,EAAG,QAAQ,EAAG,mBAAmB,EAAG,mBAAmB,GAAK,CACrF,CAAC,CAAC,CAAC,CACH,uBAAC,+BAAmB,IAAC,QAAQ,EAAG,QAAQ,GAAK,CAC7C,GACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}

package/dist/cjs/components/shared/storage/components/storage-dropdown.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable jsx-a11y/tabindex-no-positive */
 const data_stores_1 = require("@automattic/data-stores");
 const components_1 = require("@wordpress/components");
 const data_1 = require("@wordpress/data");
@@ -20,20 +21,25 @@ const StorageDropdownOption = ({ price, planStorage, addOnStorage, priceOnSepara
     const planStorageString = (0, use_storage_string_1.default)(planStorage);
     const addOnStorageString = (0, use_storage_string_1.default)(addOnStorage || 0);
     const title = addOnStorage
-        ? translate('%(planStorageString)s + %(addOnStorageString)s', {
+        ? translate('%(planStorageString)s + %(addOnStorageString)s storage', {
             args: {
                 planStorageString,
                 addOnStorageString,
             },
+            comment: 'Storage option with add-on. Example: "50GB + 100GB storage"',
         })
-        : planStorageString;
+        : translate('%(planStorageString)s storage', {
+            args: { planStorageString },
+            comment: 'Storage option. Example: "50GB storage"',
+        });
+    // Only show price for add-on options, not for the base plan storage
     const priceString = price && addOnStorage
         ? translate('%(price)s/month, billed yearly', {
             args: { price },
             comment: 'The cost of a storage add on per month. Example reads as "$50/month, billed yearly"',
         })
-        : translate('Included in plan');
-    return priceOnSeparateLine ? ((0, jsx_runtime_1.jsx)("span", { className: "plans-grid-next-storage-dropdown__option-title", children: title })) : ((0, jsx_runtime_1.jsx)(dropdown_option_1.default, { className: "plans-grid-next-storage-dropdown__option", title: title, children: (0, jsx_runtime_1.jsx)("div", { children: priceString }) }));
+        : null;
+    return priceOnSeparateLine ? ((0, jsx_runtime_1.jsx)("span", { className: "plans-grid-next-storage-dropdown__option-title", children: title })) : ((0, jsx_runtime_1.jsx)(dropdown_option_1.default, { className: "plans-grid-next-storage-dropdown__option", title: title, children: priceString && (0, jsx_runtime_1.jsx)("div", { children: priceString }) }));
 };
 const StorageDropdown = ({ planSlug, onStorageAddOnClick }) => {
     const translate = (0, i18n_calypso_1.useTranslate)();
@@ -77,10 +83,27 @@ const StorageDropdown = ({ planSlug, onStorageAddOnClick }) => {
     }, [availableStorageAddOns, defaultStorageOptionSlug, planStorage, storageAddOns]);
     const selectedStorageAddOn = getSelectedStorageAddOn(storageAddOns, selectedStorageOptionForPlan);
     const selectedStorageAddOnStorage = selectedStorageAddOn?.quantity ?? 0;
+    const planStorageString = (0, use_storage_string_1.default)(planStorage);
+    const selectedAddOnStorageString = (0, use_storage_string_1.default)(selectedStorageAddOnStorage);
+    const accessibleOptionName = selectedStorageAddOnStorage
+        ? translate('%(planStorageString)s + %(addOnStorageString)s storage', {
+            args: {
+                planStorageString,
+                addOnStorageString: selectedAddOnStorageString,
+            },
+            comment: 'Storage amount display with add-on. Example: "50GB + 100GB storage"',
+        })
+        : translate('%(planStorageString)s storage', {
+            args: { planStorageString },
+            comment: 'Storage amount display. Example: "50GB storage"',
+        });
     const selectedOption = {
         key: selectedStorageOptionForPlan,
-        name: ((0, jsx_runtime_1.jsx)(StorageDropdownOption, { price: selectedStorageAddOn?.prices?.formattedMonthlyPrice, planStorage: planStorage, addOnStorage: selectedStorageAddOnStorage, priceOnSeparateLine: true })),
+        name: accessibleOptionName,
     };
+    const accessibleDescription = translate('Currently selected storage option: %(storageOption)s', {
+        args: { storageOption: accessibleOptionName },
+    });
     const handleOnChange = (0, element_1.useCallback)(({ selectedItem }) => {
         const addOnSlug = selectedItem?.key;
         if (addOnSlug) {
@@ -88,7 +111,7 @@ const StorageDropdown = ({ planSlug, onStorageAddOnClick }) => {
             setSelectedStorageOptionForPlan({ addOnSlug, planSlug, siteId });
         }
     }, [onStorageAddOnClick, planSlug, setSelectedStorageOptionForPlan, siteId]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.CustomSelectControl, { __next40pxDefaultSize: true, hideLabelFromVision: true, options: selectControlOptions || [], value: selectedOption, onChange: handleOnChange, label: "" }), selectedStorageAddOn?.prices?.formattedMonthlyPrice && ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-storage-dropdown__addon-offset-price-container", children: (0, jsx_runtime_1.jsx)("span", { className: "plans-grid-next-storage-dropdown__addon-offset-price", children: translate('+ %(selectedOptionPrice)s/month', {
+    return ((0, jsx_runtime_1.jsxs)("div", { tabIndex: 1, children: [(0, jsx_runtime_1.jsx)(components_1.CustomSelectControl, { __next40pxDefaultSize: true, hideLabelFromVision: true, options: selectControlOptions || [], value: selectedOption, onChange: handleOnChange, label: translate('Storage options for this plan'), describedBy: accessibleDescription }), selectedStorageAddOn?.prices?.formattedMonthlyPrice && ((0, jsx_runtime_1.jsx)("div", { className: "plans-grid-next-storage-dropdown__addon-offset-price-container", children: (0, jsx_runtime_1.jsx)("span", { className: "plans-grid-next-storage-dropdown__addon-offset-price", children: translate('+ %(selectedOptionPrice)s/month', {
                         args: { selectedOptionPrice: selectedStorageAddOn?.prices?.formattedMonthlyPrice },
                     }) }) }))] }));
 };

package/dist/cjs/components/shared/storage/components/storage-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"storage-dropdown.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/components/storage-dropdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"storage-dropdown.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/components/storage-dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/shared/storage/components/storage-feature-label.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const number_formatters_1 = require("@automattic/number-formatters");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const i18n_calypso_1 = require("i18n-calypso");
 const grid_context_1 = require("../../../../grid-context");
@@ -18,7 +19,7 @@ const StorageFeatureLabel = ({ planSlug }) => {
     const monthlyAddedCost = purchasedStorageAddOn?.prices?.monthlyPrice ?? 0;
     const formattedMonthlyAddedCost = monthlyAddedCost &&
         currencyCode &&
-        (0, i18n_calypso_1.formatCurrency)(monthlyAddedCost, currencyCode, { isSmallestUnit: true });
+        (0, number_formatters_1.formatCurrency)(monthlyAddedCost, currencyCode, { isSmallestUnit: true });
     const isLargeCurrency = (0, use_is_large_currency_1.default)({
         prices: [monthlyAddedCost],
         isAddOn: true,

package/dist/cjs/components/shared/storage/components/storage-feature-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"storage-feature-label.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/components/storage-feature-label.tsx"],"names":[],"mappings":";;;;AACA,wDAAwB;AACxB,+CAA4D;AAC5D,2DAA+D;AAC/D,4GAAyE;AACzE,yFAAuD;AACvD,iHAA6E;AAC7E,6FAA2D;AAM3D,MAAM,mBAAmB,GAAG,CAAE,EAAE,QAAQ,EAAS,EAAG,EAAE;IACrD,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,EAAE,cAAc,EAAE,oBAAoB,GAAG,IAAI,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IAC9E,MAAM,EACL,OAAO,EAAE,EAAE,YAAY,EAAE,GACzB,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,IAAA,0BAAc,EAAE,QAAQ,CAAE,CAAC;IAC/C,MAAM,qBAAqB,GAAG,IAAA,sCAAwB,GAAE,CAAC;IAEzD,MAAM,gBAAgB,GAAG,qBAAqB,EAAE,MAAM,EAAE,YAAY,IAAI,CAAC,CAAC;IAC1E,MAAM,yBAAyB,GAC9B,gBAAgB;QAChB,YAAY;QACZ,IAAA,6BAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAE,CAAC;IAC5E,MAAM,eAAe,GAAG,IAAA,+BAAkB,EAAE;QAC3C,MAAM,EAAE,CAAE,gBAAgB,CAAE;QAC5B,OAAO,EAAE,IAAI;QACb,YAAY,EAAE,YAAY,IAAI,KAAK;KACnC,CAAE,CAAC;IACJ,MAAM,kBAAkB,GAAG,IAAA,4BAAgB,EAC1C,WAAW,GAAG,CAAE,qBAAqB,EAAE,QAAQ,IAAI,CAAC,CAAE,CACtD,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,cAAI,EAAE,kDAAkD,EAAE;QAClF,QAAQ,EAAE,CAAE,eAAe;KAC3B,CAAE,CAAC;IAEJ,MAAM,SAAS,GAAG,oBAAoB,CAAC,CAAC,CAAC,CACxC,gCAAK,SAAS,EAAC,wDAAwD,YACpE,kBAAkB,GACf,CACN,CAAC,CAAC,CAAC,CACH,gCAAK,SAAS,EAAC,+CAA+C,YAC3D,SAAS,CAAE,YAAY,EAAE;YAC1B,IAAI,EAAE,CAAE,kBAAkB,CAAE;YAC5B,OAAO,EAAE,sEAAsE;SAC/E,CAAE,GACE,CACN,CAAC;IAEF,OAAO,yBAAyB,CAAC,CAAC,CAAC,CAClC,iCAAK,SAAS,EAAG,gBAAgB,aAC9B,SAAS,EACX,gCAAK,SAAS,EAAC,qDAAqD,YACjE,SAAS,CAAE,uCAAuC,EAAE;oBACrD,IAAI,EAAE,EAAE,yBAAyB,EAAE;iBACnC,CAAE,GACE,IACD,CACN,CAAC,CAAC,CAAC,CACH,SAAS,CACT,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC"}
+{"version":3,"file":"storage-feature-label.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/components/storage-feature-label.tsx"],"names":[],"mappings":";;;;AACA,qEAA+D;AAC/D,wDAAwB;AACxB,+CAA4C;AAC5C,2DAA+D;AAC/D,4GAAyE;AACzE,yFAAuD;AACvD,iHAA6E;AAC7E,6FAA2D;AAM3D,MAAM,mBAAmB,GAAG,CAAE,EAAE,QAAQ,EAAS,EAAG,EAAE;IACrD,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,EAAE,cAAc,EAAE,oBAAoB,GAAG,IAAI,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IAC9E,MAAM,EACL,OAAO,EAAE,EAAE,YAAY,EAAE,GACzB,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,IAAA,0BAAc,EAAE,QAAQ,CAAE,CAAC;IAC/C,MAAM,qBAAqB,GAAG,IAAA,sCAAwB,GAAE,CAAC;IAEzD,MAAM,gBAAgB,GAAG,qBAAqB,EAAE,MAAM,EAAE,YAAY,IAAI,CAAC,CAAC;IAC1E,MAAM,yBAAyB,GAC9B,gBAAgB;QAChB,YAAY;QACZ,IAAA,kCAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAE,CAAC;IAC5E,MAAM,eAAe,GAAG,IAAA,+BAAkB,EAAE;QAC3C,MAAM,EAAE,CAAE,gBAAgB,CAAE;QAC5B,OAAO,EAAE,IAAI;QACb,YAAY,EAAE,YAAY,IAAI,KAAK;KACnC,CAAE,CAAC;IACJ,MAAM,kBAAkB,GAAG,IAAA,4BAAgB,EAC1C,WAAW,GAAG,CAAE,qBAAqB,EAAE,QAAQ,IAAI,CAAC,CAAE,CACtD,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,cAAI,EAAE,kDAAkD,EAAE;QAClF,QAAQ,EAAE,CAAE,eAAe;KAC3B,CAAE,CAAC;IAEJ,MAAM,SAAS,GAAG,oBAAoB,CAAC,CAAC,CAAC,CACxC,gCAAK,SAAS,EAAC,wDAAwD,YACpE,kBAAkB,GACf,CACN,CAAC,CAAC,CAAC,CACH,gCAAK,SAAS,EAAC,+CAA+C,YAC3D,SAAS,CAAE,YAAY,EAAE;YAC1B,IAAI,EAAE,CAAE,kBAAkB,CAAE;YAC5B,OAAO,EAAE,sEAAsE;SAC/E,CAAE,GACE,CACN,CAAC;IAEF,OAAO,yBAAyB,CAAC,CAAC,CAAC,CAClC,iCAAK,SAAS,EAAG,gBAAgB,aAC9B,SAAS,EACX,gCAAK,SAAS,EAAC,qDAAqD,YACjE,SAAS,CAAE,uCAAuC,EAAE;oBACrD,IAAI,EAAE,EAAE,yBAAyB,EAAE;iBACnC,CAAE,GACE,IACD,CACN,CAAC,CAAC,CAAC,CACH,SAAS,CACT,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC"}

package/dist/cjs/components/shared/storage/hooks/use-plan-storage.js

@@ -15,6 +15,8 @@ function usePlanStorage(planSlug) {
             return 13;
         case calypso_products_1.FEATURE_50GB_STORAGE:
             return 50;
+        case calypso_products_1.FEATURE_100GB_STORAGE:
+            return 100;
         case calypso_products_1.FEATURE_P2_3GB_STORAGE:
             return 3;
         case calypso_products_1.FEATURE_P2_13GB_STORAGE:

package/dist/cjs/components/shared/storage/hooks/use-plan-storage.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-plan-storage.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/hooks/use-plan-storage.ts"],"names":[],"mappings":";;AAAA,mEAUsC;AACtC,2DAA+D;AAE/D,SAAS,cAAc,CAAE,QAAkB;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACjD,MAAM,EACL,QAAQ,EAAE,EAAE,cAAc,EAAE,GAC5B,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,kBAAkB,GAAG,cAAc,EAAE,OAAO,EAA6C,CAAC;IAEhG,QAAS,kBAAkB,EAAG,CAAC;QAC9B,KAAK,sCAAmB;YACvB,OAAO,CAAC,CAAC;QACV,KAAK,sCAAmB;YACvB,OAAO,CAAC,CAAC;QACV,KAAK,uCAAoB;YACxB,OAAO,EAAE,CAAC;QACX,KAAK,uCAAoB;YACxB,OAAO,EAAE,CAAC;QACX,KAAK,yCAAsB;YAC1B,OAAO,CAAC,CAAC;QACV,KAAK,0CAAuB;YAC3B,OAAO,EAAE,CAAC;QACX,KAAK,wCAAqB;YACzB,OAAO,GAAG,CAAC;QACZ;YACC,OAAO,CAAC,CAAC;IACX,CAAC;AACF,CAAC;AAED,kBAAe,cAAc,CAAC"}
+{"version":3,"file":"use-plan-storage.js","sourceRoot":"","sources":["../../../../../../src/components/shared/storage/hooks/use-plan-storage.ts"],"names":[],"mappings":";;AAAA,mEAWsC;AACtC,2DAA+D;AAE/D,SAAS,cAAc,CAAE,QAAkB;IAC1C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,GAAE,CAAC;IACjD,MAAM,EACL,QAAQ,EAAE,EAAE,cAAc,EAAE,GAC5B,GAAG,cAAc,CAAE,QAAQ,CAAE,CAAC;IAC/B,MAAM,kBAAkB,GAAG,cAAc,EAAE,OAAO,EAA6C,CAAC;IAEhG,QAAS,kBAAkB,EAAG,CAAC;QAC9B,KAAK,sCAAmB;YACvB,OAAO,CAAC,CAAC;QACV,KAAK,sCAAmB;YACvB,OAAO,CAAC,CAAC;QACV,KAAK,uCAAoB;YACxB,OAAO,EAAE,CAAC;QACX,KAAK,uCAAoB;YACxB,OAAO,EAAE,CAAC;QACX,KAAK,wCAAqB;YACzB,OAAO,GAAG,CAAC;QACZ,KAAK,yCAAsB;YAC1B,OAAO,CAAC,CAAC;QACV,KAAK,0CAAuB;YAC3B,OAAO,EAAE,CAAC;QACX,KAAK,wCAAqB;YACzB,OAAO,GAAG,CAAC;QACZ;YACC,OAAO,CAAC,CAAC;IACX,CAAC;AACF,CAAC;AAED,kBAAe,cAAc,CAAC"}

package/dist/cjs/fixtures/sites-purchases.js

@@ -8,7 +8,7 @@ exports.default = [
         product_id: '2451',
         subscribed_date: '2024-05-01T00:53:22+00:00',
         renew: '1',
-        auto_renew: '1',
+        is_auto_renew_enabled: true,
         renew_date: '2025-05-01T00:00:00+00:00',
         inactive_date: null,
         active: '1',
@@ -17,8 +17,6 @@ exports.default = [
         most_recent_renew_date: '2024-05-01T00:53:21+00:00',
         amount: 155.4,
         expiry_date: '2025-05-01T00:00:00+00:00',
-        expiry_message: 'Renews on May 1, 2025',
-        expiry_sub_message: '',
         expiry_status: 'active',
         partner_name: null,
         partner_slug: null,
@@ -126,7 +124,7 @@ exports.default = [
         payment_name: 'Test User',
         payment_country_code: 'US',
         payment_country_name: 'United States',
-        is_rechargable: true,
+        is_rechargeable: true,
         payment_type: 'credit_card',
     },
 ];