diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx index 3a65704b9bb..40ac1580125 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx @@ -128,7 +128,6 @@ export const Layout = () => { > + + + + +); +export default lessonPLan; diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx b/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx index aaac895ee84..bcdb78aa040 100644 --- a/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx @@ -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" /> -

{ __( 'Your store looks great!', 'woocommerce' ) }

{ __( - "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' ) }

-
- - + +
{ showSurveyButton && (
- -
- { editor } -
-
+

+ { __( "What's next?", 'woocommerce' ) } +

+
-

- { __( 'Fine-tune your design', 'woocommerce' ) } -

-

- { __( - 'Head to the Editor to change your images and text, add more pages, and make any further customizations.', - 'woocommerce' - ) } -

- + +
+

+ { __( 'Add your products', 'woocommerce' ) } +

+

+ { __( + 'Start stocking your virtual shelves by adding or importing your products, or edit the sample products.', + 'woocommerce' + ) } +

+ +
-

- { __( - 'Continue setting up your store', - 'woocommerce' - ) } -

-

- { __( - 'Go back to the Home screen to complete your store setup and start selling', - 'woocommerce' - ) } -

- + +
+

+ { __( 'Fine-tune your design', 'woocommerce' ) } +

+

+ { __( + 'Head to the Editor to change your images and text, add more pages, and make any further customizations.', + 'woocommerce' + ) } +

+ +
+
+ +
+ +
+

+ { __( + 'Continue setting up your store', + 'woocommerce' + ) } +

+

+ { __( + 'Go back to the Home screen to complete your store setup and start selling', + 'woocommerce' + ) } +

+ +
diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/style.scss b/plugins/woocommerce-admin/client/customize-store/transitional/style.scss index a295fb3ff7e..a6ed6213129 100644 --- a/plugins/woocommerce-admin/client/customize-store/transitional/style.scss +++ b/plugins/woocommerce-admin/client/customize-store/transitional/style.scss @@ -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; + @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 { - padding: 8px 16px; - height: 40px; + text-decoration: none; } - } - - .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; - flex-direction: column; - width: 280px; + } - h3 { - color: $gray-900; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 24px; /* 150% */ - margin: 0; - } + .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: 5px 0 0; - color: $gray-700; - 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; - } + margin-top: 5px; + margin-bottom: 16px; } } } diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx b/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx index 8c8859c1f44..6d82ba2edf5 100644 --- a/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx +++ b/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx @@ -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( ); screen .getByRole( 'button', { - name: /Preview store/i, + name: /View store/i, } ) .click(); diff --git a/plugins/woocommerce/changelog/45546-45539-cys-on-core-transitional-page-i2 b/plugins/woocommerce/changelog/45546-45539-cys-on-core-transitional-page-i2 new file mode 100644 index 00000000000..852b04f8913 --- /dev/null +++ b/plugins/woocommerce/changelog/45546-45539-cys-on-core-transitional-page-i2 @@ -0,0 +1,4 @@ +Significance: major +Type: update + +Introduce the new Transitional page to the customize your store. \ No newline at end of file