From 5063dc364057052b74b3e32955cf6aa265ff8fc0 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 28 Apr 2022 17:22:27 +0800 Subject: [PATCH 01/11] Update admin webpack config to resolve wp.components.ui --- plugins/woocommerce-admin/webpack.config.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 483c2199d0c..bdef71edcfc 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -165,7 +165,14 @@ const webpackConfig = { // We reuse this Webpack setup for Storybook, where we need to disable dependency extraction. ! process.env.STORYBOOK && - new WooCommerceDependencyExtractionWebpackPlugin(), + new WooCommerceDependencyExtractionWebpackPlugin( { + requestToExternal( request ) { + if ( request === '@wordpress/components/build/ui' ) { + // The external wp.components does not include ui components, so we need to skip requesting to external here. + return null; + } + }, + } ), // Reduces data for moment-timezone. new MomentTimezoneDataPlugin( { // This strips out timezone data before the year 2000 to make a smaller file. From e37bc5e18f06815b82ba807bd794bb0d84fc6b5a Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 28 Apr 2022 17:22:44 +0800 Subject: [PATCH 02/11] Add load sample product hook & modal component --- .../components/load-sample-product-modal.scss | 51 ++++++++++++++++++ .../components/load-sample-product-modal.tsx | 33 ++++++++++++ .../components/use-load-sample-products.ts | 53 +++++++++++++++++++ 3 files changed, 137 insertions(+) create mode 100644 plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.scss create mode 100644 plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.tsx create mode 100644 plugins/woocommerce-admin/client/tasks/fills/components/use-load-sample-products.ts diff --git a/plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.scss b/plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.scss new file mode 100644 index 00000000000..ee3776206b7 --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.scss @@ -0,0 +1,51 @@ +.woocommerce-products-load-sample-product-modal-overlay { + top: 0; + background: rgba(255, 255, 255, 0.8); + + @media (min-width: 783px ) { + & { + left: 35px; + } + } + + + @include break-large { + & { + left: 160px; + } + } + +} + +.woocommerce-products-load-sample-product-modal { + background: transparent; + box-shadow: none; + + .components-modal__header { + display: none; + } + + .components-modal__content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0; + } + + .woocommerce-load-sample-product-modal__title { + color: $gray-900; + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-top: 32px; + } + + .woocommerce-load-sample-product-modal__description { + color: $gray-700; + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-top: 12px; + } +} diff --git a/plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.tsx b/plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.tsx new file mode 100644 index 00000000000..13bdd208a7e --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/components/load-sample-product-modal.tsx @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Modal } from '@wordpress/components'; +import { Spinner } from '@wordpress/components/build/ui'; +import { Text } from '@woocommerce/experimental'; + +/** + * Internal dependencies + */ +import './load-sample-product-modal.scss'; + +const LoadSampleProductModal: React.FC = () => { + return ( + {} } + > + + + { __( 'Loading sample products' ) } + + + { __( 'We are loading 9 sample products into your store' ) } + + + ); +}; + +export default LoadSampleProductModal; diff --git a/plugins/woocommerce-admin/client/tasks/fills/components/use-load-sample-products.ts b/plugins/woocommerce-admin/client/tasks/fills/components/use-load-sample-products.ts new file mode 100644 index 00000000000..adfe0b92393 --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/components/use-load-sample-products.ts @@ -0,0 +1,53 @@ +/** + * External dependencies + */ + +import { __ } from '@wordpress/i18n'; +import apiFetch from '@wordpress/api-fetch'; +import { WC_ADMIN_NAMESPACE } from '@woocommerce/data'; +import { useDispatch } from '@wordpress/data'; +import { useState } from '@wordpress/element'; + +type UseLoadSampleProductsProps = { + redirectUrlAfterSuccess: string; +}; + +const useLoadSampleProducts = ( { + redirectUrlAfterSuccess, +}: UseLoadSampleProductsProps ) => { + const [ isRequesting, setIsRequesting ] = useState< boolean >( false ); + const { createNotice } = useDispatch( 'core/notices' ); + + const loadSampleProduct = async () => { + setIsRequesting( true ); + try { + await apiFetch( { + path: `${ WC_ADMIN_NAMESPACE }/onboarding/tasks/import_sample_products`, + method: 'POST', + } ); + + if ( redirectUrlAfterSuccess ) { + window.location.href = redirectUrlAfterSuccess; + return; + } + } catch ( error: unknown ) { + const message = + error instanceof Error && error.message + ? error.message + : __( + 'There was an error importing the sample products', + 'woocommerce' + ); + + createNotice( 'error', message ); + } + setIsRequesting( false ); + }; + + return { + loadSampleProduct, + isLoadingSampleProducts: isRequesting, + }; +}; + +export default useLoadSampleProducts; From 4221c32fa471ca7c90e7e17dbd4e0be5676f143d Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 28 Apr 2022 17:23:10 +0800 Subject: [PATCH 03/11] Add type for wp.components.ui --- plugins/woocommerce-admin/client/typings/index.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/woocommerce-admin/client/typings/index.d.ts b/plugins/woocommerce-admin/client/typings/index.d.ts index 535f0778f5e..90b4171d4c8 100644 --- a/plugins/woocommerce-admin/client/typings/index.d.ts +++ b/plugins/woocommerce-admin/client/typings/index.d.ts @@ -2,6 +2,10 @@ declare module '@woocommerce/e2e-utils'; declare module '@woocommerce/e2e-environment'; declare module '@woocommerce/settings'; declare module '@woocommerce/tracks'; +declare module '@wordpress/components/build/ui' { + // Typescript seems unable to resolve this correctly by default, so we need to re-export it in our type defs. + export * from '@wordpress/components/build-types/ui'; +} declare module 'gridicons/dist/*' { const value: React.ElementType< { size?: 12 | 18 | 24 | 36 | 48 | 54 | 72; From 570d6dad710a33051d2417e2e5e412d6bf6b0956 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 28 Apr 2022 17:26:25 +0800 Subject: [PATCH 04/11] Update experimental-products to load sample products --- .../fills/experimental-products/index.tsx | 27 ++++++++++++++++--- .../fills/experimental-products/stack.tsx | 15 +++++++++-- 2 files changed, 36 insertions(+), 6 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx index 3b999605034..2af52a5eb74 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx @@ -7,6 +7,7 @@ import { Text } from '@woocommerce/experimental'; import { registerPlugin } from '@wordpress/plugins'; import { useMemo, useState } from '@wordpress/element'; import { Button } from '@wordpress/components'; +import { getAdminLink } from '@woocommerce/settings'; import { Icon, chevronDown, chevronUp } from '@wordpress/icons'; /** @@ -20,6 +21,8 @@ import Stack from './stack'; import Footer from './footer'; import CardLayout from './card-layout'; import { LoadSampleProductType } from './constants'; +import LoadSampleProductModal from '../components/load-sample-product-modal'; +import useLoadSampleProducts from '../components/use-load-sample-products'; // TODO: Use experiment data from the API, not hardcoded. const SHOW_STACK_LAYOUT = true; @@ -54,6 +57,14 @@ export const Products = () => { const surfacedProductTypeKeys = getSurfacedProductTypeKeys( getOnboardingProductType() ); + + const { + loadSampleProduct, + isLoadingSampleProducts, + } = useLoadSampleProducts( { + redirectUrlAfterSuccess: getAdminLink( 'edit.php?post_type=product' ), + } ); + const visibleProductTypes = useMemo( () => { const surfacedProductTypes = productTypes.filter( ( productType ) => surfacedProductTypeKeys.includes( productType.key ) @@ -69,13 +80,17 @@ export const Products = () => { if ( ! SHOW_STACK_LAYOUT ) { surfacedProductTypes.push( { ...LoadSampleProductType, - // TODO: Change to load sample product - onClick: () => new Promise( () => {} ), + onClick: loadSampleProduct, } ); } } return surfacedProductTypes; - }, [ surfacedProductTypeKeys, isExpanded, productTypes ] ); + }, [ + surfacedProductTypeKeys, + isExpanded, + productTypes, + loadSampleProduct, + ] ); return (
@@ -89,7 +104,10 @@ export const Products = () => {
{ SHOW_STACK_LAYOUT ? ( - + ) : ( ) } @@ -99,6 +117,7 @@ export const Products = () => { />
+ { isLoadingSampleProducts && }
); }; diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx index 3f5679c01ec..191fffee528 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx @@ -17,9 +17,13 @@ type StackProps = { items: ( ProductType & { onClick: () => void; } )[]; + onClickLoadSampleProduct: () => void; }; -const Stack: React.FC< StackProps > = ( { items } ) => { +const Stack: React.FC< StackProps > = ( { + items, + onClickLoadSampleProduct, +} ) => { return (
@@ -46,7 +50,14 @@ const Stack: React.FC< StackProps > = ( { items } ) => { ), LspLink: ( // TODO: Update this to the load sample product. - + { + onClickLoadSampleProduct(); + return false; + } } + > <> ), From 5476f4c80fbcc762a477e91e9a14ea47c767a161 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Fri, 29 Apr 2022 12:06:05 +0800 Subject: [PATCH 05/11] Add onboarding load sample products notice --- .../index.ts | 25 ++++++++++++ plugins/woocommerce-admin/webpack.config.js | 1 + .../OnboardingTasks/Tasks/Products.php | 38 +++++++++++++++++++ 3 files changed, 64 insertions(+) create mode 100644 plugins/woocommerce-admin/client/wp-admin-scripts/onboarding-load-sample-products-notice/index.ts diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/onboarding-load-sample-products-notice/index.ts b/plugins/woocommerce-admin/client/wp-admin-scripts/onboarding-load-sample-products-notice/index.ts new file mode 100644 index 00000000000..976fbc7545c --- /dev/null +++ b/plugins/woocommerce-admin/client/wp-admin-scripts/onboarding-load-sample-products-notice/index.ts @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { dispatch } from '@wordpress/data'; +import domReady from '@wordpress/dom-ready'; +import { getAdminLink } from '@woocommerce/settings'; + +domReady( () => { + dispatch( 'core/notices' ).createSuccessNotice( + __( 'Sample products added' ), + { + id: 'WOOCOMMERCE_ONBOARDING_LOAD_SAMPLE_PRODUCTS_NOTICE', + actions: [ + { + url: getAdminLink( 'admin.php?page=wc-admin' ), + label: __( + 'Continue setting up your store', + 'woocommerce' + ), + }, + ], + } + ); +} ); diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index bdef71edcfc..9caadbc7aaa 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -48,6 +48,7 @@ const wpAdminScripts = [ 'print-shipping-label-banner', 'beta-features-tracking-modal', 'payment-method-promotions', + 'onboarding-load-sample-products-notice', ]; const getEntryPoints = () => { const entryPoints = { diff --git a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/Products.php b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/Products.php index 2394ef9b288..7a78bf41c2e 100644 --- a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/Products.php +++ b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/Products.php @@ -19,6 +19,7 @@ class Products extends Task { parent::__construct( $task_list ); add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_manual_return_notice_script' ) ); add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_import_return_notice_script' ) ); + add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_load_sample_return_notice_script' ) ); } /** @@ -151,6 +152,43 @@ class Products extends Task { ); } + /** + * Adds a return to task list notice when completing the loading sample products action. + * + * @param string $hook Page hook. + */ + public function possibly_add_load_sample_return_notice_script( $hook ) { + global $post; + if ( 'edit.php' !== $hook || 'product' !== $post->post_type ) { + return; + } + + $referer = wp_get_referer(); + if ( ! $referer || 0 !== strpos( $referer, wc_admin_url() ) ) { + return; + } + + if ( ! isset( $_GET[ Task::ACTIVE_TASK_TRANSIENT ] ) ) { + return; + } + + $task_id = sanitize_title_with_dashes( wp_unslash( $_GET[ Task::ACTIVE_TASK_TRANSIENT ] ) ); + if ( $task_id !== $this->get_id() || ! $this->is_complete() ) { + return; + } + + $script_assets_filename = WCAdminAssets::get_script_asset_filename( 'wp-admin-scripts', 'onboarding-product-notice' ); + $script_assets = require WC_ADMIN_ABSPATH . WC_ADMIN_DIST_JS_FOLDER . 'wp-admin-scripts/' . $script_assets_filename; + + wp_enqueue_script( + 'onboarding-load-sample-products-notice', + WCAdminAssets::get_url( 'wp-admin-scripts/onboarding-load-sample-products-notice', 'js' ), + array_merge( array( WC_ADMIN_APP ), $script_assets ['dependencies'] ), + WC_VERSION, + true + ); + } + /** * Check if the store has any published products. * From be50584b673a4ee6fc662cf40dc17d5331648ace Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Fri, 29 Apr 2022 12:06:35 +0800 Subject: [PATCH 06/11] Update load onboarding sample product link --- .../client/tasks/fills/experimental-products/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx index 2af52a5eb74..34ab388d276 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx @@ -62,7 +62,9 @@ export const Products = () => { loadSampleProduct, isLoadingSampleProducts, } = useLoadSampleProducts( { - redirectUrlAfterSuccess: getAdminLink( 'edit.php?post_type=product' ), + redirectUrlAfterSuccess: getAdminLink( + 'edit.php?post_type=product&wc_onboarding_active_task=products' + ), } ); const visibleProductTypes = useMemo( () => { From 95a319b36dc510244bfcb094ef818d0d37b4b103 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Fri, 29 Apr 2022 12:52:41 +0800 Subject: [PATCH 07/11] Add tests for load sample products --- .../test/load-sample-product-modal.tsx | 16 ++++++++++ .../experimental-products/test/index.tsx | 30 +++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 plugins/woocommerce-admin/client/tasks/fills/components/test/load-sample-product-modal.tsx diff --git a/plugins/woocommerce-admin/client/tasks/fills/components/test/load-sample-product-modal.tsx b/plugins/woocommerce-admin/client/tasks/fills/components/test/load-sample-product-modal.tsx new file mode 100644 index 00000000000..f1d24d66194 --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/components/test/load-sample-product-modal.tsx @@ -0,0 +1,16 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import LoadSampleProductModal from '../load-sample-product-modal'; + +describe( 'LoadSampleProductModal', () => { + it( 'should render LoadSampleProductModal', () => { + const { queryByText } = render( ); + expect( queryByText( 'Loading sample products' ) ).toBeInTheDocument(); + } ); +} ); diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx index d5a8815fb85..a1e44f684e8 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx @@ -20,6 +20,13 @@ jest.mock( '~/utils/admin-settings', () => ( { getAdminSetting: jest.fn(), } ) ); +global.fetch = jest.fn().mockImplementation( () => + Promise.resolve( { + json: () => Promise.resolve( {} ), + status: 200, + } ) +); + describe( 'Products', () => { beforeEach( () => { jest.clearAllMocks(); @@ -75,4 +82,27 @@ describe( 'Products', () => { expect( queryByText( 'View less product types' ) ).toBeInTheDocument(); } ); + + it( 'should send a request to load sample products when the link is clicked', async () => { + const fetchMock = jest.spyOn( global, 'fetch' ); + const { queryByText, getByRole } = render( ); + + expect( queryByText( 'Load Sample Products' ) ).toBeInTheDocument(); + + userEvent.click( + getByRole( 'link', { name: 'Load Sample Products' } ) + ); + + await waitFor( () => + expect( fetchMock ).toHaveBeenCalledWith( + '/wc-admin/onboarding/tasks/import_sample_products?_locale=user', + { + body: undefined, + credentials: 'include', + headers: { Accept: 'application/json, */*;q=0.1' }, + method: 'POST', + } + ) + ); + } ); } ); From f25383fc15a30f8438e4fe24a440d6f9150894ac Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Fri, 29 Apr 2022 13:04:05 +0800 Subject: [PATCH 08/11] Add test for stack --- .../experimental-products/test/stack.tsx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx new file mode 100644 index 00000000000..509b11539d9 --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx @@ -0,0 +1,49 @@ +/** + * External dependencies + */ +import { render, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +/** + * Internal dependencies + */ +import Stack from '../stack'; +import { productTypes } from '../constants'; + +describe( 'Stack', () => { + it( 'should render stack with given product type and two links', () => { + const { queryByText, queryAllByRole } = render( + {} } + items={ [ + { + ...productTypes[ 0 ], + onClick: () => {}, + }, + ] } + /> + ); + expect( queryByText( productTypes[ 0 ].title ) ).toBeInTheDocument(); + expect( queryAllByRole( 'link' ) ).toHaveLength( 2 ); + } ); + + it( 'should call onClickLoadSampleProduct when the "Load Sample Products" link is clicked', async () => { + const onClickLoadSampleProduct = jest.fn(); + const { getByRole } = render( + {}, + }, + ] } + /> + ); + + userEvent.click( + getByRole( 'link', { name: 'Load Sample Products' } ) + ); + await waitFor( () => expect( onClickLoadSampleProduct ).toBeCalled() ); + } ); +} ); From cf9d2ed3b76d192a73540b8d50336c1af05d7460 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Fri, 29 Apr 2022 14:20:51 +0800 Subject: [PATCH 09/11] Update sample_products.csv to only contain 9 products --- .../sample-data/experimental_sample_9_products.csv | 10 ++++++++++ plugins/woocommerce/src/Admin/API/OnboardingTasks.php | 8 ++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 plugins/woocommerce/sample-data/experimental_sample_9_products.csv diff --git a/plugins/woocommerce/sample-data/experimental_sample_9_products.csv b/plugins/woocommerce/sample-data/experimental_sample_9_products.csv new file mode 100644 index 00000000000..0004e55fa08 --- /dev/null +++ b/plugins/woocommerce/sample-data/experimental_sample_9_products.csv @@ -0,0 +1,10 @@ +ID,Type,SKU,Name,Published,"Is featured?","Visibility in catalog","Short description",Description,"Date sale price starts","Date sale price ends","Tax status","Tax class","In stock?",Stock,"Backorders allowed?","Sold individually?","Weight (lbs)","Length (in)","Width (in)","Height (in)","Allow customer reviews?","Purchase note","Sale price","Regular price",Categories,Tags,"Shipping class",Images,"Download limit","Download expiry days",Parent,"Grouped products",Upsells,Cross-sells,"External URL","Button text",Position,"Attribute 1 name","Attribute 1 value(s)","Attribute 1 visible","Attribute 1 global","Attribute 2 name","Attribute 2 value(s)","Attribute 2 visible","Attribute 2 global","Meta: _wpcom_is_markdown","Download 1 name","Download 1 URL","Download 2 name","Download 2 URL" +44,variable,woo-vneck-tee,"V-Neck T-Shirt",1,1,visible,"This is a variable product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.5,24,1,2,1,,,,"Clothing > Tshirts",,,"https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/vneck-tee-2.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/vnech-tee-green-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/vnech-tee-blue-1.jpg",,,,,,,,,0,Color,"Blue, Green, Red",1,1,Size,"Large, Medium, Small",1,1,1,,,, +45,variable,woo-hoodie,Hoodie,1,0,visible,"This is a variable product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,1.5,10,8,3,1,,,,"Clothing > Hoodies",,,"https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-2.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-blue-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-green-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-with-logo-2.jpg",,,,,,,,,0,Color,"Blue, Green, Red",1,1,Logo,"Yes, No",1,0,1,,,, +47,simple,woo-tshirt,T-Shirt,1,0,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.8,8,6,1,1,,,18,"Clothing > Tshirts",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/tshirt-2.jpg,,,,,,,,,0,Color,Gray,1,1,,,,,1,,,, +48,simple,woo-beanie,Beanie,1,0,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.2,4,5,.5,1,,18,20,"Clothing > Accessories",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/beanie-2.jpg,,,,,,,,,0,Color,Red,1,1,,,,,1,,,, +58,simple,woo-belt,Belt,1,0,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,1.2,12,2,1.5,1,,55,65,"Clothing > Accessories",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/belt-2.jpg,,,,,,,,,0,,,,,,,,,1,,,, +60,simple,woo-cap,Cap,1,1,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,0.6,8,6.5,4,1,,16,18,"Clothing > Accessories",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/cap-2.jpg,,,,,,,,,0,Color,Yellow,1,1,,,,,1,,,, +62,simple,woo-sunglasses,Sunglasses,1,1,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.2,4,1.4,1,1,,,90,"Clothing > Accessories",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/sunglasses-2.jpg,,,,,,,,,0,,,,,,,,,1,,,, +70,simple,woo-polo,Polo,1,0,visible,"This is a simple product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,.8,6,5,1,1,,,20,"Clothing > Tshirts",,,https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/polo-2.jpg,,,,,,,,,0,Color,Blue,1,1,,,,,1,,,, +87,grouped,logo-collection,"Logo Collection",1,0,visible,"This is a grouped product.","Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.",,,taxable,,1,,0,0,,,,,1,,,,Clothing,,,"https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/logo-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/beanie-with-logo-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/t-shirt-with-logo-1.jpg, https://woocommercecore.mystagingwebsite.com/wp-content/uploads/2017/12/hoodie-with-logo-2.jpg",,,,"woo-hoodie-with-logo, woo-tshirt, woo-beanie",,,,,0,,,,,,,,,1,,,, diff --git a/plugins/woocommerce/src/Admin/API/OnboardingTasks.php b/plugins/woocommerce/src/Admin/API/OnboardingTasks.php index f1b597f6380..3f54f1d68a3 100644 --- a/plugins/woocommerce/src/Admin/API/OnboardingTasks.php +++ b/plugins/woocommerce/src/Admin/API/OnboardingTasks.php @@ -9,7 +9,7 @@ namespace Automattic\WooCommerce\Admin\API; use Automattic\WooCommerce\Internal\Admin\Onboarding\OnboardingIndustries; use Automattic\WooCommerce\Internal\Admin\Onboarding\OnboardingProfile; -use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Init as OnboardingTasksFeature; +use Automattic\WooCommerce\Admin\Features\Features; use Automattic\WooCommerce\Admin\Features\OnboardingTasks\TaskLists; use Automattic\WooCommerce\Admin\Features\OnboardingTasks\DeprecatedExtendedTask; @@ -340,7 +340,11 @@ class OnboardingTasks extends \WC_REST_Data_Controller { * @return WP_Error|WP_REST_Response */ public static function import_sample_products() { - $sample_csv_file = WC_ABSPATH . 'sample-data/sample_products.csv'; + if ( Features::is_enabled( 'experimental-products-task' ) || Features::is_enabled( 'experimental-import-products-task' ) ) { + $sample_csv_file = WC_ABSPATH . 'sample-data/experimental_sample_9_products.csv'; + } else { + $sample_csv_file = WC_ABSPATH . 'sample-data/sample_products.csv'; + } $import = self::import_sample_products_from_csv( $sample_csv_file ); return rest_ensure_response( $import ); From 7e4126bc9f4ea394b4a27db0dd4060865fc9b0c2 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Wed, 4 May 2022 10:35:15 +0800 Subject: [PATCH 10/11] Update experimental-import-products to load sample products --- .../fills/experimental-import-products/index.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/index.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/index.tsx index 323fedece34..2d6b76b86f2 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/index.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/index.tsx @@ -7,7 +7,8 @@ import { __ } from '@wordpress/i18n'; import { Icon, chevronUp, chevronDown } from '@wordpress/icons'; import { Button } from '@wordpress/components'; import { useState } from '@wordpress/element'; -import { find } from 'lodash'; +import { getAdminLink } from '@woocommerce/settings'; + /** * Internal dependencies */ @@ -17,14 +18,26 @@ import { importTypes } from './importTypes'; import './style.scss'; import useProductTypeListItems from '../experimental-products/use-product-types-list-items'; import { getProductTypes } from '../experimental-products/utils'; +import LoadSampleProductModal from '../components/load-sample-product-modal'; +import useLoadSampleProducts from '../components/use-load-sample-products'; const Products = () => { const [ showStacks, setStackVisibility ] = useState< boolean >( false ); + + const { + loadSampleProduct, + isLoadingSampleProducts, + } = useLoadSampleProducts( { + redirectUrlAfterSuccess: getAdminLink( + 'edit.php?post_type=product&wc_onboarding_active_task=products' + ), + } ); const StacksComponent = ( ); return ( @@ -38,6 +51,7 @@ const Products = () => { { showStacks && StacksComponent }
+ { isLoadingSampleProducts && } ); }; From a4bd70c28e2690727a1da260720334070d95016a Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Fri, 29 Apr 2022 13:07:07 +0800 Subject: [PATCH 11/11] Add changelog --- plugins/woocommerce/changelog/add-32412-load-sample-products | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/add-32412-load-sample-products diff --git a/plugins/woocommerce/changelog/add-32412-load-sample-products b/plugins/woocommerce/changelog/add-32412-load-sample-products new file mode 100644 index 00000000000..c120f79b9f0 --- /dev/null +++ b/plugins/woocommerce/changelog/add-32412-load-sample-products @@ -0,0 +1,4 @@ +Significance: patch +Type: add + +Add load sample products for experimental product task