add: store location settings tour (#34137)

packages/js/components/changelog/fix-1-step-tour

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fixed button rendering for 1 step tour which was not showing completion button due to bug in logic

packages/js/components/src/tour-kit/components/step-navigation.tsx

@@ -24,6 +24,7 @@ const StepNavigation: React.FunctionComponent< Props > = ( {
 } ) => {
 	const isFirstStep = currentStepIndex === 0;
 	const isLastStep = currentStepIndex === steps.length - 1;
+
 	const { primaryButton = { text: '', isDisabled: false } } =
 		steps[ currentStepIndex ].meta;
 
@@ -49,14 +50,12 @@ const StepNavigation: React.FunctionComponent< Props > = ( {
 	);
 
 	const renderButtons = () => {
-		if ( isFirstStep ) {
-			return <div>{ NextButton }</div>;
-		}
-
 		if ( isLastStep ) {
 			return (
 				<div>
-					{ BackButton }
+					{
+						! isFirstStep ? BackButton : null // For 1 step tours, isFirstStep and isLastStep can be true simultaneously.
+					}
 					<Button
 						isPrimary
 						disabled={ primaryButton.isDisabled }
@@ -69,6 +68,10 @@ const StepNavigation: React.FunctionComponent< Props > = ( {
 			);
 		}
 
+		if ( isFirstStep ) {
+			return <div>{ NextButton }</div>;
+		}
+
 		return (
 			<div>
 				{ BackButton }

plugins/woocommerce-admin/client/embedded-body-layout/StoreAddressTour.tsx

@@ -0,0 +1,111 @@
+/**
+ * External dependencies
+ */
+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';
+
+/**
+ * Internal dependencies
+ */
+import { EmbeddedBodyProps } from './embedded-body-props';
+
+const REVIEWED_STORE_LOCATION_SETTINGS_OPTION =
+	'woocommerce_admin_reviewed_store_location_settings';
+
+const useShowStoreLocationTour = () => {
+	const { hasReviewedStoreLocationSettings, isLoading } = useSelect(
+		( select ) => {
+			const { hasFinishedResolution, getOption } =
+				select( OPTIONS_STORE_NAME );
+
+			return {
+				isLoading: ! hasFinishedResolution( 'getOption', [
+					REVIEWED_STORE_LOCATION_SETTINGS_OPTION,
+				] ),
+				hasReviewedStoreLocationSettings:
+					getOption( REVIEWED_STORE_LOCATION_SETTINGS_OPTION ) ===
+					'yes',
+			};
+		}
+	);
+
+	return {
+		isLoading,
+		show: ! isLoading && ! hasReviewedStoreLocationSettings,
+	};
+};
+
+const StoreAddressTourOverlay = () => {
+	const { isLoading, show } = useShowStoreLocationTour();
+	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
+	const config: TourKitTypes.WooConfig = {
+		steps: [
+			{
+				referenceElements: {
+					desktop: '#store_address-description + table.form-table',
+				},
+				meta: {
+					name: 'store-location-tour-step-1',
+					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.',
+							'woocommerce'
+						),
+					},
+					primaryButton: {
+						text: __( 'Got it', 'woocommerce' ),
+					},
+				},
+			},
+		],
+		placement: 'bottom-start',
+		options: {
+			effects: {
+				liveResize: { mutation: true, resize: true },
+				spotlight: {
+					styles: {
+						inset: '0px auto auto -8px', // default inset causes all increase in padding to show up on the right side
+						paddingInline: '8px', // Add some padding because the spotlight is right on the edge of the text and that's ugly
+					},
+					interactivity: {
+						enabled: true,
+					},
+				},
+			},
+		},
+		closeHandler: () => {
+			updateOptions( {
+				[ REVIEWED_STORE_LOCATION_SETTINGS_OPTION ]: 'yes',
+			} );
+		},
+	};
+
+	if ( isLoading || ! show ) {
+		return null;
+	}
+	return <TourKit config={ config }></TourKit>;
+};
+
+export const StoreAddressTour: FunctionComponent<
+	EmbeddedBodyProps & { tutorial: boolean }
+> = ( { page, tab, tutorial } ) => {
+	if ( page !== 'wc-settings' ) {
+		return null;
+	}
+
+	// tab should be general but general is also the default if not set
+	if ( tab !== 'general' && tab !== undefined ) {
+		return null;
+	}
+
+	// only show tour if tutorial query param is set to true, which is the case when referred from onboarding task list
+	if ( ! tutorial ) {
+		return null;
+	}
+
+	return <StoreAddressTourOverlay />;
+};

plugins/woocommerce-admin/client/embedded-body-layout/embedded-body-layout.tsx

@@ -10,6 +10,7 @@ import QueryString, { parse } from 'qs';
 import { PaymentRecommendations } from '../payments';
 import { ShippingRecommendations } from '../shipping';
 import { EmbeddedBodyProps } from './embedded-body-props';
+import { StoreAddressTour } from './StoreAddressTour';
 import './style.scss';
 
 type QueryParams = EmbeddedBodyProps;
@@ -23,6 +24,7 @@ function isWPPage(
 const EMBEDDED_BODY_COMPONENT_LIST: React.ElementType[] = [
 	PaymentRecommendations,
 	ShippingRecommendations,
+	StoreAddressTour,
 ];
 
 /**

plugins/woocommerce/changelog/add-store-location-settings-tour

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added tour for store location

plugins/woocommerce/src/Admin/API/Options.php

@@ -183,6 +183,7 @@ class Options extends \WC_REST_Data_Controller {
 			'wc_connect_options',
 			'woocommerce_admin_created_default_shipping_zones',
 			'woocommerce_admin_reviewed_default_shipping_zones',
+			'woocommerce_admin_reviewed_store_location_settings',
 		);
 
 		$theme_permissions = array(

plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/StoreDetails.php

@@ -60,7 +60,7 @@ class StoreDetails extends Task {
 	 * @return string
 	 */
 	public function get_action_url() {
-		return admin_url( 'admin.php?page=wc-settings' );
+		return admin_url( 'admin.php?page=wc-settings&tab=general&tutorial=true' );
 	}
 
 	/**