diff --git a/client/my-sites/plan-features-2023-grid/actions.tsx b/client/my-sites/plan-features-2023-grid/actions.tsx index 311dfdcd4cbf..241be876f534 100644 --- a/client/my-sites/plan-features-2023-grid/actions.tsx +++ b/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 ); diff --git a/client/my-sites/plan-features-2023-grid/store.ts b/client/my-sites/plan-features-2023-grid/store.ts deleted file mode 100644 index 85b9fbe1e670..000000000000 --- a/client/my-sites/plan-features-2023-grid/store.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { WpcomPlansUI } from '@automattic/data-stores'; - -export const WPCOM_PLANS_UI_STORE = WpcomPlansUI.register(); diff --git a/client/my-sites/plans/components/domain-upsell-dialog/index.tsx b/client/my-sites/plans/components/domain-upsell-dialog/index.tsx index 1f8eaaafe8b3..aa2275687443 100644 --- a/client/my-sites/plans/components/domain-upsell-dialog/index.tsx +++ b/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,9 +8,7 @@ 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; @@ -17,9 +16,9 @@ const DomainUpsellDialog: React.FunctionComponent< { 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( () => { diff --git a/client/my-sites/plans/components/plans-header/index.tsx b/client/my-sites/plans/components/plans-header/index.tsx index 044a45437854..1ea5a6514518 100644 --- a/client/my-sites/plans/components/plans-header/index.tsx +++ b/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( diff --git a/client/my-sites/plans/main.jsx b/client/my-sites/plans/main.jsx index 01a3c00b707d..11e4c64ff078 100644 --- a/client/my-sites/plans/main.jsx +++ b/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 }` ); }; diff --git a/client/my-sites/plans/store.ts b/client/my-sites/plans/store.ts deleted file mode 100644 index 85b9fbe1e670..000000000000 --- a/client/my-sites/plans/store.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { WpcomPlansUI } from '@automattic/data-stores'; - -export const WPCOM_PLANS_UI_STORE = WpcomPlansUI.register(); diff --git a/packages/data-stores/src/index.ts b/packages/data-stores/src/index.ts index 2377f6f520bc..149d7e8a98f8 100644 --- a/packages/data-stores/src/index.ts +++ b/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'; diff --git a/packages/data-stores/src/wpcom-plans-ui/README.md b/packages/data-stores/src/wpcom-plans-ui/README.md index 4ac41eab296e..caba977136a1 100644 --- a/packages/data-stores/src/wpcom-plans-ui/README.md +++ b/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(); -``` diff --git a/packages/data-stores/src/wpcom-plans-ui/index.ts b/packages/data-stores/src/wpcom-plans-ui/index.ts index e8963c81d622..1094d6b5c45a 100644 --- a/packages/data-stores/src/wpcom-plans-ui/index.ts +++ b/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 ); diff --git a/packages/data-stores/src/wpcom-plans-ui/types.ts b/packages/data-stores/src/wpcom-plans-ui/types.ts index cca5b4938615..62d2afdc7078 100644 --- a/packages/data-stores/src/wpcom-plans-ui/types.ts +++ b/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; }