diff --git a/client/my-sites/add-ons/hooks/use-add-ons.ts b/client/my-sites/add-ons/hooks/use-add-ons.ts index e1875e402c9d7..aab42b10024c8 100644 --- a/client/my-sites/add-ons/hooks/use-add-ons.ts +++ b/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( diff --git a/client/my-sites/add-ons/main.tsx b/client/my-sites/add-ons/main.tsx index 7a6572a8ddc25..bf00e3be1b7bc 100644 --- a/client/my-sites/add-ons/main.tsx +++ b/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 = () => { diff --git a/client/my-sites/plans-features-main/index.tsx b/client/my-sites/plans-features-main/index.tsx index 666e33ed726bb..e47528abf36c3 100644 --- a/client/my-sites/plans-features-main/index.tsx +++ b/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, diff --git a/packages/data-stores/package.json b/packages/data-stores/package.json index 8418d1addcf73..9d262af1c8544 100644 --- a/packages/data-stores/package.json +++ b/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", diff --git a/client/my-sites/add-ons/hooks/use-add-on-checkout-link.ts b/packages/data-stores/src/add-ons/use-add-on-checkout-link.ts similarity index 59% rename from client/my-sites/add-ons/hooks/use-add-on-checkout-link.ts rename to packages/data-stores/src/add-ons/use-add-on-checkout-link.ts index adbf499bf8b10..80875f2606b72 100644 --- a/client/my-sites/add-ons/hooks/use-add-on-checkout-link.ts +++ b/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; diff --git a/packages/data-stores/src/index.ts b/packages/data-stores/src/index.ts index 30f13aa7ef1c3..1f9a44f95e31e 100644 --- a/packages/data-stores/src/index.ts +++ b/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'; diff --git a/yarn.lock b/yarn.lock index 3967d69442097..a34ac803441b2 100644 --- a/yarn.lock +++ b/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:^"