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 { Icon, brush, tag } from '@wordpress/icons';
|
||||
import { trackEvent } from '../tracking';
|
||||
import { isEntrepreneurFlow } from '~/customize-store/design-with-ai/entrepreneur-flow';
|
||||
|
||||
export * as actions from './actions';
|
||||
export * as services from './services';
|
||||
|
|
@ -53,7 +54,7 @@ export const Transitional = ( {
|
|||
setSurveyOpen( false );
|
||||
};
|
||||
|
||||
const showSurveyButton = ! hasCompleteSurvey;
|
||||
const showSurveyButton = ! hasCompleteSurvey && ! isEntrepreneurFlow();
|
||||
const showAISurvey = isWooExpress && aiOnline;
|
||||
|
||||
return (
|
||||
|
|
@ -90,10 +91,15 @@ export const Transitional = ( {
|
|||
{ __( 'Your store looks great!', 'woocommerce' ) }
|
||||
</h1>
|
||||
<h2 className="woocommerce-customize-store__transitional-subheading">
|
||||
{ __(
|
||||
"Congratulations! You've successfully designed your store. Take a look at your hard work before continuing to set up your store.",
|
||||
'woocommerce'
|
||||
) }
|
||||
{ isEntrepreneurFlow()
|
||||
? __(
|
||||
"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>
|
||||
|
||||
<WooCYSSecondaryButtonSlot />
|
||||
|
|
@ -117,7 +123,9 @@ export const Transitional = ( {
|
|||
|
||||
<Button
|
||||
className="woocommerce-customize-store__transitional-preview-button"
|
||||
variant="primary"
|
||||
variant={
|
||||
isEntrepreneurFlow() ? 'secondary' : 'primary'
|
||||
}
|
||||
onClick={ () => {
|
||||
trackEvent(
|
||||
'customize_your_store_transitional_preview_store_click'
|
||||
|
|
@ -127,115 +135,147 @@ export const Transitional = ( {
|
|||
>
|
||||
{ __( 'View store', 'woocommerce' ) }
|
||||
</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">
|
||||
<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>
|
||||
{ isEntrepreneurFlow() && (
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={ () => {
|
||||
trackEvent(
|
||||
'customize_your_store_entrepreneur_home_click'
|
||||
);
|
||||
sendEvent( {
|
||||
type: 'GO_BACK_TO_HOME',
|
||||
} );
|
||||
} }
|
||||
>
|
||||
{ __( 'Back to Home', 'woocommerce' ) }
|
||||
</Button>
|
||||
) }
|
||||
</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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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