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:
,
+ before:
,
after:
,
},
{
key: 'external' as const,
title: __( 'External product', 'woocommerce' ),
content: __( 'Link a product to an external website.', 'woocommerce' ),
- before:
,
+ before:
,
after:
,
},
] );
@@ -78,7 +78,7 @@ export const LoadSampleProductType = {
content: __(
'Load sample products and see what they look like in your store.'
),
- before:
,
+ 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