From 7dc26a8c6601ecc69f30f401028f62124e8ba116 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 10 Sep 2024 11:29:14 +0800 Subject: [PATCH] Clean up 'Profile Wizard' code (#51190) * Remove plugins/woocommerce-admin/client/profile-wizard * Clean up styles * Remove setup wizard hook reference * Add changelog * Remove e2e utils related to old setup wizard * Fix lint * Add changelog * Remove unused usage modal --- packages/js/e2e-utils/README.md | 8 +- .../changelog/cleanup-profiler-wizard | 4 + packages/js/e2e-utils/src/components.js | 146 --- packages/js/e2e-utils/src/flows/merchant.js | 58 +- packages/js/e2e-utils/src/old-flows.js | 5 - .../bin/hook-reference/data.json | 13 - .../client/layout/controller.js | 49 +- .../client/layout/footer/footer.scss | 4 - .../woocommerce-admin/client/layout/index.js | 21 - .../layout/transient-notices/style.scss | 10 - .../client/profile-wizard/header.js | 125 --- .../client/profile-wizard/index.js | 362 ------- .../business-details/data/employee-options.js | 31 - .../business-details/data/platform-options.js | 51 - .../business-details/data/product-options.js | 58 -- .../business-details/data/revenue-options.js | 100 -- .../data/selling-venue-options.js | 36 - .../selective-bundle/app-illustration.js | 140 --- .../flows/selective-bundle/index.js | 901 ------------------ .../selective-extensions-bundle/index.js | 412 -------- .../selective-extensions-bundle/style.scss | 82 -- .../selective-extensions-bundle/test/index.js | 156 --- .../flows/selective-bundle/style.scss | 32 - .../steps/business-details/index.js | 73 -- .../steps/business-details/style.scss | 10 - .../steps/business-details/test/index.js | 204 ---- .../client/profile-wizard/steps/industry.js | 350 ------- .../steps/product-types/index.js | 394 -------- .../steps/product-types/label.js | 100 -- .../steps/product-types/product-type.js | 98 -- .../steps/product-types/style.scss | 87 -- .../test/__snapshots__/index.js.snap | 393 -------- .../test/__snapshots__/product-type.js.snap | 95 -- .../steps/product-types/test/index.js | 140 --- .../steps/product-types/test/product-type.js | 58 -- .../profile-wizard/steps/skip-button.tsx | 115 --- .../steps/store-details/index.js | 522 ---------- .../steps/store-details/style.scss | 29 - .../test/__snapshots__/index.js.snap | 712 -------------- .../steps/store-details/test/index.js | 176 ---- .../profile-wizard/steps/usage-modal.js | 204 ---- .../client/profile-wizard/style.scss | 435 --------- .../profile-wizard/unsaved-changes-modal.js | 40 - .../components/WCPay/UsageModal.js | 2 +- .../components/WCPay/index.js | 1 - .../changelog/update-cleanup-profiler-wizard | 4 + 46 files changed, 38 insertions(+), 7008 deletions(-) create mode 100644 packages/js/e2e-utils/changelog/cleanup-profiler-wizard delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/header.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/data/employee-options.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/data/platform-options.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/data/product-options.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/data/revenue-options.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/data/selling-venue-options.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/app-illustration.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/style.scss delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/test/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/style.scss delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/style.scss delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/business-details/test/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/industry.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/product-types/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/product-types/label.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/product-types/product-type.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/product-types/style.scss delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/product-types/test/__snapshots__/index.js.snap delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/product-types/test/__snapshots__/product-type.js.snap delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/product-types/test/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/product-types/test/product-type.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/skip-button.tsx delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/__snapshots__/index.js.snap delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/style.scss delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/unsaved-changes-modal.js create mode 100644 plugins/woocommerce/changelog/update-cleanup-profiler-wizard diff --git a/packages/js/e2e-utils/README.md b/packages/js/e2e-utils/README.md index 12c9abe07ec..93f898daf37 100644 --- a/packages/js/e2e-utils/README.md +++ b/packages/js/e2e-utils/README.md @@ -12,7 +12,8 @@ npm install @woocommerce/e2e-utils --save ## Usage Example: -~~~js + +```js import { shopper, merchant, @@ -29,7 +30,7 @@ describe( 'Cart page', () => { await expect( page ).toMatchElement( '.cart-empty', { text: 'Your cart is currently empty.' } ); } ); } ); -~~~ +``` ### Retries @@ -86,7 +87,6 @@ This package provides support for enabling retries in tests: |----------|-------------|------------| | `addDownloadableProductPermission` | `productName` | Add a downloadable permission for product in order | | `collapseAdminMenu` | `collapse` | Collapse or expand the WP admin menu | -| `dismissOnboardingWizard` | | Dismiss the onboarding wizard if present | | `goToOrder` | `orderId` | Go to view a single order | | `goToProduct` | `productId` | Go to view a single product | | `login` | | Log in as merchant | @@ -100,7 +100,6 @@ This package provides support for enabling retries in tests: | `openPermalinkSettings` | | Go to Settings -> Permalinks | | `openPlugins` | | Go to the Plugins screen | | `openSettings` | | Go to WooCommerce -> Settings | -| `runSetupWizard` | | Open the onboarding profiler | | `updateOrderStatus` | `orderId, status` | Update the status of an order | | `openEmailLog` | | Open the WP Mail Log page | | `openAnalyticsPage` | | Open any Analytics page | @@ -210,7 +209,6 @@ There is a general utilities object `utils` with the following functions: | `clickFilter` | `selector` | helper method that clicks on a list page filter | | `clickTab` | `tabName` | Click on a WooCommerce -> Settings tab | | `clickUpdateOrder` | `noticeText`, `waitForSave` | Helper method to click the Update button on the order details page | -| `completeOnboardingWizard` | | completes the onboarding wizard with some default settings | | `createCoupon` | `couponAmount`, `couponType` | creates a basic coupon. Default amount is 5. Default coupon type is fixed discount. Returns the generated coupon code. | | `createGroupedProduct` | | creates a grouped product for the grouped product tests. Returns the product id. | | `createSimpleDownloadableProduct` | `name, downloadLimit, downloadName, price` | Create a simple downloadable product | diff --git a/packages/js/e2e-utils/changelog/cleanup-profiler-wizard b/packages/js/e2e-utils/changelog/cleanup-profiler-wizard new file mode 100644 index 00000000000..8a55c777336 --- /dev/null +++ b/packages/js/e2e-utils/changelog/cleanup-profiler-wizard @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Remove Profile Wizard releated utils diff --git a/packages/js/e2e-utils/src/components.js b/packages/js/e2e-utils/src/components.js index 911d8d51a54..b641c674869 100644 --- a/packages/js/e2e-utils/src/components.js +++ b/packages/js/e2e-utils/src/components.js @@ -60,151 +60,6 @@ const waitAndClickPrimary = async ( waitForNetworkIdle = true ) => { await page.waitForNavigation( { waitUntil: 'networkidle0' } ); } }; -/** - * Complete onboarding wizard. - */ -const completeOnboardingWizard = async () => { - // Store Details section - await merchant.runSetupWizard(); - - // Fill store's address - first line - await expect( page ).toFill( - '#inspector-text-control-0', - config.get( 'addresses.admin.store.addressfirstline' ) - ); - - // Fill store's address - second line - await expect( page ).toFill( - '#inspector-text-control-1', - config.get( 'addresses.admin.store.addresssecondline' ) - ); - - // Fill country and state where the store is located - await expect( page ).toFill( - '.woocommerce-select-control__control-input', - config.get( 'addresses.admin.store.countryandstate' ) - ); - - // Fill the city where the store is located - await expect( page ).toFill( - '#inspector-text-control-2', - config.get( 'addresses.admin.store.city' ) - ); - - // Fill postcode of the store - await expect( page ).toFill( - '#inspector-text-control-3', - config.get( 'addresses.admin.store.postcode' ) - ); - - // Verify that checkbox next to "I'm setting up a store for a client" is not selected - await verifyCheckboxIsUnset( '.components-checkbox-control__input' ); - - // Wait for "Continue" button to become active - await page.waitForSelector( 'button.is-primary:not(:disabled)' ); - - // Click on "Continue" button to move to the next step - await page.click( 'button.is-primary', { text: 'Continue' } ); - - // Wait for usage tracking pop-up window to appear on a new site - const usageTrackingHeader = await page.$( - '.components-modal__header-heading' - ); - if ( usageTrackingHeader ) { - await expect( page ).toMatchElement( - '.components-modal__header-heading', - { - text: 'Build a better WooCommerce', - } - ); - - // Query for "No Thanks" buttons - const continueButtons = await page.$$( - '.woocommerce-usage-modal__actions button.is-secondary' - ); - expect( continueButtons ).toHaveLength( 1 ); - - await continueButtons[ 0 ].click(); - await expect( page ).toMatchElement( - '.woocommerce-usage-modal__actions button.is-secondary.is-busy' - ); - await expect( page ).not.toMatchElement( - '.woocommerce-usage-modal__actions button.is-primary:disabled' - ); - } - await page.waitForNavigation( { waitUntil: 'networkidle0' } ); - - // Industry section - - // Query for the industries checkboxes - const industryCheckboxes = await page.$$( - '.components-checkbox-control__input' - ); - expect( industryCheckboxes ).toHaveLength( 8 ); - - // Select all industries including "Other" - for ( let i = 0; i < 8; i++ ) { - await industryCheckboxes[ i ].click(); - } - - // Fill "Other" industry - await expect( page ).toFill( - '.components-text-control__input', - config.get( 'onboardingwizard.industry' ) - ); - - // Wait for "Continue" button to become active - await waitAndClickPrimary(); - - // Product types section - - // Query for the product types checkboxes - const productTypesCheckboxes = await page.$$( - '.components-checkbox-control__input' - ); - expect( productTypesCheckboxes ).toHaveLength( 7 ); - - // Select Physical and Downloadable products - for ( let i = 1; i < 2; i++ ) { - await productTypesCheckboxes[ i ].click(); - } - - // Wait for "Continue" button to become active - await waitAndClickPrimary(); - - // Business Details section - - // Temporarily add delay to reduce test flakiness - await page.waitFor( 2000 ); - - // Query for the s - const selectControls = await page.$$( '.woocommerce-select-control' ); - expect( selectControls ).toHaveLength( 2 ); - - // Fill the number of products you plan to sell - await selectControls[ 0 ].click(); - await page.waitForSelector( '.woocommerce-select-control__control' ); - await expect( page ).toClick( '.woocommerce-select-control__option', { - text: config.get( 'onboardingwizard.numberofproducts' ), - } ); - - // Fill currently selling elsewhere - await selectControls[ 1 ].click(); - await page.waitForSelector( '.woocommerce-select-control__control' ); - await expect( page ).toClick( '.woocommerce-select-control__option', { - text: config.get( 'onboardingwizard.sellingelsewhere' ), - } ); - - // Wait for "Continue" button to become active - await waitAndClickPrimary( false ); - - // Skip installing extensions - await unsetCheckbox( '.components-checkbox-control__input' ); - await verifyCheckboxIsUnset( '.components-checkbox-control__input' ); - await waitAndClickPrimary(); - - // End of onboarding wizard -}; /** * Create simple product. @@ -668,7 +523,6 @@ const deleteAllShippingZones = async () => { }; export { - completeOnboardingWizard, createSimpleProduct, createVariableProduct, createGroupedProduct, diff --git a/packages/js/e2e-utils/src/flows/merchant.js b/packages/js/e2e-utils/src/flows/merchant.js index d312ad64686..0bde1222503 100644 --- a/packages/js/e2e-utils/src/flows/merchant.js +++ b/packages/js/e2e-utils/src/flows/merchant.js @@ -31,8 +31,6 @@ const { WP_ADMIN_NEW_PRODUCT, WP_ADMIN_PERMALINK_SETTINGS, WP_ADMIN_PLUGINS, - WP_ADMIN_SETUP_WIZARD, - WP_ADMIN_WC_HOME, WP_ADMIN_WC_SETTINGS, WP_ADMIN_WC_EXTENSIONS, WP_ADMIN_WC_HELPER, @@ -42,7 +40,6 @@ const { WP_ADMIN_IMPORT_PRODUCTS, WP_ADMIN_PLUGIN_INSTALL, WP_ADMIN_WP_UPDATES, - IS_RETEST_MODE, } = require( './constants' ); const { getSlug, waitForTimeout } = require( './utils' ); @@ -83,7 +80,6 @@ const merchant = { await Promise.all( [ page.click( 'input[type=submit]' ), page.waitForNavigation( { waitUntil: 'networkidle0' } ), - merchant.dismissOnboardingWizard(), ] ); }, @@ -173,15 +169,6 @@ const merchant = { } ); }, - runSetupWizard: async () => { - const setupWizard = IS_RETEST_MODE - ? WP_ADMIN_SETUP_WIZARD - : WP_ADMIN_WC_HOME; - await page.goto( setupWizard, { - waitUntil: 'networkidle0', - } ); - }, - goToOrder: async ( orderId ) => { await page.goto( WP_ADMIN_SINGLE_CPT_VIEW( orderId ), { waitUntil: 'networkidle0', @@ -290,9 +277,10 @@ const merchant = { revokeDownloadableProductPermission: async ( productName ) => { // Revoke downloadable product permission - const permission = await expect( - page - ).toMatchElement( 'div.wc-metabox > h3', { text: productName } ); + const permission = await expect( page ).toMatchElement( + 'div.wc-metabox > h3', + { text: productName } + ); await expect( permission ).toClick( 'button.revoke_access' ); // Wait for auto save @@ -625,10 +613,10 @@ const merchant = { }, /* Uploads and activates a plugin located at the provided file path. This will also deactivate and delete the plugin if it exists. - * - * @param {string} pluginFilePath The location of the plugin zip file to upload. - * @param {string} pluginName The name of the plugin. For example, `WooCommerce`. - */ + * + * @param {string} pluginFilePath The location of the plugin zip file to upload. + * @param {string} pluginName The name of the plugin. For example, `WooCommerce`. + */ uploadAndActivatePlugin: async ( pluginFilePath, pluginName ) => { await merchant.openPlugins(); @@ -647,8 +635,7 @@ const merchant = { await page.click( 'a.upload-view-toggle' ); await expect( page ).toMatchElement( 'p.install-help', { - text: - 'If you have a plugin in a .zip format, you may install or update it by uploading it here.', + text: 'If you have a plugin in a .zip format, you may install or update it by uploading it here.', } ); const uploader = await page.$( 'input[type=file]' ); @@ -753,33 +740,6 @@ const merchant = { } }, - /** - * Dismiss the onboarding wizard if it is open. - */ - dismissOnboardingWizard: async () => { - let waitForNav = false; - const skipButton = await page.$( - '.woocommerce-profile-wizard__footer-link' - ); - if ( skipButton ) { - await skipButton.click(); - waitForNav = true; - } - - // Dismiss usage tracking pop-up window if it appears on a new site - const usageTrackingHeader = await page.$( - '.woocommerce-usage-modal button.is-secondary' - ); - if ( usageTrackingHeader ) { - await usageTrackingHeader.click(); - waitForNav = true; - } - - if ( waitForNav ) { - await page.waitForNavigation( { waitUntil: 'networkidle0' } ); - } - }, - /** * Expand or collapse the WP admin menu. * diff --git a/packages/js/e2e-utils/src/old-flows.js b/packages/js/e2e-utils/src/old-flows.js index 4afde090920..c59a7d6e74a 100644 --- a/packages/js/e2e-utils/src/old-flows.js +++ b/packages/js/e2e-utils/src/old-flows.js @@ -172,11 +172,6 @@ const StoreOwnerFlow = { StoreOwnerFlowDeprecated(); await merchant.openSettings( tab, section ); }, - - runSetupWizard: async () => { - StoreOwnerFlowDeprecated(); - await merchant.runSetupWizard(); - }, }; export { CustomerFlow, StoreOwnerFlow }; diff --git a/plugins/woocommerce-admin/bin/hook-reference/data.json b/plugins/woocommerce-admin/bin/hook-reference/data.json index 8693d4a18e4..67bdf3e86bd 100644 --- a/plugins/woocommerce-admin/bin/hook-reference/data.json +++ b/plugins/woocommerce-admin/bin/hook-reference/data.json @@ -810,19 +810,6 @@ } ] }, - { - "description": "Filter for Onboarding steps configuration.", - "sourceFile": "https://github.com/woocommerce/woocommerce-admin/blob/46c8304c425749dfc715b38e59f56198b05e7b46/client/profile-wizard/index.js#L140-L145", - "name": "woocommerce_admin_profile_wizard_steps", - "type": "filter", - "params": [ - { - "name": "steps", - "type": "Array.", - "description": "Array of steps for Onboarding Wizard." - } - ] - }, { "description": "Store Management extensions links", "sourceFile": "https://github.com/woocommerce/woocommerce-admin/blob/46c8304c425749dfc715b38e59f56198b05e7b46/client/store-management-links/index.js#L171-L176", diff --git a/plugins/woocommerce-admin/client/layout/controller.js b/plugins/woocommerce-admin/client/layout/controller.js index dd686f064c3..d1c0a8d1a3d 100644 --- a/plugins/woocommerce-admin/client/layout/controller.js +++ b/plugins/woocommerce-admin/client/layout/controller.js @@ -60,16 +60,13 @@ const MarketingOverviewMultichannel = lazy( () => const Marketplace = lazy( () => import( /* webpackChunkName: "marketplace" */ '../marketplace' ) ); -const ProfileWizard = lazy( () => - import( /* webpackChunkName: "profile-wizard" */ '../profile-wizard' ) -); const CoreProfiler = lazy( () => import( /* webpackChunkName: "core-profiler" */ '../core-profiler' ) ); const SettingsGroup = lazy( () => - import( /* webpackChunkName: "profile-wizard" */ '../settings' ) + import( /* webpackChunkName: "settings" */ '../settings' ) ); const WCPaymentsWelcomePage = lazy( () => import( @@ -256,34 +253,22 @@ export const getPages = () => { } ); if ( window.wcAdminFeatures.onboarding ) { - if ( ! window.wcAdminFeatures[ 'core-profiler' ] ) { - pages.push( { - container: ProfileWizard, - path: '/setup-wizard', - breadcrumbs: [ - ...initialBreadcrumbs, - __( 'Setup Wizard', 'woocommerce' ), - ], - capability: 'manage_woocommerce', - } ); - } else { - pages.push( { - container: CoreProfiler, - path: '/setup-wizard', - breadcrumbs: [ - ...initialBreadcrumbs, - __( 'Profiler', 'woocommerce' ), - ], - capability: 'manage_woocommerce', - layout: { - header: false, - footer: false, - showNotices: true, - showStoreAlerts: false, - showPluginArea: false, - }, - } ); - } + pages.push( { + container: CoreProfiler, + path: '/setup-wizard', + breadcrumbs: [ + ...initialBreadcrumbs, + __( 'Profiler', 'woocommerce' ), + ], + capability: 'manage_woocommerce', + layout: { + header: false, + footer: false, + showNotices: true, + showStoreAlerts: false, + showPluginArea: false, + }, + } ); } if ( window.wcAdminFeatures[ 'core-profiler' ] ) { diff --git a/plugins/woocommerce-admin/client/layout/footer/footer.scss b/plugins/woocommerce-admin/client/layout/footer/footer.scss index 6f962779f54..e1e1aa93a3c 100644 --- a/plugins/woocommerce-admin/client/layout/footer/footer.scss +++ b/plugins/woocommerce-admin/client/layout/footer/footer.scss @@ -9,10 +9,6 @@ bottom: -1px; /* to hide the border when no visible children */ z-index: 1001; /* on top of #wp-content-editor-tools */ - .woocommerce-profile-wizard__body & { - width: 100%; - } - @include breakpoint("782px-960px") { width: calc(100% - 36px); } diff --git a/plugins/woocommerce-admin/client/layout/index.js b/plugins/woocommerce-admin/client/layout/index.js index 7b7986343bd..65eac2013a4 100644 --- a/plugins/woocommerce-admin/client/layout/index.js +++ b/plugins/woocommerce-admin/client/layout/index.js @@ -58,12 +58,6 @@ const StoreAlerts = lazy( () => import( /* webpackChunkName: "store-alerts" */ './store-alerts' ) ); -const WCPayUsageModal = lazy( () => - import( - /* webpackChunkName: "wcpay-usage-modal" */ '../task-lists/fills/PaymentGatewaySuggestions/components/WCPay/UsageModal' - ) -); - export class PrimaryLayout extends Component { render() { const { @@ -163,15 +157,6 @@ function _Layout( { }, 0 ); }, [ location?.pathname ] ); - function isWCPaySettingsPage() { - const { page: queryPage, section, tab } = getQuery(); - return ( - queryPage === 'wc-settings' && - tab === 'checkout' && - section === 'woocommerce_payments' - ); - } - const { breadcrumbs, layout = { header: true, footer: true } } = page; const { header: showHeader = true, @@ -237,12 +222,6 @@ function _Layout( { ) } - - { isEmbedded && isWCPaySettingsPage() && ( - - - - ) } { showFooter &&