Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhance "Add store details" task onboarding experience (#34697) 

* Change the visibility condition of the store details onboarding tour

* Add changelog

* Rename handler variable

* Modify aid description

* Cleanup
This commit is contained in:
Chris Lilitsas 2022-09-26 14:52:23 +03:00 committed by GitHub
parent 18901f19a7
commit 20b561f2f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
plugins/woocommerce-admin/client/guided-tours/store-address-tour.tsx
View File

@ -5,7 +5,8 @@ import { FunctionComponent } from 'react';
import { TourKit, TourKitTypes } from '@woocommerce/components';
import { __ } from '@wordpress/i18n';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
import { useDispatch, useSelect } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { recordEvent } from '@woocommerce/tracks';
/**
@ -13,29 +14,36 @@ import { recordEvent } from '@woocommerce/tracks';
*/
import { EmbeddedBodyProps } from '../embedded-body-layout/embedded-body-props';
const REVIEWED_STORE_LOCATION_SETTINGS_OPTION =
'woocommerce_admin_reviewed_store_location_settings';
const STORE_ADDRESS_SETTINGS_OPTION = 'woocommerce_store_address';
const STORE_CITY_SETTINGS_OPTION = 'woocommerce_store_city';
const STORE_POSTCODE_SETTINGS_OPTION = 'woocommerce_store_postcode';
const useShowStoreLocationTour = () => {
const { hasReviewedStoreLocationSettings, isLoading } = useSelect(
( select ) => {
const { hasFinishedResolution, getOption } =
select( OPTIONS_STORE_NAME );
const { hasFilledStoreAddress, isLoading } = useSelect( ( select ) => {
const { hasFinishedResolution, getOption } =
select( OPTIONS_STORE_NAME );
return {
isLoading: ! hasFinishedResolution( 'getOption', [
REVIEWED_STORE_LOCATION_SETTINGS_OPTION,
return {
isLoading:
! hasFinishedResolution( 'getOption', [
STORE_ADDRESS_SETTINGS_OPTION,
] ) ||
! hasFinishedResolution( 'getOption', [
STORE_CITY_SETTINGS_OPTION,
] ) ||
! hasFinishedResolution( 'getOption', [
STORE_POSTCODE_SETTINGS_OPTION,
] ),
hasReviewedStoreLocationSettings:
getOption( REVIEWED_STORE_LOCATION_SETTINGS_OPTION ) ===
'yes',
};
}
);
hasFilledStoreAddress:
getOption( STORE_ADDRESS_SETTINGS_OPTION ) !== '' &&
getOption( STORE_CITY_SETTINGS_OPTION ) !== '' &&
getOption( STORE_POSTCODE_SETTINGS_OPTION ) !== '',
};
} );
return {
isLoading,
show: ! isLoading && ! hasReviewedStoreLocationSettings,
show: ! isLoading && ! hasFilledStoreAddress,
};
};
@ -46,7 +54,8 @@ const isFieldFilled = ( fieldSelector: string ) => {
const StoreAddressTourOverlay = () => {
const { isLoading, show } = useShowStoreLocationTour();
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
const [ isDismissed, setIsDismissed ] = useState( false );
const config: TourKitTypes.WooConfig = {
steps: [
{
@ -58,7 +67,7 @@ const StoreAddressTourOverlay = () => {
heading: 'Add your store location',
descriptions: {
desktop: __(
'Add your store location details such as address and Country to help us configure shipping, taxes, currency and more in a fully automated way.',
'Add your store location details to help us configure shipping, taxes, currency and more in a fully automated way. Once done, click on the "Save" button at the end of the form.',
'woocommerce'
),
},
@ -96,13 +105,11 @@ const StoreAddressTourOverlay = () => {
fields_filled,
} );
updateOptions( {
[ REVIEWED_STORE_LOCATION_SETTINGS_OPTION ]: 'yes',
} );
setIsDismissed( true );
},
};
if ( isLoading || ! show ) {
if ( isDismissed || isLoading || ! show ) {
return null;
}
return <TourKit config={ config }></TourKit>;

4
plugins/woocommerce/changelog/enchancement-store-details-tour Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: enhancement
Enchance tour experience for store location