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

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
This commit is contained in:
Moon 2022-08-08 21:08:03 -07:00 committed by GitHub
parent 2fe344e2af
commit dd794e8e26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 271 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/data/changelog/add-34063-store-location-skip-button Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add Skip button to OBW steps

32
packages/js/data/src/onboarding/types.ts
View File

@ -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 = {

8
plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js
View File

@ -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 {
) }
</CardFooter>
</Card>
<SkipButton
onSkipped={ () => {
recordEvent(
'storeprofiler_store_business_details_skip'
);
} }
/>
</>
);
} }

8
plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js
View File

@ -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
) }
<SkipButton
onSkipped={ () => {
recordEvent(
'storeprofiler_store_business_details_free_features_skip'
);
} }
/>
</div>
);
};

6
plugins/woocommerce-admin/client/profile-wizard/steps/industry.js
View File

@ -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 {
</Button>
</CardFooter>
</Card>
<SkipButton
onSkipped={ () => {
recordEvent( 'storeprofiler_store_industry_skip' );
} }
/>
</Fragment>
);
}

6
plugins/woocommerce-admin/client/profile-wizard/steps/product-types/index.js
View File

@ -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 {
</Text>
) }
</div>
<SkipButton
onSkipped={ () => {
recordEvent( 'storeprofiler_store_product_type_skip' );
} }
/>
</div>
);
}

58
plugins/woocommerce-admin/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap
View File

@ -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.
</span>
</div>
<div
class="woocommerce-profile-wizard__footer"
>
<button
class="components-button woocommerce-profile-wizard__footer-link is-link"
type="button"
>
Skip
</button>
<button
aria-label="Manual setup is only recommended for
experienced WooCommerce users or developers."
class="components-button is-tertiary"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"
/>
</svg>
</button>
</div>
</div>
</div>
`;
@ -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.
</span>
</div>
<div
class="woocommerce-profile-wizard__footer"
>
<button
class="components-button woocommerce-profile-wizard__footer-link is-link"
type="button"
>
Skip
</button>
<button
aria-label="Manual setup is only recommended for
experienced WooCommerce users or developers."
class="components-button is-tertiary"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"
/>
</svg>
</button>
</div>
</div>
</div>
`;

115
plugins/woocommerce-admin/client/profile-wizard/steps/skip-button.tsx Normal file
View File

@ -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 && (
<UsageModal
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore -- ignoring it for now as UsageModal is not in ts yet.
onContinue={ () => {
skipProfiler();
} }
onClose={ () => {
invalidateResolutionForStoreSelector( 'getTaskLists' );
setShowUsageModal( false );
} }
/>
) }
<div className="woocommerce-profile-wizard__footer">
<Button
isLink
className="woocommerce-profile-wizard__footer-link"
onClick={ () => {
if ( trackingAllowed ) {
skipProfiler();
} else {
setShowUsageModal( true );
}
} }
>
{ __( 'Skip', 'woocommerce' ) }
</Button>
<Button
isTertiary
label={ skipSetupText }
onClick={ () => {
setSkipSetupPopoverVisibility( true );
} }
>
<Icon icon={ info } />
</Button>
{ isSkipSetupPopoverVisible && (
<Popover
focusOnMount="container"
position="top center"
onClose={ () => setSkipSetupPopoverVisibility( false ) }
>
{ skipSetupText }
</Popover>
) }
</div>
</>
);
};
export default SkipButton;

100
plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js
View File

@ -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 && (
<UsageModal
onContinue={ () => {
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 {
</Card>
) }
</Form>
<div className="woocommerce-profile-wizard__footer">
<Button
isLink
className="woocommerce-profile-wizard__footer-link"
onClick={ () => {
invalidateResolutionForStoreSelector(
'getTaskLists'
);
this.setState( {
showUsageModal: true,
skipping: true,
} );
return false;
} }
>
{ __( 'Skip setup store details', 'woocommerce' ) }
</Button>
<Button
isTertiary
label={ skipSetupText }
onClick={ () =>
this.setState( { isSkipSetupPopoverVisible: true } )
}
>
<Icon icon={ info } />
</Button>
{ isSkipSetupPopoverVisible && (
<Popover
focusOnMount="container"
position="top center"
onClose={ () =>
this.setState( {
isSkipSetupPopoverVisible: false,
} )
}
>
{ skipSetupText }
</Popover>
) }
</div>
<SkipButton
onSkipped={ () => {
recordEvent( 'storeprofiler_store_details_skip' );
} }
/>
</div>
);
}
@ -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,
};

11
plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss
View File

@ -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;

4
plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/__snapshots__/index.js.snap
View File

@ -316,7 +316,7 @@ Object {
class="components-button woocommerce-profile-wizard__footer-link is-link"
type="button"
>
Skip setup store details
Skip
</button>
<button
aria-label="Manual setup is only recommended for
@ -629,7 +629,7 @@ Object {
class="components-button woocommerce-profile-wizard__footer-link is-link"
type="button"
>
Skip setup store details
Skip
</button>
<button
aria-label="Manual setup is only recommended for

29
plugins/woocommerce-admin/client/profile-wizard/steps/theme/index.js
View File

@ -29,6 +29,7 @@ import ThemeUploader from './uploader';
import ThemePreview from './preview';
import { getPriceValue } from '../../../dashboard/utils';
import { getAdminSetting, setAdminSetting } from '~/utils/admin-settings';
import SkipButton from '../skip-button';
class Theme extends Component {
constructor() {
@ -46,7 +47,6 @@ class Theme extends Component {
this.onClosePreview = this.onClosePreview.bind( this );
this.onSelectTab = this.onSelectTab.bind( this );
this.openDemo = this.openDemo.bind( this );
this.skipStep = this.skipStep.bind( this );
}
componentDidUpdate( prevProps ) {
@ -165,12 +165,6 @@ class Theme extends Component {
this.setState( { demo: theme } );
}
skipStep() {
const { activeTheme = '' } = getAdminSetting( 'onboarding', {} );
recordEvent( 'storeprofiler_store_theme_skip_step', { activeTheme } );
this.props.goToNextStep();
}
renderTheme( theme ) {
const {
demo_url: demoUrl,
@ -403,15 +397,18 @@ class Theme extends Component {
/>
) }
{ activeThemeSupportsWooCommerce && (
<p className="woocommerce-profile-wizard__themes-skip-this-step">
<Button
isLink
className="woocommerce-profile-wizard__skip"
onClick={ () => this.skipStep() }
>
{ __( 'Skip this step', 'woocommerce' ) }
</Button>
</p>
<SkipButton
onSkipped={ () => {
const { activeTheme = '' } = getAdminSetting(
'onboarding',
{}
);
recordEvent(
'storeprofiler_store_theme_skip_step',
{ activeTheme }
);
} }
/>
) }
</Fragment>
);

4
plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js
View File

@ -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 }

3
plugins/woocommerce-admin/client/profile-wizard/style.scss
View File

@ -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 {

4
plugins/woocommerce/changelog/update-34063-store-location-skip-btn Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Add Skip button on OBW steps

2
plugins/woocommerce/e2e/tests/admin-tasks/payment.spec.js
View File

@ -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' );
} );

2
plugins/woocommerce/e2e/tests/merchant/page-loads.spec.js
View File

@ -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' );