[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
GitHub
parent
fb32ab6c5a
commit
488bb62d82
|
|
@ -128,7 +128,6 @@ export const Layout = () => {
|
|||
>
|
||||
<Transitional
|
||||
sendEvent={ sendEvent }
|
||||
editor={ editor }
|
||||
isWooExpress={ isWooExpress() }
|
||||
isSurveyOpen={ isSurveyOpen }
|
||||
setSurveyOpen={ setSurveyOpen }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: major
|
||||
Type: update
|
||||
|
||||
Introduce the new Transitional page to the customize your store.
|
||||
Loading…
Reference in New Issue