My Jetpack: Always show the purchase plan link regardless of number o…

…f plans owned (#39299)
Automattic · Sep 13, 2024 · 1e3e938 · 1e3e938
1 parent 0cdb829
commit 1e3e938
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/plans-section/index.jsx b/projects/packages/my-jetpack/_inc/components/plans-section/index.jsx
@@ -91,22 +91,22 @@ function PlanSectionFooter( { numberOfPurchases } ) {
 	const { recordEvent } = useAnalytics();
 	const { isUserConnected } = useMyJetpackConnection();
 
-	let planLinkDescription = __( 'Purchase a plan', 'jetpack-my-jetpack' );
-	if ( numberOfPurchases >= 1 ) {
-		planLinkDescription = _n(
-			'Manage your plan',
-			'Manage your plans',
-			numberOfPurchases,
-			'jetpack-my-jetpack'
-		);
-	}
+	const planManageDescription = _n(
+		'Manage your plan',
+		'Manage your plans',
+		numberOfPurchases,
+		'jetpack-my-jetpack'
+	);
 
-	const purchaseClickHandler = useCallback( () => {
-		const event = numberOfPurchases
-			? 'jetpack_myjetpack_plans_manage_click'
-			: 'jetpack_myjetpack_plans_purchase_click';
-		recordEvent( event );
-	}, [ numberOfPurchases, recordEvent ] );
+	const planPurchaseDescription = __( 'Purchase a plan', 'jetpack-my-jetpack' );
+
+	const planManageClickHandler = useCallback( () => {
+		recordEvent( 'jetpack_myjetpack_plans_manage_click' );
+	}, [ recordEvent ] );
+
+	const planPurchaseClickHandler = useCallback( () => {
+		recordEvent( 'jetpack_myjetpack_plans_purchase_click' );
+	}, [ recordEvent ] );
 
 	const navigateToConnectionPage = useMyJetpackNavigate( MyJetpackRoutes.Connection );
 	const activateLicenseClickHandler = useCallback( () => {
@@ -128,15 +128,28 @@ function PlanSectionFooter( { numberOfPurchases } ) {
 
 	return (
 		<ul>
+			{ numberOfPurchases > 0 && (
+				<li className={ styles[ 'actions-list-item' ] }>
+					<Button
+						onClick={ planManageClickHandler }
+						href={ getManageYourPlanUrl() }
+						weight="regular"
+						variant="link"
+						isExternalLink={ true }
+					>
+						{ planManageDescription }
+					</Button>
+				</li>
+			) }
 			<li className={ styles[ 'actions-list-item' ] }>
 				<Button
-					onClick={ purchaseClickHandler }
-					href={ numberOfPurchases ? getManageYourPlanUrl() : getPurchasePlanUrl() }
+					onClick={ planPurchaseClickHandler }
+					href={ getPurchasePlanUrl() }
 					weight="regular"
 					variant="link"
 					isExternalLink={ true }
 				>
-					{ planLinkDescription }
+					{ planPurchaseDescription }
 				</Button>
 			</li>
 			{ loadAddLicenseScreen && (

diff --git a/projects/packages/my-jetpack/changelog/update-my-jetpack-plans-permanent-purchase-link b/projects/packages/my-jetpack/changelog/update-my-jetpack-plans-permanent-purchase-link
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+My Jetpack: Always show the purchase link regardless of the number of plans owned.