From 169baa2929e96ff16f66c32338b6304a76554fcc Mon Sep 17 00:00:00 2001
From: Yan Sern <yansern@gmail.com>
Date: Wed, 22 May 2024 16:40:31 +0800
Subject: [PATCH] Entrepreneur Signup: Add Skip button to Design With AI steps.
 (#47667)

* Add Skip button to Design With AI steps.

* Add changefile(s) from automation for the following project(s): woocommerce

* Use window.location.href to redirect instead.

* fix css linter errors

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
---
 .../components/skip-button/skip-button.scss   | 13 +++++++++
 .../components/skip-button/skip-button.tsx    | 28 +++++++++++++++++++
 .../pages/BusinessInfoDescription.tsx         | 18 ++++++++++++
 .../design-with-ai/pages/LookAndFeel.tsx      | 17 +++++++++++
 .../design-with-ai/pages/ToneOfVoice.tsx      | 17 +++++++++++
 ...-button-design-with-ai-entrepreneur-signup |  4 +++
 6 files changed, 97 insertions(+)
 create mode 100644 plugins/woocommerce-admin/client/customize-store/design-with-ai/components/skip-button/skip-button.scss
 create mode 100644 plugins/woocommerce-admin/client/customize-store/design-with-ai/components/skip-button/skip-button.tsx
 create mode 100644 plugins/woocommerce/changelog/47667-add-add-skip-button-design-with-ai-entrepreneur-signup

diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/skip-button/skip-button.scss b/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/skip-button/skip-button.scss
new file mode 100644
index 00000000000..2dc2bd34dce
--- /dev/null
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/skip-button/skip-button.scss
@@ -0,0 +1,13 @@
+.skip-cys-design-with-ai {
+	/* This follows the same styling and positioning
+       as seen on the Entrepreneur signup flow. */
+	position: absolute;
+	top: 30px;
+	right: 24px;
+
+	&.components-button.is-link {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #101517;
+	}
+}
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/skip-button/skip-button.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/skip-button/skip-button.tsx
new file mode 100644
index 00000000000..62dc52bcfea
--- /dev/null
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/components/skip-button/skip-button.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './skip-button.scss';
+
+type Props = {
+	onClick?: () => void;
+};
+
+export const SkipButton = ( { onClick }: Props ) => {
+	return (
+		<div>
+			<Button
+				className="skip-cys-design-with-ai"
+				onClick={ onClick ? onClick : () => {} }
+				variant="link"
+			>
+				{ __( 'Skip', 'woocommerce' ) }
+			</Button>
+		</div>
+	);
+};
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/BusinessInfoDescription.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/BusinessInfoDescription.tsx
index 08484f977f2..6f5ca6770a6 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/BusinessInfoDescription.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/BusinessInfoDescription.tsx
@@ -5,15 +5,18 @@ import { useState } from '@wordpress/element';
 import { TextareaControl, Button, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { ProgressBar } from '@woocommerce/components';
+import { getAdminLink } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
  */
 import { designWithAiStateMachineContext } from '../types';
 import { CloseButton } from '../components/close-button/close-button';
+import { SkipButton } from '../components/skip-button/skip-button';
 import { aiWizardClosedBeforeCompletionEvent } from '../events';
 import { isEntrepreneurFlow } from '../entrepreneur-flow';
 import WordPressLogo from '~/lib/wordpress-logo';
+import { trackEvent } from '~/customize-store/tracking';
 
 export type businessInfoDescriptionCompleteEvent = {
 	type: 'BUSINESS_INFO_DESCRIPTION_COMPLETE';
@@ -60,6 +63,21 @@ export const BusinessInfoDescription = ( {
 					} }
 				/>
 			) }
+			{ isEntrepreneurFlow() && (
+				<SkipButton
+					onClick={ () => {
+						trackEvent(
+							'customize_your_store_entrepreneur_skip_click',
+							{
+								step: 'business-info-description',
+							}
+						);
+						window.location.href = getAdminLink(
+							'admin.php?page=wc-admin&ref=entrepreneur-signup'
+						);
+					} }
+				/>
+			) }
 			<div className="woocommerce-cys-design-with-ai woocommerce-cys-layout">
 				<div className="woocommerce-cys-page">
 					<h1>
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/LookAndFeel.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/LookAndFeel.tsx
index 87ec8219903..342ef4de86b 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/LookAndFeel.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/LookAndFeel.tsx
@@ -5,6 +5,7 @@ import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { ProgressBar } from '@woocommerce/components';
 import { useState } from '@wordpress/element';
+import { getAdminLink } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
@@ -12,6 +13,7 @@ import { useState } from '@wordpress/element';
 import { Look, designWithAiStateMachineContext } from '../types';
 import { Choice } from '../components/choice/choice';
 import { CloseButton } from '../components/close-button/close-button';
+import { SkipButton } from '../components/skip-button/skip-button';
 import { aiWizardClosedBeforeCompletionEvent } from '../events';
 import { isEntrepreneurFlow } from '../entrepreneur-flow';
 import { trackEvent } from '~/customize-store/tracking';
@@ -88,6 +90,21 @@ export const LookAndFeel = ( {
 					} }
 				/>
 			) }
+			{ isEntrepreneurFlow() && (
+				<SkipButton
+					onClick={ () => {
+						trackEvent(
+							'customize_your_store_entrepreneur_skip_click',
+							{
+								step: 'look-and-feel',
+							}
+						);
+						window.location.href = getAdminLink(
+							'admin.php?page=wc-admin&ref=entrepreneur-signup'
+						);
+					} }
+				/>
+			) }
 			<div className="woocommerce-cys-design-with-ai-look-and-feel woocommerce-cys-layout">
 				<div className="woocommerce-cys-page">
 					<h1>
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ToneOfVoice.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ToneOfVoice.tsx
index e4ebbaa8348..2c4f087827a 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ToneOfVoice.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ToneOfVoice.tsx
@@ -5,6 +5,7 @@ import { Button, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { ProgressBar } from '@woocommerce/components';
 import { useState, createInterpolateElement } from '@wordpress/element';
+import { getAdminLink } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
@@ -12,6 +13,7 @@ import { useState, createInterpolateElement } from '@wordpress/element';
 import { Tone, designWithAiStateMachineContext } from '../types';
 import { Choice } from '../components/choice/choice';
 import { CloseButton } from '../components/close-button/close-button';
+import { SkipButton } from '../components/skip-button/skip-button';
 import { aiWizardClosedBeforeCompletionEvent } from '../events';
 import { isEntrepreneurFlow } from '../entrepreneur-flow';
 import { trackEvent } from '~/customize-store/tracking';
@@ -106,6 +108,21 @@ export const ToneOfVoice = ( {
 					} }
 				/>
 			) }
+			{ isEntrepreneurFlow() && (
+				<SkipButton
+					onClick={ () => {
+						trackEvent(
+							'customize_your_store_entrepreneur_skip_click',
+							{
+								step: 'tone-of-voice',
+							}
+						);
+						window.location.href = getAdminLink(
+							'admin.php?page=wc-admin&ref=entrepreneur-signup'
+						);
+					} }
+				/>
+			) }
 			<div className="woocommerce-cys-design-with-ai-tone-of-voice woocommerce-cys-layout">
 				<div className="woocommerce-cys-page">
 					<h1>
diff --git a/plugins/woocommerce/changelog/47667-add-add-skip-button-design-with-ai-entrepreneur-signup b/plugins/woocommerce/changelog/47667-add-add-skip-button-design-with-ai-entrepreneur-signup
new file mode 100644
index 00000000000..3140426ad81
--- /dev/null
+++ b/plugins/woocommerce/changelog/47667-add-add-skip-button-design-with-ai-entrepreneur-signup
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+Comment: Add Skip button to Design With AI steps. (This is internal for Enterpreneur Signup on WPCOM)
+