Plans Step: TS and function form (#96786)

Co-authored-by: Omar Alshaker <[email protected]>

client/landing/stepper/declarative-flow/internals/steps-repository/plans/index.tsx

@@ -9,6 +9,9 @@ import PlansWrapper from './plans-wrapper';
 import type { ProvidedDependencies, Step } from '../../types';
 import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
 
+/**
+ * @deprecated Use `unified-plans` instead. This step is deprecated and will be removed in the future.
+ */
 const plans: Step = function Plans( { navigation, flow } ) {
 	const { goBack, submit } = navigation;
 

client/landing/stepper/declarative-flow/internals/steps-repository/plans/plans-wrapper.tsx

@@ -21,13 +21,13 @@ import clsx from 'clsx';
 import { localize, useTranslate } from 'i18n-calypso';
 import React, { useLayoutEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router';
+import { getIntervalType } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/util';
 import { useSaveHostingFlowPathStep } from 'calypso/landing/stepper/hooks/use-save-hosting-flow-path-step';
 import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import { getPlanCartItem } from 'calypso/lib/cart-values/cart-items';
 import PlansFeaturesMain from 'calypso/my-sites/plans-features-main';
 import PlanFAQ from 'calypso/my-sites/plans-features-main/components/plan-faq';
 import StepWrapper from 'calypso/signup/step-wrapper';
-import { getIntervalType } from 'calypso/signup/steps/plans/util';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { ONBOARD_STORE } from '../../../../stores';
 import type { OnboardSelect } from '@automattic/data-stores';
@@ -57,6 +57,9 @@ function getPlansIntent( flowName: string | null, isWordCampPromo?: boolean ): P
 	}
 }
 
+/**
+ * @deprecated Use `unified-plans` instead. This step is deprecated and will be removed in the future.
+ */
 const PlansWrapper: React.FC< Props > = ( props ) => {
 	const {
 		hideFreePlan: reduxHideFreePlan,

client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/index.tsx

@@ -2,25 +2,19 @@ import { OnboardSelect } from '@automattic/data-stores';
 import { useStepPersistedState } from '@automattic/onboarding';
 import { useMobileBreakpoint } from '@automattic/viewport-react';
 import { useSelect, useDispatch as useWPDispatch } from '@wordpress/data';
-import { localize } from 'i18n-calypso';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
 import { useSite } from 'calypso/landing/stepper/hooks/use-site';
 import { useSiteSlug } from 'calypso/landing/stepper/hooks/use-site-slug';
 import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
-import { PlansStep } from 'calypso/signup/steps/plans';
-import { getIntervalType } from 'calypso/signup/steps/plans/util';
 import { useSelector } from 'calypso/state';
-import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { getCurrentUserName } from 'calypso/state/current-user/selectors';
-import { errorNotice } from 'calypso/state/notices/actions';
 import { ProvidedDependencies, StepProps } from '../../types';
+import UnifiedPlansStep from './unified-plans-step';
+import { getIntervalType } from './util';
 
 import './style.scss';
 
-export const LocalizedPlanStep = localize( PlansStep );
-
 export default function PlansStepAdaptor( props: StepProps ) {
 	const [ stepState, setStepState ] = useStepPersistedState< ProvidedDependencies >( 'plans-step' );
 	const siteSlug = useSiteSlug();
@@ -51,9 +45,7 @@ export default function PlansStepAdaptor( props: StepProps ) {
 	};
 
 	const site = useSite();
-	const customerType = useQuery().get( 'customerType' );
-	const dispatch = useDispatch();
-
+	const customerType = useQuery().get( 'customerType' ) ?? undefined;
 	const [ planInterval, setPlanInterval ] = useState< string | undefined >( undefined );
 
 	/**
@@ -68,44 +60,38 @@ export default function PlansStepAdaptor( props: StepProps ) {
 	};
 
 	return (
-		<LocalizedPlanStep
-			selectedSite={ site }
-			saveSignupStep={ ( state: ProvidedDependencies ) => {
-				setStepState( ( mostRecentState = { ...stepState, ...state } ) );
+		<UnifiedPlansStep
+			selectedSite={ site ?? undefined }
+			saveSignupStep={ ( step ) => {
+				setStepState( ( mostRecentState = { ...stepState, ...step } ) );
 			} }
-			submitSignupStep={ ( state: ProvidedDependencies ) => {
+			submitSignupStep={ ( stepInfo ) => {
 				/* The plans step removes paid domains when the user picks a free plan
 				   after picking a paid domain */
-				if ( state.stepName === 'domains' ) {
-					if ( state.isPurchasingItem === false ) {
+				if ( stepInfo.stepName === 'domains' ) {
+					if ( stepInfo.isPurchasingItem === false ) {
 						setDomainCartItem( undefined );
 						setDomainCartItems( undefined );
-					} else if ( state.siteUrl ) {
-						setSiteUrl( state.siteUrl );
+					} else if ( stepInfo.siteUrl ) {
+						setSiteUrl( stepInfo.siteUrl );
 					}
 				} else {
-					setStepState( ( mostRecentState = { ...stepState, ...state } ) );
+					setStepState( ( mostRecentState = { ...stepState, ...stepInfo } ) );
 				}
 			} }
 			goToNextStep={ () => {
 				props.navigation.submit?.( { ...stepState, ...mostRecentState } );
 			} }
 			step={ stepState }
 			customerType={ customerType }
-			errorNotice={ ( message: string ) => dispatch( errorNotice( message ) ) }
 			signupDependencies={ signupDependencies }
 			stepName="plans"
 			flowName={ props.flow }
-			recordTracksEvent={ ( name: string, props: unknown ) => {
-				dispatch( recordTracksEvent( name, props ) );
-			} }
 			onPlanIntervalUpdate={ onPlanIntervalUpdate }
 			intervalType={ planInterval }
 			wrapperProps={ {
 				hideBack: isMobile,
 				goBack: props.navigation.goBack,
-				recordTracksEvent: ( name: string, props: unknown ) =>
-					dispatch( recordTracksEvent( name, props ) ),
 				isFullLayout: true,
 				isExtraWideLayout: false,
 			} }

client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/test/unified-plans-step.tsx

@@ -0,0 +1,55 @@
+/** @jest-environment jsdom */
+jest.mock( 'calypso/signup/step-wrapper', () => () => <div data-testid="start-step-wrapper" /> );
+jest.mock( '@automattic/onboarding/src/step-container', () => () => (
+	<div data-testid="stepper-step-wrapper" />
+) );
+jest.mock( 'calypso/components/marketing-message', () => 'marketing-message' );
+jest.mock( 'calypso/lib/wp', () => ( { req: { post: () => {} } } ) );
+
+import { screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { renderStep } from '../../test/helpers';
+import UnifiedPlansStep, { type UnifiedPlansStepProps } from '../unified-plans-step';
+
+const noop = () => {};
+
+const props = {
+	flowName: 'Flow name',
+	stepName: 'Step name',
+	stepSectionName: 'Step section name',
+	signupDependencies: { domainItem: null },
+	saveSignupStep: noop,
+	submitSignupStep: noop,
+	goToNextStep: noop,
+	onPlanIntervalUpdate: noop,
+	wrapperProps: {
+		hideBack: false,
+		goBack: noop,
+		isFullLayout: true,
+		isExtraWideLayout: true,
+	},
+};
+
+const _render = ( props: UnifiedPlansStepProps ) => {
+	return renderStep( <UnifiedPlansStep { ...props } /> );
+};
+
+describe( 'Plans basic tests', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'should not blow up in Start and have proper CSS class', async () => {
+		_render( props );
+		const stepWrapper = await waitFor( () => screen.getByTestId( 'start-step-wrapper' ) );
+		expect( stepWrapper ).toBeVisible();
+		expect( stepWrapper.parentNode ).toHaveClass( 'plans-step' );
+	} );
+
+	test( 'should not blow up in Stepper and have proper CSS class', async () => {
+		_render( { ...props, useStepperWrapper: true } );
+		const stepWrapper = await waitFor( () => screen.getByTestId( 'stepper-step-wrapper' ) );
+		expect( stepWrapper ).toBeVisible();
+		expect( stepWrapper.parentNode ).toHaveClass( 'plans-step' );
+	} );
+} );