Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

* Update the transitional page.

* Update icons

* Remove unnecessary div class

* Update the styles for the transitional page.

* remove the editor param

* conditionally display the survey button

* Additional layout changes

* Streamline the classes for the icons

* Import brush and tag from wordpress/icons

* delete the custom icons from Woo as they already exist on wordpress/icons and can be imported from there.

* Update styles for adding support to mobile view.

* Update the lesson-plan icon.

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

* Update e2e tests to account for the changes made to the transitional page.

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Patricia Hillebrandt 2024-03-15 12:27:08 +01:00 committed by GitHub
parent fb32ab6c5a
commit 488bb62d82
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 203 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
View File

@ -128,7 +128,6 @@ export const Layout = () => {
> >
<Transitional <Transitional
sendEvent={ sendEvent } sendEvent={ sendEvent }
editor={ editor }
isWooExpress={ isWooExpress() } isWooExpress={ isWooExpress() }
isSurveyOpen={ isSurveyOpen } isSurveyOpen={ isSurveyOpen }
setSurveyOpen={ setSurveyOpen } setSurveyOpen={ setSurveyOpen }

27
plugins/woocommerce-admin/client/customize-store/assets/icons/lesson-plan.js Normal file
View File

@ -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;

183
plugins/woocommerce-admin/client/customize-store/transitional/index.tsx
View File

@ -4,7 +4,6 @@
/** /**
* External dependencies * External dependencies
*/ */
import classNames from 'classnames';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { getSetting } from '@woocommerce/settings'; import { getSetting } from '@woocommerce/settings';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
@ -15,8 +14,7 @@ import {
// @ts-ignore No types for this exist yet. // @ts-ignore No types for this exist yet.
__unstableMotion as motion, __unstableMotion as motion,
} from '@wordpress/components'; } from '@wordpress/components';
// @ts-ignore No types for this exist yet.
import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
/** /**
* Internal dependencies * Internal dependencies
*/ */
@ -27,6 +25,8 @@ import './style.scss';
import { navigateOrParent } from '../utils'; import { navigateOrParent } from '../utils';
import { WooCYSSecondaryButtonSlot } from './secondary-button-slot'; import { WooCYSSecondaryButtonSlot } from './secondary-button-slot';
import { SurveyForm } from './survey-form'; 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 actions from './actions';
export * as services from './services'; export * as services from './services';
@ -34,7 +34,6 @@ export * as services from './services';
export type events = { type: 'GO_BACK_TO_HOME' } | { type: 'COMPLETE_SURVEY' }; export type events = { type: 'GO_BACK_TO_HOME' } | { type: 'COMPLETE_SURVEY' };
export const Transitional = ( { export const Transitional = ( {
editor,
sendEvent, sendEvent,
hasCompleteSurvey, hasCompleteSurvey,
isWooExpress, isWooExpress,
@ -42,7 +41,6 @@ export const Transitional = ( {
setSurveyOpen, setSurveyOpen,
aiOnline, aiOnline,
}: { }: {
editor: React.ReactNode;
sendEvent: ( event: events ) => void; sendEvent: ( event: events ) => void;
hasCompleteSurvey: boolean; hasCompleteSurvey: boolean;
isWooExpress: boolean; isWooExpress: boolean;
@ -51,7 +49,6 @@ export const Transitional = ( {
aiOnline: boolean; aiOnline: boolean;
} ) => { } ) => {
const homeUrl: string = getSetting( 'homeUrl', '' ); const homeUrl: string = getSetting( 'homeUrl', '' );
const isEditorLoading = useIsSiteEditorLoading();
const closeSurvey = () => { const closeSurvey = () => {
setSurveyOpen( false ); setSurveyOpen( false );
}; };
@ -88,24 +85,22 @@ export const Transitional = ( {
isTransparent={ false } isTransparent={ false }
className="edit-site-layout__hub" className="edit-site-layout__hub"
/> />
<div className="woocommerce-customize-store__transitional-content"> <div className="woocommerce-customize-store__transitional-content">
<h1 className="woocommerce-customize-store__transitional-heading"> <h1 className="woocommerce-customize-store__transitional-heading">
{ __( '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">
{ __( { __(
"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' 'woocommerce'
) } ) }
</h2> </h2>
<div className="woocommerce-customize-store__transitional-main-actions"> <WooCYSSecondaryButtonSlot />
<WooCYSSecondaryButtonSlot /> <div className="woocommerce-customize-store__transitional-buttons">
{ showSurveyButton && ( { showSurveyButton && (
<Button <Button
className="woocommerce-customize-store__transitional-preview-button" className="woocommerce-customize-store__transitional-preview-buttonwoocommerce-customize-store__transitional-preview-button"
variant="secondary" variant="secondary"
onClick={ () => { onClick={ () => {
recordEvent( recordEvent(
@ -130,73 +125,115 @@ export const Transitional = ( {
window.open( homeUrl, '_blank' ); window.open( homeUrl, '_blank' );
} } } }
> >
{ __( 'Preview store', 'woocommerce' ) } { __( 'View store', 'woocommerce' ) }
</Button> </Button>
</div> </div>
<h2 className="woocommerce-customize-store__transitional-main-actions-title">
<div { __( "What's next?", 'woocommerce' ) }
className={ classNames( </h2>
'woocommerce-customize-store__transitional-site-preview-container', <div className="woocommerce-customize-store__transitional-main-actions">
{
'is-loading': isEditorLoading,
}
) }
>
{ editor }
</div>
<div className="woocommerce-customize-store__transitional-actions">
<div className="woocommerce-customize-store__transitional-action"> <div className="woocommerce-customize-store__transitional-action">
<h3> <Icon
{ __( 'Fine-tune your design', 'woocommerce' ) } className={
</h3> 'woocommerce-customize-store__transitional-action__icon'
<p> }
{ __( icon={ tag }
'Head to the Editor to change your images and text, add more pages, and make any further customizations.', />
'woocommerce' <div className="woocommerce-customize-store__transitional-action__content">
) } <h3>
</p> { __( 'Add your products', 'woocommerce' ) }
<Button </h3>
variant="tertiary" <p>
onClick={ () => { { __(
recordEvent( 'Start stocking your virtual shelves by adding or importing your products, or edit the sample products.',
'customize_your_store_transitional_editor_click' 'woocommerce'
); ) }
navigateOrParent( </p>
window, <Button
`${ ADMIN_URL }site-editor.php` variant="link"
); onClick={ () => {
} } recordEvent(
> 'customize_your_store_transitional_editor_click'
{ __( 'Go to the Editor', 'woocommerce' ) } );
</Button> navigateOrParent(
window,
`${ ADMIN_URL }edit.php?post_type=product`
);
} }
>
{ __( 'Go to Products', 'woocommerce' ) }
</Button>
</div>
</div> </div>
<div className="woocommerce-customize-store__transitional-action"> <div className="woocommerce-customize-store__transitional-action">
<h3> <Icon
{ __( className={
'Continue setting up your store', 'woocommerce-customize-store__transitional-action__icon'
'woocommerce' }
) } icon={ brush }
</h3> />
<p> <div className="woocommerce-customize-store__transitional-action__content">
{ __( <h3>
'Go back to the Home screen to complete your store setup and start selling', { __( 'Fine-tune your design', 'woocommerce' ) }
'woocommerce' </h3>
) } <p>
</p> { __(
<Button 'Head to the Editor to change your images and text, add more pages, and make any further customizations.',
variant="tertiary" 'woocommerce'
onClick={ () => { ) }
recordEvent( </p>
'customize_your_store_transitional_home_click' <Button
); variant="link"
sendEvent( { onClick={ () => {
type: 'GO_BACK_TO_HOME', recordEvent(
} ); 'customize_your_store_transitional_editor_click'
} } );
> navigateOrParent(
{ __( 'Back to Home', 'woocommerce' ) } window,
</Button> `${ 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={ () => {
recordEvent(
'customize_your_store_transitional_home_click'
);
sendEvent( {
type: 'GO_BACK_TO_HOME',
} );
} }
>
{ __( 'Back to Home', 'woocommerce' ) }
</Button>
</div>
</div> </div>
</div> </div>
</div> </div>

152
plugins/woocommerce-admin/client/customize-store/transitional/style.scss
View File

@ -30,11 +30,22 @@
} }
.woocommerce-customize-store__transitional-content { .woocommerce-customize-store__transitional-content {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: 40px; justify-content: center;
padding: 40px;
.woocommerce-customize-store__transitional-buttons {
display: flex;
align-items: center;
margin-top: 20px;
gap: 20px;
.woocommerce-customize-store__transitional-preview-button {
flex: 1;
}
}
} }
.woocommerce-customize-store__transitional-heading { .woocommerce-customize-store__transitional-heading {
@ -58,7 +69,16 @@
line-height: 24px; /* 150% */ line-height: 24px; /* 150% */
letter-spacing: -0.1px; letter-spacing: -0.1px;
margin: 4px 0 0; margin: 4px 0 0;
width: 560px; max-width: 560px;
}
.woocommerce-customize-store__transitional-main-actions-title {
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 120% */
margin-top: 100px;
margin-bottom: 40px;
} }
.woocommerce-customize-store__transitional-main-actions { .woocommerce-customize-store__transitional-main-actions {
@ -67,109 +87,45 @@
gap: 20px; gap: 20px;
flex-direction: row; flex-direction: row;
@media only screen and (max-width: 600px) {
flex-direction: column;
}
h3 {
margin: 0;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
letter-spacing: -0.32px;
}
.components-button { .components-button {
padding: 8px 16px; text-decoration: none;
height: 40px;
} }
}
.woocommerce-customize-store__transitional-site-preview-container {
border-radius: 16px;
margin-top: 50px;
background: #f6f7f7;
box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.02), 0 13px 10px 0 rgba(0, 0, 0, 0.03), 0 15px 20px 0 rgba(0, 0, 0, 0.04);
width: 600px;
height: 371px;
div {
position: relative;
border-radius: 24px;
}
.woocommerce-customize-store__edit-site-editor {
height: 100%;
}
.woocommerce-customize-store__block-editor {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.interface-navigable-region {
overflow: hidden;
}
.auto-block-preview__container,
.block-editor-block-preview__content {
width: 588px;
height: 363px;
position: relative;
}
iframe {
border-radius: 24px;
width: 1176px;
height: 726px;
transform: scale(0.5);
left: -50%;
position: relative;
top: -50%;
}
&.is-loading {
@include placeholder();
iframe {
visibility: hidden;
opacity: 0.5;
}
}
}
.woocommerce-customize-store__transitional-actions {
display: flex;
flex-direction: row;
margin-top: 50px;
gap: 40px;
.woocommerce-customize-store__transitional-action { .woocommerce-customize-store__transitional-action {
display: flex; display: flex;
flex-direction: column; }
width: 280px;
h3 { .woocommerce-customize-store__transitional-action__icon,
color: $gray-900; .woocommerce-customize-store__transitional-action__content {
font-size: 16px; flex: 1;
font-style: normal; }
font-weight: 500;
line-height: 24px; /* 150% */ .woocommerce-customize-store__transitional-action__icon {
margin: 0; text-align: right;
} max-width: 40px;
padding-right: 16px;
}
.woocommerce-customize-store__transitional-action__content {
max-width: 250px;
padding-right: 2px;
p { p {
margin: 5px 0 0; margin-top: 5px;
color: $gray-700; margin-bottom: 16px;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 123.077% */
height: 48px;
}
.components-button {
margin-top: 16px;
padding: 0;
margin-left: 0;
height: 20px;
width: fit-content;
&:hover {
background: transparent;
}
} }
} }
} }

11
plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx
View File

@ -48,10 +48,15 @@ describe( 'Transitional', () => {
expect( expect(
screen.getByRole( 'button', { screen.getByRole( 'button', {
name: /Preview store/i, name: /View store/i,
} ) } )
).toBeInTheDocument(); ).toBeInTheDocument();
expect(
screen.getByRole( 'button', {
name: /Go to Products/i,
} )
).toBeInTheDocument();
expect( expect(
screen.getByRole( 'button', { screen.getByRole( 'button', {
name: /Go to the Editor/i, name: /Go to the Editor/i,
@ -65,14 +70,14 @@ describe( 'Transitional', () => {
).toBeInTheDocument(); ).toBeInTheDocument();
} ); } );
it( 'should record an event when clicking on "Preview store" button', () => { it( 'should record an event when clicking on "View store" button', () => {
window.open = jest.fn(); window.open = jest.fn();
// @ts-ignore // @ts-ignore
render( <Transitional { ...props } /> ); render( <Transitional { ...props } /> );
screen screen
.getByRole( 'button', { .getByRole( 'button', {
name: /Preview store/i, name: /View store/i,
} ) } )
.click(); .click();

4
plugins/woocommerce/changelog/45546-45539-cys-on-core-transitional-page-i2 Normal file
View File

@ -0,0 +1,4 @@
Significance: major
Type: update
Introduce the new Transitional page to the customize your store.