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 ( +
+ +
+ ); +}; 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() && ( + { + trackEvent( + 'customize_your_store_entrepreneur_skip_click', + { + step: 'business-info-description', + } + ); + window.location.href = getAdminLink( + 'admin.php?page=wc-admin&ref=entrepreneur-signup' + ); + } } + /> + ) }

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() && ( + { + trackEvent( + 'customize_your_store_entrepreneur_skip_click', + { + step: 'look-and-feel', + } + ); + window.location.href = getAdminLink( + 'admin.php?page=wc-admin&ref=entrepreneur-signup' + ); + } } + /> + ) }

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() && ( + { + trackEvent( + 'customize_your_store_entrepreneur_skip_click', + { + step: 'tone-of-voice', + } + ); + window.location.href = getAdminLink( + 'admin.php?page=wc-admin&ref=entrepreneur-signup' + ); + } } + /> + ) }

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) +