Add launch your store homescreen status tour (#46203)

* Tour component initial design

* Add woocommerce_lys_tour_dismissed option on 8.7.0 update

* Use woocommerce_lys_tour_dismissed to render the tour

* Rename option

* Add useSiteVisibilityTour

* Remove unused tourDismissed var

* Remove unused import

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

* Use ' not `

* Lint fixes

* Update plugins/woocommerce-admin/client/launch-your-store/tour/index.tsx

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

* Add discover more link

* woocommerce_launch_your_store_tour_hidden should be added < 8.9

* Adjust padding bottom for the footer

* Use user meta to manage woocommerce_launch_your_store_tour_hidden

* Adjust tour padding

* Fix global types

* Exclude the tour on new sites

* Fix missing doc comment

* Update tour descriptions

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
This commit is contained in:
Moon 2024-04-08 01:29:49 -07:00 committed by GitHub
parent 65294dd048
commit 79d65eeea0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 293 additions and 32 deletions

View File

@ -11,6 +11,8 @@ import classnames from 'classnames';
* Internal dependencies
*/
import './style.scss';
import { SiteVisibilityTour } from '../tour';
import { useSiteVisibilityTour } from '../tour/use-site-visibility-tour';
import { useComingSoonEditorLink } from '../hooks/use-coming-soon-editor-link';
export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
@ -22,10 +24,20 @@ export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
: __( 'Site coming soon', 'woocommerce' );
const liveText = __( 'Live', 'woocommerce' );
const dropdownText = isComingSoon ? comingSoonText : liveText;
const { showTour, setShowTour, onClose, shouldTourBeShown } =
useSiteVisibilityTour();
const [ commingSoonPageLink ] = useComingSoonEditorLink();
return (
<div className="woocommerce-lys-status">
{ shouldTourBeShown && showTour && (
<SiteVisibilityTour
onClose={ () => {
onClose();
setShowTour( false );
} }
/>
) }
<div className="woocommerce-lys-status-pill-wrapper">
<Dropdown
className="woocommerce-lys-status-dropdown"

View File

@ -0,0 +1,30 @@
<svg xmlns="http://www.w3.org/2000/svg" width="129" height="71" viewBox="0 0 129 71" fill="none">
<g clip-path="url(#clip0_2464_6097)">
<path d="M83.7082 0H2.10612C0.94168 0 0 1.08204 0 2.41689V52.2413C0 53.5761 0.94168 54.6582 2.10612 54.6582H83.7082C84.8727 54.6582 85.8144 53.5761 85.8144 52.2413V2.41689C85.8144 1.08204 84.8727 0 83.7082 0Z" fill="#E5E5E5" fill-opacity="0.5"/>
<path d="M52.1371 4.84375H5.12402V32.5318H52.1371V4.84375Z" fill="white"/>
<path d="M52.1371 36.9805H5.12402V40.894H52.1371V36.9805Z" fill="white"/>
<path d="M23.34 45.1406H5.12402V49.0542H23.3501V45.1406H23.34Z" fill="white"/>
<path d="M85.6621 48.8533C97.3889 48.8533 106.895 39.3591 106.895 27.6474C106.895 15.9356 97.3889 6.44141 85.6621 6.44141C73.9352 6.44141 64.4287 15.9356 64.4287 27.6474C64.4287 39.3591 73.9352 48.8533 85.6621 48.8533Z" fill="#271B3D"/>
<path d="M91.4241 30.3281L88.2852 33.463L123.846 68.2804L126.286 65.8433L91.4241 30.3281Z" fill="#271B3D"/>
<path d="M85.6324 45.609C95.5473 45.609 103.585 37.5817 103.585 27.6795C103.585 17.7773 95.5473 9.75 85.6324 9.75C75.7174 9.75 67.6797 17.7773 67.6797 27.6795C67.6797 37.5817 75.7174 45.609 85.6324 45.609Z" fill="#E0E0E0"/>
<path d="M109.457 47.1128L109.194 45.0903L108.212 44.1094L102.086 50.2274L103.068 51.2084L105.093 51.4713C105.964 53.332 109.781 59.5613 113.71 63.4749C118.51 68.2682 121.942 69.8356 125.324 70.9986L129.01 67.3176C127.845 63.94 126.286 60.5119 121.476 55.7185C117.558 51.805 111.32 47.9825 109.457 47.1128Z" fill="#BEA0F2"/>
<path d="M85.8038 20.6094C78.8475 20.6094 74.3416 25.342 71.9014 28.0219C74.3518 30.7017 78.8576 35.4343 85.8038 35.4343C92.7601 35.4343 97.266 30.7017 99.7062 28.0219C97.2558 25.342 92.7499 20.6094 85.8038 20.6094Z" fill="white"/>
<path d="M85.8035 33.4213C88.7898 33.4213 91.2106 31.0036 91.2106 28.0212C91.2106 25.0388 88.7898 22.6211 85.8035 22.6211C82.8173 22.6211 80.3965 25.0388 80.3965 28.0212C80.3965 31.0036 82.8173 33.4213 85.8035 33.4213Z" fill="#BEA0F2"/>
<path d="M85.8041 30.7204C87.2972 30.7204 88.5077 29.5115 88.5077 28.0204C88.5077 26.5292 87.2972 25.3203 85.8041 25.3203C84.311 25.3203 83.1006 26.5292 83.1006 28.0204C83.1006 29.5115 84.311 30.7204 85.8041 30.7204Z" fill="#271B3D"/>
<path d="M84.0626 27.3353C84.6553 27.3353 85.1359 26.8553 85.1359 26.2633C85.1359 25.6713 84.6553 25.1914 84.0626 25.1914C83.4698 25.1914 82.9893 25.6713 82.9893 26.2633C82.9893 26.8553 83.4698 27.3353 84.0626 27.3353Z" fill="white"/>
<path d="M54.1621 60.3615V57.0042L51.3775 56.6401C51.1244 55.4772 50.6688 54.385 50.041 53.4142L51.7522 51.1895L49.3727 48.813L47.145 50.522C46.173 49.8951 45.0794 49.4299 43.915 49.1872L43.5505 46.4062H40.1888L39.8242 49.1872C38.6598 49.44 37.5662 49.8951 36.5942 50.522L34.3666 48.813L31.987 51.1895L33.6983 53.4142C33.0705 54.385 32.6047 55.4772 32.3617 56.6401L29.5771 57.0042V60.3615L32.3617 60.7256C32.6148 61.8885 33.0705 62.9807 33.6983 63.9515L31.987 66.1762L34.3666 68.5527L36.5942 66.8437C37.5662 67.4706 38.6598 67.9358 39.8242 68.1785L40.1888 70.9594H43.5505L43.915 68.1785C45.0794 67.9257 46.173 67.4706 47.145 66.8437L49.3727 68.5527L51.7522 66.1762L50.041 63.9515C50.6688 62.9807 51.1345 61.8885 51.3775 60.7256L54.1621 60.3615ZM41.8595 62.1818C39.7837 62.1818 38.0928 60.5031 38.0928 58.4199C38.0928 56.3367 39.7736 54.6581 41.8595 54.6581C43.9454 54.6581 45.6262 56.3367 45.6262 58.4199C45.6262 60.5031 43.9454 62.1818 41.8595 62.1818Z" fill="#BEA0F2"/>
<path d="M8.03944 6.77344H7.97868C7.58378 6.77344 7.25977 7.08693 7.25977 7.48131V7.54199C7.25977 7.93638 7.58378 8.24987 7.97868 8.24987H8.03944C8.43433 8.24987 8.75835 7.93638 8.75835 7.54199V7.48131C8.75835 7.08693 8.43433 6.77344 8.03944 6.77344Z" fill="#271B3D"/>
<path d="M49.6146 6.77344H49.5539C49.159 6.77344 48.835 7.08693 48.835 7.48131V7.54199C48.835 7.93638 49.159 8.24987 49.5539 8.24987H49.6146C50.0095 8.24987 50.3335 7.93638 50.3335 7.54199V7.48131C50.3335 7.08693 50.0095 6.77344 49.6146 6.77344Z" fill="#271B3D"/>
<path d="M49.6146 29.1328H49.5539C49.159 29.1328 48.835 29.4463 48.835 29.8407V29.9014C48.835 30.2958 49.159 30.6092 49.5539 30.6092H49.6146C50.0095 30.6092 50.3335 30.2958 50.3335 29.9014V29.8407C50.3335 29.4463 50.0095 29.1328 49.6146 29.1328Z" fill="#271B3D"/>
<path d="M8.03944 29.1328H7.97868C7.58378 29.1328 7.25977 29.4463 7.25977 29.8407V29.9014C7.25977 30.2958 7.58378 30.6092 7.97868 30.6092H8.03944C8.43433 30.6092 8.75835 30.2958 8.75835 29.9014V29.8407C8.75835 29.4463 8.43433 29.1328 8.03944 29.1328Z" fill="#271B3D"/>
<path d="M49.5845 7.51172H8.00879V29.8705H49.5743V7.51172H49.5845Z" stroke="#271B3D" stroke-width="0.28" stroke-miterlimit="10"/>
<path d="M8.00879 7.51172L49.5845 29.8604" stroke="#271B3D" stroke-width="0.28" stroke-miterlimit="10"/>
<path d="M49.5845 7.51172L8.00879 29.8604" stroke="#271B3D" stroke-width="0.28" stroke-miterlimit="10"/>
<path d="M72.023 65.0044V63.4875L70.1295 62.9617L69.6232 61.7482L70.5851 60.0392L69.5118 58.9672L67.8006 59.9279L66.5855 59.4223L66.059 57.5312H64.5401L64.0136 59.4223L62.7985 59.9279L61.0873 58.9672L60.014 60.0392L60.9759 61.7482L60.4697 62.9617L58.5762 63.4875V65.0044L60.4697 65.5303L60.9759 66.7438L60.014 68.4528L61.0873 69.5247L62.7985 68.564L64.0136 69.0696L64.5401 70.9607H66.059L66.5855 69.0696L67.8006 68.564L69.5118 69.5247L70.5851 68.4528L69.6232 66.7438L70.1295 65.5303L72.023 65.0044ZM66.4539 65.4089C65.816 66.046 64.7629 66.046 64.125 65.4089C63.4871 64.7718 63.4871 63.7201 64.125 63.083C64.449 62.7594 64.8642 62.5976 65.2894 62.5976C65.7147 62.5976 66.1299 62.7594 66.4539 63.083C67.0918 63.7201 67.0918 64.7718 66.4539 65.4089Z" fill="#F2EDFF"/>
</g>
<defs>
<clipPath id="clip0_2464_6097">
<rect width="129" height="71" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@ -0,0 +1,79 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { TourKit } from '@woocommerce/components';
import { createInterpolateElement } from '@wordpress/element';
/**
* Internal dependencies
*/
import './style.scss';
export const SiteVisibilityTour = ( { onClose }: { onClose: () => void } ) => {
return (
<TourKit
config={ {
placement: 'bottom',
options: {
effects: {
arrowIndicator: true,
autoScroll: {
behavior: 'auto',
block: 'center',
},
liveResize: {
mutation: true,
resize: true,
rootElementSelector: '#wpwrap',
},
},
popperModifiers: [
{
name: 'auto',
enabled: true,
phase: 'beforeWrite',
requires: [ 'computeStyles' ],
},
{
name: 'offset',
options: {
offset: () => {
return [ 52, 16 ];
},
},
},
],
classNames: 'woocommerce-lys-homescreen-status-tour-kit',
},
steps: [
{
referenceElements: {
desktop: '.woocommerce-lys-status-pill',
},
meta: {
name: 'set-your-store-visibility',
heading: __(
"Set your store's visibility",
'woocommerce'
),
descriptions: {
desktop: createInterpolateElement(
__(
'Launch your store only when you\'re ready to by switching between "Coming soon" and "Live" modes. Build excitement by creating a custom page visitors will see before you\'re ready to go live. <link>Discover more</link>',
'woocommerce'
),
{
// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid
link: <a href="#" target="_blank" />,
}
),
},
},
},
],
closeHandler: onClose,
} }
></TourKit>
);
};

View File

@ -0,0 +1,67 @@
.woocommerce-lys-homescreen-status-tour-kit {
color: #1e1e1e;
.woocommerce-tour-kit-step {
border-radius: 8px;
border: 1px solid #dcdcdc;
/* Shadow / Popover */
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
width: 257px;
padding-bottom: 0;
}
.components-card__footer {
display: none;
}
.tour-kit-frame__container {
box-shadow: none;
background: none;
}
.components-elevation {
display: none;
}
.woocommerce-tour-kit-step__body {
background-image: url(./header-image.svg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 5px;
padding-bottom: 24px;
}
.woocommerce-tour-kit-step-navigation {
display: none;
}
h2 {
padding-top: 100px;
font-size: 14px;
line-height: 24px;
}
p.woocommerce-tour-kit-step__description {
font-size: 13px;
line-height: 18px;
margin-top: 8px;
}
.tour-kit-frame__arrow::before {
box-shadow: none !important;
}
.tour-kit-frame__container[data-popper-placement^="bottom"] {
& > .tour-kit-frame__arrow {
background: #fff;
&::before {
border-top: 1px solid var(--gutenberg-gray-300, #ddd);
border-left: 1px solid var(--gutenberg-gray-300, #ddd);
}
}
}
a {
display: block;
text-decoration: none;
margin-top: 12px;
padding-block: 11px;
}
}

View File

@ -0,0 +1,47 @@
/**
* External dependencies
*/
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
import { useSelect, dispatch } from '@wordpress/data';
import { useState } from 'react';
const LYS_TOUR_HIDDEN = 'woocommerce_launch_your_store_tour_hidden';
export const useSiteVisibilityTour = () => {
const [ showTour, setShowTour ] = useState( true );
const { shouldTourBeShown } = useSelect( ( select ) => {
// Tour should only be shown if the user has not seen it before and the `woocommerce_show_lys_tour` option is "yes" (for sites upgrading from a previous WooCommerce version)
const { getCurrentUser } = select( 'core' );
const wasTourShown =
( getCurrentUser() as { meta?: { [ key: string ]: string } } )
?.meta?.[ LYS_TOUR_HIDDEN ] === 'yes';
const { getOption } = select( OPTIONS_STORE_NAME );
const showLYSTourOption = getOption( 'woocommerce_show_lys_tour' );
const _shouldTourBeShown =
showLYSTourOption === 'yes' && ! wasTourShown;
return {
shouldTourBeShown: _shouldTourBeShown,
};
} );
const onClose = () => {
dispatch( 'core' ).saveUser( {
id: window?.wcSettings?.currentUserId,
meta: {
woocommerce_launch_your_store_tour_hidden: 'yes',
},
} );
};
return {
onClose,
shouldTourBeShown,
showTour,
setShowTour,
};
};

View File

@ -17,29 +17,6 @@ import './style.scss';
import { getAdminSetting } from '~/utils/admin-settings';
import FrequentlyAskedQuestionsSimple from './faq-simple';
declare global {
interface Window {
location: Location;
wcSettings: {
admin: {
wcpay_welcome_page_connect_nonce: string;
currentUserData: {
first_name: string;
};
wcpayWelcomePageIncentive: {
id: string;
description: string;
cta_label: string;
tc_url: string;
};
currency?: {
symbol: string;
};
};
};
}
}
interface activatePromoResponse {
success: boolean;
}

View File

@ -1,10 +1,28 @@
declare global {
interface Window {
location: Location;
pagenow: string;
adminpage: string;
wcSettings: {
preloadOptions: Record< string, unknown >;
adminUrl: string;
currentUserId: number;
admin: {
wcpay_welcome_page_connect_nonce: string;
currentUserData: {
first_name: string;
};
wcpayWelcomePageIncentive: {
id: string;
description: string;
cta_label: string;
tc_url: string;
};
currency?: {
symbol: string;
};
currentUserId: number;
};
};
wcAdminFeatures: {
'activity-panels': boolean;

View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add a tour for the homescreen site status badge.

View File

@ -248,6 +248,9 @@ class WC_Install {
'8.7.0' => array(
'wc_update_870_prevent_listing_of_transient_files_directory',
),
'8.9.0' => array(
'wc_update_890_add_launch_your_store_tour_option',
),
);
/**

View File

@ -167,7 +167,7 @@ function wc_update_200_taxrates() {
)
);
$loop++;
++$loop;
}
}
}
@ -216,7 +216,7 @@ function wc_update_200_taxrates() {
}
}
$loop++;
++$loop;
}
}
@ -2571,7 +2571,6 @@ function wc_update_750_add_columns_to_order_stats_table() {
and postmeta.meta_key = '_date_completed'
SET order_stats.date_completed = IFNULL(FROM_UNIXTIME(postmeta.meta_value), '0000-00-00 00:00:00');"
);
}
/**
@ -2667,3 +2666,10 @@ function wc_update_870_prevent_listing_of_transient_files_directory() {
$wp_filesystem->put_contents( $default_transient_files_dir . '/.htaccess', 'deny from all' );
$wp_filesystem->put_contents( $default_transient_files_dir . '/index.html', '' );
}
/**
* Add woocommerce_show_lys_tour.
*/
function wc_update_890_add_launch_your_store_tour_option() {
update_option( 'woocommerce_show_lys_tour', 'yes' );
}

View File

@ -226,6 +226,7 @@ class Options extends \WC_REST_Data_Controller {
'woocommerce_private_link',
'woocommerce_share_key',
'launch-status',
'woocommerce_show_lys_tour',
'woocommerce_coming_soon_page_id',
// WC Test helper options.
'wc-admin-test-helper-rest-api-filters',

View File

@ -19,6 +19,7 @@ class LaunchYourStore {
add_filter( 'woocommerce_admin_shared_settings', array( $this, 'preload_settings' ) );
}
add_action( 'wp_footer', array( $this, 'maybe_add_coming_soon_banner_on_frontend' ) );
add_action( 'init', array( $this, 'register_launch_your_store_user_meta_fields' ) );
}
/**
@ -116,19 +117,19 @@ class LaunchYourStore {
<div class="wp-block-group"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:heading {"textAlign":"center","level":1} -->
<h1 class="wp-block-heading has-text-align-center">%s</h1>
<!-- /wp:heading -->
<!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">%s</p>
<!-- /wp:paragraph -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
@ -151,11 +152,11 @@ class LaunchYourStore {
<div class="wp-block-group"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:heading {"textAlign":"center","level":1} -->
<h1 class="wp-block-heading has-text-align-center">%s</h1>
<!-- /wp:heading -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
@ -255,4 +256,20 @@ class LaunchYourStore {
// phpcs:ignore
echo "<div id='coming-soon-footer-banner'>$text</div>";
}
/**
* Register user meta fields for Launch Your Store.
*/
public function register_launch_your_store_user_meta_fields() {
register_meta(
'user',
'woocommerce_launch_your_store_tour_hidden',
array(
'type' => 'string',
'description' => 'Indicate whether the user has dismissed the site visibility tour on the home screen.',
'single' => true,
'show_in_rest' => true,
)
);
}
}