@automattic/plans-grid-next 1.0.1 → 1.0.3

package/dist/esm/components/plan-button/style.scss

@@ -1,93 +1,106 @@
-@import "@automattic/onboarding/styles/mixins";
+@import '@automattic/onboarding/styles/mixins';
 
 .button.plan-features-2023-grid__actions-button {
 	line-height: 20px;
-	border-radius: 4px;
+	border-radius: 2px;
 	padding: 10px 12px;
 	border: unset;
 	text-align: center;
 	text-wrap: balance;
 	width: 100%;
-	color: var(--color-text-inverted);
+	color: var( --color-text-inverted );
 
 	&:hover {
-		color: var(--color-text-inverted);
+		color: var( --color-text-inverted );
 	}
 
-	&.is-free-plan {
-		background-color: var(--studio-wordpress-blue-50);
+	&.is-free-plan,
+	&.is-woo-hosted-basic-plan,
+	&.is-woo-hosted-pro-plan {
+		background-color: var( --studio-wordpress-blue-50 );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-50);
+			box-shadow:
+				0 0 0 2px var( --studio-white ),
+				0 0 0 4px var( --studio-wordpress-blue-50 );
 		}
 
 		&:hover {
-			background-color: var(--studio-wordpress-blue-60);
+			background-color: var( --studio-wordpress-blue-60 );
 		}
-
 	}
 
 	&.is-personal-plan {
-		background-color: var(--studio-wordpress-blue-60);
+		background-color: var( --studio-wordpress-blue-60 );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-60);
+			box-shadow:
+				0 0 0 2px var( --studio-white ),
+				0 0 0 4px var( --studio-wordpress-blue-60 );
 		}
 
 		&:hover {
-			background-color: var(--studio-wordpress-blue-70);
+			background-color: var( --studio-wordpress-blue-70 );
 		}
 	}
 
 	&.is-premium-plan {
-		background-color: var(--studio-wordpress-blue-70);
+		background-color: var( --studio-wordpress-blue-70 );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-wordpress-blue-70);
+			box-shadow:
+				0 0 0 2px var( --studio-white ),
+				0 0 0 4px var( --studio-wordpress-blue-70 );
 		}
 
 		&:hover {
-			background-color: var(--studio-wordpress-blue-80);
+			background-color: var( --studio-wordpress-blue-80 );
 		}
 	}
 
 	&.is-business-plan {
-		background-color: var(--studio-woocommerce-purple-60);
+		background-color: var( --studio-woocommerce-purple-60 );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-60);
+			box-shadow:
+				0 0 0 2px var( --studio-white ),
+				0 0 0 4px var( --studio-woocommerce-purple-60 );
 		}
 
 		&:hover {
-			background-color: var(--studio-woocommerce-purple-70);
+			background-color: var( --studio-woocommerce-purple-70 );
 		}
 
 		+ .button.is-borderless {
 			background: transparent;
 			font-size: $font-body-small;
-			color: var(--studio-woocommerce-purple-60);
+			color: var( --studio-woocommerce-purple-60 );
 			text-decoration: none;
 
 			&:focus {
-				box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-60);
+				box-shadow:
+					0 0 0 2px var( --studio-white ),
+					0 0 0 4px var( --studio-woocommerce-purple-60 );
 			}
 		}
 	}
 
 	&.is-wooexpress-medium-plan {
-		background-color: var(--color-accent);
-		color: var(--color-text-inverted);
+		background-color: var( --color-accent );
+		color: var( --color-text-inverted );
 		font-weight: 400;
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
+			box-shadow:
+				0 0 0 2px var( --color-surface ),
+				0 0 0 4px var( --color-accent );
 		}
 	}
 
 	&.is-wooexpress-small-plan {
-		background-color: var(--color-surface);
-		color: var(--color-accent);
-		border: 1px solid var(--color-accent);
+		background-color: var( --color-surface );
+		color: var( --color-accent );
+		border: 1px solid var( --color-accent );
 		font-weight: 400;
 	}
 
@@ -95,42 +108,48 @@
 		display: inline-block;
 		width: 85%;
 		text-align: center;
-		background-color: var(--color-surface);
-		color: var(--color-accent);
-		border: 1px solid  var(--color-accent);
+		background-color: var( --color-surface );
+		color: var( --color-accent );
+		border: 1px solid var( --color-accent );
 		font-weight: 400;
 	}
 
 	&.is-ecommerce-plan {
-		background-color: var(--studio-woocommerce-purple-40);
+		background-color: var( --studio-woocommerce-purple-40 );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-woocommerce-purple-40);
+			box-shadow:
+				0 0 0 2px var( --studio-white ),
+				0 0 0 4px var( --studio-woocommerce-purple-40 );
 		}
 
 		&:hover {
-			background-color: var(--studio-woocommerce-purple-50);
+			background-color: var( --studio-woocommerce-purple-50 );
 		}
 	}
 
 	&.is-wpcom-enterprise-grid-plan {
-		background-color: var(--studio-gray-80);
+		background-color: var( --studio-gray-80 );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--studio-white), 0 0 0 4px var(--studio-gray-80);
+			box-shadow:
+				0 0 0 2px var( --studio-white ),
+				0 0 0 4px var( --studio-gray-80 );
 		}
 
 		&:hover {
-			background-color: var(--studio-gray-90);
+			background-color: var( --studio-gray-90 );
 		}
 	}
 
 	&.is-p2-plus-plan {
-		background-color: var(--color-accent);
-		color: var(--color-text-inverted);
+		background-color: var( --color-accent );
+		color: var( --color-text-inverted );
 
 		&:focus {
-			box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
+			box-shadow:
+				0 0 0 2px var( --color-surface ),
+				0 0 0 4px var( --color-accent );
 		}
 	}
 
@@ -140,25 +159,30 @@
 	&.is-secondary,
 	&.is-current-plan,
 	&.is-default {
-		background-color: var(--studio-white);
-		color: var(--studio-gray-100);
-		box-shadow: inset 0 0 0 1px var(--studio-gray-10);
+		background-color: var( --studio-white );
+		color: var( --studio-gray-100 );
+		box-shadow: inset 0 0 0 1px var( --studio-gray-10 );
 
 		&.is-storage-upgradeable {
-			background-color: var(--color-accent);
-			color: var(--color-text-inverted);
+			background-color: var( --color-accent );
+			color: var( --color-text-inverted );
 		}
 
 		&:hover {
-			box-shadow: inset 0 0 0 1px var(--studio-gray-80);
-			background-color: var(--studio-white);
+			background-color: var( --studio-white );
+			box-shadow: inset 0 0 0 1px var( --studio-gray-80 );
 		}
 	}
 
+	&:hover[disabled] {
+		background: none;
+		box-shadow: inset 0 0 0 1px #e0e0e0;
+	}
+
 	&.disabled,
 	&[disabled] {
-		background-color: var(--studio-white);
-		color: var(--color-neutral-light);
+		background-color: var( --studio-white );
+		color: var( --color-neutral-light );
 		box-shadow: inset 0 0 0 1px #e0e0e0;
 	}
 

package/dist/esm/components/plan-div-td-container.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const PlanDivOrTdContainer = (props) => {
-    const { children, isTableCell, ...otherProps } = props;
+    const { children, isTableCell, isHeader, ...otherProps } = props;
+    if (isHeader) {
+        return _jsx("th", { ...otherProps, children: children });
+    }
     return isTableCell ? (_jsx("td", { ...otherProps, children: children })) : (_jsx("div", { ...otherProps, children: children }));
 };
 export default PlanDivOrTdContainer;

package/dist/esm/components/plan-div-td-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"plan-div-td-container.js","sourceRoot":"","sources":["../../../src/components/plan-div-td-container.tsx"],"names":[],"mappings":";AAAA,MAAM,oBAAoB,GAAG,CAC5B,KAG6C,EAC/B,EAAE;IAChB,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACvD,OAAO,WAAW,CAAC,CAAC,CAAC,CACpB,gBAAS,UAAU,YAAK,QAAQ,GAAO,CACvC,CAAC,CAAC,CAAC,CACH,iBAAU,UAAU,YAAK,QAAQ,GAAQ,CACzC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"plan-div-td-container.js","sourceRoot":"","sources":["../../../src/components/plan-div-td-container.tsx"],"names":[],"mappings":";AACA,MAAM,oBAAoB,GAAG,CAC5B,KAGiE,EACnD,EAAE;IAChB,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACjE,IAAK,QAAQ,EAAG,CAAC;QAChB,OAAO,gBAAS,UAAU,YAAK,QAAQ,GAAO,CAAC;IAChD,CAAC;IACD,OAAO,WAAW,CAAC,CAAC,CAAC,CACpB,gBAAS,UAAU,YAAK,QAAQ,GAAO,CACvC,CAAC,CAAC,CAAC,CACH,iBAAU,UAAU,YAAK,QAAQ,GAAQ,CACzC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/esm/components/plan-logo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getPlanClass, isEcommercePlan, isBusinessPlan, isWooExpressPlan, isWpcomEnterpriseGridPlan, isPersonalPlan, isPremiumPlan, isFreePlan, } from '@automattic/calypso-products';
+import { getPlanClass, isEcommercePlan, isBusinessPlan, isWooExpressPlan, isWpcomEnterpriseGridPlan, isPersonalPlan, isPremiumPlan, isFreePlan, isPartnerBundleOnboarding, } from '@automattic/calypso-products';
 import { CloudLogo, VIPLogo, WooLogo } from '@automattic/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
@@ -12,8 +12,11 @@ import PopularBadge from './popular-badge';
 const PlanLogo = ({ planSlug, isInSignup, renderedGridPlans, isTableCell, planIndex }) => {
     const [activeTooltipId, setActiveTooltipId] = useManageTooltipToggle();
     const translate = useTranslate();
-    const shouldShowWooLogo = isEcommercePlan(planSlug) && !isWooExpressPlan(planSlug);
-    const { gridPlansIndex } = usePlansGridContext();
+    const { gridPlansIndex, intent } = usePlansGridContext();
+    const isWooHostingSolutionsIntent = intent === 'plans-woo-hosting-solutions';
+    const shouldShowWooLogo = isWooHostingSolutionsIntent ||
+        (isEcommercePlan(planSlug) && !isWooExpressPlan(planSlug));
+    const shouldShowPopularBadge = !isPartnerBundleOnboarding();
     const { current } = gridPlansIndex[planSlug];
     const highlightAdjacencyMatrix = useHighlightAdjacencyMatrix({
         renderedGridPlans,
@@ -36,7 +39,7 @@ const PlanLogo = ({ planSlug, isInSignup, renderedGridPlans, isTableCell, planIn
             isPersonalPlan(planSlug) ||
             isPremiumPlan(planSlug)),
     });
-    return (_jsxs(PlanDivOrTdContainer, { className: tableItemClasses, isTableCell: isTableCell, children: [_jsx(PopularBadge, { isInSignup: isInSignup, planSlug: planSlug, additionalClassName: popularBadgeClasses }), _jsxs("header", { className: headerClasses, children: [isBusinessPlan(planSlug) && (_jsx(Plans2023Tooltip, { text: translate('WP Cloud gives you the tools you need to add scalable, highly available, extremely fast WordPress hosting.'), id: "wp-cloud-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: _jsx(CloudLogo, {}) })), shouldShowWooLogo && (_jsx(Plans2023Tooltip, { text: translate('Make your online store a reality with the power of WooCommerce.'), id: "woo-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: _jsx(WooLogo, {}) })), isWpcomEnterpriseGridPlan(planSlug) && (_jsx(Plans2023Tooltip, { text: translate('The trusted choice for enterprise WordPress hosting.'), id: "enterprise-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: _jsx(VIPLogo, {}) }))] })] }, planSlug));
+    return (_jsxs(PlanDivOrTdContainer, { className: tableItemClasses, isTableCell: isTableCell, children: [shouldShowPopularBadge && (_jsx(PopularBadge, { isInSignup: isInSignup, planSlug: planSlug, additionalClassName: popularBadgeClasses })), _jsxs("header", { className: headerClasses, children: [!isWooHostingSolutionsIntent && isBusinessPlan(planSlug) && (_jsx(Plans2023Tooltip, { text: translate('WP Cloud gives you the tools you need to add scalable, highly available, extremely fast WordPress hosting.'), id: "wp-cloud-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: _jsx(CloudLogo, {}) })), shouldShowWooLogo && (_jsx(Plans2023Tooltip, { text: translate('Make your online store a reality with the power of WooCommerce.'), id: "woo-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: _jsx(WooLogo, {}) })), !isWooHostingSolutionsIntent && isWpcomEnterpriseGridPlan(planSlug) && (_jsx(Plans2023Tooltip, { text: translate('The trusted choice for enterprise WordPress hosting.'), id: "enterprise-logo", setActiveTooltipId: setActiveTooltipId, activeTooltipId: activeTooltipId, children: _jsx(VIPLogo, {}) }))] })] }, planSlug));
 };
 export default PlanLogo;
 //# sourceMappingURL=plan-logo.js.map

package/dist/esm/components/plan-logo.js.map

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

package/dist/esm/components/plan-type-selector/components/interval-type-dropdown.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { CustomSelectControl } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
 import { useRef } from 'react';
 import DropdownOption from '../../dropdown-option';
 import useIntervalOptions from '../hooks/use-interval-options';
@@ -9,10 +10,20 @@ export const IntervalTypeDropdown = (props) => {
     const supportedIntervalType = (displayedIntervals.includes(intervalType) ? intervalType : 'yearly');
     const optionsList = useIntervalOptions(props);
     const hasOpenedDropdown = useRef(false);
+    const translate = useTranslate();
     const selectOptionsList = Object.values(optionsList).map((option) => ({
         key: option.key,
         name: (_jsx(DropdownOption, { className: "plan-type-selector__interval-type-dropdown-option", title: option.name, children: option.discountText && !hideDiscount ? (_jsxs("span", { className: "discount", children: [" ", option.discountText, " "] })) : null })),
+        accessibleName: option.name,
     }));
+    const selectedOption = selectOptionsList.find(({ key }) => key === supportedIntervalType);
+    // Translators: This is a description of the currently selected billing period for accessibility.
+    // billingPeriod is the name of the billing period and it's translated.
+    const describedByText = selectedOption?.accessibleName
+        ? translate('Currently selected billing period: %(billingPeriod)s', {
+            args: { billingPeriod: selectedOption.accessibleName },
+        })
+        : undefined;
     return (_jsx("div", { className: "plan-type-selector__interval-type-dropdown-container", children: _jsx(CustomSelectControl, { __next40pxDefaultSize: true, onFocus: () => {
                 if (!hasOpenedDropdown.current) {
                     recordTracksEvent('calypso_plans_plan_type_selector_open', {
@@ -21,7 +32,7 @@ export const IntervalTypeDropdown = (props) => {
                     });
                     hasOpenedDropdown.current = true;
                 }
-            }, className: "plan-type-selector__interval-type-dropdown", label: "", options: selectOptionsList, value: selectOptionsList.find(({ key }) => key === supportedIntervalType), onChange: ({ selectedItem: { key: intervalType }, }) => {
+            }, className: "plan-type-selector__interval-type-dropdown", label: "", describedBy: describedByText, options: selectOptionsList, value: selectedOption, onChange: ({ selectedItem: { key: intervalType }, }) => {
                 recordTracksEvent('calypso_plans_plan_type_selector_option_change', {
                     interval_type: intervalType,
                     plans_intent: intent,

package/dist/esm/components/plan-type-selector/components/interval-type-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"interval-type-dropdown.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/components/interval-type-dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAG/D,MAAM,CAAC,MAAM,oBAAoB,GAAiD,CAAE,KAAK,EAAG,EAAE;IAC7F,MAAM,EACL,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,GACV,GAAG,KAAK,CAAC;IACV,MAAM,qBAAqB,GAAG,CAC7B,kBAAkB,CAAC,QAAQ,CAAE,YAAY,CAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CACrC,CAAC;IAClC,MAAM,WAAW,GAAG,kBAAkB,CAAE,KAAK,CAAE,CAAC;IAChD,MAAM,iBAAiB,GAAG,MAAM,CAAE,KAAK,CAAE,CAAC;IAE1C,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAE,WAAW,CAAE,CAAC,GAAG,CAAE,CAAE,MAAM,EAAG,EAAE,CAAC,CAAE;QAC3E,GAAG,EAAE,MAAM,CAAC,GAAG;QACf,IAAI,EAAE,CACL,KAAC,cAAc,IACd,SAAS,EAAC,mDAAmD,EAC7D,KAAK,EAAG,MAAM,CAAC,IAAI,YAEjB,MAAM,CAAC,YAAY,IAAI,CAAE,YAAY,CAAC,CAAC,CAAC,CACzC,gBAAM,SAAS,EAAC,UAAU,kBAAI,MAAM,CAAC,YAAY,SAAU,CAC3D,CAAC,CAAC,CAAC,IAAI,GACQ,CACK;KACvB,CAAE,CAAE,CAAC;IAEN,OAAO,CACN,cAAK,SAAS,EAAC,sDAAsD,YACpE,KAAC,mBAAmB,IACnB,qBAAqB,QACrB,OAAO,EAAG,GAAG,EAAE;gBACd,IAAK,CAAE,iBAAiB,CAAC,OAAO,EAAG,CAAC;oBACnC,iBAAiB,CAAE,uCAAuC,EAAE;wBAC3D,YAAY,EAAE,MAAM;wBACpB,YAAY,EAAE,UAAU;qBACxB,CAAE,CAAC;oBACJ,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;gBAClC,CAAC;YACF,CAAC,EACD,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAC,EAAE,EACR,OAAO,EAAG,iBAAiB,EAC3B,KAAK,EAAG,iBAAiB,CAAC,IAAI,CAAE,CAAE,EAAE,GAAG,EAAE,EAAG,EAAE,CAAC,GAAG,KAAK,qBAAqB,CAAE,EAC9E,QAAQ,EAAG,CAAE,EACZ,YAAY,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,GAGnC,EAAG,EAAE;gBACL,iBAAiB,CAAE,gDAAgD,EAAE;oBACpE,aAAa,EAAE,YAAY;oBAC3B,YAAY,EAAE,MAAM;oBACpB,YAAY,EAAE,UAAU;iBACxB,CAAE,CAAC;gBACJ,oBAAoB;oBACnB,oBAAoB,CAAE,YAA4C,CAAE,CAAC;YACvE,CAAC,GACA,GACG,CACN,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"interval-type-dropdown.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/components/interval-type-dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/plan-type-selector/hooks/use-max-discount.js

@@ -1,39 +1,9 @@
-import { TERM_ANNUALLY, getPlanSlugForTermVariant, isMonthly, isWpComPlan, } from '@automattic/calypso-products';
-import { Plans } from '@automattic/data-stores';
 import { useState } from '@wordpress/element';
+import useMaxDiscountsForPlanTerms from './use-max-discounts-for-plan-terms';
 export default function useMaxDiscount(plans, useCheckPlanAvailabilityForPurchase, siteId) {
     const [maxDiscount, setMaxDiscount] = useState(0);
-    const wpcomMonthlyPlans = (plans || []).filter(isWpComPlan).filter(isMonthly);
-    const yearlyVariantPlanSlugs = wpcomMonthlyPlans
-        .map((planSlug) => getPlanSlugForTermVariant(planSlug, TERM_ANNUALLY))
-        .filter(Boolean);
-    const monthlyPlansPricing = Plans.usePricingMetaForGridPlans({
-        planSlugs: wpcomMonthlyPlans,
-        siteId,
-        coupon: undefined,
-        useCheckPlanAvailabilityForPurchase,
-    });
-    const yearlyPlansPricing = Plans.usePricingMetaForGridPlans({
-        planSlugs: yearlyVariantPlanSlugs,
-        siteId,
-        coupon: undefined,
-        useCheckPlanAvailabilityForPurchase,
-    });
-    const discounts = wpcomMonthlyPlans.map((planSlug) => {
-        const yearlyVariantPlanSlug = getPlanSlugForTermVariant(planSlug, TERM_ANNUALLY);
-        if (!yearlyVariantPlanSlug) {
-            return 0;
-        }
-        const monthlyPlanAnnualCost = (monthlyPlansPricing?.[planSlug]?.originalPrice.full ?? 0) * 12;
-        if (!monthlyPlanAnnualCost) {
-            return 0;
-        }
-        const yearlyPlanAnnualCost = yearlyPlansPricing?.[yearlyVariantPlanSlug]?.discountedPrice.full ||
-            yearlyPlansPricing?.[yearlyVariantPlanSlug]?.originalPrice.full ||
-            0;
-        return Math.floor(((monthlyPlanAnnualCost - yearlyPlanAnnualCost) / (monthlyPlanAnnualCost || 1)) * 100);
-    });
-    const currentMaxDiscount = discounts.length ? Math.max(...discounts) : 0;
+    const discounts = useMaxDiscountsForPlanTerms(plans, ['monthly', 'yearly'], useCheckPlanAvailabilityForPurchase, siteId);
+    const currentMaxDiscount = discounts['yearly'] ?? 0;
     if (currentMaxDiscount > 0 && currentMaxDiscount !== maxDiscount) {
         setMaxDiscount(currentMaxDiscount);
     }

package/dist/esm/components/plan-type-selector/hooks/use-max-discount.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-max-discount.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/hooks/use-max-discount.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,aAAa,EACb,yBAAyB,EACzB,SAAS,EACT,WAAW,GACX,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,cAAc,CACrC,KAAiB,EACjB,mCAA8E,EAC9E,MAAsB;IAEtB,MAAM,CAAE,WAAW,EAAE,cAAc,CAAE,GAAG,QAAQ,CAAE,CAAC,CAAE,CAAC;IACtD,MAAM,iBAAiB,GAAG,CAAE,KAAK,IAAI,EAAE,CAAE,CAAC,MAAM,CAAE,WAAW,CAAE,CAAC,MAAM,CAAE,SAAS,CAAE,CAAC;IACpF,MAAM,sBAAsB,GAAG,iBAAiB;SAC9C,GAAG,CAAE,CAAE,QAAQ,EAAG,EAAE,CAAC,yBAAyB,CAAE,QAAQ,EAAE,aAAa,CAAE,CAAE;SAC3E,MAAM,CAAE,OAAO,CAAgB,CAAC;IAClC,MAAM,mBAAmB,GAAG,KAAK,CAAC,0BAA0B,CAAE;QAC7D,SAAS,EAAE,iBAAiB;QAC5B,MAAM;QACN,MAAM,EAAE,SAAS;QACjB,mCAAmC;KACnC,CAAE,CAAC;IACJ,MAAM,kBAAkB,GAAG,KAAK,CAAC,0BAA0B,CAAE;QAC5D,SAAS,EAAE,sBAAsB;QACjC,MAAM;QACN,MAAM,EAAE,SAAS;QACjB,mCAAmC;KACnC,CAAE,CAAC;IAEJ,MAAM,SAAS,GAAG,iBAAiB,CAAC,GAAG,CAAE,CAAE,QAAQ,EAAG,EAAE;QACvD,MAAM,qBAAqB,GAAG,yBAAyB,CAAE,QAAQ,EAAE,aAAa,CAAE,CAAC;QAEnF,IAAK,CAAE,qBAAqB,EAAG,CAAC;YAC/B,OAAO,CAAC,CAAC;QACV,CAAC;QAED,MAAM,qBAAqB,GAC1B,CAAE,mBAAmB,EAAE,CAAE,QAAQ,CAAE,EAAE,aAAa,CAAC,IAAI,IAAI,CAAC,CAAE,GAAG,EAAE,CAAC;QAErE,IAAK,CAAE,qBAAqB,EAAG,CAAC;YAC/B,OAAO,CAAC,CAAC;QACV,CAAC;QAED,MAAM,oBAAoB,GACzB,kBAAkB,EAAE,CAAE,qBAAqB,CAAE,EAAE,eAAe,CAAC,IAAI;YACnE,kBAAkB,EAAE,CAAE,qBAAqB,CAAE,EAAE,aAAa,CAAC,IAAI;YACjE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,KAAK,CAChB,CAAE,CAAE,qBAAqB,GAAG,oBAAoB,CAAE,GAAG,CAAE,qBAAqB,IAAI,CAAC,CAAE,CAAE,GAAG,GAAG,CAC3F,CAAC;IACH,CAAC,CAAE,CAAC;IACJ,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAE,GAAG,SAAS,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAE3E,IAAK,kBAAkB,GAAG,CAAC,IAAI,kBAAkB,KAAK,WAAW,EAAG,CAAC;QACpE,cAAc,CAAE,kBAAkB,CAAE,CAAC;IACtC,CAAC;IAED,OAAO,kBAAkB,IAAI,WAAW,CAAC;AAC1C,CAAC"}
+{"version":3,"file":"use-max-discount.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/hooks/use-max-discount.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,2BAA2B,MAAM,oCAAoC,CAAC;AAE7E,MAAM,CAAC,OAAO,UAAU,cAAc,CACrC,KAAiB,EACjB,mCAA8E,EAC9E,MAAsB;IAEtB,MAAM,CAAE,WAAW,EAAE,cAAc,CAAE,GAAG,QAAQ,CAAE,CAAC,CAAE,CAAC;IACtD,MAAM,SAAS,GAAG,2BAA2B,CAC5C,KAAK,EACL,CAAE,SAAS,EAAE,QAAQ,CAAE,EACvB,mCAAmC,EACnC,MAAM,CACN,CAAC;IACF,MAAM,kBAAkB,GAAG,SAAS,CAAE,QAAQ,CAAE,IAAI,CAAC,CAAC;IAEtD,IAAK,kBAAkB,GAAG,CAAC,IAAI,kBAAkB,KAAK,WAAW,EAAG,CAAC;QACpE,cAAc,CAAE,kBAAkB,CAAE,CAAC;IACtC,CAAC;IAED,OAAO,kBAAkB,IAAI,WAAW,CAAC;AAC1C,CAAC"}

package/dist/esm/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.js

@@ -1,5 +1,6 @@
 import { URL_FRIENDLY_TERMS_MAPPING, getBillingMonthsForTerm, getPlan, getPlanMultipleTermsVariantSlugs, getPlanSlugForTermVariant, isWpComPlan, isWpcomEnterpriseGridPlan, } from '@automattic/calypso-products';
 import { Plans } from '@automattic/data-stores';
+import { calculateDiscountPercentage, fromPricingMetaForGridPlan, getPlanPriceForDuration, } from '../../../lib/plan-pricing-utils';
 /**
  * Calculate the maximum discount for each term for a given set of plans
  * @param plans plans considered
@@ -23,7 +24,6 @@ export default function useMaxDiscountsForPlanTerms(plans, urlFriendlyTerms = []
             ? currentLowestTerm
             : term;
     }, terms[0]);
-    const lowestTermInMonths = getBillingMonthsForTerm(lowestTerm);
     const lowestTermPlanSlugs = allRelatedPlanSlugs.filter((planSlug) => getPlan(planSlug)?.term === lowestTerm);
     const plansPricing = Plans.usePricingMetaForGridPlans({
         planSlugs: allRelatedPlanSlugs,
@@ -34,27 +34,25 @@ export default function useMaxDiscountsForPlanTerms(plans, urlFriendlyTerms = []
     const termWiseMaxDiscount = {};
     termDefinitionsMapping.forEach((termMapping) => {
         if (termMapping.term === lowestTerm) {
-            return 0;
+            return;
         }
         const termDiscounts = lowestTermPlanSlugs.map((lowestTermPlanSlug) => {
             const lowestTermPlanPricing = plansPricing?.[lowestTermPlanSlug];
-            const lowestTermPlanCost = lowestTermPlanPricing?.originalPrice.full;
-            if (!lowestTermPlanCost) {
+            const lowestTermInfo = lowestTermPlanPricing
+                ? fromPricingMetaForGridPlan(lowestTermPlanPricing)
+                : null;
+            if (!lowestTermInfo) {
                 return 0;
             }
-            const lowestTermMonthlyCost = lowestTermPlanCost / lowestTermInMonths;
-            /**
-             * Calculate the monthly cost of the term price
-             */
             const variantPlanSlug = getPlanSlugForTermVariant(lowestTermPlanSlug, termMapping.term) ?? '';
             const variantPlanPricing = plansPricing?.[variantPlanSlug];
-            const variantTermPrice = variantPlanPricing?.discountedPrice?.full || variantPlanPricing?.originalPrice?.full || 0;
-            if (!variantTermPrice) {
+            const variantInfo = variantPlanPricing
+                ? fromPricingMetaForGridPlan(variantPlanPricing)
+                : null;
+            if (!variantInfo) {
                 return 0;
             }
-            const variantTermInMonths = getBillingMonthsForTerm(URL_FRIENDLY_TERMS_MAPPING[termMapping.urlFriendlyTerm]);
-            const variantTermMonthlyCost = variantTermPrice / variantTermInMonths;
-            return Math.floor(((lowestTermMonthlyCost - variantTermMonthlyCost) * 100) / lowestTermMonthlyCost);
+            return (calculateDiscountPercentage(getPlanPriceForDuration(lowestTermInfo, variantInfo.termMonths), getPlanPriceForDuration(variantInfo, variantInfo.termMonths)) ?? 0);
         });
         termWiseMaxDiscount[termMapping.urlFriendlyTerm] = termDiscounts.length
             ? Math.max(...termDiscounts)

package/dist/esm/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-max-discounts-for-plan-terms.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-max-discounts-for-plan-terms.js","sourceRoot":"","sources":["../../../../../src/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/plans-2023-tooltip.js

@@ -3,15 +3,25 @@ import { Tooltip } from '@automattic/components';
 import styled from '@emotion/styled';
 import { useRef } from 'react';
 import { hasTouch } from '../lib/touch-detect';
-const HoverAreaContainer = styled.span `
-	max-width: 220px;
-`;
+/**
+ * Prevents widows by replacing the last space with a non-breaking space.
+ * @param text - The text to process
+ * @returns The text with the last space replaced with a non-breaking space
+ */
+const preventWidows = (text) => {
+    if (typeof text !== 'string') {
+        return text;
+    }
+    // Replace the last space with a non-breaking space to prevent widows
+    return text.replace(/\s+(\S+)$/, '\u00A0$1');
+};
+const HoverAreaContainer = styled.span ``;
 const StyledTooltip = styled(Tooltip) `
 	&.tooltip.popover .popover__inner {
 		background: var( --color-masterbar-background );
 		text-align: start;
 		border-radius: 4px;
-		min-height: 32px;
+		min-height: 16px;
 		width: 210px;
 		align-items: center;
 		font-style: normal;
@@ -36,6 +46,7 @@ export const Plans2023Tooltip = ({ showOnMobile = true, activeTooltipId, setActi
         return id;
     };
     const isVisible = activeTooltipId === id;
-    return (_jsxs(_Fragment, { children: [_jsx(HoverAreaContainer, { className: "plans-2023-tooltip__hover-area-container", ref: tooltipRef, onMouseEnter: () => !isTouch && setActiveTooltipId(id), onMouseLeave: () => !isTouch && setActiveTooltipId(''), onTouchStart: () => isTouch && setActiveTooltipId(getMobileActiveTooltip()), id: id, children: children }), _jsx(StyledTooltip, { isVisible: isVisible, position: "top", context: tooltipRef.current, hideArrow: true, showOnMobile: showOnMobile, children: text })] }));
+    const processedText = preventWidows(text);
+    return (_jsxs(_Fragment, { children: [_jsx(HoverAreaContainer, { className: "plans-2023-tooltip__hover-area-container", ref: tooltipRef, onMouseEnter: () => !isTouch && setActiveTooltipId(id), onMouseLeave: () => !isTouch && setActiveTooltipId(''), onTouchStart: () => isTouch && setActiveTooltipId(getMobileActiveTooltip()), id: id, children: children }), _jsx(StyledTooltip, { isVisible: isVisible, position: "top", context: tooltipRef.current, hideArrow: true, showOnMobile: showOnMobile, children: processedText })] }));
 };
 //# sourceMappingURL=plans-2023-tooltip.js.map

package/dist/esm/components/plans-2023-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"plans-2023-tooltip.js","sourceRoot":"","sources":["../../../src/components/plans-2023-tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAA+C,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA;;CAErC,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAE,OAAO,CAAE,CAAA;;;;;;;;;;;;;;;CAetC,CAAC;AAUF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAE,EACjC,YAAY,GAAG,IAAI,EACnB,eAAe,EACf,kBAAkB,EAClB,EAAE,EACF,IAAI,EACJ,QAAQ,GACe,EAAG,EAAE;IAC5B,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAE,CAAC;IACpD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC;IAE3B,IAAK,CAAE,IAAI,EAAG,CAAC;QACd,OAAO,4BAAI,QAAQ,GAAK,CAAC;IAC1B,CAAC;IAED,MAAM,sBAAsB,GAAG,GAAG,EAAE;QACnC,uDAAuD;QACvD,IAAK,eAAe,KAAK,EAAE,EAAG,CAAC;YAC9B,OAAO,EAAE,CAAC;QACX,CAAC;QAED,OAAO,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,eAAe,KAAK,EAAE,CAAC;IAEzC,OAAO,CACN,8BACC,KAAC,kBAAkB,IAClB,SAAS,EAAC,0CAA0C,EACpD,GAAG,EAAG,UAAU,EAChB,YAAY,EAAG,GAAG,EAAE,CAAC,CAAE,OAAO,IAAI,kBAAkB,CAAE,EAAE,CAAE,EAC1D,YAAY,EAAG,GAAG,EAAE,CAAC,CAAE,OAAO,IAAI,kBAAkB,CAAE,EAAE,CAAE,EAC1D,YAAY,EAAG,GAAG,EAAE,CAAC,OAAO,IAAI,kBAAkB,CAAE,sBAAsB,EAAE,CAAE,EAC9E,EAAE,EAAG,EAAE,YAEL,QAAQ,GACU,EACrB,KAAC,aAAa,IACb,SAAS,EAAG,SAAS,EACrB,QAAQ,EAAC,KAAK,EACd,OAAO,EAAG,UAAU,CAAC,OAAO,EAC5B,SAAS,QACT,YAAY,EAAG,YAAY,YAEzB,IAAI,GACS,IACd,CACH,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"plans-2023-tooltip.js","sourceRoot":"","sources":["../../../src/components/plans-2023-tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAA+C,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;GAIG;AACH,MAAM,aAAa,GAAG,CAAE,IAAqB,EAAoB,EAAE;IAClE,IAAK,OAAO,IAAI,KAAK,QAAQ,EAAG,CAAC;QAChC,OAAO,IAAI,CAAC;IACb,CAAC;IACD,qEAAqE;IACrE,OAAO,IAAI,CAAC,OAAO,CAAE,WAAW,EAAE,UAAU,CAAE,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAEzC,MAAM,aAAa,GAAG,MAAM,CAAE,OAAO,CAAE,CAAA;;;;;;;;;;;;;;;CAetC,CAAC;AAUF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAE,EACjC,YAAY,GAAG,IAAI,EACnB,eAAe,EACf,kBAAkB,EAClB,EAAE,EACF,IAAI,EACJ,QAAQ,GACe,EAAG,EAAE;IAC5B,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAE,CAAC;IACpD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC;IAE3B,IAAK,CAAE,IAAI,EAAG,CAAC;QACd,OAAO,4BAAI,QAAQ,GAAK,CAAC;IAC1B,CAAC;IAED,MAAM,sBAAsB,GAAG,GAAG,EAAE;QACnC,uDAAuD;QACvD,IAAK,eAAe,KAAK,EAAE,EAAG,CAAC;YAC9B,OAAO,EAAE,CAAC;QACX,CAAC;QAED,OAAO,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,eAAe,KAAK,EAAE,CAAC;IACzC,MAAM,aAAa,GAAG,aAAa,CAAE,IAAI,CAAE,CAAC;IAE5C,OAAO,CACN,8BACC,KAAC,kBAAkB,IAClB,SAAS,EAAC,0CAA0C,EACpD,GAAG,EAAG,UAAU,EAChB,YAAY,EAAG,GAAG,EAAE,CAAC,CAAE,OAAO,IAAI,kBAAkB,CAAE,EAAE,CAAE,EAC1D,YAAY,EAAG,GAAG,EAAE,CAAC,CAAE,OAAO,IAAI,kBAAkB,CAAE,EAAE,CAAE,EAC1D,YAAY,EAAG,GAAG,EAAE,CAAC,OAAO,IAAI,kBAAkB,CAAE,sBAAsB,EAAE,CAAE,EAC9E,EAAE,EAAG,EAAE,YAEL,QAAQ,GACU,EACrB,KAAC,aAAa,IACb,SAAS,EAAG,SAAS,EACrB,QAAQ,EAAC,KAAK,EACd,OAAO,EAAG,UAAU,CAAC,OAAO,EAC5B,SAAS,QACT,YAAY,EAAG,YAAY,YAEzB,aAAa,GACA,IACd,CACH,CAAC;AACH,CAAC,CAAC"}

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

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isP2FreePlan, isFreePlan, PLAN_FREE, isWpcomEnterpriseGridPlan, } from '@automattic/calypso-products';
 import { AddOns, WpcomPlansUI } from '@automattic/data-stores';
+import { formatCurrency } from '@automattic/number-formatters';
 import { useSelect } from '@wordpress/data';
-import { formatCurrency, useTranslate } from 'i18n-calypso';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../grid-context';
 import useIsLargeCurrency from '../../../hooks/use-is-large-currency';
 import { usePlanPricingInfoFromGridPlans } from '../../../hooks/use-plan-pricing-info-from-grid-plans';
 import PlanButton from '../../plan-button';
 import { useDefaultStorageOption } from '../../shared/storage';
 import './style.scss';
-const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availableForPurchase, isStuck, isInSignup, isMonthlyPlan, }) => {
+const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availableForPurchase, isStuck, isInSignup, isMonthlyPlan, showPostButtonText = true, }) => {
     const translate = useTranslate();
-    const { gridPlansIndex, siteId, helpers: { useAction }, } = usePlansGridContext();
+    const { gridPlansIndex, siteId, helpers: { useAction }, showBillingDescriptionForIncreasedRenewalPrice, } = usePlansGridContext();
     const { current, planTitle, pricing: { billingPeriod, currencyCode, originalPrice, discountedPrice }, freeTrialPlanSlug, cartItemForPlan, } = gridPlansIndex[planSlug];
     const currentPlanBillingPeriod = currentSitePlanSlug
         ? gridPlansIndex[currentSitePlanSlug]?.pricing.billingPeriod
@@ -31,7 +33,7 @@ const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availab
         stripZeros: true,
         isSmallestUnit: true,
     });
-    const { primary: { callback, text, status, variant }, postButtonText, } = useAction({
+    const { primary: { callback, text, status, variant, ariaLabel }, postButtonText, } = useAction({
         availableForPurchase,
         billingPeriod,
         isLargeCurrency,
@@ -42,6 +44,8 @@ const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availab
         cartItemForPlan,
         currentPlanBillingPeriod,
         selectedStorageAddOn,
+        pricing: gridPlansIndex[planSlug]?.pricing,
+        isMonthlyPlan,
     });
     const { primary: { callback: freeTrialCallback, text: freeTrialText }, } = useAction({
         billingPeriod,
@@ -55,13 +59,15 @@ const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availab
         cartItemForPlan: { product_slug: freeTrialPlanSlug ?? PLAN_FREE },
         currentPlanBillingPeriod,
         selectedStorageAddOn,
+        pricing: gridPlansIndex[freeTrialPlanSlug ?? PLAN_FREE]?.pricing,
+        isMonthlyPlan,
     });
     const busy = status === 'blocked';
     const defaultStorageOption = 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 = (_jsx(PlanButton, { planSlug: planSlug, onClick: callback, busy: busy, disabled: !callback || 'disabled' === status, classes: variant === 'secondary' ? 'is-secondary' : '', children: text }));
+    let actionButton = (_jsx(PlanButton, { planSlug: planSlug, onClick: callback, busy: busy, disabled: !callback || 'disabled' === status, classes: variant === 'secondary' ? 'is-secondary' : '', ariaLabel: String(ariaLabel || ''), children: text }));
     if ((isFreePlan(planSlug) ||
         (storageAddOns && !canPurchaseStorageAddOns && nonDefaultStorageOptionSelected)) &&
         isP2FreePlan(planSlug) &&
@@ -74,14 +80,23 @@ const ActionButton = ({ planSlug, currentSitePlanSlug, visibleGridPlans, availab
             canPurchaseStorageAddOns &&
             nonDefaultStorageOptionSelected &&
             !isMonthlyPlan) {
-            actionButton = (_jsx(PlanButton, { planSlug: planSlug, classes: "is-storage-upgradeable", href: storageAddOnCheckoutHref, busy: busy, children: translate('Upgrade') }));
+            actionButton = (_jsx(PlanButton, { 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 ? (_jsxs("div", { className: "plans-grid-next-action-button__multi", children: [_jsx(PlanButton, { 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
-                    _jsx(PlanButton, { planSlug: planSlug, onClick: callback, busy: busy, borderless: true, children: text }))] })) : (_jsxs(_Fragment, { children: [_jsx(PlanButton, { planSlug: planSlug, disabled: !callback || 'disabled' === status, busy: busy, onClick: callback, current: current, children: text }), postButtonText && (_jsx("span", { className: "plans-grid-next-action-button__label", children: postButtonText }))] }));
+                    _jsx(PlanButton, { planSlug: planSlug, onClick: callback, busy: busy, borderless: true, ariaLabel: String(ariaLabel || ''), children: text }))] })) : (_jsxs(_Fragment, { children: [_jsx(PlanButton, { planSlug: planSlug, disabled: !callback || 'disabled' === status, busy: busy, onClick: callback, current: current, ariaLabel: String(ariaLabel || ''), children: text }), showPostButtonText && postButtonText && (_jsx("span", { className: clsx('plans-grid-next-action-button__label', {
+                            'is-left-aligned': showBillingDescriptionForIncreasedRenewalPrice,
+                        }), children: postButtonText }))] }));
         }
     }
+    else if (showPostButtonText &&
+        postButtonText &&
+        showBillingDescriptionForIncreasedRenewalPrice) {
+        actionButton = (_jsxs(_Fragment, { children: [actionButton, _jsx("span", { className: clsx('plans-grid-next-action-button__label', {
+                        'is-left-aligned': showBillingDescriptionForIncreasedRenewalPrice,
+                    }), children: postButtonText })] }));
+    }
     return (_jsx("div", { className: "plans-grid-next-action-button", children: _jsx("div", { className: "plans-grid-next-action-button__content", children: actionButton }) }));
 };
 export default ActionButton;