Plans: Extract the default WPCOM plans-intent into a hook (#93502)

client/my-sites/plans-features-main/hooks/use-default-wpcom-plans-intent.ts

@@ -0,0 +1,18 @@
+import type { PlansIntent } from '@automattic/plans-grid-next';
+
+/**
+ * Used for defining the default plans intent for general WordPress.com plans UI.
+ *
+ * The default intent is used in various scenarios, such as:
+ * - signup flows / plans page that do not require a tailored plans mix
+ * - switching to the default plans through an escape hatch (button) when a tailored mix is rendered
+ * - showing the default plans in the comparison grid when a tailored mix is rendered otherwise
+ *
+ * When experimenting with different default plans, this hook can be used to define the intent.
+ * We will need an exclusion mechanism in that case (to not mix with other intents).
+ */
+const useDefaultWpcomPlansIntent = (): PlansIntent | undefined => {
+	return 'plans-default-wpcom';
+};
+
+export default useDefaultWpcomPlansIntent;

client/my-sites/plans-features-main/index.tsx

@@ -68,6 +68,7 @@ import PlanUpsellModal from './components/plan-upsell-modal';
 import { useModalResolutionCallback } from './components/plan-upsell-modal/hooks/use-modal-resolution-callback';
 import PlansPageSubheader from './components/plans-page-subheader';
 import useCheckPlanAvailabilityForPurchase from './hooks/use-check-plan-availability-for-purchase';
+import useDefaultWpcomPlansIntent from './hooks/use-default-wpcom-plans-intent';
 import useFilteredDisplayedIntervals from './hooks/use-filtered-displayed-intervals';
 import useGenerateActionHook from './hooks/use-generate-action-hook';
 import usePlanBillingPeriod from './hooks/use-plan-billing-period';
@@ -288,9 +289,14 @@ const PlansFeaturesMain = ( {
 
 	const intentFromSiteMeta = usePlanIntentFromSiteMeta();
 	const planFromUpsells = usePlanFromUpsells();
+	const defaultWpcomPlansIntent = useDefaultWpcomPlansIntent();
 	const [ forceDefaultPlans, setForceDefaultPlans ] = useState( false );
-
 	const [ intent, setIntent ] = useState< PlansIntent | undefined >( undefined );
+	/**
+	 * Keep the `useEffect` here strictly about intent resolution.
+	 * This is fairly critical logic and may generate side effects if not handled properly.
+	 * Let's be especially deliberate about making changes.
+	 */
 	useEffect( () => {
 		if ( intentFromSiteMeta.processing ) {
 			return;
@@ -299,13 +305,13 @@ const PlansFeaturesMain = ( {
 		// TODO: plans from upsell takes precedence for setting intent right now
 		// - this is currently set to the default wpcom set until we have updated tailored features for all plans
 		// - at which point, we'll inject the upsell plan to the tailored plans mix instead
-		if ( 'plans-default-wpcom' !== intent && forceDefaultPlans ) {
-			setIntent( 'plans-default-wpcom' );
+		if ( defaultWpcomPlansIntent !== intent && forceDefaultPlans ) {
+			setIntent( defaultWpcomPlansIntent );
 		} else if ( ! intent ) {
 			setIntent(
 				planFromUpsells
-					? 'plans-default-wpcom'
-					: intentFromProps || intentFromSiteMeta.intent || 'plans-default-wpcom'
+					? defaultWpcomPlansIntent
+					: intentFromProps || intentFromSiteMeta.intent || defaultWpcomPlansIntent
 			);
 		}
 	}, [
@@ -315,10 +321,11 @@ const PlansFeaturesMain = ( {
 		planFromUpsells,
 		forceDefaultPlans,
 		intentFromSiteMeta.processing,
+		defaultWpcomPlansIntent,
 	] );
 
 	const showEscapeHatch =
-		intentFromSiteMeta.intent && ! isInSignup && 'plans-default-wpcom' !== intent;
+		intentFromSiteMeta.intent && ! isInSignup && defaultWpcomPlansIntent !== intent;
 
 	const eligibleForFreeHostingTrial = useSelector( isUserEligibleForFreeHostingTrial );
 
@@ -372,7 +379,7 @@ const PlansFeaturesMain = ( {
 		eligibleForFreeHostingTrial,
 		hasRedeemedDomainCredit: currentPlan?.hasRedeemedDomainCredit,
 		hiddenPlans,
-		intent,
+		intent: shouldForceDefaultPlansBasedOnIntent( intent ) ? defaultWpcomPlansIntent : intent,
 		isDisplayingPlansNeededForFeature,
 		isSubdomainNotGenerated: ! resolvedSubdomainName.result,
 		selectedFeature,
@@ -383,7 +390,6 @@ const PlansFeaturesMain = ( {
 		term,
 		useCheckPlanAvailabilityForPurchase,
 		useFreeTrialPlanSlugs,
-		forceDefaultIntent: shouldForceDefaultPlansBasedOnIntent( intent ),
 	} );
 
 	// we need only the visible ones for features grid (these should extend into plans-ui data store selectors)
@@ -615,7 +621,10 @@ const PlansFeaturesMain = ( {
 	} );
 
 	const isLoadingGridPlans = Boolean(
-		! intent || ! gridPlansForFeaturesGrid || ! gridPlansForComparisonGrid
+		! intent ||
+			! defaultWpcomPlansIntent || // this may be unnecessary, but just in case
+			! gridPlansForFeaturesGrid ||
+			! gridPlansForComparisonGrid
 	);
 	const isPlansGridReady = ! isLoadingGridPlans && ! resolvedSubdomainName.isLoading;
 

packages/plans-grid-next/src/hooks/data-store/types.ts

@@ -17,7 +17,6 @@ export interface UseGridPlansParams {
 	selectedFeature?: string | null;
 	selectedPlan?: PlanSlug;
 	showLegacyStorageFeature?: boolean;
-	forceDefaultIntent?: boolean;
 	siteId?: number | null;
 	storageAddOns: ( AddOnMeta | null )[];
 	term?: ( typeof TERMS_LIST )[ number ]; // defaults to monthly

packages/plans-grid-next/src/hooks/data-store/use-grid-plans-for-comparison-grid.ts

@@ -27,7 +27,6 @@ const useGridPlansForComparisonGrid = ( {
 	term,
 	useCheckPlanAvailabilityForPurchase,
 	useFreeTrialPlanSlugs,
-	forceDefaultIntent,
 }: UseGridPlansParams ): GridPlan[] | null => {
 	const gridPlans = useGridPlans( {
 		allFeaturesList,
@@ -45,7 +44,6 @@ const useGridPlansForComparisonGrid = ( {
 		term,
 		useCheckPlanAvailabilityForPurchase,
 		useFreeTrialPlanSlugs,
-		forceDefaultIntent,
 	} );
 
 	const planFeaturesForComparisonGrid = useRestructuredPlanFeaturesForComparisonGrid( {

packages/plans-grid-next/src/hooks/data-store/use-grid-plans.tsx

@@ -228,7 +228,6 @@ const useGridPlans: UseGridPlansType = ( {
 	coupon,
 	siteId,
 	isDisplayingPlansNeededForFeature,
-	forceDefaultIntent,
 	highlightLabelOverrides,
 } ) => {
 	const freeTrialPlanSlugs = useFreeTrialPlanSlugs?.( {
@@ -248,7 +247,7 @@ const useGridPlans: UseGridPlansType = ( {
 	} );
 	const planSlugsForIntent = usePlansFromTypes( {
 		planTypes: usePlanTypesWithIntent( {
-			intent: forceDefaultIntent ? 'plans-default-wpcom' : intent,
+			intent,
 			selectedPlan,
 			siteId,
 			hiddenPlans,