Streamline campaign setup: When the accounts have been connected before, skip accounts setup step during the Ads-onboarding

js/src/setup-ads/ads-stepper/index.js

@@ -18,7 +18,8 @@ import {
 	FILTER_ONBOARDING,
 	CONTEXT_ADS_ONBOARDING,
 } from '.~/utils/tracks';
-
+import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
+import AppSpinner from '.~/components/app-spinner';
 /**
  * @param {Object} props React props
  * @param {Object} props.formProps Form props forwarded from `Form` component.
@@ -27,12 +28,18 @@ import {
  */
 const AdsStepper = ( { formProps } ) => {
 	const [ step, setStep ] = useState( '1' );
+	const { hasFinishedResolution, hasGoogleAdsConnection } =
+		useGoogleAdsAccount();
 
 	useEventPropertiesFilter( FILTER_ONBOARDING, {
 		context: CONTEXT_ADS_ONBOARDING,
 		step,
 	} );
 
+	if ( ! hasFinishedResolution && ! hasGoogleAdsConnection ) {
+		return <AppSpinner />;
+	}
+
 	// Allow the users to go backward only, not forward.
 	// Users can only go forward by clicking on the Continue button.
 	const handleStepClick = ( value ) => {
@@ -55,21 +62,38 @@ const AdsStepper = ( { formProps } ) => {
 	};
 
 	const handleSetupAccountsContinue = () => {
-		continueStep( '2' );
+		continueStep( hasGoogleAdsConnection ? '1' : '2' );
 	};
 
 	const handleCreateCampaignContinue = () => {
-		continueStep( '3' );
+		continueStep( hasGoogleAdsConnection ? '2' : '3' );
 	};
 
-	return (
-		// This Stepper with this class name
-		// should be refactored into separate shared component.
-		// It is also used in the Setup MC flow.
-		<Stepper
-			className="gla-setup-stepper"
-			currentStep={ step }
-			steps={ [
+	const getSteps = () => {
+		let steps = [
+			{
+				key: hasGoogleAdsConnection ? '1' : '2',
+				label: __(
+					'Create your paid campaign',
+					'google-listings-and-ads'
+				),
+				content: (
+					<AdsCampaign
+						trackingContext="setup-ads"
+						onContinue={ handleCreateCampaignContinue }
+					/>
+				),
+				onClick: handleStepClick,
+			},
+			{
+				key: hasGoogleAdsConnection ? '2' : '3',
+				label: __( 'Set up billing', 'google-listings-and-ads' ),
+				content: <SetupBilling formProps={ formProps } />,
+				onClick: handleStepClick,
+			},
+		];
+		if ( ! hasGoogleAdsConnection ) {
+			steps = [
 				{
 					key: '1',
 					label: __(
@@ -83,27 +107,21 @@ const AdsStepper = ( { formProps } ) => {
 					),
 					onClick: handleStepClick,
 				},
-				{
-					key: '2',
-					label: __(
-						'Create your paid campaign',
-						'google-listings-and-ads'
-					),
-					content: (
-						<AdsCampaign
-							trackingContext="setup-ads"
-							onContinue={ handleCreateCampaignContinue }
-						/>
-					),
-					onClick: handleStepClick,
-				},
-				{
-					key: '3',
-					label: __( 'Set up billing', 'google-listings-and-ads' ),
-					content: <SetupBilling formProps={ formProps } />,
-					onClick: handleStepClick,
-				},
-			] }
+				...steps,
+			];
+		}
+
+		return steps;
+	};
+
+	return (
+		// This Stepper with this class name
+		// should be refactored into separate shared component.
+		// It is also used in the Setup MC flow.
+		<Stepper
+			className="gla-setup-stepper"
+			currentStep={ step }
+			steps={ getSteps() }
 		/>
 	);
 };