From bcb96d52ddfe091871015e65b581b55c38a33632 Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Wed, 25 Oct 2023 14:16:24 -0700 Subject: [PATCH] Move useAddOnCheckoutLink hook into add-ons data store --- client/my-sites/add-ons/hooks/use-add-ons.ts | 14 +++++++------ client/my-sites/add-ons/main.tsx | 6 +++--- .../src/add-ons}/use-add-on-checkout-link.ts | 20 +++++++++---------- packages/data-stores/src/index.ts | 1 + 4 files changed, 22 insertions(+), 19 deletions(-) rename {client/my-sites/add-ons/hooks => packages/data-stores/src/add-ons}/use-add-on-checkout-link.ts (59%) 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 85cf0967df2571..93f7bbb2bae630 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 ) => { 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, 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, PRODUCT_1GB_SPACE, 100 ), }, { productSlug: PRODUCT_JETPACK_STATS_PWYW_YEARLY, @@ -360,7 +361,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 ); + 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 31b2045c273515..b9f6d756e1996d 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 checkoutLink = useAddOnCheckoutLink(); @@ -113,7 +113,7 @@ const AddOnsMain: React.FunctionComponent< Props > = () => { } const handleActionPrimary = ( addOnSlug: string, quantity?: number ) => { - page.redirect( `${ checkoutLink( addOnSlug, quantity ) }` ); + page.redirect( `${ checkoutLink( selectedSite, addOnSlug, quantity ) }` ); }; const handleActionSelected = () => { 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 adbf499bf8b100..b357fcd07310a2 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 '@automattic/data-stores'; /** * Returns a function that will return a formatted checkout link for the given add-on and quantity. @@ -9,25 +8,26 @@ 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 = (): ( ( + siteDetails: SiteDetails | null, + addOnSlug: string, + quantity?: number +) => string ) => { const checkoutLinkCallback = useCallback( - ( addOnSlug: string, quantity?: number ): string => { + ( siteDetails: SiteDetails, 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 ( ! siteDetails ) { return `/checkout/${ addOnSlug }`; } - const checkoutLinkFormat = `/checkout/${ selectedSite?.slug }/${ addOnSlug }`; + const checkoutLinkFormat = `/checkout/${ siteDetails?.slug }/${ 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 30f13aa7ef1c3c..1f9a44f95e31e6 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';