Entrepreneur Signup: Simplify final step in CYS when entering from Entrepreneur signup flow. (#47578)
* Simplify final step in CYS when entering from Entrepreneur Signup. * Add changelog. * Update plugins/woocommerce-admin/client/customize-store/transitional/index.tsx Co-authored-by: Ivan Ottinger <ivan.ottinger@automattic.com> * Show My Home button as primary button only on Entrepreneur flow. * Use 'customize_your_store_entrepreneur_home_click' tracks event instead. --------- Co-authored-by: Ivan Ottinger <ivan.ottinger@automattic.com>
This commit is contained in:
Yan Sern
GitHub
parent
2b69d28ecb
commit
9a1f987381
|
|
@ -27,6 +27,7 @@ import { SurveyForm } from './survey-form';
|
||||||
import lessonPlan from '../assets/icons/lesson-plan.js';
|
import lessonPlan from '../assets/icons/lesson-plan.js';
|
||||||
import { Icon, brush, tag } from '@wordpress/icons';
|
import { Icon, brush, tag } from '@wordpress/icons';
|
||||||
import { trackEvent } from '../tracking';
|
import { trackEvent } from '../tracking';
|
||||||
|
import { isEntrepreneurFlow } from '~/customize-store/design-with-ai/entrepreneur-flow';
|
||||||
|
|
||||||
export * as actions from './actions';
|
export * as actions from './actions';
|
||||||
export * as services from './services';
|
export * as services from './services';
|
||||||
|
|
@ -53,7 +54,7 @@ export const Transitional = ( {
|
||||||
setSurveyOpen( false );
|
setSurveyOpen( false );
|
||||||
};
|
};
|
||||||
|
|
||||||
const showSurveyButton = ! hasCompleteSurvey;
|
const showSurveyButton = ! hasCompleteSurvey && ! isEntrepreneurFlow();
|
||||||
const showAISurvey = isWooExpress && aiOnline;
|
const showAISurvey = isWooExpress && aiOnline;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -90,10 +91,15 @@ export const Transitional = ( {
|
||||||
{ __( 'Your store looks great!', 'woocommerce' ) }
|
{ __( 'Your store looks great!', 'woocommerce' ) }
|
||||||
</h1>
|
</h1>
|
||||||
<h2 className="woocommerce-customize-store__transitional-subheading">
|
<h2 className="woocommerce-customize-store__transitional-subheading">
|
||||||
{ __(
|
{ isEntrepreneurFlow()
|
||||||
"Congratulations! You've successfully designed your store. Take a look at your hard work before continuing to set up your store.",
|
? __(
|
||||||
'woocommerce'
|
"Congratuations! You've successfully designed your store. Now you can go back to the Home screen to complete your store setup and start selling.",
|
||||||
) }
|
'woocommerce'
|
||||||
|
)
|
||||||
|
: __(
|
||||||
|
"Congratulations! You've successfully designed your store. Take a look at your hard work before continuing to set up your store.",
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<WooCYSSecondaryButtonSlot />
|
<WooCYSSecondaryButtonSlot />
|
||||||
|
|
@ -117,7 +123,9 @@ export const Transitional = ( {
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
className="woocommerce-customize-store__transitional-preview-button"
|
className="woocommerce-customize-store__transitional-preview-button"
|
||||||
variant="primary"
|
variant={
|
||||||
|
isEntrepreneurFlow() ? 'secondary' : 'primary'
|
||||||
|
}
|
||||||
onClick={ () => {
|
onClick={ () => {
|
||||||
trackEvent(
|
trackEvent(
|
||||||
'customize_your_store_transitional_preview_store_click'
|
'customize_your_store_transitional_preview_store_click'
|
||||||
|
|
@ -127,115 +135,147 @@ export const Transitional = ( {
|
||||||
>
|
>
|
||||||
{ __( 'View store', 'woocommerce' ) }
|
{ __( 'View store', 'woocommerce' ) }
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
<h2 className="woocommerce-customize-store__transitional-main-actions-title">
|
|
||||||
{ __( "What's next?", 'woocommerce' ) }
|
|
||||||
</h2>
|
|
||||||
<div className="woocommerce-customize-store__transitional-main-actions">
|
|
||||||
<div className="woocommerce-customize-store__transitional-action">
|
|
||||||
<Icon
|
|
||||||
className={
|
|
||||||
'woocommerce-customize-store__transitional-action__icon'
|
|
||||||
}
|
|
||||||
icon={ tag }
|
|
||||||
/>
|
|
||||||
<div className="woocommerce-customize-store__transitional-action__content">
|
|
||||||
<h3>
|
|
||||||
{ __( 'Add your products', 'woocommerce' ) }
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
{ __(
|
|
||||||
'Start stocking your virtual shelves by adding or importing your products, or edit the sample products.',
|
|
||||||
'woocommerce'
|
|
||||||
) }
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
variant="link"
|
|
||||||
onClick={ () => {
|
|
||||||
trackEvent(
|
|
||||||
'customize_your_store_transitional_product_list_click'
|
|
||||||
);
|
|
||||||
navigateOrParent(
|
|
||||||
window,
|
|
||||||
`${ ADMIN_URL }edit.php?post_type=product`
|
|
||||||
);
|
|
||||||
} }
|
|
||||||
>
|
|
||||||
{ __( 'Go to Products', 'woocommerce' ) }
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="woocommerce-customize-store__transitional-action">
|
{ isEntrepreneurFlow() && (
|
||||||
<Icon
|
<Button
|
||||||
className={
|
variant="primary"
|
||||||
'woocommerce-customize-store__transitional-action__icon'
|
onClick={ () => {
|
||||||
}
|
trackEvent(
|
||||||
icon={ brush }
|
'customize_your_store_entrepreneur_home_click'
|
||||||
/>
|
);
|
||||||
<div className="woocommerce-customize-store__transitional-action__content">
|
sendEvent( {
|
||||||
<h3>
|
type: 'GO_BACK_TO_HOME',
|
||||||
{ __( 'Fine-tune your design', 'woocommerce' ) }
|
} );
|
||||||
</h3>
|
} }
|
||||||
<p>
|
>
|
||||||
{ __(
|
{ __( 'Back to Home', 'woocommerce' ) }
|
||||||
'Head to the Editor to change your images and text, add more pages, and make any further customizations.',
|
</Button>
|
||||||
'woocommerce'
|
) }
|
||||||
) }
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
variant="link"
|
|
||||||
onClick={ () => {
|
|
||||||
trackEvent(
|
|
||||||
'customize_your_store_transitional_editor_click'
|
|
||||||
);
|
|
||||||
navigateOrParent(
|
|
||||||
window,
|
|
||||||
`${ ADMIN_URL }site-editor.php`
|
|
||||||
);
|
|
||||||
} }
|
|
||||||
>
|
|
||||||
{ __( 'Go to the Editor', 'woocommerce' ) }
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="woocommerce-customize-store__transitional-action">
|
|
||||||
<Icon
|
|
||||||
className={
|
|
||||||
'woocommerce-customize-store__transitional-action__icon'
|
|
||||||
}
|
|
||||||
icon={ lessonPlan }
|
|
||||||
/>
|
|
||||||
<div className="woocommerce-customize-store__transitional-action__content">
|
|
||||||
<h3>
|
|
||||||
{ __(
|
|
||||||
'Continue setting up your store',
|
|
||||||
'woocommerce'
|
|
||||||
) }
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
{ __(
|
|
||||||
'Go back to the Home screen to complete your store setup and start selling',
|
|
||||||
'woocommerce'
|
|
||||||
) }
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
variant="link"
|
|
||||||
onClick={ () => {
|
|
||||||
trackEvent(
|
|
||||||
'customize_your_store_transitional_home_click'
|
|
||||||
);
|
|
||||||
sendEvent( {
|
|
||||||
type: 'GO_BACK_TO_HOME',
|
|
||||||
} );
|
|
||||||
} }
|
|
||||||
>
|
|
||||||
{ __( 'Back to Home', 'woocommerce' ) }
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{ ! isEntrepreneurFlow() && (
|
||||||
|
<>
|
||||||
|
<h2 className="woocommerce-customize-store__transitional-main-actions-title">
|
||||||
|
{ __( "What's next?", 'woocommerce' ) }
|
||||||
|
</h2>
|
||||||
|
<div className="woocommerce-customize-store__transitional-main-actions">
|
||||||
|
<div className="woocommerce-customize-store__transitional-action">
|
||||||
|
<Icon
|
||||||
|
className={
|
||||||
|
'woocommerce-customize-store__transitional-action__icon'
|
||||||
|
}
|
||||||
|
icon={ tag }
|
||||||
|
/>
|
||||||
|
<div className="woocommerce-customize-store__transitional-action__content">
|
||||||
|
<h3>
|
||||||
|
{ __(
|
||||||
|
'Add your products',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
{ __(
|
||||||
|
'Start stocking your virtual shelves by adding or importing your products, or edit the sample products.',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
onClick={ () => {
|
||||||
|
trackEvent(
|
||||||
|
'customize_your_store_transitional_product_list_click'
|
||||||
|
);
|
||||||
|
navigateOrParent(
|
||||||
|
window,
|
||||||
|
`${ ADMIN_URL }edit.php?post_type=product`
|
||||||
|
);
|
||||||
|
} }
|
||||||
|
>
|
||||||
|
{ __(
|
||||||
|
'Go to Products',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="woocommerce-customize-store__transitional-action">
|
||||||
|
<Icon
|
||||||
|
className={
|
||||||
|
'woocommerce-customize-store__transitional-action__icon'
|
||||||
|
}
|
||||||
|
icon={ brush }
|
||||||
|
/>
|
||||||
|
<div className="woocommerce-customize-store__transitional-action__content">
|
||||||
|
<h3>
|
||||||
|
{ __(
|
||||||
|
'Fine-tune your design',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
{ __(
|
||||||
|
'Head to the Editor to change your images and text, add more pages, and make any further customizations.',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
onClick={ () => {
|
||||||
|
trackEvent(
|
||||||
|
'customize_your_store_transitional_editor_click'
|
||||||
|
);
|
||||||
|
navigateOrParent(
|
||||||
|
window,
|
||||||
|
`${ ADMIN_URL }site-editor.php`
|
||||||
|
);
|
||||||
|
} }
|
||||||
|
>
|
||||||
|
{ __(
|
||||||
|
'Go to the Editor',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="woocommerce-customize-store__transitional-action">
|
||||||
|
<Icon
|
||||||
|
className={
|
||||||
|
'woocommerce-customize-store__transitional-action__icon'
|
||||||
|
}
|
||||||
|
icon={ lessonPlan }
|
||||||
|
/>
|
||||||
|
<div className="woocommerce-customize-store__transitional-action__content">
|
||||||
|
<h3>
|
||||||
|
{ __(
|
||||||
|
'Continue setting up your store',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
{ __(
|
||||||
|
'Go back to the Home screen to complete your store setup and start selling',
|
||||||
|
'woocommerce'
|
||||||
|
) }
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
onClick={ () => {
|
||||||
|
trackEvent(
|
||||||
|
'customize_your_store_transitional_home_click'
|
||||||
|
);
|
||||||
|
sendEvent( {
|
||||||
|
type: 'GO_BACK_TO_HOME',
|
||||||
|
} );
|
||||||
|
} }
|
||||||
|
>
|
||||||
|
{ __( 'Back to Home', 'woocommerce' ) }
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: update
|
||||||
|
Comment: Simplify final step in CYS when entering from Entrepreneur signup flow.
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue