From dd794e8e26792d1b466a1f0c6bc5a83b6e0678db Mon Sep 17 00:00:00 2001 From: Moon Date: Mon, 8 Aug 2022 21:08:03 -0700 Subject: [PATCH] Update/34063 store location skip btn (#34176) * Make ProfileItems properties optional * Remove skip button codes and replace them with SkipButton component * Add SkipButton component * Add changelog * Add back continue button callback * Apply popover styles globally * Add skip button on the industry step * Add skip button on the product types step * Add skip button on the Business Details step * Support onSkipped callback * Record skip event * Add skip event track for industry, product types, and business details * Add SkipButton to the theme step * Update snapshot * Change track name to separate business details and free features * Add changelog * Remove unused code * Update product types test snapshot * Add back UsageModal on Continue click * Update e2e tests to use Skip * Use button selector for skip btn * Fix duplicate event dispatch * Do not call onClose and onContinue during the rendering -- it causes cannot update a component while rendering a different warning. Instead, call them when the button is clicked * Skip the profiler without rendering usage modal when woocommerce_allow_tracking is set * Skip the profiler without rendering usage modal when woocommerce_allow_tracking is set * Go to the next step when allowTracking is yes --- .../add-34063-store-location-skip-button | 4 + packages/js/data/src/onboarding/types.ts | 32 ++--- .../flows/selective-bundle/index.js | 8 ++ .../selective-extensions-bundle/index.js | 8 ++ .../client/profile-wizard/steps/industry.js | 6 + .../steps/product-types/index.js | 6 + .../test/__snapshots__/index.js.snap | 58 +++++++++ .../profile-wizard/steps/skip-button.tsx | 115 ++++++++++++++++++ .../steps/store-details/index.js | 100 ++++----------- .../steps/store-details/style.scss | 11 -- .../test/__snapshots__/index.js.snap | 4 +- .../profile-wizard/steps/theme/index.js | 29 ++--- .../profile-wizard/steps/usage-modal.js | 4 +- .../client/profile-wizard/style.scss | 3 + .../update-34063-store-location-skip-btn | 4 + .../e2e/tests/admin-tasks/payment.spec.js | 2 +- .../e2e/tests/merchant/page-loads.spec.js | 2 +- 17 files changed, 271 insertions(+), 125 deletions(-) create mode 100644 packages/js/data/changelog/add-34063-store-location-skip-button create mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/skip-button.tsx create mode 100644 plugins/woocommerce/changelog/update-34063-store-location-skip-btn 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' );