diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/CardList.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/CardList.tsx index 81bd5343c71..1ed769c790a 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/CardList.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/CardList.tsx @@ -11,7 +11,7 @@ import './cards.scss'; type Card = { key: string; title: string; - content: string; + content: string | JSX.Element; before: JSX.Element; }; diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/cards.scss b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/cards.scss index 57a3ee23dbe..14c0f1c22a1 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/cards.scss +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/cards.scss @@ -23,6 +23,9 @@ &:hover { background-color: #fff; border: 1.5px solid #007cba; + .woocommerce-list__item-title { + color: #1e1e1e; + } } .woocommerce-list__item-inner { diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/importTypes.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/importTypes.tsx index fdf03c37c8f..ad44ab8eb0a 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/importTypes.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/importTypes.tsx @@ -4,6 +4,9 @@ import { __ } from '@wordpress/i18n'; import PageIcon from 'gridicons/dist/pages'; import ReblogIcon from 'gridicons/dist/reblog'; +import { getAdminLink } from '@woocommerce/settings'; +import interpolateComponents from '@automattic/interpolate-components'; +import { ExternalLink } from '@wordpress/components'; export const importTypes = [ { @@ -14,14 +17,25 @@ export const importTypes = [ 'woocommerce' ), before: , + href: getAdminLink( + 'edit.php?post_type=product&page=product_importer&wc_onboarding_active_task=products' + ), }, { key: 'from-cart2cart' as const, title: __( 'FROM CART2CART', 'woocommerce' ), - content: __( - 'Migrate all store data like products, customers, orders and much more in no time and in a fully automated way', - 'woocommerce' - ), + href: 'https://woocommerce.com/products/cart2cart/?utm_medium=product', + content: interpolateComponents( { + mixedString: __( + 'Migrate all store data like products, customers, and orders in no time with this 3rd party plugin. {{link}}Learn more{{/link}}', + 'woocommerce' + ), + components: { + link: ( + + ), + }, + } ), before: , }, ]; 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 c7ee6b3d660..323fedece34 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 @@ -3,18 +3,41 @@ */ import { WooOnboardingTask } from '@woocommerce/onboarding'; import { registerPlugin } from '@wordpress/plugins'; - +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'; /** * Internal dependencies */ +import Stacks from '../experimental-products/stack'; import CardList from './CardList'; import { importTypes } from './importTypes'; +import './style.scss'; +import useProductTypeListItems from '../experimental-products/use-product-types-list-items'; +import { getProductTypes } from '../experimental-products/utils'; const Products = () => { + const [ showStacks, setStackVisibility ] = useState< boolean >( false ); + const StacksComponent = ( + + ); return ( -
-

Import products

+
+

{ __( 'Import your products', 'woocommerce' ) }

+
+ + { showStacks && StacksComponent } +
); }; diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/style.scss b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/style.scss new file mode 100644 index 00000000000..b19ad968dbc --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/style.scss @@ -0,0 +1,59 @@ +.woocommerce-products-card-list { + .woocommerce-list__item-content { + a { + display: block; + text-decoration: none; + margin-top: 8px; + } + } + + ul li:nth-child(2) { + .woocommerce-list__item-inner { + padding: 40px 17px 16px 17px; + } + } +} + +.woocommerce-task-import-products { + max-width: 544px; + margin: auto; + + h1 { + text-align: center; + padding: 0 0 32px 0; + } + + button { + color: var(--wp-admin-theme-color); + &:focus:not(:disabled) { + outline: none; + box-shadow: none; + } + } + + .woocommerce-task-import-products-stacks { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 25px 0 12px 0; + .woocommerce-list__item { + .woocommerce-list__item-title { + color: #1e1e1e; + } + .woocommerce-list__item-content { + color: #757575; + } + } + + .woocommerce-list__item-before { + border: 0; + background: none; + svg { + fill: #bbb; + rect { + fill: #bbb; + } + } + } + } +} diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx index a08ed2474ef..d12ac2767c9 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx @@ -11,9 +11,9 @@ import { Icon, chevronRight } from '@wordpress/icons'; /** * Internal dependencies */ -import Link from './icon/link_24px.svg'; -import Widget from './icon/widgets_24px.svg'; -import LightBulb from './icon/lightbulb_24px.svg'; +import Link from './icon/link_24px.js'; +import Widget from './icon/widgets_24px.js'; +import LightBulb from './icon/lightbulb_24px.js'; export const productTypes = Object.freeze( [ { @@ -60,14 +60,14 @@ export const productTypes = Object.freeze( [ key: 'grouped' as const, title: __( 'Grouped product', 'woocommerce' ), content: __( 'A collection of related products.', 'woocommerce' ), - before: Widget, + before: , after: , }, { key: 'external' as const, title: __( 'External product', 'woocommerce' ), content: __( 'Link a product to an external website.', 'woocommerce' ), - before: Link, + before: , after: , }, ] ); @@ -78,7 +78,7 @@ export const LoadSampleProductType = { content: __( 'Load sample products and see what they look like in your store.' ), - before: Light Bulb, + before: , after: , className: 'woocommerce-products-list__item-load-sample-product', }; diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/lightbulb_24px.js b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/lightbulb_24px.js new file mode 100644 index 00000000000..31097cf795c --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/lightbulb_24px.js @@ -0,0 +1,33 @@ +const Lightbulb = () => { + return ( + + + + + + + + + ); +}; + +export default Lightbulb; diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/lightbulb_24px.svg b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/lightbulb_24px.svg deleted file mode 100644 index ddba5a742ef..00000000000 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/lightbulb_24px.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.js b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.js new file mode 100644 index 00000000000..b306d1abccb --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.js @@ -0,0 +1,32 @@ +const Link = () => { + return ( + + + + + + + + + ); +}; +export default Link; diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg deleted file mode 100644 index 4212c9877e7..00000000000 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.js b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.js new file mode 100644 index 00000000000..76673834c8a --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.js @@ -0,0 +1,33 @@ +const Widget = () => { + return ( + + + + + + + + + ); +}; + +export default Widget; diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg deleted file mode 100644 index d8421e726dd..00000000000 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - 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 e599489202d..3b999605034 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx @@ -14,7 +14,7 @@ import { Icon, chevronDown, chevronUp } from '@wordpress/icons'; */ import './index.scss'; import { getAdminSetting } from '~/utils/admin-settings'; -import { getSurfacedProductTypeKeys } from './utils'; +import { getSurfacedProductTypeKeys, getProductTypes } from './utils'; import useProductTypeListItems from './use-product-types-list-items'; import Stack from './stack'; import Footer from './footer'; @@ -50,7 +50,7 @@ const ViewControlButton: React.FC< { export const Products = () => { const [ isExpanded, setIsExpanded ] = useState< boolean >( false ); - const productTypes = useProductTypeListItems(); + const productTypes = useProductTypeListItems( getProductTypes() ); const surfacedProductTypeKeys = getSurfacedProductTypeKeys( getOnboardingProductType() ); diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/use-product-types-list-items.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/use-product-types-list-items.tsx index 52291c7a67b..6f319d8e67b 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/use-product-types-list-items.tsx +++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/use-product-types-list-items.tsx @@ -6,15 +6,15 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { getProductTypes } from './utils'; import useCreateProductByType from './use-create-product-by-type'; +import { ProductType } from './constants'; -const useProductTypeListItems = () => { +const useProductTypeListItems = ( _productTypes: ProductType[] ) => { const { createProductByType } = useCreateProductByType(); const productTypes = useMemo( () => - getProductTypes().map( ( productType ) => ( { + _productTypes.map( ( productType ) => ( { ...productType, onClick: () => createProductByType( productType.key ), } ) ), diff --git a/plugins/woocommerce/changelog/add-32143-add-experimental-import-products b/plugins/woocommerce/changelog/add-32143-add-experimental-import-products new file mode 100644 index 00000000000..ac2b36ceb8e --- /dev/null +++ b/plugins/woocommerce/changelog/add-32143-add-experimental-import-products @@ -0,0 +1,4 @@ +Significance: patch +Type: add + +Add experimental import product task, which replaces the default add products task when selling elsewhere is selected during the OBW. \ No newline at end of file