{ page.text }
+ +); + +const PageImage = ( { + page, +}: { + page: { + index: number; + }; +} ) => ( + +); + +interface BlockEditorGuideProps { + isNewUser: boolean; onCloseGuide: ( currentPage: number, origin: 'close' | 'finish' ) => void; } -const BlockEditorGuide = ( { onCloseGuide }: Props ) => { +const BlockEditorGuide = ( { + isNewUser, + onCloseGuide, +}: BlockEditorGuideProps ) => { + const pagesConfig = [ + { + heading: isNewUser + ? __( 'Fresh and modern interface', 'woocommerce' ) + : __( 'Refreshed, streamlined interface', 'woocommerce' ), + text: isNewUser + ? __( + 'Using the product form means less clicking around. Product details are neatly grouped by tabs, so you always know where to go.', + 'woocommerce' + ) + : __( + 'Experience a simpler, more focused interface with a modern design that enhances usability.', + 'woocommerce' + ), + }, + { + heading: __( 'Content-rich product descriptions', 'woocommerce' ), + text: __( + 'Create compelling product pages with blocks, media, images, videos, and any content you desire to engage customers.', + 'woocommerce' + ), + }, + { + heading: isNewUser + ? __( 'Speed & performance', 'woocommerce' ) + : __( 'Improved speed & performance', 'woocommerce' ), + text: isNewUser + ? __( + 'Create a product from start to finish without page reloads. Our modern technology ensures reliability and lightning-fast performance.', + 'woocommerce' + ) + : __( + 'Enjoy a seamless experience without page reloads. Our modern technology ensures reliability and lightning-fast performance.', + 'woocommerce' + ), + }, + { + heading: __( 'More features are on the way', 'woocommerce' ), + text: __( + 'While we currently support physical products, exciting updates are coming to accommodate more types, like digital products, variations, and more. Stay tuned!', + 'woocommerce' + ), + }, + ]; + + const pages = pagesConfig.map( ( page, index ) => ( { + content:- { __( - 'Experience a simpler, more focused interface with a modern design that enhances usability.', - 'woocommerce' - ) } -
- - ), - image: ( - - ), - }, - { - content: ( - <> -- { __( - 'Create compelling product pages with blocks, media, images, videos, and any content you desire to engage customers.', - 'woocommerce' - ) } -
- - ), - image: ( - - ), - }, - { - content: ( - <> -- { __( - 'Enjoy a seamless experience without page reloads. Our modern technology ensures reliability and lightning-fast performance.', - 'woocommerce' - ) } -
- - ), - image: ( - - ), - }, - { - content: ( - <> -- { __( - 'While we currently support physical products, exciting updates are coming to accommodate more types, like digital products, variations, and more. Stay tuned!', - 'woocommerce' - ) } -
- - ), - image: ( - - ), - }, - ] } + pages={ pages } /> ); }; diff --git a/plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour.tsx b/plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour.tsx index 59b369f722b..748a4fb490c 100644 --- a/plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour.tsx +++ b/plugins/woocommerce-admin/client/products/tour/block-editor/block-editor-tour.tsx @@ -1,11 +1,13 @@ /** * External dependencies */ -import { Pill, TourKit } from '@woocommerce/components'; -import { __ } from '@wordpress/i18n'; -import { recordEvent } from '@woocommerce/tracks'; +import { useSelect } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Pill, TourKit } from '@woocommerce/components'; +import { PRODUCTS_STORE_NAME } from '@woocommerce/data'; import { __experimentalUseFeedbackBar as useFeedbackBar } from '@woocommerce/product-editor'; +import { recordEvent } from '@woocommerce/tracks'; /** * Internal dependencies @@ -19,7 +21,30 @@ interface Props { dismissModal: () => void; } +const PUBLISHED_PRODUCTS_QUERY_PARAMS = { + status: 'publish', + _fields: [ 'id' ], +}; + const BlockEditorTour = ( { shouldTourBeShown, dismissModal }: Props ) => { + const { publishedProductsCount, loadingPublishedProductsCount } = useSelect( + ( select ) => { + const { getProductsTotalCount, hasFinishedResolution } = + select( PRODUCTS_STORE_NAME ); + + return { + publishedProductsCount: getProductsTotalCount( + PUBLISHED_PRODUCTS_QUERY_PARAMS, + 0 + ), + loadingPublishedProductsCount: ! hasFinishedResolution( + 'getProductsTotalCount', + [ PUBLISHED_PRODUCTS_QUERY_PARAMS, 0 ] + ), + }; + } + ); + useEffect( () => { if ( shouldTourBeShown ) { recordEvent( 'block_product_editor_spotlight_view' ); @@ -30,13 +55,38 @@ const BlockEditorTour = ( { shouldTourBeShown, dismissModal }: Props ) => { const { maybeShowFeedbackBar } = useFeedbackBar(); + // we consider a user new if they have no published products + const isNewUser = publishedProductsCount < 1; + const openGuide = () => { setIsGuideOpen( true ); }; + const getTourText = () => { + return { + heading: isNewUser + ? __( 'Meet the product editing form', 'woocommerce' ) + : __( 'A new way to edit your products', 'woocommerce' ), + description: isNewUser + ? __( + "Discover the form's unique features designed to help you make this product stand out.", + 'woocommerce' + ) + : __( + 'Introducing the upgraded experience designed to help you create and edit products easier.', + 'woocommerce' + ), + }; + }; + + if ( loadingPublishedProductsCount ) { + return null; + } + if ( isGuideOpen ) { return (