Revert "Data Stores: Refactor partner portal credit card store to cre…

…ateReduxStore() (#74656)" (#75371)

This reverts commit 1db6958.

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(),
 		[]
 	);
 

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;

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 ] || {};

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 ]
 	);
 }

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(),
 		[]
 	);
 

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 };
+}

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.