- );
-};
diff --git a/plugins/woocommerce-admin/client/homescreen/welcome-modal/style.scss b/plugins/woocommerce-admin/client/homescreen/welcome-modal/style.scss
deleted file mode 100644
index afae08e423a..00000000000
--- a/plugins/woocommerce-admin/client/homescreen/welcome-modal/style.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-// The welcome modal is presented outside the homescreen class namespace
-.components-guide.woocommerce__welcome-modal {
- max-width: 517px;
- height: 460px;
-
- .components-modal__header {
- height: 0;
-
- .components-button {
- color: $white;
- }
- }
-
- .components-guide__container {
- margin-top: 0;
-
- .woocommerce__welcome-modal__page-content {
- padding: 0 24px;
-
- .woocommerce__welcome-modal__page-content__header {
- font-size: 24px;
- line-height: 32px;
- margin: 0 0 24px 0;
- }
-
- .woocommerce__welcome-modal__page-content__body {
- font-size: 16px;
- line-height: 24px;
- margin: 0 0 24px 0;
- }
- }
- }
-
- .components-guide__footer {
- padding: 0;
- margin: 0 24px 24px 24px;
- justify-content: flex-end;
- width: initial;
-
- .components-guide__finish-button,
- .components-guide__forward-button,
- .components-guide__back-button {
- position: initial;
- padding: 0 16px;
- font-weight: 500;
- font-size: 14px;
- line-height: 18px;
- }
-
- .components-guide__forward-button,
- .components-guide__back-button {
- color: var(--wp-admin-theme-color);
- }
-
- .components-guide__forward-button,
- .components-guide__finish-button {
- margin-left: 10px;
- }
-
- .components-guide__forward-button {
- box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
- outline: 1px solid transparent;
- }
- }
-
- .fill-theme-color {
- fill: var(--wp-admin-theme-color);
- }
-}
diff --git a/plugins/woocommerce-admin/client/homescreen/welcome-modal/test/index.js b/plugins/woocommerce-admin/client/homescreen/welcome-modal/test/index.js
deleted file mode 100644
index 429ba8d946d..00000000000
--- a/plugins/woocommerce-admin/client/homescreen/welcome-modal/test/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from '@testing-library/react';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { WelcomeModal } from '../index';
-
-jest.mock( '@woocommerce/tracks', () => ( { recordEvent: jest.fn() } ) );
-
-describe( 'WelcomeModal', () => {
- it( 'should call onClose when it is closed', () => {
- const onCloseSpy = jest.fn();
-
- const { queryAllByRole } = render(
-
- );
-
- fireEvent.click( queryAllByRole( 'button' )[ 0 ] );
-
- expect( onCloseSpy ).toHaveBeenCalledTimes( 1 );
- } );
-
- it( 'should not render the guide after it is closed', () => {
- const { queryAllByRole, container } = render(
- {} } />
- );
-
- fireEvent.click( queryAllByRole( 'button' )[ 0 ] );
-
- expect( container ).toBeEmptyDOMElement();
- } );
-
- it( 'should track open and close', () => {
- const { queryAllByRole } = render(
- {} } />
- );
-
- expect( recordEvent ).toHaveBeenLastCalledWith(
- 'task_list_welcome_modal_open'
- );
-
- fireEvent.click( queryAllByRole( 'button' )[ 0 ] );
-
- expect( recordEvent ).toHaveBeenLastCalledWith(
- 'task_list_welcome_modal_close'
- );
- } );
-} );
diff --git a/plugins/woocommerce-admin/client/navigation/components/intro-modal/index.js b/plugins/woocommerce-admin/client/navigation/components/intro-modal/index.js
index e2fb7b2ef49..6925ac3f288 100644
--- a/plugins/woocommerce-admin/client/navigation/components/intro-modal/index.js
+++ b/plugins/woocommerce-admin/client/navigation/components/intro-modal/index.js
@@ -6,7 +6,7 @@ import { Guide } from '@wordpress/components';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { Text } from '@woocommerce/experimental';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
/**
@@ -16,7 +16,6 @@ import './style.scss';
import NavInto1 from './images/nav-intro-1.png';
import NavInto2 from './images/nav-intro-2.png';
import NavInto3 from './images/nav-intro-3.png';
-import { WELCOME_MODAL_DISMISSED_OPTION_NAME } from '../../../homescreen/constants';
export const INTRO_MODAL_DISMISSED_OPTION_NAME =
'woocommerce_navigation_intro_modal_dismissed';
@@ -26,29 +25,20 @@ export const IntroModal = () => {
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
- const { isDismissed, isResolving, isWelcomeModalShown } = useSelect(
- ( select ) => {
- const { getOption, isResolving: isOptionResolving } =
- select( OPTIONS_STORE_NAME );
- const dismissedOption = getOption(
- INTRO_MODAL_DISMISSED_OPTION_NAME
- );
+ const { isDismissed, isResolving } = useSelect( ( select ) => {
+ const { getOption, isResolving: isOptionResolving } =
+ select( OPTIONS_STORE_NAME );
+ const dismissedOption = getOption( INTRO_MODAL_DISMISSED_OPTION_NAME );
- return {
- isDismissed: dismissedOption === 'yes',
- isWelcomeModalShown:
- getOption( WELCOME_MODAL_DISMISSED_OPTION_NAME ) !== 'yes',
- isResolving:
- typeof dismissedOption === 'undefined' ||
- isOptionResolving( 'getOption', [
- INTRO_MODAL_DISMISSED_OPTION_NAME,
- ] ) ||
- isOptionResolving( 'getOption', [
- WELCOME_MODAL_DISMISSED_OPTION_NAME,
- ] ),
- };
- }
- );
+ return {
+ isDismissed: dismissedOption === 'yes',
+ isResolving:
+ typeof dismissedOption === 'undefined' ||
+ isOptionResolving( 'getOption', [
+ INTRO_MODAL_DISMISSED_OPTION_NAME,
+ ] ),
+ };
+ } );
const dismissModal = () => {
updateOptions( {
@@ -58,15 +48,7 @@ export const IntroModal = () => {
setOpen( false );
};
- // Dismiss the modal when the welcome modal is shown.
- // It is likely in this case that the navigation is on by default.
- useEffect( () => {
- if ( ! isResolving && isWelcomeModalShown && ! isDismissed ) {
- dismissModal();
- }
- }, [ isDismissed, isResolving, isWelcomeModalShown ] );
-
- if ( ! isOpen || isDismissed || isResolving || isWelcomeModalShown ) {
+ if ( ! isOpen || isDismissed || isResolving ) {
return null;
}
diff --git a/plugins/woocommerce-admin/client/navigation/components/intro-modal/test/index.js b/plugins/woocommerce-admin/client/navigation/components/intro-modal/test/index.js
index a73b11ec534..f81a797472b 100644
--- a/plugins/woocommerce-admin/client/navigation/components/intro-modal/test/index.js
+++ b/plugins/woocommerce-admin/client/navigation/components/intro-modal/test/index.js
@@ -26,7 +26,6 @@ jest.mock( '@wordpress/data', () => {
describe( 'IntroModal', () => {
test( 'should not show when modal options are resolving', () => {
useSelect.mockImplementation( () => ( {
- isWelcomeModalShown: null,
isResolving: true,
} ) );
@@ -35,29 +34,11 @@ describe( 'IntroModal', () => {
expect( container ).toBeEmptyDOMElement();
} );
- test( 'should dismiss when the welcome modal is shown', () => {
- const updateOptions = jest.fn();
- useSelect.mockImplementation( () => ( {
- isWelcomeModalShown: true,
- } ) );
- useDispatch.mockImplementation( () => ( {
- updateOptions,
- } ) );
-
- const { container } = render( );
-
- expect( container ).toBeEmptyDOMElement();
- expect( updateOptions ).toHaveBeenCalledWith( {
- [ INTRO_MODAL_DISMISSED_OPTION_NAME ]: 'yes',
- } );
- } );
-
test( 'should not dismiss when the modal has already been dismissed', () => {
const updateOptions = jest.fn();
useSelect.mockImplementation( () => ( {
isDismissed: true,
isResolving: false,
- isWelcomeModalShown: true,
} ) );
useDispatch.mockImplementation( () => ( {
updateOptions,
@@ -69,24 +50,11 @@ describe( 'IntroModal', () => {
expect( updateOptions ).not.toHaveBeenCalled();
} );
- test( 'should show the intro modal when welcome modal is not shown', () => {
- useSelect.mockImplementation( () => ( {
- isResolving: false,
- isWelcomeModalShown: false,
- } ) );
-
- render( );
-
- expect(
- screen.queryByText( 'A new navigation for WooCommerce' )
- ).not.toBeNull();
- } );
-
test( 'should hide and update the dismissal option when closing the modal', () => {
const updateOptions = jest.fn();
useSelect.mockImplementation( () => ( {
isResolving: false,
- isWelcomeModalShown: false,
+ isDismissed: false,
} ) );
useDispatch.mockImplementation( () => ( {
updateOptions,
diff --git a/plugins/woocommerce-admin/docs/features/onboarding.md b/plugins/woocommerce-admin/docs/features/onboarding.md
index 5dde4de3d5b..1a9a7235965 100644
--- a/plugins/woocommerce-admin/docs/features/onboarding.md
+++ b/plugins/woocommerce-admin/docs/features/onboarding.md
@@ -18,46 +18,44 @@ To enable the new onboarding experience manually, log-in to `wp-admin`, and go t
To power the new onboarding flow client side, new REST API endpoints have been introduced. These are purpose built endpoints that exist under the `/wc-admin/onboarding/` namespace, and are not meant to be shipped in the core rest API package. The source is stored in `src/API/Plugins.php`, `src/API/OnboardingProfile.php`, and `src/API/OnboardingTasks.php` respectively.
-* POST `/wc-admin/plugins/install` - Install requested plugins.
-* GET `/wc-admin/plugins/active` - Returns a list of the currently active plugins.
-* POST `/wc-admin/plugins/activate` - Activates the requested plugins. Multiple plugins can be passed to activate at once.
-* GET `/wc-admin/plugins/connect-jetpack` - Generates a URL for connecting to Jetpack. A `redirect_url` is accepted, which is used upon a successful connection.
-* POST `/wc-admin/plugins/request-wccom-connect` - Generates a URL for the WooCommerce.com connection process.
-* POST `/wc-admin/plugins/finish-wccom-connect` - Finishes the WooCommerce.com connection process by storing the received access token.
-* POST `/wc-admin/plugins/connect-square` - Generates a URL for connecting to Square during the payments task.
-* GET `/wc-admin/onboarding/profile` - Returns the information gathered during the profile wizard. See the `woocommerce_onboarding_profile_properties` array for a list of fields.
-* POST `/wc-admin/onboarding/profile` - Sets data for the profile wizard. See the `woocommerce_onboarding_profile_properties` array for a list of fields.
-* POST `/wc-admin/onboarding/tasks/import_sample_products` - Used for importing sample products during the appearance task.
-* POST `/wc-admin/onboarding/tasks/create_homepage` - Used for creating a homepage using Gutenberg templates.
+- POST `/wc-admin/plugins/install` - Install requested plugins.
+- GET `/wc-admin/plugins/active` - Returns a list of the currently active plugins.
+- POST `/wc-admin/plugins/activate` - Activates the requested plugins. Multiple plugins can be passed to activate at once.
+- GET `/wc-admin/plugins/connect-jetpack` - Generates a URL for connecting to Jetpack. A `redirect_url` is accepted, which is used upon a successful connection.
+- POST `/wc-admin/plugins/request-wccom-connect` - Generates a URL for the WooCommerce.com connection process.
+- POST `/wc-admin/plugins/finish-wccom-connect` - Finishes the WooCommerce.com connection process by storing the received access token.
+- POST `/wc-admin/plugins/connect-square` - Generates a URL for connecting to Square during the payments task.
+- GET `/wc-admin/onboarding/profile` - Returns the information gathered during the profile wizard. See the `woocommerce_onboarding_profile_properties` array for a list of fields.
+- POST `/wc-admin/onboarding/profile` - Sets data for the profile wizard. See the `woocommerce_onboarding_profile_properties` array for a list of fields.
+- POST `/wc-admin/onboarding/tasks/import_sample_products` - Used for importing sample products during the appearance task.
+- POST `/wc-admin/onboarding/tasks/create_homepage` - Used for creating a homepage using Gutenberg templates.
## Onboarding filters
-* `woocommerce_admin_onboarding_profile_properties` filters the properties we track as part of the profile wizard (such as information from store/business details steps). When the `completed` property is set to true, the profile wizard is completely dismissed and hidden.
-* `woocommerce_admin_onboarding_industries` filters the list of allowed industries displayed in the profile wizard.
-* `woocommerce_admin_onboarding_industry_image` filters the images used for homepage templates in the appearance task. When creating a homepage, example images are used based on industry. These images are stored in `images/onboarding`.
-* `woocommerce_admin_onboarding_product_types` filters the product types displayed in the profile wizard.
-* `woocommerce_admin_onboarding_plugins_whitelist` filters the list of plugins that can installed & activated via onboarding. This acts as a whitelist so only certain plugins can be used via the `/wc-admin/onboarding/profile/install` and `/wc-admin/onboarding/profile/activate` endpoints.
-* `woocommerce_admin_onboarding_themes` filters the themes displayed in the profile wizard.
-* `woocommerce_admin_onboarding_jetpack_connect_redirect_url` filters the Jetpack connection redirect URL outlined in the Jetpack connection section below.
-* `woocommerce_admin_onboarding_task_list` filters the list of tasks on the task list dashboard. This allows extensions to add new tasks. See [the extension docs](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce-admin/docs/examples/extensions) for an example of how to do this.
-* `woocommerce_rest_onboarding_profile_collection_params` filters the collection parameters for requests to `/wc-admin/onboarding/profile`.
-* `woocommerce_rest_onboarding_profile_object_query` filters the query arguments for requests to `/wc-admin/onboarding/profile`.
-* `woocommerce_rest_onboarding_prepare_onboarding_profile` filters the response for requests to `/wc-admin/onboarding/profile`.
+- `woocommerce_admin_onboarding_profile_properties` filters the properties we track as part of the profile wizard (such as information from store/business details steps). When the `completed` property is set to true, the profile wizard is completely dismissed and hidden.
+- `woocommerce_admin_onboarding_industries` filters the list of allowed industries displayed in the profile wizard.
+- `woocommerce_admin_onboarding_industry_image` filters the images used for homepage templates in the appearance task. When creating a homepage, example images are used based on industry. These images are stored in `images/onboarding`.
+- `woocommerce_admin_onboarding_product_types` filters the product types displayed in the profile wizard.
+- `woocommerce_admin_onboarding_plugins_whitelist` filters the list of plugins that can installed & activated via onboarding. This acts as a whitelist so only certain plugins can be used via the `/wc-admin/onboarding/profile/install` and `/wc-admin/onboarding/profile/activate` endpoints.
+- `woocommerce_admin_onboarding_themes` filters the themes displayed in the profile wizard.
+- `woocommerce_admin_onboarding_jetpack_connect_redirect_url` filters the Jetpack connection redirect URL outlined in the Jetpack connection section below.
+- `woocommerce_admin_onboarding_task_list` filters the list of tasks on the task list dashboard. This allows extensions to add new tasks. See [the extension docs](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce-admin/docs/examples/extensions) for an example of how to do this.
+- `woocommerce_rest_onboarding_profile_collection_params` filters the collection parameters for requests to `/wc-admin/onboarding/profile`.
+- `woocommerce_rest_onboarding_profile_object_query` filters the query arguments for requests to `/wc-admin/onboarding/profile`.
+- `woocommerce_rest_onboarding_prepare_onboarding_profile` filters the response for requests to `/wc-admin/onboarding/profile`.
## Options and settings
A few new WordPress options have been introduced to store information and settings during setup. It may be necessary to manual delete these options from your `wp_options` database to test a certain task or feature.
-
-* `woocommerce_task_list_hidden_lists`. This option houses the task lists that have been hidden from view by the user.
-* `woocommerce_task_list_welcome_modal_dismissed`. This option is used to show a congratulations modal during the transition between the profile wizard and task list.
+- `woocommerce_task_list_hidden_lists`. This option houses the task lists that have been hidden from view by the user.
We also use existing options from WooCommerce Core or extensions like WooCommerce Shipping & Tax or Stripe. The list below may not be complete, as new tasks are introduced, but you can generally find usage of these by searching for the [getOptions selector](https://github.com/woocommerce/woocommerce/search?q=getOptions&unscoped_q=getOptions).
-* `woocommerce_setup_jetpack_opted_in` and `wc_connect_options` are both used to control Jetpack's Terms of Service opt-in, which is necessary to set for a user during the connection process, so that they can use services like automated tax rates.
-* `woocommerce_allow_tracking` is used to control Tracks opt-in, allowing us to gather usage data from WooCommerce Admin and WooCommerce core.
-* `woocommerce_demo_store` and `woocommerce_demo_store_notice` are used on the appearance task for the store notice step.
-* `woocommerce_ppec_paypal_settings` and `woocommerce_stripe_settings` are used in the payments task and connection steps.
+- `woocommerce_setup_jetpack_opted_in` and `wc_connect_options` are both used to control Jetpack's Terms of Service opt-in, which is necessary to set for a user during the connection process, so that they can use services like automated tax rates.
+- `woocommerce_allow_tracking` is used to control Tracks opt-in, allowing us to gather usage data from WooCommerce Admin and WooCommerce core.
+- `woocommerce_demo_store` and `woocommerce_demo_store_notice` are used on the appearance task for the store notice step.
+- `woocommerce_ppec_paypal_settings` and `woocommerce_stripe_settings` are used in the payments task and connection steps.
## WooCommerce.com Connection
@@ -67,8 +65,8 @@ To make the connection from the new onboarding experience possible, we build our
Both of these endpoints use WooCommerce Core's `WC_Helper_API` directly. The main difference with our connection (compared to the connection on the subscriptions page) is the addition of two additional query string parameters:
-* `wccom-from=onboarding`, which is used to tell WooCommerce.com & WordPress.com that we are connecting from the new onboarding flow. This parameter is passed from the user's site to WooCommerce.com and finally into Calypso, so that the Calypso login and sign-up screens match the rest of the profile wizard [https://github.com/Automattic/wp-calypso/pull/35193](https://github.com/Automattic/wp-calypso/pull/35193). Without this parameter, you would end up on the existing WooCommerce OAuth screen.
-* `calypso_env` allows us to load different versions of Calypso when testing. See the Calypso section below.
+- `wccom-from=onboarding`, which is used to tell WooCommerce.com & WordPress.com that we are connecting from the new onboarding flow. This parameter is passed from the user's site to WooCommerce.com and finally into Calypso, so that the Calypso login and sign-up screens match the rest of the profile wizard [https://github.com/Automattic/wp-calypso/pull/35193](https://github.com/Automattic/wp-calypso/pull/35193). Without this parameter, you would end up on the existing WooCommerce OAuth screen.
+- `calypso_env` allows us to load different versions of Calypso when testing. See the Calypso section below.
To disconnect from WooCommerce.com, go to `WooCommerce > Extensions > WooCommerce.com Subscriptions > Connected to WooCommerce.com > Disconnect`.
@@ -80,8 +78,8 @@ We have a special WordPress.com connection flow designed specifically for WooCom
We use the Jetpack Connection package's `Manager::get_authorization_url()` function directly, but add the following two query parameters:
-* `calypso_env`, which allows us to load different versions of Calypso when testing. See the Calypso section below.
-* `from=woocommerce-services`, which is used to conditionally show the WooCommerce-themed authorization process [https://github.com/Automattic/wp-calypso/pull/35193](https://github.com/Automattic/wp-calypso/pull/35193). Without this parameter, you would end up in the normal Jetpack authorization flow.
+- `calypso_env`, which allows us to load different versions of Calypso when testing. See the Calypso section below.
+- `from=woocommerce-services`, which is used to conditionally show the WooCommerce-themed authorization process [https://github.com/Automattic/wp-calypso/pull/35193](https://github.com/Automattic/wp-calypso/pull/35193). Without this parameter, you would end up in the normal Jetpack authorization flow.
The user is prompted to install and connect to Jetpack as the first step of the profile wizard. If the user hasn't connected when they arrive at the task list, we also prompt them on certain tasks to make the setup process easier, such as the shipping and tax steps.
@@ -97,19 +95,18 @@ By default, a merchant will end up on a production version of Calypso [https://w
To change the value of `calypso_env`, set `WOOCOMMERCE_CALYPSO_ENVIRONMENT` to one of the following values in your `wp-config.php`:
-* `production` which will send you to `https://wordpress.com`
-* `development` which will send you to `http://calypso.localhost:3000/`
-* `wpcalypso` which will send you to `http://wpcalypso.wordpress.com/`
-* `horizon` which will send you to `https://horizon.wordpress.com`
-* `stage` which will send you to `https://wordpress.com` (you must be proxied)
+- `production` which will send you to `https://wordpress.com`
+- `development` which will send you to `http://calypso.localhost:3000/`
+- `wpcalypso` which will send you to `http://wpcalypso.wordpress.com/`
+- `horizon` which will send you to `https://horizon.wordpress.com`
+- `stage` which will send you to `https://wordpress.com` (you must be proxied)
### Feature Flags
Logic for the Calypso flows are gated behind two separate [Calypso feature flags](https://github.com/Automattic/wp-calypso/tree/trunk/config#feature-flags). Since Calypso's login, sign-up, and Jetpack authentication code is spread throughout a few different files, searching for these feature flags is the best way to locate parts of the flow for development.
-* [`woocommerce/onboarding-oauth`](https://github.com/Automattic/wp-calypso/search?q=woocommerce%2Fonboarding-oauth&unscoped_q=woocommerce%2Fonboarding-oauth), which enables the updated WooCommerce.com connection flow.
-* [`jetpack/connect/woocommerce`](https://github.com/Automattic/wp-calypso/search?q=%22jetpack%2Fconnect%2Fwoocommerce%22&unscoped_q=%22jetpack%2Fconnect%2Fwoocommerce%22), which enables the updated Jetpack connection flow.
-
+- [`woocommerce/onboarding-oauth`](https://github.com/Automattic/wp-calypso/search?q=woocommerce%2Fonboarding-oauth&unscoped_q=woocommerce%2Fonboarding-oauth), which enables the updated WooCommerce.com connection flow.
+- [`jetpack/connect/woocommerce`](https://github.com/Automattic/wp-calypso/search?q=%22jetpack%2Fconnect%2Fwoocommerce%22&unscoped_q=%22jetpack%2Fconnect%2Fwoocommerce%22), which enables the updated Jetpack connection flow.
### Testing
diff --git a/plugins/woocommerce/changelog/remove-welcome-modal b/plugins/woocommerce/changelog/remove-welcome-modal
new file mode 100644
index 00000000000..b0a13b6cca7
--- /dev/null
+++ b/plugins/woocommerce/changelog/remove-welcome-modal
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Clean up welcome modal code
diff --git a/plugins/woocommerce/src/Admin/API/Options.php b/plugins/woocommerce/src/Admin/API/Options.php
index a787c2220fe..882b7695a43 100644
--- a/plugins/woocommerce/src/Admin/API/Options.php
+++ b/plugins/woocommerce/src/Admin/API/Options.php
@@ -179,8 +179,6 @@ class Options extends \WC_REST_Data_Controller {
'woocommerce_setting_payments_recommendations_hidden',
'woocommerce_navigation_favorites_tooltip_hidden',
'woocommerce_admin_transient_notices_queue',
- 'woocommerce_task_list_welcome_modal_dismissed',
- 'woocommerce_welcome_from_calypso_modal_dismissed',
'woocommerce_task_list_hidden',
'woocommerce_task_list_complete',
'woocommerce_extended_task_list_hidden',