From a953904d8472cdb13909e06edfb887f0a3226a1b Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Mon, 17 Apr 2023 11:59:02 +0800 Subject: [PATCH] Remove theme step from onboarding wizard (#37671) * Remove theme step from onboarding wizard * Remove theme step from e2e tests * Deprecated "theme" prop from profileItem type * Add changelog * Remove theme product from dashboard * Update packages/js/data/src/onboarding/types.ts Co-authored-by: Ilyas Foo --------- Co-authored-by: Ilyas Foo --- .../changelog/update-remove-obw-theme-step | 4 + .../src/pages/OnboardingWizard.ts | 12 - .../src/sections/onboarding/ThemeSection.ts | 29 -- .../complete-onboarding-wizard.ts | 20 +- .../src/specs/tasks/purchase.ts | 35 -- .../changelog/update-remove-obw-theme-step | 4 + packages/js/data/src/onboarding/types.ts | 1 + packages/js/e2e-utils/src/components.js | 3 - .../client/dashboard/utils.js | 17 - .../client/profile-wizard/index.js | 9 - .../profile-wizard/steps/theme/index.js | 442 ------------------ .../profile-wizard/steps/theme/preview.js | 124 ----- .../profile-wizard/steps/theme/style.scss | 254 ---------- .../profile-wizard/steps/theme/uploader.js | 161 ------- .../changelog/update-remove-obw-theme-step | 4 + .../complete-onboarding-wizard.spec.js | 23 +- 16 files changed, 21 insertions(+), 1121 deletions(-) create mode 100644 packages/js/admin-e2e-tests/changelog/update-remove-obw-theme-step delete mode 100644 packages/js/admin-e2e-tests/src/sections/onboarding/ThemeSection.ts create mode 100644 packages/js/data/changelog/update-remove-obw-theme-step delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/theme/index.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/theme/preview.js delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss delete mode 100644 plugins/woocommerce-admin/client/profile-wizard/steps/theme/uploader.js create mode 100644 plugins/woocommerce/changelog/update-remove-obw-theme-step diff --git a/packages/js/admin-e2e-tests/changelog/update-remove-obw-theme-step b/packages/js/admin-e2e-tests/changelog/update-remove-obw-theme-step new file mode 100644 index 00000000000..4f26428d3c9 --- /dev/null +++ b/packages/js/admin-e2e-tests/changelog/update-remove-obw-theme-step @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Remove obw theme step tests diff --git a/packages/js/admin-e2e-tests/src/pages/OnboardingWizard.ts b/packages/js/admin-e2e-tests/src/pages/OnboardingWizard.ts index 839350adb30..ea7c1941ece 100644 --- a/packages/js/admin-e2e-tests/src/pages/OnboardingWizard.ts +++ b/packages/js/admin-e2e-tests/src/pages/OnboardingWizard.ts @@ -14,7 +14,6 @@ import { StoreDetails, StoreDetailsSection, } from '../sections/onboarding/StoreDetailsSection'; -import { ThemeSection } from '../sections/onboarding/ThemeSection'; import { BasePage } from './BasePage'; export class OnboardingWizard extends BasePage { @@ -24,7 +23,6 @@ export class OnboardingWizard extends BasePage { industry: IndustrySection; productTypes: ProductTypeSection; business: BusinessSection; - themes: ThemeSection; constructor( page: Page ) { super( page ); @@ -32,7 +30,6 @@ export class OnboardingWizard extends BasePage { this.industry = new IndustrySection( page ); this.productTypes = new ProductTypeSection( page ); this.business = new BusinessSection( page ); - this.themes = new ThemeSection( page ); } async skipStoreSetup(): Promise< void > { @@ -90,7 +87,6 @@ export class OnboardingWizard extends BasePage { productNumber: string; currentlySelling: string; }; - themeTitle?: string; } = {} ): Promise< void > { await this.navigate(); @@ -142,13 +138,5 @@ export class OnboardingWizard extends BasePage { await this.business.uncheckAllRecommendedBusinessFeatures(); await this.continue(); - await this.themes.isDisplayed(); - - // This navigates to the home screen - if ( options.themeTitle ) { - await this.themes.continueWithTheme( options.themeTitle ); - } else { - await this.themes.continueWithActiveTheme(); - } } } diff --git a/packages/js/admin-e2e-tests/src/sections/onboarding/ThemeSection.ts b/packages/js/admin-e2e-tests/src/sections/onboarding/ThemeSection.ts deleted file mode 100644 index 8439fa01fc8..00000000000 --- a/packages/js/admin-e2e-tests/src/sections/onboarding/ThemeSection.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Internal dependencies - */ -import { BasePage } from '../../pages/BasePage'; -import { waitForElementByText } from '../../utils/actions'; - -export class ThemeSection extends BasePage { - async isDisplayed(): Promise< void > { - await waitForElementByText( 'h2', 'Choose a theme' ); - await waitForElementByText( 'button', 'All themes' ); - } - - async continueWithActiveTheme(): Promise< void > { - await this.clickButtonWithText( 'Continue with my active theme' ); - } - - async continueWithTheme( themeTitle: string ): Promise< void > { - const title = await waitForElementByText( 'h2', themeTitle ); - const chooseButton = await title?.evaluateHandle( ( element ) => { - const card = element.closest( '.components-card' ); - return Array.from( card?.querySelectorAll( 'button' ) || [] ).find( - ( el ) => el.textContent === 'Choose' - ); - } ); - if ( chooseButton ) { - await chooseButton.asElement()?.click(); - } - } -} diff --git a/packages/js/admin-e2e-tests/src/specs/activate-and-setup/complete-onboarding-wizard.ts b/packages/js/admin-e2e-tests/src/specs/activate-and-setup/complete-onboarding-wizard.ts index 5231ab23351..1ddf0deb86a 100644 --- a/packages/js/admin-e2e-tests/src/specs/activate-and-setup/complete-onboarding-wizard.ts +++ b/packages/js/admin-e2e-tests/src/specs/activate-and-setup/complete-onboarding-wizard.ts @@ -107,11 +107,6 @@ export const testAdminOnboardingWizard = () => { await profileWizard.continue(); } ); - it( 'can complete the theme selection section', async () => { - await profileWizard.themes.isDisplayed(); - await profileWizard.themes.continueWithActiveTheme(); - } ); - it( 'can select the right currency on settings page related to the onboarding country', async () => { const settingsScreen = new WcSettings( page ); await settingsScreen.navigate(); @@ -185,7 +180,7 @@ export const testSelectiveBundleWCPay = () => { await profileWizard.continue(); } ); - it( 'can choose not to install any extensions', async () => { + it( 'can choose not to install any extensions, and finish the rest of the wizard successfully', async () => { await profileWizard.business.freeFeaturesIsDisplayed(); // Add WC Pay check await profileWizard.business.expandRecommendedBusinessFeatures(); @@ -198,13 +193,6 @@ export const testSelectiveBundleWCPay = () => { await profileWizard.continue(); } ); - it( 'can finish the rest of the wizard successfully', async () => { - await profileWizard.themes.isDisplayed(); - - // This navigates to the home screen - await profileWizard.themes.continueWithActiveTheme(); - } ); - it( 'should display the choose payments task, and not the woocommerce payments task', async () => { const homescreen = new WcHomescreen( page ); await homescreen.isDisplayed(); @@ -333,11 +321,8 @@ export const testDifferentStoreCurrenciesWCPay = () => { } await profileWizard.business.uncheckAllRecommendedBusinessFeatures(); - await profileWizard.continue(); - await profileWizard.themes.isDisplayed(); - // This navigates to the home screen - await profileWizard.themes.continueWithActiveTheme(); + await profileWizard.continue(); } ); it( `can select ${ spec.expectedCurrency } as the currency for ${ spec.countryRegion }`, async () => { @@ -583,7 +568,6 @@ export const testBusinessDetailsForm = () => { await profileWizard.business.expandRecommendedBusinessFeatures(); await profileWizard.business.uncheckAllRecommendedBusinessFeatures(); await profileWizard.continue(); - await profileWizard.themes.isDisplayed(); } ); } ); }; diff --git a/packages/js/admin-e2e-tests/src/specs/tasks/purchase.ts b/packages/js/admin-e2e-tests/src/specs/tasks/purchase.ts index 610234e8d45..b2e1c0b5286 100644 --- a/packages/js/admin-e2e-tests/src/specs/tasks/purchase.ts +++ b/packages/js/admin-e2e-tests/src/specs/tasks/purchase.ts @@ -59,40 +59,5 @@ export const testAdminPurchaseSetupTask = () => { ).toBeDefined(); } ); } ); - - describe( 'selecting paid theme', () => { - beforeAll( async () => { - await resetWooCommerceState(); - - await profileWizard.navigate(); - await profileWizard.walkThroughAndCompleteOnboardingWizard( { - themeTitle: 'Blooms', - } ); - - await homeScreen.isDisplayed(); - await homeScreen.possiblyDismissWelcomeModal(); - } ); - - it( 'should display add to my store task', async () => { - expect( - await getElementByText( '*', 'Add Blooms to my store' ) - ).toBeDefined(); - } ); - - it( 'should show paid features modal with option to buy now', async () => { - const task = await getElementByText( - '*', - 'Add Blooms to my store' - ); - await task?.click(); - await waitForElementByText( - 'h1', - 'Would you like to add the following paid features to your store now?' - ); - expect( - await getElementByText( 'button', 'Buy now' ) - ).toBeDefined(); - } ); - } ); } ); }; diff --git a/packages/js/data/changelog/update-remove-obw-theme-step b/packages/js/data/changelog/update-remove-obw-theme-step new file mode 100644 index 00000000000..6c90506fe9a --- /dev/null +++ b/packages/js/data/changelog/update-remove-obw-theme-step @@ -0,0 +1,4 @@ +Significance: minor +Type: dev + +Deprecate "theme" prop from profileItem type diff --git a/packages/js/data/src/onboarding/types.ts b/packages/js/data/src/onboarding/types.ts index 7cbf182201c..953ecf5ce0c 100644 --- a/packages/js/data/src/onboarding/types.ts +++ b/packages/js/data/src/onboarding/types.ts @@ -129,6 +129,7 @@ export type ProfileItems = { selling_venues?: string | null; setup_client?: boolean | null; skipped?: boolean | null; + /** @deprecated This is always null, the theme step has been removed since WC 7.7. */ theme?: string | null; wccom_connected?: boolean | null; is_agree_marketing?: boolean | null; diff --git a/packages/js/e2e-utils/src/components.js b/packages/js/e2e-utils/src/components.js index e88a5a4deb0..7530a102897 100644 --- a/packages/js/e2e-utils/src/components.js +++ b/packages/js/e2e-utils/src/components.js @@ -203,9 +203,6 @@ const completeOnboardingWizard = async () => { await verifyCheckboxIsUnset( '.components-checkbox-control__input' ); await waitAndClickPrimary(); - // Theme section - await waitAndClickPrimary(); - // End of onboarding wizard if ( IS_RETEST_MODE ) { // Home screen modal can't be reset via the rest api. diff --git a/plugins/woocommerce-admin/client/dashboard/utils.js b/plugins/woocommerce-admin/client/dashboard/utils.js index a6d06a2cf46..26ae5b3821c 100644 --- a/plugins/woocommerce-admin/client/dashboard/utils.js +++ b/plugins/woocommerce-admin/client/dashboard/utils.js @@ -147,23 +147,6 @@ export function getProductList( } } ); - const onboarding = getAdminSetting( 'onboarding', {} ); - let theme = null; - if ( onboarding && onboarding.themes ) { - theme = onboarding.themes.find( - ( themeData ) => themeData.slug === profileItems.theme - ); - } - - if ( - theme && - theme.id && - getPriceValue( theme.price ) > 0 && - ( includeInstalledItems || ! theme.is_installed ) - ) { - productList.push( theme ); - } - return productList; } diff --git a/plugins/woocommerce-admin/client/profile-wizard/index.js b/plugins/woocommerce-admin/client/profile-wizard/index.js index 5ef6e2e42a4..73bbbe3b9eb 100644 --- a/plugins/woocommerce-admin/client/profile-wizard/index.js +++ b/plugins/woocommerce-admin/client/profile-wizard/index.js @@ -31,7 +31,6 @@ import Industry from './steps/industry'; import ProductTypes from './steps/product-types'; import ProfileWizardHeader from './header'; import StoreDetails from './steps/store-details'; -import Theme from './steps/theme'; import { getAdminSetting } from '~/utils/admin-settings'; import './style.scss'; @@ -160,14 +159,6 @@ class ProfileWizard extends Component { profileItems.hasOwnProperty( 'product_count' ) && profileItems.product_count !== null, } ); - steps.push( { - key: 'theme', - container: Theme, - label: __( 'Theme', 'woocommerce' ), - isComplete: - profileItems.hasOwnProperty( 'theme' ) && - profileItems.theme !== null, - } ); /** * Filter for Onboarding steps configuration. * diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/theme/index.js deleted file mode 100644 index 4c5a47ebe4d..00000000000 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/index.js +++ /dev/null @@ -1,442 +0,0 @@ -/** - * External dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import apiFetch from '@wordpress/api-fetch'; -import { Component, Fragment } from '@wordpress/element'; -import { compose } from '@wordpress/compose'; -import { decodeEntities } from '@wordpress/html-entities'; -import InfoIcon from 'gridicons/dist/info'; -import { - Button, - Card, - CardBody, - CardFooter, - TabPanel, - Tooltip, -} from '@wordpress/components'; -import { withDispatch, withSelect } from '@wordpress/data'; -import { H } from '@woocommerce/components'; -import { ONBOARDING_STORE_NAME } from '@woocommerce/data'; -import { recordEvent } from '@woocommerce/tracks'; -import { Text } from '@woocommerce/experimental'; - -/** - * Internal dependencies - */ -import './style.scss'; -import ThemeUploader from './uploader'; -import ThemePreview from './preview'; -import { getPriceValue } from '../../../dashboard/utils'; -import { getAdminSetting, setAdminSetting } from '~/utils/admin-settings'; - -class Theme extends Component { - constructor() { - super( ...arguments ); - - this.state = { - activeTab: 'all', - chosen: null, - demo: null, - uploadedThemes: [], - }; - - this.handleUploadComplete = this.handleUploadComplete.bind( this ); - this.onChoose = this.onChoose.bind( this ); - 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 ) { - const { isError, isUpdatingProfileItems, createNotice } = this.props; - const { chosen } = this.state; - const isRequestSuccessful = - ! isUpdatingProfileItems && - prevProps.isUpdatingProfileItems && - ! isError && - chosen; - const isRequestError = - ! isUpdatingProfileItems && prevProps.isRequesting && isError; - - if ( isRequestSuccessful ) { - /* eslint-disable react/no-did-update-set-state */ - this.setState( { chosen: null } ); - /* eslint-enable react/no-did-update-set-state */ - this.props.goToNextStep(); - } - - if ( isRequestError ) { - /* eslint-disable react/no-did-update-set-state */ - this.setState( { chosen: null } ); - /* eslint-enable react/no-did-update-set-state */ - createNotice( - 'error', - __( - 'There was a problem selecting your store theme', - 'woocommerce' - ) - ); - } - } - - skipStep() { - const { activeTheme = '' } = getAdminSetting( 'onboarding', {} ); - recordEvent( 'storeprofiler_store_theme_skip_step', { activeTheme } ); - this.props.goToNextStep(); - } - - onChoose( theme, location = '' ) { - const { updateProfileItems } = this.props; - const { is_installed: isInstalled, price, slug } = theme; - const { activeTheme = '' } = getAdminSetting( 'onboarding', {} ); - - this.setState( { chosen: slug } ); - recordEvent( 'storeprofiler_store_theme_choose', { - theme: slug, - location, - } ); - - if ( slug !== activeTheme && isInstalled ) { - this.activateTheme( slug ); - } else if ( slug !== activeTheme && getPriceValue( price ) <= 0 ) { - this.installTheme( slug ); - } else { - updateProfileItems( { theme: slug } ); - } - } - - installTheme( slug ) { - const { createNotice } = this.props; - - apiFetch( { - path: '/wc-admin/onboarding/themes/install?theme=' + slug, - method: 'POST', - } ) - .then( () => { - this.activateTheme( slug ); - } ) - .catch( ( response ) => { - this.setState( { chosen: null } ); - createNotice( 'error', response.message ); - } ); - } - - activateTheme( slug ) { - const { createNotice, updateProfileItems } = this.props; - - apiFetch( { - path: '/wc-admin/onboarding/themes/activate?theme=' + slug, - method: 'POST', - } ) - .then( ( response ) => { - createNotice( - 'success', - sprintf( - /* translators: The name of the theme that was installed and activated */ - __( - '%s was installed and activated on your site', - 'woocommerce' - ), - response.name - ) - ); - setAdminSetting( 'onboarding', { - ...getAdminSetting( 'onboarding', {} ), - activeTheme: response.slug, - } ); - updateProfileItems( { theme: slug } ); - } ) - .catch( ( response ) => { - this.setState( { chosen: null } ); - createNotice( 'error', response.message ); - } ); - } - - onClosePreview() { - const { demo } = this.state; - recordEvent( 'storeprofiler_store_theme_demo_close', { - theme: demo.slug, - } ); - document.body.classList.remove( 'woocommerce-theme-preview-active' ); - this.setState( { demo: null } ); - } - - openDemo( theme ) { - recordEvent( 'storeprofiler_store_theme_live_demo', { - theme: theme.slug, - } ); - document.body.classList.add( 'woocommerce-theme-preview-active' ); - this.setState( { demo: theme } ); - } - - renderTheme( theme ) { - const { - demo_url: demoUrl, - has_woocommerce_support: hasSupport, - image, - slug, - title, - } = theme; - const { chosen } = this.state; - const { activeTheme = '' } = getAdminSetting( 'onboarding', {} ); - - return ( - - - { image && ( -
- ) } - - - - { title } - { ! hasSupport && ( - - - - - ) } - -

- { this.getThemeStatus( theme ) } -

- - - { slug === activeTheme ? ( - - ) : ( - - ) } - { demoUrl && ( - - ) } - - - ); - } - - getThemeStatus( theme ) { - const { is_installed: isInstalled, price, slug } = theme; - const { activeTheme = '' } = getAdminSetting( 'onboarding', {} ); - - if ( activeTheme === slug ) { - return __( 'Currently active theme', 'woocommerce' ); - } - if ( isInstalled ) { - return __( 'Installed', 'woocommerce' ); - } else if ( getPriceValue( price ) <= 0 ) { - return __( 'Free', 'woocommerce' ); - } - - return sprintf( - __( '%s per year', 'woocommerce' ), - decodeEntities( price ) - ); - } - - doesActiveThemeSupportWooCommerce() { - const { activeTheme = '' } = getAdminSetting( 'onboarding', {} ); - const allThemes = this.getThemes(); - const currentTheme = allThemes.find( - ( theme ) => theme.slug === activeTheme - ); - return currentTheme && currentTheme.has_woocommerce_support; - } - - onSelectTab( tab ) { - recordEvent( 'storeprofiler_store_theme_navigate', { - navigation: tab, - } ); - this.setState( { activeTab: tab } ); - } - - getPriceValue( string ) { - return Number( decodeEntities( string ).replace( /[^0-9.-]+/g, '' ) ); - } - - getThemes( activeTab = 'all' ) { - const { uploadedThemes } = this.state; - const { activeTheme = '', themes = [] } = getAdminSetting( - 'onboarding', - {} - ); - const allThemes = [ - ...themes.filter( - ( theme ) => - theme && - ( theme.has_woocommerce_support || - theme.slug === activeTheme ) - ), - ...uploadedThemes, - ]; - - switch ( activeTab ) { - case 'paid': - return allThemes.filter( - ( theme ) => getPriceValue( theme.price ) > 0 - ); - case 'free': - return allThemes.filter( - ( theme ) => getPriceValue( theme.price ) <= 0 - ); - case 'all': - default: - return allThemes; - } - } - - handleUploadComplete( upload ) { - if ( upload.status === 'success' && upload.theme_data ) { - this.setState( { - uploadedThemes: [ - ...this.state.uploadedThemes, - upload.theme_data, - ], - } ); - - recordEvent( 'storeprofiler_store_theme_upload', { - theme: upload.theme_data.slug, - } ); - } - } - - render() { - const { activeTab, chosen, demo } = this.state; - const themes = this.getThemes( activeTab ); - const activeThemeSupportsWooCommerce = - this.doesActiveThemeSupportWooCommerce(); - - return ( - -
- - { __( 'Choose a theme', 'woocommerce' ) } - - - { __( - "Choose how your store appears to customers. And don't worry, you can always switch themes and edit them later.", - 'woocommerce' - ) } - -
- - { () => ( -
- { themes && - themes.map( ( theme ) => - this.renderTheme( theme ) - ) } - -
- ) } - - { demo && ( - this.onChoose( demo, 'card' ) } - onClose={ this.onClosePreview } - isBusy={ chosen === demo.slug } - /> - ) } - { activeThemeSupportsWooCommerce && ( -

- -

- ) } - - ); - } -} - -export default compose( - withSelect( ( select ) => { - const { getProfileItems, getOnboardingError, isOnboardingRequesting } = - select( ONBOARDING_STORE_NAME ); - - return { - isError: Boolean( getOnboardingError( 'updateProfileItems' ) ), - isUpdatingProfileItems: - isOnboardingRequesting( 'updateProfileItems' ), - profileItems: getProfileItems(), - }; - } ), - withDispatch( ( dispatch ) => { - const { updateProfileItems } = dispatch( ONBOARDING_STORE_NAME ); - const { createNotice } = dispatch( 'core/notices' ); - - return { - createNotice, - updateProfileItems, - }; - } ) -)( Theme ); diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/preview.js b/plugins/woocommerce-admin/client/profile-wizard/steps/theme/preview.js deleted file mode 100644 index 25a25e57910..00000000000 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/preview.js +++ /dev/null @@ -1,124 +0,0 @@ -/** - * External dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import classnames from 'classnames'; -import { Component } from '@wordpress/element'; -import interpolateComponents from '@automattic/interpolate-components'; -import { WebPreview } from '@woocommerce/components'; -import { recordEvent } from '@woocommerce/tracks'; -import { Icon, close } from '@wordpress/icons'; -import Phone from 'gridicons/dist/phone'; -import Tablet from 'gridicons/dist/tablet'; -import Computer from 'gridicons/dist/computer'; - -/** - * Internal dependencies - */ - -const devices = [ - { - key: 'mobile', - icon: Phone, - }, - { - key: 'tablet', - icon: Tablet, - }, - { - key: 'desktop', - icon: Computer, - }, -]; - -class ThemePreview extends Component { - constructor() { - super( ...arguments ); - - this.state = { - device: 'desktop', - }; - - this.handleDeviceClick = this.handleDeviceClick.bind( this ); - } - - handleDeviceClick( device ) { - const { theme } = this.props; - recordEvent( 'storeprofiler_store_theme_demo_device', { - device, - theme: theme.slug, - } ); - this.setState( { device } ); - } - - render() { - const { isBusy, onChoose, onClose, theme } = this.props; - const { demo_url: demoUrl, slug, title } = theme; - const { device: currentDevice } = this.state; - - return ( -
-
- -
- { interpolateComponents( { - /* translators: Describing who a previewed theme is developed by. E.g., Storefront developed by WooCommerce */ - mixedString: sprintf( - __( - '{{strong}}%s{{/strong}} developed by WooCommerce', - 'woocommerce' - ), - title - ), - components: { - strong: , - }, - } ) } -
-
- { devices.map( ( device ) => { - const DeviceTag = device.icon; - return ( - - ); - } ) } -
- -
- -
- ); - } -} - -export default ThemePreview; diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss b/plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss deleted file mode 100644 index fea1af81df4..00000000000 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss +++ /dev/null @@ -1,254 +0,0 @@ -.woocommerce-profile-wizard__body .woocommerce-profile-wizard__container { - > .woocommerce-profile-wizard__themes-tab-panel { - margin-bottom: $gap-large; - - @include breakpoint( '>782px' ) { - max-width: 810px; - - .woocommerce-profile-wizard__themes { - display: grid; - grid-gap: $gap-large; - grid-template-columns: 1fr 1fr; - } - } - } -} - -.woocommerce-profile-wizard__themes-tab-panel .components-tab-panel__tabs { - display: flex; - justify-content: space-between; - background: $studio-white; - box-shadow: $muriel-box-shadow-1dp; - border-radius: 3px; - margin-top: $gap-large; - margin-bottom: $gap-large; - - button { - border: 0; - color: $studio-gray-50; - display: flex; - align-items: center; - justify-content: center; - background: transparent; - height: 48px; - width: 100%; - @include font-size( 14 ); - font-weight: 500; - outline: none; - padding: 0 $gap-large; - } -} - -p.woocommerce-profile-wizard__themes-skip-this-step { - text-align: center; -} - -.woocommerce-profile-wizard__body .woocommerce-profile-wizard__theme.components-card { - overflow: hidden; - - @include breakpoint( '>782px' ) { - margin: 0; - } - - .woocommerce-profile-wizard__theme-image { - width: 100%; - height: 300px; - background-size: cover; - } - - .woocommerce-profile-wizard__theme-name { - margin-top: auto; - margin-bottom: $gap-smaller; - @include font-size( 24 ); - font-weight: 400; - - svg { - max-width: 18px; - height: 18px; - margin-left: $gap-smaller; - - path { - fill: $studio-red-50; - } - } - } - - .woocommerce-profile-wizard__theme-status { - margin: 0; - font-size: 14px; - } - - .woocommerce-profile-wizard__theme-learn-more { - display: inline-block; - } -} - -.woocommerce-profile-wizard__body .woocommerce-theme-uploader.components-card { - margin: 0; - position: relative; - - &.is-uploading .woocommerce-theme-uploader__dropzone-wrapper { - min-height: 382px; - } - - .woocommerce-theme-uploader__dropzone-wrapper { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - border-radius: 2px; - background: #f6f6f6; - border: 1px dashed #b0b5b8; - } - - .components-form-file-upload { - flex: 1 1 auto; - width: 100%; - display: flex; - } - - .components-form-file-upload > .components-button { - flex: 1 1 auto; - flex-direction: column; - justify-content: center; - margin: 0; - width: 100%; - height: 100%; - min-height: 380px; - - > .gridicon { - width: 48px; - height: 48px; - - path { - fill: #50575d; - } - } - - .dashicons-upload { - display: none; - } - } - - .woocommerce-theme-uploader__title { - margin: $gap-smaller 0; - @include font-size( 24 ); - font-weight: 400; - } - - p { - @include font-size( 14 ); - margin: 0; - } -} - -.woocommerce-theme-preview { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - max-width: 100% !important; - display: flex; - flex-direction: column; - - .woocommerce-theme-preview__toolbar { - background: $studio-white; - flex-direction: row; - display: flex; - height: $header-height; - border-bottom: 1px solid $studio-gray-5; - padding-left: $gap; - padding-right: $gap; - align-items: center; - - .is-button.is-primary { - height: 40px; - margin: 0; - - @include breakpoint( '<782px' ) { - margin-left: auto; - } - } - } - - .woocommerce-theme-preview__theme-name { - padding-left: $gap; - color: $studio-gray-90; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 50%; - } - - .woocommerce-theme-preview__close { - padding: 0 $gap 0 0; - color: $studio-gray-50; - } - - .woocommerce-theme-preview__devices { - margin-left: auto; - margin-right: $gap; - - .woocommerce-theme-preview__device { - padding: $gap-small; - color: $studio-gray-50; - margin: 0; - border-radius: 50%; - - &.is-selected, - &:focus { - background: $studio-gray-50; - color: $studio-white; - } - } - - @include breakpoint( '<782px' ) { - display: none; - } - } - - .woocommerce-web-preview { - flex: 1; - padding: $gap-largest $gap; - overflow: scroll; - - .woocommerce-web-preview__iframe-wrapper { - height: 100%; - border-radius: 3px; - box-shadow: $muriel-box-shadow-1dp; - overflow: hidden; - margin: 0 auto; - - iframe { - display: block; - } - } - - &.is-mobile .woocommerce-web-preview__iframe-wrapper { - max-width: 360px; - } - - &.is-tablet .woocommerce-web-preview__iframe-wrapper { - max-width: 768px; - } - - &.is-desktop { - width: 100%; - padding: 0; - - .woocommerce-web-preview__iframe-wrapper { - border-radius: 0; - box-shadow: none; - } - } - } -} - -.woocommerce-theme-preview-active { - overflow: hidden; - - .woocommerce-profile-wizard__header { - display: none; - } -} diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/uploader.js b/plugins/woocommerce-admin/client/profile-wizard/steps/theme/uploader.js deleted file mode 100644 index 0e0fd97dbc0..00000000000 --- a/plugins/woocommerce-admin/client/profile-wizard/steps/theme/uploader.js +++ /dev/null @@ -1,161 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import apiFetch from '@wordpress/api-fetch'; -import classnames from 'classnames'; -import { Component, Fragment } from '@wordpress/element'; -import { compose } from '@wordpress/compose'; -import { - Card, - DropZoneProvider, - DropZone, - FormFileUpload, -} from '@wordpress/components'; -import CloudUploadIcon from 'gridicons/dist/cloud-upload'; -import { noop } from 'lodash'; -import PropTypes from 'prop-types'; -import { withDispatch } from '@wordpress/data'; -import { H, Spinner } from '@woocommerce/components'; -import { isWpVersion } from '@woocommerce/settings'; - -/** - * NOTE: This can be removed after WP version 6.0 and replaced with a div. - * - * @param {Object} props React props. - * @param {Node} [props.children] Children of react component. - * @param {string} [props.className] Additional class name to style the component. - */ -const DropZoneWrapper = ( { children, className } ) => { - const isDropzoneProviderDepreciated = isWpVersion( '5.8', '>=' ); - - if ( isDropzoneProviderDepreciated ) { - return
{ children }
; - } - return ( - -
{ children }
- - ); -}; - -class ThemeUploader extends Component { - constructor() { - super(); - - this.state = { - isUploading: false, - }; - - this.handleFilesUpload = this.handleFilesUpload.bind( this ); - this.handleFilesDrop = this.handleFilesDrop.bind( this ); - } - - handleFilesDrop( files ) { - const file = files[ 0 ]; - this.uploadTheme( file ); - } - - handleFilesUpload( e ) { - const file = e.target.files[ 0 ]; - this.uploadTheme( file ); - } - - uploadTheme( file ) { - const { createNotice, onUploadComplete } = this.props; - this.setState( { isUploading: true } ); - - const body = new window.FormData(); - body.append( 'pluginzip', file ); - - return apiFetch( { path: '/wc-admin/themes', method: 'POST', body } ) - .then( ( response ) => { - onUploadComplete( response ); - this.setState( { isUploading: false } ); - createNotice( response.status, response.message ); - } ) - .catch( ( error ) => { - this.setState( { isUploading: false } ); - if ( error && error.message ) { - createNotice( 'error', error.message ); - } - } ); - } - - render() { - const { className } = this.props; - const { isUploading } = this.state; - - const classes = classnames( 'woocommerce-theme-uploader', className, { - 'is-uploading': isUploading, - } ); - - return ( - - - { ! isUploading ? ( - - - - - { __( 'Upload a theme', 'woocommerce' ) } - -

- { __( - 'Drop a theme zip file here to upload', - 'woocommerce' - ) } -

- - - - ) : ( - - - - { __( 'Uploading theme', 'woocommerce' ) } - -

- { __( - 'Your theme is being uploaded', - 'woocommerce' - ) } -

- - ) } - - - ); - } -} - -ThemeUploader.propTypes = { - /** - * Additional class name to style the component. - */ - className: PropTypes.string, - /** - * Function called when an upload has finished. - */ - onUploadComplete: PropTypes.func, -}; - -ThemeUploader.defaultProps = { - onUploadComplete: noop, -}; - -export default compose( - withDispatch( ( dispatch ) => { - const { createNotice } = dispatch( 'core/notices' ); - return { createNotice }; - } ) -)( ThemeUploader ); diff --git a/plugins/woocommerce/changelog/update-remove-obw-theme-step b/plugins/woocommerce/changelog/update-remove-obw-theme-step new file mode 100644 index 00000000000..c1091212332 --- /dev/null +++ b/plugins/woocommerce/changelog/update-remove-obw-theme-step @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Remove theme step from onboarding wizard diff --git a/plugins/woocommerce/tests/e2e-pw/tests/activate-and-setup/complete-onboarding-wizard.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/activate-and-setup/complete-onboarding-wizard.spec.js index 7a61c9e8ddb..2bc4e754b3c 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/activate-and-setup/complete-onboarding-wizard.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/activate-and-setup/complete-onboarding-wizard.spec.js @@ -131,18 +131,6 @@ test.describe( 'Store owner can complete onboarding wizard', () => { await onboarding.unselectBusinessFeatures( page ); await page.click( 'button >> text=Continue' ); } ); - - test( 'can complete the theme selection section', async ( { page } ) => { - await page.goto( - 'wp-admin/admin.php?page=wc-admin&path=%2Fsetup-wizard&step=theme' - ); - const pageHeading = await page.textContent( - 'div.woocommerce-profile-wizard__step-header > h2' - ); - expect( pageHeading ).toContain( 'Choose a theme' ); - // Just continue with the current theme - await page.click( 'button >> text=Continue with my active theme' ); - } ); } ); // !Changed from Japanese to Liberian store, as Japanese Yen does not use decimals @@ -216,10 +204,12 @@ test.describe( page.locator( '.woocommerce-input-toggle--disabled' ) ).toHaveCount( 3 ); // Checklist shows when completing setup wizard - await page.goto( - 'wp-admin/admin.php?page=wc-admin&path=%2Fsetup-wizard&step=theme' - ); - await page.click( 'button >> text=Continue with my active theme' ); + await onboarding.completeBusinessDetailsSection( page ); + await page.click( 'button >> text=Continue' ); + + await onboarding.unselectBusinessFeatures( page, expect_wp_pay ); + await page.click( 'button >> text=Continue' ); + // Start test await page.waitForLoadState( 'networkidle' ); await expect( @@ -268,7 +258,6 @@ test.describe.skip( 'Store owner can go through setup Task List', () => { await page.click( '.components-checkbox-control__input' ); } await page.click( 'button >> text=Continue' ); - await page.click( 'button >> text=Continue with my active theme' ); await page.waitForLoadState( 'networkidle' ); // not autowaiting for form submission } );