Merge pull request #32789 from woocommerce/add/32788-add-experimental-import-products-task

Add experimental import products task feature flag & experimental-import-products component

plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/CardList.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { List } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import './cards.scss';
+
+type Card = {
+	key: string;
+	title: string;
+	content: string;
+	before: JSX.Element;
+};
+
+type CardListProps = {
+	items: Card[];
+};
+
+const CardList: React.FC< CardListProps > = ( { items } ) => {
+	return (
+		<div className="woocommerce-products-card-list">
+			<List items={ items } />
+		</div>
+	);
+};
+
+export default CardList;

plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/cards.scss

@@ -0,0 +1,70 @@
+.woocommerce-products-card-list {
+	a {
+		color: #007cba;
+	}
+
+	.woocommerce-list__item {
+		float: left;
+		border-radius: 3px;
+		border: 1px solid #dcdcde;
+		width: 263px;
+		height: 226px;
+		margin: 12px;
+		text-align: center;
+		align-items: start;
+
+		&:hover {
+			background-color: #fff;
+			border: 1.5px solid #007cba;
+		}
+
+		.woocommerce-list__item-inner {
+			padding-top: 40px;
+			flex-flow: wrap;
+			justify-content: center;
+		}
+
+		&:not(.transitions-disabled) {
+			&.woocommerce-list__item-enter {
+				transform: none;
+			}
+
+			&.woocommerce-list__item-enter-active {
+				transform: none;
+			}
+
+			&.woocommerce-list__item-exit-active {
+				display: none;
+			}
+		}
+
+		> .woocommerce-list__item-inner {
+			box-shadow: none;
+		}
+	}
+
+	.woocommerce-list__item-text {
+		margin-top: 16px;
+		.woocommerce-list__item-content {
+			margin-top: 16px;
+		}
+	}
+
+	.woocommerce-list__item-before {
+		background: #f0f6fc;
+		padding: 8px;
+		border-radius: 50%;
+	}
+
+	.woocommerce-list__item-title {
+		color: $gray-900;
+		line-height: 16px;
+		font-weight: 600;
+	}
+
+	.woocommerce-list__item-content {
+		color: $gray-700;
+		line-height: 16px;
+		font-weight: 400;
+	}
+}

plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/importTypes.tsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PageIcon from 'gridicons/dist/pages';
+import ReblogIcon from 'gridicons/dist/reblog';
+
+export const importTypes = [
+	{
+		key: 'from-csv' as const,
+		title: __( 'FROM A CSV FILE', 'woocommerce' ),
+		content: __(
+			'Import all products at once by uploading a CSV file.',
+			'woocommerce'
+		),
+		before: <PageIcon />,
+	},
+	{
+		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'
+		),
+		before: <ReblogIcon />,
+	},
+];

plugins/woocommerce-admin/client/tasks/fills/experimental-import-products/index.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { WooOnboardingTask } from '@woocommerce/onboarding';
+import { registerPlugin } from '@wordpress/plugins';
+
+/**
+ * Internal dependencies
+ */
+import CardList from './CardList';
+import { importTypes } from './importTypes';
+
+const Products = () => {
+	return (
+		<div>
+			<h1>Import products</h1>
+			<CardList items={ importTypes } />
+		</div>
+	);
+};
+
+registerPlugin( 'wc-admin-onboarding-task-products', {
+	// @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated.
+	scope: 'woocommerce-tasks',
+	render: () => (
+		// @ts-expect-error WooOnboardingTask is a pure JS component.
+		<WooOnboardingTask id="products">
+			<Products />
+		</WooOnboardingTask>
+	),
+} );

plugins/woocommerce-admin/client/tasks/fills/index.js

@@ -1,6 +1,8 @@
 /**
  * Internal dependencies
  */
+import { getAdminSetting } from '~/utils/admin-settings';
+
 import './PaymentGatewaySuggestions';
 import './shipping';
 import './Marketing';
@@ -10,7 +12,16 @@ import './tax';
 import './woocommerce-payments';
 import './purchase';
 
+const onboardingData = getAdminSetting( 'onboarding' );
+
 if (
+	window.wcAdminFeatures &&
+	window.wcAdminFeatures[ 'experimental-import-products-task' ] &&
+	onboardingData?.profile?.selling_venues &&
+	onboardingData?.profile?.selling_venues !== 'no'
+) {
+	import( './experimental-import-products' );
+} else if (
 	window.wcAdminFeatures &&
 	window.wcAdminFeatures[ 'experimental-products-task' ]
 ) {

plugins/woocommerce/changelog/add-32789-add-experimental-import-products

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add experimental import product task feature flag & experimental-import products component

plugins/woocommerce/client/admin/config/core.json

@@ -5,6 +5,7 @@
 		"coupons": true,
 		"customer-effort-score-tracks": true,
 		"experimental-products-task": false,
+		"experimental-import-products-task": false,
 		"homescreen": true,
 		"marketing": true,
 		"minified-js": false,

plugins/woocommerce/client/admin/config/development.json

@@ -5,6 +5,7 @@
 		"coupons": true,
 		"customer-effort-score-tracks": true,
 		"experimental-products-task": false,
+		"experimental-import-products-task": false,
 		"homescreen": true,
 		"marketing": true,
 		"minified-js": true,