diff --git a/packages/js/data/changelog/add-34063-store-location-skip-button b/packages/js/data/changelog/add-34063-store-location-skip-button new file mode 100644 index 00000000000..5566cd3985a --- /dev/null +++ b/packages/js/data/changelog/add-34063-store-location-skip-button @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add Skip button to OBW steps \ No newline at end of file diff --git a/packages/js/data/src/onboarding/types.ts b/packages/js/data/src/onboarding/types.ts index 975f36f17e1..59f308b5259 100644 --- a/packages/js/data/src/onboarding/types.ts +++ b/packages/js/data/src/onboarding/types.ts @@ -126,22 +126,22 @@ export type RevenueTypeSlug = | 'more-than-250000'; export type ProfileItems = { - business_extensions: [] | null; - completed: boolean | null; - industry: Industry[] | null; - number_employees: string | null; - other_platform: OtherPlatformSlug | null; - other_platform_name: string | null; - product_count: ProductCount | null; - product_types: ProductTypeSlug[] | null; - revenue: RevenueTypeSlug | null; - selling_venues: string | null; - setup_client: boolean | null; - skipped: boolean | null; - theme: string | null; - wccom_connected: boolean | null; - is_agree_marketing: boolean | null; - store_email: string | null; + business_extensions?: [] | null; + completed?: boolean | null; + industry?: Industry[] | null; + number_employees?: string | null; + other_platform?: OtherPlatformSlug | null; + other_platform_name?: string | null; + product_count?: ProductCount | null; + product_types?: ProductTypeSlug[] | null; + revenue?: RevenueTypeSlug | null; + selling_venues?: string | null; + setup_client?: boolean | null; + skipped?: boolean | null; + theme?: string | null; + wccom_connected?: boolean | null; + is_agree_marketing?: boolean | null; + store_email?: string | null; }; export type FieldLocale = { diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js index 78c5609c6b9..e74db30bcd4 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js @@ -42,6 +42,7 @@ import { } from './selective-extensions-bundle'; import { getPluginSlug, getPluginTrackKey, getTimeFrame } from '~/utils'; import './style.scss'; +import SkipButton from '../../../skip-button'; const BUSINESS_DETAILS_TAB_NAME = 'business-details'; const BUSINESS_FEATURES_TAB_NAME = 'business-features'; @@ -649,6 +650,13 @@ class BusinessDetails extends Component { ) } + { + recordEvent( + 'storeprofiler_store_business_details_skip' + ); + } } + /> ); } } diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js index d6051fe4666..a88c45cc228 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js @@ -19,6 +19,7 @@ import './style.scss'; import sanitizeHTML from '~/lib/sanitize-html'; import { setAllPropsToValue } from '~/lib/collections'; import { getCountryCode } from '../../../../../../dashboard/utils'; +import SkipButton from '../../../../skip-button'; const ALLOWED_PLUGIN_CATEGORIES = [ 'obw/basics', 'obw/grow' ]; @@ -395,6 +396,13 @@ export const SelectiveExtensionsBundle = ( { installExtensionOptions, isInstallingActivating ) } + { + recordEvent( + 'storeprofiler_store_business_details_free_features_skip' + ); + } } + /> ); }; diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/industry.js b/plugins/woocommerce-admin/client/profile-wizard/steps/industry.js index f869bb4e16a..58cd3c68c97 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/industry.js +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/industry.js @@ -23,6 +23,7 @@ import { Text } from '@woocommerce/experimental'; */ import { getCurrencyRegion } from '../../dashboard/utils'; import { getAdminSetting } from '~/utils/admin-settings'; +import SkipButton from './skip-button'; const onboarding = getAdminSetting( 'onboarding', {} ); @@ -280,6 +281,11 @@ class Industry extends Component { + { + recordEvent( 'storeprofiler_store_industry_skip' ); + } } + /> ); } diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/product-types/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/product-types/index.js index b6c31bc07f9..b2f02aeade5 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/product-types/index.js +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/product-types/index.js @@ -30,6 +30,7 @@ import { createNoticesFromResponse } from '~/lib/notices'; import { getCountryCode } from '../../../dashboard/utils'; import ProductTypeLabel from './label'; import './style.scss'; +import SkipButton from '../skip-button'; export class ProductTypes extends Component { constructor() { @@ -337,6 +338,11 @@ export class ProductTypes extends Component { ) } + { + recordEvent( 'storeprofiler_store_product_type_skip' ); + } } + /> ); } diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap index c80a52c4829..dff7652f03d 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap @@ -191,6 +191,35 @@ you can purchase and install it later. Billing is annual. All purchases are covered by our 30 day money back guarantee and include access to support and updates. Extensions will be added to a cart for you to purchase later. + `; @@ -386,6 +415,35 @@ you can purchase and install it later. Billing is annual. All purchases are covered by our 30 day money back guarantee and include access to support and updates. Extensions will be added to a cart for you to purchase later. + `; diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/skip-button.tsx b/plugins/woocommerce-admin/client/profile-wizard/steps/skip-button.tsx new file mode 100644 index 00000000000..1be72dc0b6e --- /dev/null +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/skip-button.tsx @@ -0,0 +1,115 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Button, Popover } from '@wordpress/components'; +import { Icon, info } from '@wordpress/icons'; +import { useState } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { getHistory, getNewPath } from '@woocommerce/navigation'; +import { ONBOARDING_STORE_NAME, OPTIONS_STORE_NAME } from '@woocommerce/data'; + +/** + * Internal dependencies + */ +import UsageModal from './usage-modal'; + +const SkipButton: React.FC< { + onSkipped?: () => void; +} > = ( { onSkipped } ) => { + /* eslint-disable @wordpress/i18n-no-collapsible-whitespace */ + const skipSetupText = __( + 'Manual setup is only recommended for\n experienced WooCommerce users or developers.', + 'woocommerce' + ); + + const { createNotice } = useDispatch( 'core/notices' ); + const { invalidateResolutionForStoreSelector, updateProfileItems } = + useDispatch( ONBOARDING_STORE_NAME ); + + const trackingAllowed = useSelect( + ( select ) => + select( OPTIONS_STORE_NAME ).getOption( + 'woocommerce_allow_tracking' + ) === 'yes' + ); + + const [ isSkipSetupPopoverVisible, setSkipSetupPopoverVisibility ] = + useState( false ); + + const [ showUsageModal, setShowUsageModal ] = useState( false ); + + const skipProfiler = () => { + updateProfileItems( { + skipped: true, + } ) + .then( () => { + if ( onSkipped ) { + onSkipped(); + } + getHistory().push( getNewPath( {}, '/', {} ) ); + } ) + .catch( () => { + createNotice( + 'error', + __( + 'There was a problem skipping the setup wizard', + 'woocommerce' + ) + ); + } ); + }; + + return ( + <> + { showUsageModal && ( + { + skipProfiler(); + } } + onClose={ () => { + invalidateResolutionForStoreSelector( 'getTaskLists' ); + setShowUsageModal( false ); + } } + /> + ) } +
+ + + { isSkipSetupPopoverVisible && ( + setSkipSetupPopoverVisibility( false ) } + > + { skipSetupText } + + ) } +
+ + ); +}; + +export default SkipButton; diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js index dc8dbfcbd68..ac539026fdd 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js @@ -10,7 +10,6 @@ import { CheckboxControl, FlexItem as MaybeFlexItem, Spinner, - Popover, } from '@wordpress/components'; import { Component, useRef } from '@wordpress/element'; import { compose } from '@wordpress/compose'; @@ -24,7 +23,6 @@ import { } from '@woocommerce/data'; import { recordEvent } from '@woocommerce/tracks'; import { Text } from '@woocommerce/experimental'; -import { Icon, info } from '@wordpress/icons'; import { isEmail } from '@wordpress/url'; /** @@ -35,9 +33,10 @@ import { StoreAddress, getStoreAddressValidator, } from '../../../dashboard/components/settings/general/store-address'; -import UsageModal from '../usage-modal'; import { CurrencyContext } from '../../../lib/currency-context'; import { getAdminSetting } from '~/utils/admin-settings'; +import SkipButton from '../skip-button'; +import UsageModal from '../usage-modal'; import './style.scss'; // FlexItem is not available until WP version 5.5. This code is safe to remove @@ -63,7 +62,6 @@ export class StoreDetails extends Component { this.state = { showUsageModal: false, - skipping: false, isSkipSetupPopoverVisible: false, }; @@ -112,10 +110,13 @@ export class StoreDetails extends Component { } onSubmit() { - this.setState( { - showUsageModal: true, - skipping: false, - } ); + if ( this.props.allowTracking ) { + this.props.goToNextStep(); + } else { + this.setState( { + showUsageModal: true, + } ); + } } onFormValueChange( changedFormValue ) { @@ -244,22 +245,8 @@ export class StoreDetails extends Component { } render() { - const { showUsageModal, skipping, isSkipSetupPopoverVisible } = - this.state; - const { - skipProfiler, - isLoading, - isBusy, - initialValues, - invalidateResolutionForStoreSelector, - } = this.props; - - /* eslint-disable @wordpress/i18n-no-collapsible-whitespace */ - const skipSetupText = __( - 'Manual setup is only recommended for\n experienced WooCommerce users or developers.', - 'woocommerce' - ); - /* eslint-enable @wordpress/i18n-no-collapsible-whitespace */ + const { showUsageModal } = this.state; + const { isLoading, isBusy, initialValues } = this.props; if ( isLoading ) { return ( @@ -305,18 +292,13 @@ export class StoreDetails extends Component { { showUsageModal && ( { - if ( skipping ) { - skipProfiler(); - } else { - this.onContinue( values ).then( - () => this.props.goToNextStep() - ); - } + this.onContinue( values ).then( () => + this.props.goToNextStep() + ); } } onClose={ () => this.setState( { showUsageModal: false, - skipping: false, } ) } /> @@ -380,46 +362,11 @@ export class StoreDetails extends Component { ) } -
- - - { isSkipSetupPopoverVisible && ( - - this.setState( { - isSkipSetupPopoverVisible: false, - } ) - } - > - { skipSetupText } - - ) } -
+ { + recordEvent( 'storeprofiler_store_details_skip' ); + } } + /> ); } @@ -443,11 +390,13 @@ export default compose( getCountries, hasFinishedResolution: hasFinishedResolutionCountries, } = select( COUNTRIES_STORE_NAME ); - const { isResolving } = select( OPTIONS_STORE_NAME ); + const { isResolving, getOption } = select( OPTIONS_STORE_NAME ); const profileItems = getProfileItems(); const emailPrefill = getEmailPrefill(); + const allowTracking = + getOption( 'woocommerce_allow_tracking' ) === 'yes'; const { general: settings = {} } = getSettings( 'general' ); const isBusy = isOnboardingRequesting( 'updateProfileItems' ) || @@ -499,18 +448,17 @@ export default compose( isBusy, settings, errorsRef, + allowTracking, }; } ), withDispatch( ( dispatch ) => { const { createNotice } = dispatch( 'core/notices' ); - const { invalidateResolutionForStoreSelector, updateProfileItems } = - dispatch( ONBOARDING_STORE_NAME ); + const { updateProfileItems } = dispatch( ONBOARDING_STORE_NAME ); const { updateAndPersistSettingsForGroup } = dispatch( SETTINGS_STORE_NAME ); return { createNotice, - invalidateResolutionForStoreSelector, updateProfileItems, updateAndPersistSettingsForGroup, }; diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss index 25a37823849..95953292aa4 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss @@ -1,14 +1,3 @@ -.woocommerce-profile-wizard__store-details { - .woocommerce-admin__store-details__spinner { - display: flex; - justify-content: center; - } - - .components-popover .components-popover__content { - min-width: 360px; - } -} - .woocommerce-profile-wizard__newsletter-signup { .components-base-control__field { display: flex; diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/__snapshots__/index.js.snap index c81da5929b5..24d60fa6d52 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/__snapshots__/index.js.snap +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/__snapshots__/index.js.snap @@ -316,7 +316,7 @@ Object { class="components-button woocommerce-profile-wizard__footer-link is-link" type="button" > - Skip setup store details + Skip -

+ { + const { activeTheme = '' } = getAdminSetting( + 'onboarding', + {} + ); + recordEvent( + 'storeprofiler_store_theme_skip_step', + { activeTheme } + ); + } } + /> ) } ); diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js b/plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js index 79fc55613cc..323b89ddb30 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js +++ b/plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js @@ -99,8 +99,6 @@ class UsageModal extends Component { // Bail if site has already opted in to tracking if ( allowTracking ) { - onClose(); - onContinue(); return null; } @@ -160,6 +158,8 @@ class UsageModal extends Component { onClick={ () => { this.setState( { selectedAction: 'accept' } ); this.updateTracking( { allowTracking: true } ); + onClose(); + onContinue(); } } > { acceptActionText } diff --git a/plugins/woocommerce-admin/client/profile-wizard/style.scss b/plugins/woocommerce-admin/client/profile-wizard/style.scss index b733624a9e2..ea438bbd61c 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/style.scss +++ b/plugins/woocommerce-admin/client/profile-wizard/style.scss @@ -81,6 +81,9 @@ margin: 34px auto; display: flex; justify-content: center; + .components-popover .components-popover__content { + min-width: 360px; + } } .woocommerce-profile-wizard__footer-link { diff --git a/plugins/woocommerce/changelog/update-34063-store-location-skip-btn b/plugins/woocommerce/changelog/update-34063-store-location-skip-btn new file mode 100644 index 00000000000..c4878221529 --- /dev/null +++ b/plugins/woocommerce/changelog/update-34063-store-location-skip-btn @@ -0,0 +1,4 @@ +Significance: patch +Type: tweak + +Add Skip button on OBW steps diff --git a/plugins/woocommerce/e2e/tests/admin-tasks/payment.spec.js b/plugins/woocommerce/e2e/tests/admin-tasks/payment.spec.js index cb7564ae184..2645366869f 100644 --- a/plugins/woocommerce/e2e/tests/admin-tasks/payment.spec.js +++ b/plugins/woocommerce/e2e/tests/admin-tasks/payment.spec.js @@ -8,7 +8,7 @@ test.describe( 'Payment setup task', () => { await page.goto( 'wp-admin/admin.php?page=wc-admin&path=/setup-wizard' ); - await page.click( 'text=Skip setup store details' ); + await page.click( 'button:has-text("Skip")' ); await page.click( 'text=No thanks' ); await page.waitForLoadState( 'networkidle' ); } ); diff --git a/plugins/woocommerce/e2e/tests/merchant/page-loads.spec.js b/plugins/woocommerce/e2e/tests/merchant/page-loads.spec.js index f0da805bc60..aa9c911c83e 100644 --- a/plugins/woocommerce/e2e/tests/merchant/page-loads.spec.js +++ b/plugins/woocommerce/e2e/tests/merchant/page-loads.spec.js @@ -61,7 +61,7 @@ for ( const currentPage of wcPages ) { await page.goto( 'wp-admin/admin.php?page=wc-admin&path=/setup-wizard' ); - await page.click( 'text=Skip setup store details' ); + await page.click( 'button:has-text("Skip")' ); await page.click( 'text=No thanks' ); await page.waitForLoadState( 'networkidle' ); await page.goto( 'wp-admin/admin.php?page=wc-admin' );