diff --git a/client/jetpack-cloud/sections/partner-portal/credit-card-fields/credit-card-element-field.tsx b/client/jetpack-cloud/sections/partner-portal/credit-card-fields/credit-card-element-field.tsx index 2c6d1c3c1af18..ea1ef15d9d693 100644 --- a/client/jetpack-cloud/sections/partner-portal/credit-card-fields/credit-card-element-field.tsx +++ b/client/jetpack-cloud/sections/partner-portal/credit-card-fields/credit-card-element-field.tsx @@ -3,8 +3,8 @@ import { CardElement } from '@stripe/react-stripe-js'; import { useSelect } from '@wordpress/data'; import { useI18n } from '@wordpress/react-i18n'; import classnames from 'classnames'; -import { creditCardStore } from 'calypso/state/partner-portal/credit-card-form'; import type { StripeElementChangeEvent, StripeElementStyle } from '@stripe/stripe-js'; +import type { CreditCardSelectors } from 'calypso/state/partner-portal/types'; export default function CreditCardElementField( { setIsStripeFullyLoaded, @@ -19,7 +19,7 @@ export default function CreditCardElementField( { const { formStatus } = useFormStatus(); const isDisabled = formStatus !== FormStatus.READY; const { card: cardError } = useSelect( - ( select ) => select( creditCardStore ).getCardDataErrors(), + ( select ) => ( select( 'credit-card' ) as CreditCardSelectors ).getCardDataErrors(), [] ); diff --git a/client/jetpack-cloud/sections/partner-portal/credit-card-fields/credit-card-submit-button.tsx b/client/jetpack-cloud/sections/partner-portal/credit-card-fields/credit-card-submit-button.tsx index 39000175cabee..db222c4133062 100644 --- a/client/jetpack-cloud/sections/partner-portal/credit-card-fields/credit-card-submit-button.tsx +++ b/client/jetpack-cloud/sections/partner-portal/credit-card-fields/credit-card-submit-button.tsx @@ -4,13 +4,13 @@ import { useSelect } from '@wordpress/data'; import { useI18n } from '@wordpress/react-i18n'; import debugFactory from 'debug'; import { useMemo } from 'react'; -import { creditCardStore } from 'calypso/state/partner-portal/credit-card-form'; import type { StripeConfiguration } from '@automattic/calypso-stripe'; import type { ProcessPayment } from '@automattic/composite-checkout'; import type { StoreState } from '@automattic/wpcom-checkout'; import type { Stripe } from '@stripe/stripe-js'; import type { I18n } from '@wordpress/i18n'; import type { State } from 'calypso/state/partner-portal/credit-card-form/reducer'; +import type { CreditCardSelectors } from 'calypso/state/partner-portal/types'; const debug = debugFactory( 'calypso:partner-portal:credit-card' ); @@ -31,11 +31,11 @@ export default function CreditCardSubmitButton( { } ) { const { __ } = useI18n(); const fields: StoreState< string > = useSelect( - ( select ) => select( creditCardStore ).getFields(), + ( select ) => ( select( 'credit-card' ) as CreditCardSelectors ).getFields(), [] ); const useAsPrimaryPaymentMethod: boolean = useSelect( - ( select ) => select( creditCardStore ).useAsPrimaryPaymentMethod(), + ( select ) => ( select( 'credit-card' ) as CreditCardSelectors ).useAsPrimaryPaymentMethod(), [] ); const cardholderName = fields.cardholderName; diff --git a/client/jetpack-cloud/sections/partner-portal/credit-card-fields/index.tsx b/client/jetpack-cloud/sections/partner-portal/credit-card-fields/index.tsx index 7de8574aefa1d..ad520178ee92d 100644 --- a/client/jetpack-cloud/sections/partner-portal/credit-card-fields/index.tsx +++ b/client/jetpack-cloud/sections/partner-portal/credit-card-fields/index.tsx @@ -7,23 +7,23 @@ import { useState } from 'react'; import { useDispatch as useReduxDispatch } from 'react-redux'; import { useRecentPaymentMethodsQuery } from 'calypso/jetpack-cloud/sections/partner-portal/hooks'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; -import { creditCardStore } from 'calypso/state/partner-portal/credit-card-form'; import CreditCardElementField from './credit-card-element-field'; import CreditCardLoading from './credit-card-loading'; import SetAsPrimaryPaymentMethod from './set-as-primary-payment-method'; import type { StoreState } from '@automattic/wpcom-checkout'; import type { StripeElementChangeEvent, StripeElementStyle } from '@stripe/stripe-js'; +import type { CreditCardSelectors } from 'calypso/state/partner-portal/types'; import './style.scss'; export default function CreditCardFields() { const { __ } = useI18n(); const [ isStripeFullyLoaded, setIsStripeFullyLoaded ] = useState( false ); const fields: StoreState< string > = useSelect( - ( select ) => select( creditCardStore ).getFields(), + ( select ) => ( select( 'credit-card' ) as CreditCardSelectors ).getFields(), [] ); const useAsPrimaryPaymentMethod: boolean = useSelect( - ( select ) => select( creditCardStore ).useAsPrimaryPaymentMethod(), + ( select ) => ( select( 'credit-card' ) as CreditCardSelectors ).useAsPrimaryPaymentMethod(), [] ); const getField = ( key: string | number ) => fields[ key ] || {}; diff --git a/client/jetpack-cloud/sections/partner-portal/payment-methods/hooks/use-create-stored-credit-card.ts b/client/jetpack-cloud/sections/partner-portal/payment-methods/hooks/use-create-stored-credit-card.ts index d7eadc0600697..540a3aa9baf91 100644 --- a/client/jetpack-cloud/sections/partner-portal/payment-methods/hooks/use-create-stored-credit-card.ts +++ b/client/jetpack-cloud/sections/partner-portal/payment-methods/hooks/use-create-stored-credit-card.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { createStoredCreditCardMethod } from 'calypso/jetpack-cloud/sections/partner-portal/payment-methods/stored-credit-card-method'; -import { creditCardStore } from 'calypso/state/partner-portal/credit-card-form'; +import { createStoredCreditCardPaymentMethodStore } from 'calypso/state/partner-portal/credit-card-form'; import type { StripeConfiguration, StripeLoadingError } from '@automattic/calypso-stripe'; import type { PaymentMethod } from '@automattic/composite-checkout'; import type { Stripe } from '@stripe/stripe-js'; @@ -20,16 +20,18 @@ export function useCreateStoredCreditCardMethod( { } ): PaymentMethod | null { const shouldLoadStripeMethod = ! isStripeLoading && ! stripeLoadingError; + const store = useMemo( () => createStoredCreditCardPaymentMethodStore(), [] ); + return useMemo( () => shouldLoadStripeMethod ? createStoredCreditCardMethod( { - store: creditCardStore, + store, stripe, stripeConfiguration, activePayButtonText, } ) : null, - [ shouldLoadStripeMethod, stripe, stripeConfiguration, activePayButtonText ] + [ shouldLoadStripeMethod, store, stripe, stripeConfiguration, activePayButtonText ] ); } diff --git a/client/jetpack-cloud/sections/partner-portal/primary/payment-method-add/index.tsx b/client/jetpack-cloud/sections/partner-portal/primary/payment-method-add/index.tsx index 9ad6b18aa72dd..14433eaf6a2a3 100644 --- a/client/jetpack-cloud/sections/partner-portal/primary/payment-method-add/index.tsx +++ b/client/jetpack-cloud/sections/partner-portal/primary/payment-method-add/index.tsx @@ -34,11 +34,11 @@ import { addQueryArgs } from 'calypso/lib/url'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import { getCurrentUserLocale } from 'calypso/state/current-user/selectors'; import { errorNotice, removeNotice, successNotice } from 'calypso/state/notices/actions'; -import { creditCardStore } from 'calypso/state/partner-portal/credit-card-form'; import { doesPartnerRequireAPaymentMethod } from 'calypso/state/partner-portal/partner/selectors'; import { fetchStoredCards } from 'calypso/state/partner-portal/stored-cards/actions'; import getSites from 'calypso/state/selectors/get-sites'; import type { SiteDetails } from '@automattic/data-stores'; +import type { CreditCardSelectors } from 'calypso/state/partner-portal/types'; import './style.scss'; @@ -63,7 +63,7 @@ function PaymentMethodAdd( { selectedSite }: { selectedSite?: SiteDetails | null [ stripeMethod ] ); const useAsPrimaryPaymentMethod: boolean = useSelect( - ( select ) => select( creditCardStore ).useAsPrimaryPaymentMethod(), + ( select ) => ( select( 'credit-card' ) as CreditCardSelectors ).useAsPrimaryPaymentMethod(), [] ); diff --git a/client/state/partner-portal/credit-card-form/index.ts b/client/state/partner-portal/credit-card-form/index.ts index 661069397b8e6..76d6df2f387f4 100644 --- a/client/state/partner-portal/credit-card-form/index.ts +++ b/client/state/partner-portal/credit-card-form/index.ts @@ -1,12 +1,14 @@ -import { createReduxStore, register } from '@wordpress/data'; +import { registerStore } from '@wordpress/data'; import * as actions from 'calypso/state/partner-portal/credit-card-form/actions'; import reducer from 'calypso/state/partner-portal/credit-card-form/reducer'; import * as selectors from 'calypso/state/partner-portal/credit-card-form/selectors'; -export const creditCardStore = createReduxStore( 'credit-card', { - reducer, - actions, - selectors, -} ); +export function createStoredCreditCardPaymentMethodStore(): Record< string, unknown > { + const store = registerStore( 'credit-card', { + reducer, + actions, + selectors, + } ); -register( creditCardStore ); + return { ...store, actions, selectors }; +} diff --git a/client/state/partner-portal/types.ts b/client/state/partner-portal/types.ts index 2288a8a434b61..783220e74e4d4 100644 --- a/client/state/partner-portal/types.ts +++ b/client/state/partner-portal/types.ts @@ -5,6 +5,10 @@ import { LicenseSortDirection, LicenseSortField, } from 'calypso/jetpack-cloud/sections/partner-portal/types'; +import * as creditCardSelectors from './credit-card-form/selectors'; +import type { SelectFromMap } from '@automattic/data-stores'; + +export type CreditCardSelectors = SelectFromMap< typeof creditCardSelectors >; /** * Utility.