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
sendEvent={ sendEvent }
editor={ editor }
isWooExpress={ isWooExpress() }
isSurveyOpen={ isSurveyOpen }
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;

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

@ -4,7 +4,6 @@
/**
* External dependencies
*/
import classNames from 'classnames';
import { __ } from '@wordpress/i18n';
import { getSetting } from '@woocommerce/settings';
import { recordEvent } from '@woocommerce/tracks';
@ -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
*/
@ -27,6 +25,8 @@ 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';
@ -34,7 +34,6 @@ export * as services from './services';
export type events = { type: 'GO_BACK_TO_HOME' } | { type: 'COMPLETE_SURVEY' };
export const Transitional = ( {
editor,
sendEvent,
hasCompleteSurvey,
isWooExpress,
@ -42,7 +41,6 @@ export const Transitional = ( {
setSurveyOpen,
aiOnline,
}: {
editor: React.ReactNode;
sendEvent: ( event: events ) => void;
hasCompleteSurvey: boolean;
isWooExpress: boolean;
@ -51,7 +49,6 @@ export const Transitional = ( {
aiOnline: boolean;
} ) => {
const homeUrl: string = getSetting( 'homeUrl', '' );
const isEditorLoading = useIsSiteEditorLoading();
const closeSurvey = () => {
setSurveyOpen( false );
};
@ -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 />
<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(
@ -130,22 +125,55 @@ export const Transitional = ( {
window.open( homeUrl, '_blank' );
} }
>
{ __( 'Preview store', 'woocommerce' ) }
{ __( 'View store', 'woocommerce' ) }
</Button>
</div>
<div
className={ classNames(
'woocommerce-customize-store__transitional-site-preview-container',
{
'is-loading': isEditorLoading,
}
) }
>
{ editor }
</div>
<div className="woocommerce-customize-store__transitional-actions">
<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="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>
@ -156,7 +184,7 @@ export const Transitional = ( {
) }
</p>
<Button
variant="tertiary"
variant="link"
onClick={ () => {
recordEvent(
'customize_your_store_transitional_editor_click'
@ -170,8 +198,16 @@ export const Transitional = ( {
{ __( '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',
@ -185,7 +221,7 @@ export const Transitional = ( {
) }
</p>
<Button
variant="tertiary"
variant="link"
onClick={ () => {
recordEvent(
'customize_your_store_transitional_home_click'
@ -201,5 +237,6 @@ export const Transitional = ( {
</div>
</div>
</div>
</div>
);
};

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

@ -30,11 +30,22 @@
}
.woocommerce-customize-store__transitional-content {
flex: 1;
display: flex;
flex-direction: column;
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 {
@ -58,7 +69,16 @@
line-height: 24px; /* 150% */
letter-spacing: -0.1px;
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 {
@ -67,109 +87,45 @@
gap: 20px;
flex-direction: row;
.components-button {
padding: 8px 16px;
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 {
display: flex;
@media only screen and (max-width: 600px) {
flex-direction: column;
width: 280px;
}
h3 {
color: $gray-900;
margin: 0;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
margin: 0;
}
p {
margin: 5px 0 0;
color: $gray-700;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 123.077% */
height: 48px;
letter-spacing: -0.32px;
}
.components-button {
margin-top: 16px;
padding: 0;
margin-left: 0;
height: 20px;
width: fit-content;
&:hover {
background: transparent;
text-decoration: none;
}
.woocommerce-customize-store__transitional-action {
display: flex;
}
.woocommerce-customize-store__transitional-action__icon,
.woocommerce-customize-store__transitional-action__content {
flex: 1;
}
.woocommerce-customize-store__transitional-action__icon {
text-align: right;
max-width: 40px;
padding-right: 16px;
}
.woocommerce-customize-store__transitional-action__content {
max-width: 250px;
padding-right: 2px;
p {
margin-top: 5px;
margin-bottom: 16px;
}
}
}

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

@ -48,10 +48,15 @@ describe( 'Transitional', () => {
expect(
screen.getByRole( 'button', {
name: /Preview store/i,
name: /View store/i,
} )
).toBeInTheDocument();
expect(
screen.getByRole( 'button', {
name: /Go to Products/i,
} )
).toBeInTheDocument();
expect(
screen.getByRole( 'button', {
name: /Go to the Editor/i,
@ -65,14 +70,14 @@ describe( 'Transitional', () => {
).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();
// @ts-ignore
render( <Transitional { ...props } /> );
screen
.getByRole( 'button', {
name: /Preview store/i,
name: /View store/i,
} )
.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.