Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CYS on core] Introduce the Transitional page, i2 #45546

Merged
merged 17 commits into from Mar 15, 2024
Merged

[CYS on core] Introduce the Transitional page, i2 #45546

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4223381
Update the transitional page.
nefeline Mar 13, 2024
de5f058
Update icons
nefeline Mar 13, 2024
001d9f3
Remove unnecessary div class
nefeline Mar 13, 2024
01431d9
Update the styles for the transitional page.
nefeline Mar 13, 2024
3238b32
remove the editor param
nefeline Mar 13, 2024
87e0105
conditionally display the survey button
nefeline Mar 13, 2024
783f776
Additional layout changes
nefeline Mar 13, 2024
9c3c340
Streamline the classes for the icons
nefeline Mar 13, 2024
9fa50e8
Merge branch 'trunk' into 45539-cys-on-core-transitional-page-i2
nefeline Mar 14, 2024
b457809
Import brush and tag from wordpress/icons
nefeline Mar 14, 2024
f3e5a55
delete the custom icons from Woo as they already exist on wordpress/i…
nefeline Mar 14, 2024
9629da4
Update styles for adding support to mobile view.
nefeline Mar 14, 2024
734084b
Update the lesson-plan icon.
nefeline Mar 14, 2024
6634ca6
Add changefile(s) from automation for the following project(s): wooco…
invalid-email-address Mar 14, 2024
3ff6f27
Merge branch 'trunk' into 45539-cys-on-core-transitional-page-i2
nefeline Mar 14, 2024
c103c11
Update e2e tests to account for the changes made to the transitional …
nefeline Mar 15, 2024
23ef0bc
Merge branch 'trunk' into 45539-cys-on-core-transitional-page-i2
nefeline Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
View file
Open in desktop
Expand Up @@ -128,7 +128,6 @@ export const Layout = () => {
>
<Transitional
sendEvent={ sendEvent }
editor={ editor }
isWooExpress={ isWooExpress() }
isSurveyOpen={ isSurveyOpen }
setSurveyOpen={ setSurveyOpen }
Expand Down
27 changes: 27 additions & 0 deletions plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js
View file
Open in desktop
@@ -0,0 +1,27 @@
/**
* External dependencies
*/
import { SVG, Path } from '@wordpress/primitives';

const lessonPLan = (
<SVG
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<Path
fill="#1E1E1E"
d="m8.85 4.821-1.203-.895-2.083 2.802-1.114-.83L3.553 7.1 5.87 8.829l2.98-4.008ZM20 7.75h-8.889v-1.5H20v1.5Zm0 5h-8.889v-1.5H20v1.5Z"
/>
<Path
fill="#1E1E1E"
fillRule="evenodd"
d="M6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm2 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
clipRule="evenodd"
/>
<Path fill="#1E1E1E" d="M11.111 17.75H20v-1.5h-8.889v1.5Z" />
</SVG>
);
export default lessonPLan;
181 changes: 109 additions & 72 deletions plugins/woocommerce-admin/client/customize-store/transitional/index.tsx
View file
Open in desktop
Expand Up @@ -4,7 +4,6 @@
/**
* External dependencies
*/
import classNames from 'classnames';
import { __ } from '@wordpress/i18n';
import { getSetting } from '@woocommerce/settings';
import { recordEvent } from '@woocommerce/tracks';
Expand All @@ -15,8 +14,7 @@ import {
// @ts-ignore No types for this exist yet.
__unstableMotion as motion,
} from '@wordpress/components';
// @ts-ignore No types for this exist yet.
import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';

/**
* Internal dependencies
*/
Expand All @@ -27,22 +25,22 @@ import './style.scss';
import { navigateOrParent } from '../utils';
import { WooCYSSecondaryButtonSlot } from './secondary-button-slot';
import { SurveyForm } from './survey-form';
import lessonPlan from '../assets/icons/lesson-plan.js';
import { Icon, brush, tag } from '@wordpress/icons';

export * as actions from './actions';
export * as services from './services';

export type events = { type: 'GO_BACK_TO_HOME' } | { type: 'COMPLETE_SURVEY' };

export const Transitional = ( {
editor,
sendEvent,
hasCompleteSurvey,
isWooExpress,
isSurveyOpen,
setSurveyOpen,
aiOnline,
}: {
editor: React.ReactNode;
sendEvent: ( event: events ) => void;
hasCompleteSurvey: boolean;
isWooExpress: boolean;
Expand All @@ -51,7 +49,6 @@ export const Transitional = ( {
aiOnline: boolean;
} ) => {
const homeUrl: string = getSetting( 'homeUrl', '' );
const isEditorLoading = useIsSiteEditorLoading();
const closeSurvey = () => {
setSurveyOpen( false );
};
Expand Down Expand Up @@ -88,24 +85,22 @@ export const Transitional = ( {
isTransparent={ false }
className="edit-site-layout__hub"
/>

<div className="woocommerce-customize-store__transitional-content">
<h1 className="woocommerce-customize-store__transitional-heading">
{ __( 'Your store looks great!', 'woocommerce' ) }
</h1>
<h2 className="woocommerce-customize-store__transitional-subheading">
{ __(
"You're one step closer to launching your online business — we can't wait to see it come to life.",
"Congratulations! You've successfully designed your store. Take a look at your hard work before continuing to set up your store.",
'woocommerce'
) }
</h2>

<div className="woocommerce-customize-store__transitional-main-actions">
<WooCYSSecondaryButtonSlot />

<WooCYSSecondaryButtonSlot />
<div className="woocommerce-customize-store__transitional-buttons">
{ showSurveyButton && (
<Button
className="woocommerce-customize-store__transitional-preview-button"
className="woocommerce-customize-store__transitional-preview-buttonwoocommerce-customize-store__transitional-preview-button"
variant="secondary"
onClick={ () => {
recordEvent(
Expand All @@ -130,73 +125,115 @@ export const Transitional = ( {
window.open( homeUrl, '_blank' );
} }
>
{ __( 'Preview store', 'woocommerce' ) }
{ __( 'View store', 'woocommerce' ) }
Copy link
Contributor

@albarin albarin Mar 15, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some tests relying on this string that are failing, they are expecting the old Preview store string.

Copy link
Member Author

@nefeline nefeline Mar 15, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call! Tests updated & also took the opportunity to add a new one :) : c103c11

</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={ () => {
recordEvent(
'customize_your_store_transitional_editor_click'
);
navigateOrParent(
window,
`${ ADMIN_URL }edit.php?post_type=product`
);
} }
>
{ __( 'Go to Products', 'woocommerce' ) }
</Button>
</div>
</div>

<div
className={ classNames(
'woocommerce-customize-store__transitional-site-preview-container',
{
'is-loading': isEditorLoading,
}
) }
>
{ editor }
</div>
<div className="woocommerce-customize-store__transitional-actions">
<div className="woocommerce-customize-store__transitional-action">
<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="tertiary"
onClick={ () => {
recordEvent(
'customize_your_store_transitional_editor_click'
);
navigateOrParent(
window,
`${ ADMIN_URL }site-editor.php`
);
} }
>
{ __( 'Go to the Editor', 'woocommerce' ) }
</Button>
<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={ () => {
recordEvent(
'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">
<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="tertiary"
onClick={ () => {
recordEvent(
'customize_your_store_transitional_home_click'
);
sendEvent( {
type: 'GO_BACK_TO_HOME',
} );
} }
>
{ __( 'Back to Home', 'woocommerce' ) }
</Button>
<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={ () => {
recordEvent(
'customize_your_store_transitional_home_click'
);
sendEvent( {
type: 'GO_BACK_TO_HOME',
} );
} }
>
{ __( 'Back to Home', 'woocommerce' ) }
</Button>
</div>
</div>
</div>
</div>
Expand Down