Data Stores: Refactor WpcomPlansUI store to createReduxStore()

client/my-sites/plan-features-2023-grid/actions.tsx

@@ -7,6 +7,7 @@ import {
 	is2023PricingGridActivePage,
 } from '@automattic/calypso-products';
 import { Button } from '@automattic/components';
+import { WpcomPlansUI } from '@automattic/data-stores';
 import styled from '@emotion/styled';
 import { useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
@@ -17,7 +18,6 @@ import ExternalLinkWithTracking from 'calypso/components/external-link/with-trac
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import getDomainFromHomeUpsellInQuery from 'calypso/state/selectors/get-domain-from-home-upsell-in-query';
 import { Plans2023Tooltip } from './plans-2023-tooltip';
-import { WPCOM_PLANS_UI_STORE } from './store';
 
 type PlanFeaturesActionsButtonProps = {
 	availableForPurchase: boolean;
@@ -155,7 +155,7 @@ const LoggedInPlansFeatureActionButton = ( {
 	forceDisplayButton: boolean;
 	selectedSiteSlug: string | null;
 } ) => {
-	const { setShowDomainUpsellDialog } = useDispatch( WPCOM_PLANS_UI_STORE );
+	const { setShowDomainUpsellDialog } = useDispatch( WpcomPlansUI.store );
 	const translate = useTranslate();
 	const domainFromHomeUpsellFlow = useSelector( getDomainFromHomeUpsellInQuery );
 

client/my-sites/plans/components/domain-upsell-dialog/index.tsx

@@ -1,4 +1,5 @@
 import { Dialog, Gridicon } from '@automattic/components';
+import { WpcomPlansUI } from '@automattic/data-stores';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
@@ -7,19 +8,17 @@ import { useSelector } from 'react-redux';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { getSiteSlug } from 'calypso/state/sites/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
-import { WPCOM_PLANS_UI_STORE } from '../../store';
 import './style.scss';
-import type { WpcomPlansUISelect } from '@automattic/data-stores';
 
 const DomainUpsellDialog: React.FunctionComponent< {
 	domain: string;
 } > = ( { domain } ) => {
 	const translate = useTranslate();
 	const selectedSiteId = useSelector( getSelectedSiteId );
 	const siteSlug = useSelector( ( state ) => getSiteSlug( state, selectedSiteId ) );
-	const { setShowDomainUpsellDialog } = useDispatch( WPCOM_PLANS_UI_STORE );
+	const { setShowDomainUpsellDialog } = useDispatch( WpcomPlansUI.store );
 	const isVisible = useSelect( ( select ) => {
-		return ( select( WPCOM_PLANS_UI_STORE ) as WpcomPlansUISelect ).isDomainUpsellDialogShown();
+		return select( WpcomPlansUI.store ).isDomainUpsellDialogShown();
 	}, [] );
 
 	const onCloseDialog = useCallback( () => {

client/my-sites/plans/components/plans-header/index.tsx

@@ -1,16 +1,16 @@
 import { is2023PricingGridEnabled } from '@automattic/calypso-products';
 import { Button, Gridicon } from '@automattic/components';
+import { WpcomPlansUI } from '@automattic/data-stores';
 import { useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import classNames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import FormattedHeader from 'calypso/components/formatted-header';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
-import { WPCOM_PLANS_UI_STORE } from '../../store';
 import './style.scss';
 
 const DomainUpsellHeader: React.FunctionComponent = () => {
-	const { setShowDomainUpsellDialog } = useDispatch( WPCOM_PLANS_UI_STORE );
+	const { setShowDomainUpsellDialog } = useDispatch( WpcomPlansUI.store );
 	const translate = useTranslate();
 	const is2023OnboardingPricingGrid = is2023PricingGridEnabled();
 	const plansDescription = translate(

client/my-sites/plans/main.jsx

@@ -11,6 +11,7 @@ import {
 	PLAN_WOOEXPRESS_MEDIUM_MONTHLY,
 } from '@automattic/calypso-products';
 import { is2023PricingGridActivePage } from '@automattic/calypso-products/src/plans-utilities';
+import { WpcomPlansUI } from '@automattic/data-stores';
 import { withShoppingCart } from '@automattic/shopping-cart';
 import { useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
@@ -33,7 +34,6 @@ import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import withTrackingTool from 'calypso/lib/analytics/with-tracking-tool';
 import { getDomainRegistrations } from 'calypso/lib/cart-values/cart-items';
 import { PerformanceTrackerStop } from 'calypso/lib/performance-tracking';
-import { WPCOM_PLANS_UI_STORE } from 'calypso/my-sites/plan-features-2023-grid/store';
 import PlansNavigation from 'calypso/my-sites/plans/navigation';
 import P2PlansMain from 'calypso/my-sites/plans/p2-plans-main';
 import PlansFeaturesMain from 'calypso/my-sites/plans-features-main';
@@ -104,7 +104,7 @@ function DescriptionMessage( { isDomainUpsell, isFreePlan, yourDomainName, siteS
 		recordTracksEvent( 'calypso_plans_page_domain_upsell_skip_click' );
 		// show Warning only on free plans.
 		isFreePlan
-			? dispatch( WPCOM_PLANS_UI_STORE ).setShowDomainUpsellDialog( true )
+			? dispatch( WpcomPlansUI.store ).setShowDomainUpsellDialog( true )
 			: page( `/checkout/${ siteSlug }` );
 	};
 

packages/data-stores/src/index.ts

@@ -67,4 +67,3 @@ export type { ProductsListSelect } from './products-list/types';
 export type { OnboardSelect } from './onboard';
 export type { StepperInternalSelect } from './stepper-internal';
 export type { WpcomFeaturesSelect } from './wpcom-features/types';
-export type { WpcomPlansUISelect } from './wpcom-plans-ui/types';

packages/data-stores/src/wpcom-plans-ui/README.md

@@ -1,11 +1,3 @@
 # WPCOM Plans UI store
 
 This store includes behavior for managing shared state across the Plans UI components (section, grids, dialogs, etc.).
-
-## Usage
-
-```js
-import { WpcomPlansUI } from '@automattic/data-stores';
-
-export const WPCOM_PLANS_UI_STORE = WpcomPlansUI.register();
-```

packages/data-stores/src/wpcom-plans-ui/index.ts

@@ -1,4 +1,4 @@
-import { registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 import { controls } from '@wordpress/data-controls';
 import * as actions from './actions';
 import { STORE_KEY } from './constants';
@@ -9,17 +9,11 @@ import type { Reducer } from 'redux';
 
 export type { State };
 
-let isRegistered = false;
+export const store = createReduxStore( STORE_KEY, {
+	actions,
+	controls,
+	reducer: reducer as Reducer< State, WpcomPlansUIAction >,
+	selectors,
+} );
 
-export function register(): typeof STORE_KEY {
-	if ( ! isRegistered ) {
-		isRegistered = true;
-		registerStore( STORE_KEY, {
-			actions,
-			controls,
-			reducer: reducer as Reducer< State, WpcomPlansUIAction >,
-			selectors,
-		} );
-	}
-	return STORE_KEY;
-}
+register( store );

packages/data-stores/src/wpcom-plans-ui/types.ts

@@ -1,8 +1,3 @@
-import * as selectors from './selectors';
-import type { SelectFromMap } from '../mapped-types';
-
-export type WpcomPlansUISelect = SelectFromMap< typeof selectors >;
-
 export interface DomainUpsellDialog {
 	show: boolean;
 }