Add Ons: Migrate use add on checkout link hook to data stores package (…

…#83489)

* Add checkout link to storage add-ons data structure

* Move useAddOnCheckoutLink hook into add-ons data store

* Add data-stores package and WordPress element dependencies

client/my-sites/add-ons/hooks/use-add-ons.ts

@@ -9,6 +9,7 @@ import {
 	PRODUCT_1GB_SPACE,
 	WPCOM_FEATURES_AI_ASSISTANT,
 } from '@automattic/calypso-products';
+import { useAddOnCheckoutLink } from '@automattic/data-stores';
 import { createSelector } from '@automattic/state-utils';
 import { useMemo } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
@@ -24,6 +25,7 @@ import getBillingTransactionFilters from 'calypso/state/selectors/get-billing-tr
 import getFeaturesBySiteId from 'calypso/state/selectors/get-site-features';
 import { usePastBillingTransactions } from 'calypso/state/sites/hooks/use-billing-history';
 import { getSiteOption } from 'calypso/state/sites/selectors';
+import { getSelectedSite } from 'calypso/state/ui/selectors';
 import { AppState } from 'calypso/types';
 import { STORAGE_LIMIT } from '../constants';
 import customDesignIcon from '../icons/custom-design';
@@ -32,11 +34,10 @@ import jetpackStatsIcon from '../icons/jetpack-stats';
 import spaceUpgradeIcon from '../icons/space-upgrade';
 import unlimitedThemesIcon from '../icons/unlimited-themes';
 import isStorageAddonEnabled from '../is-storage-addon-enabled';
-import useAddOnCheckoutLink from './use-add-on-checkout-link';
 import useAddOnDisplayCost from './use-add-on-display-cost';
 import useAddOnFeatureSlugs from './use-add-on-feature-slugs';
 import useAddOnPrices from './use-add-on-prices';
-import type { AddOnMeta } from '@automattic/data-stores';
+import type { AddOnMeta, SiteDetails } from '@automattic/data-stores';
 
 const useSpaceUpgradesPurchased = ( {
 	isInSignup,
@@ -69,7 +70,7 @@ const useSpaceUpgradesPurchased = ( {
 	}, [ billingTransactions, filter, isInSignup, siteId, isLoading ] );
 };
 
-const useActiveAddOnsDefs = () => {
+const useActiveAddOnsDefs = ( selectedSite: SiteDetails | null ) => {
 	const translate = useTranslate();
 	const checkoutLink = useAddOnCheckoutLink();
 
@@ -144,7 +145,7 @@ const useActiveAddOnsDefs = () => {
 				),
 				featured: false,
 				purchased: false,
-				checkoutLink: checkoutLink( PRODUCT_1GB_SPACE, 50 ),
+				checkoutLink: checkoutLink( selectedSite?.slug ?? null, PRODUCT_1GB_SPACE, 50 ),
 			},
 			{
 				productSlug: PRODUCT_1GB_SPACE,
@@ -159,7 +160,7 @@ const useActiveAddOnsDefs = () => {
 				),
 				featured: false,
 				purchased: false,
-				checkoutLink: checkoutLink( PRODUCT_1GB_SPACE, 100 ),
+				checkoutLink: checkoutLink( selectedSite?.slug ?? null, PRODUCT_1GB_SPACE, 100 ),
 			},
 			{
 				productSlug: PRODUCT_JETPACK_STATS_PWYW_YEARLY,
@@ -359,7 +360,8 @@ const useAddOns = ( siteId?: number, isInSignup = false ): ( AddOnMeta | null )[
 	// if upgrade is not bought - only show it if available storage and if it's larger than previously bought upgrade
 	const { data: mediaStorage } = useMediaStorageQuery( siteId );
 	const { isLoading, spaceUpgradesPurchased } = useSpaceUpgradesPurchased( { isInSignup, siteId } );
-	const activeAddOns = useActiveAddOnsDefs();
+	const selectedSite = useSelector( getSelectedSite ) ?? null;
+	const activeAddOns = useActiveAddOnsDefs( selectedSite );
 
 	return useSelector( ( state ): ( AddOnMeta | null )[] => {
 		return getAddOnsTransformed(

client/my-sites/add-ons/main.tsx

@@ -1,3 +1,4 @@
+import { useAddOnCheckoutLink } from '@automattic/data-stores';
 import { css, Global } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useTranslate } from 'i18n-calypso';
@@ -13,7 +14,6 @@ import { useSelector } from 'calypso/state';
 import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import AddOnsGrid from './components/add-ons-grid';
-import useAddOnCheckoutLink from './hooks/use-add-on-checkout-link';
 import useAddOnPurchaseStatus from './hooks/use-add-on-purchase-status';
 import useAddOns from './hooks/use-add-ons';
 import type { ReactElement } from 'react';
@@ -96,7 +96,7 @@ interface Props {
 
 const AddOnsMain: React.FunctionComponent< Props > = () => {
 	const translate = useTranslate();
-	const selectedSite = useSelector( getSelectedSite );
+	const selectedSite = useSelector( getSelectedSite ) ?? null;
 	const addOns = useAddOns( selectedSite?.ID );
 	const filteredAddOns = addOns.filter( ( addOn ) => ! addOn?.exceedsSiteStorageLimits );
 
@@ -115,7 +115,7 @@ const AddOnsMain: React.FunctionComponent< Props > = () => {
 	}
 
 	const handleActionPrimary = ( addOnSlug: string, quantity?: number ) => {
-		page.redirect( `${ checkoutLink( addOnSlug, quantity ) }` );
+		page.redirect( `${ checkoutLink( selectedSite?.slug ?? null, addOnSlug, quantity ) }` );
 	};
 
 	const handleActionSelected = () => {

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

@@ -339,6 +339,7 @@ const PlansFeaturesMain = ( {
 			const cartItemForStorageAddOn = cartItems?.find(
 				( items ) => items.product_slug === PRODUCT_1GB_SPACE
 			);
+
 			if ( cartItemForStorageAddOn?.extra ) {
 				recordTracksEvent( 'calypso_signup_storage_add_on_upgrade_click', {
 					add_on_slug: cartItemForStorageAddOn.extra.feature_slug,

packages/data-stores/package.json

@@ -39,6 +39,7 @@
 		"@wordpress/data-controls": "^3.13.0",
 		"@wordpress/deprecated": "^3.44.0",
 		"@wordpress/url": "^3.45.0",
+		"@wordpress/element": "^5.21.0",
 		"fast-json-stable-stringify": "^2.1.0",
 		"i18n-calypso": "workspace:^",
 		"qs": "^6.9.1",

client/my-sites/add-ons/hooks/use-add-on-checkout-link.ts → packages/data-stores/src/add-ons/use-add-on-checkout-link.ts

@@ -1,6 +1,5 @@
 import { useCallback } from '@wordpress/element';
-import { useSelector } from 'react-redux';
-import { getSelectedSite } from 'calypso/state/ui/selectors';
+import type { SiteDetails } from '../site/types';
 
 /**
  * Returns a function that will return a formatted checkout link for the given add-on and quantity.
@@ -9,25 +8,30 @@ import { getSelectedSite } from 'calypso/state/ui/selectors';
  * @returns {Function} A function returnig a formatted checkout link for the given add-on and quantity
  */
 
-const useAddOnCheckoutLink = (): ( ( addOnSlug: string, quantity?: number ) => string ) => {
-	const selectedSite = useSelector( getSelectedSite );
+export const useAddOnCheckoutLink = (): ( (
+	selectedSiteSlug: SiteDetails[ 'slug' ] | null,
+	addOnSlug: string,
+	quantity?: number
+) => string ) => {
 	const checkoutLinkCallback = useCallback(
-		( addOnSlug: string, quantity?: number ): string => {
+		(
+			selectedSiteSlug: SiteDetails[ 'slug' ] | null,
+			addOnSlug: string,
+			quantity?: number
+		): string => {
 			// If no site is provided, return the checkout link with the add-on (will render site-selector).
-			if ( ! selectedSite ) {
+			if ( ! selectedSiteSlug ) {
 				return `/checkout/${ addOnSlug }`;
 			}
 
-			const checkoutLinkFormat = `/checkout/${ selectedSite?.slug }/${ addOnSlug }`;
+			const checkoutLinkFormat = `/checkout/${ selectedSiteSlug }/${ addOnSlug }`;
 
 			if ( quantity ) {
 				return checkoutLinkFormat + `:-q-${ quantity }`;
 			}
 			return checkoutLinkFormat;
 		},
-		[ selectedSite ]
+		[]
 	);
 	return checkoutLinkCallback;
 };
-
-export default useAddOnCheckoutLink;

packages/data-stores/src/index.ts

@@ -24,6 +24,7 @@ export * from './plans/types';
 export * from './theme';
 export * from './user/types';
 export * from './wpcom-plans-ui/types';
+export * from './add-ons/use-add-on-checkout-link';
 export * from './queries/use-launchpad';
 export * from './queries/use-all-domains-query';
 export * from './queries/use-site-domains-query';

yarn.lock

@@ -621,6 +621,7 @@ __metadata:
     "@wordpress/api-fetch": ^6.41.0
     "@wordpress/data-controls": ^3.13.0
     "@wordpress/deprecated": ^3.44.0
+    "@wordpress/element": ^5.21.0
     "@wordpress/url": ^3.45.0
     fast-json-stable-stringify: ^2.1.0
     i18n-calypso: "workspace:^"