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/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/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; 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 && } ); }; 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..34ab388d276 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,16 @@ export const Products = () => { const surfacedProductTypeKeys = getSurfacedProductTypeKeys( getOnboardingProductType() ); + + const { + loadSampleProduct, + isLoadingSampleProducts, + } = useLoadSampleProducts( { + redirectUrlAfterSuccess: getAdminLink( + 'edit.php?post_type=product&wc_onboarding_active_task=products' + ), + } ); + const visibleProductTypes = useMemo( () => { const surfacedProductTypes = productTypes.filter( ( productType ) => surfacedProductTypeKeys.includes( productType.key ) @@ -69,13 +82,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 +106,10 @@ export const Products = () => {
{ SHOW_STACK_LAYOUT ? ( - + ) : ( ) } @@ -99,6 +119,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; + } } + > <> ), 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', + } + ) + ); + } ); } ); 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() ); + } ); +} ); 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; 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 483c2199d0c..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 = { @@ -165,7 +166,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. 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 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 ); 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. *