Cleanup task list and re-organize file structure

plugins/woocommerce-admin/client/activity-panel/activity-panel.js

@@ -43,7 +43,7 @@ import { getUnapprovedReviews } from '../homescreen/activity-panel/reviews/utils
 import { ABBREVIATED_NOTIFICATION_SLOT_NAME } from './panels/inbox/abbreviated-notifications-panel';
 import { getAdminSetting } from '~/utils/admin-settings';
 import { getUrlParams } from '~/utils';
-import { useActiveSetupTasklist } from '~/tasks';
+import { useActiveSetupTasklist } from '~/task-lists';
 import { getSegmentsFromPath } from '~/utils/url-helpers';
 import { FeedbackIcon } from '~/products/images/feedback-icon';
 import { ProductFeedbackTour } from '~/guided-tours/add-product-feedback-tour';

plugins/woocommerce-admin/client/activity-panel/panels/setup-tasks/setup-tasks-panel.tsx

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Tasks } from '~/tasks';
+import { TaskLists } from '~/task-lists';
 
 type QueryTypeProps = {
 	query: {
@@ -12,7 +12,7 @@ type QueryTypeProps = {
 export const SetupTasksPanel = ( { query }: QueryTypeProps ) => {
 	return (
 		<div className="woocommerce-setup-panel">
-			<Tasks query={ query } />
+			<TaskLists query={ query } />
 		</div>
 	);
 };

plugins/woocommerce-admin/client/header/index.js

@@ -20,7 +20,7 @@ import { Text, useSlot } from '@woocommerce/experimental';
  */
 import './style.scss';
 import useIsScrolled from '../hooks/useIsScrolled';
-import { TasksReminderBar, useActiveSetupTasklist } from '../tasks';
+import { TasksReminderBar, useActiveSetupTasklist } from '../task-lists';
 
 export const PAGE_TITLE_FILTER = 'woocommerce_admin_header_page_title';
 

plugins/woocommerce-admin/client/homescreen/layout.js

@@ -30,7 +30,11 @@ import InboxPanel from '../inbox-panel';
 import { IntroModal as NavigationIntroModal } from '../navigation/components/intro-modal';
 import StatsOverview from './stats-overview';
 import { StoreManagementLinks } from '../store-management-links';
-import { TasksPlaceholder, useActiveSetupTasklist } from '../tasks';
+import {
+	TasksPlaceholder,
+	useActiveSetupTasklist,
+	ProgressTitle,
+} from '../task-lists';
 import {
 	WELCOME_MODAL_DISMISSED_OPTION_NAME,
 	WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME,
@@ -41,14 +45,15 @@ import { MobileAppModal } from './mobile-app-modal';
 import './style.scss';
 import '../dashboard/style.scss';
 import { getAdminSetting } from '~/utils/admin-settings';
-import { ProgressTitle } from '../task-lists';
 import { WooHomescreenHeaderBanner } from './header-banner-slot';
 import { WooHomescreenWCPayFeature } from './wcpay-feature-slot';
 
-const Tasks = lazy( () =>
-	import( /* webpackChunkName: "tasks" */ '../tasks' ).then( ( module ) => ( {
-		default: module.Tasks,
-	} ) )
+const TaskLists = lazy( () =>
+	import( /* webpackChunkName: "tasks" */ '../task-lists' ).then(
+		( module ) => ( {
+			default: module.TaskLists,
+		} )
+	)
 );
 
 export const Layout = ( {
@@ -127,7 +132,7 @@ export const Layout = ( {
 						<ProgressTitle taskListId={ activeSetupTaskList } />
 					</>
 				) }
-				<Tasks query={ query } />
+				<TaskLists query={ query } />
 			</Suspense>
 		);
 	};

plugins/woocommerce-admin/client/layout/index.js

@@ -55,7 +55,7 @@ const StoreAlerts = lazy( () =>
 
 const WCPayUsageModal = lazy( () =>
 	import(
-		/* webpackChunkName: "wcpay-usage-modal" */ '../tasks/fills/PaymentGatewaySuggestions/components/WCPay/UsageModal'
+		/* webpackChunkName: "wcpay-usage-modal" */ '../task-lists/fills/PaymentGatewaySuggestions/components/WCPay/UsageModal'
 	)
 );
 

plugins/woocommerce-admin/client/payments/test/payment-recommendations.test.tsx

@@ -9,7 +9,7 @@ import { recordEvent } from '@woocommerce/tracks';
  * Internal dependencies
  */
 import PaymentRecommendations from '../payment-recommendations';
-import { isWCPaySupported } from '../../tasks/fills/PaymentGatewaySuggestions/components/WCPay';
+import { isWCPaySupported } from '../../task-lists/fills/PaymentGatewaySuggestions/components/WCPay';
 import { createNoticesFromResponse } from '~/lib/notices';
 
 jest.mock( '@woocommerce/tracks', () => ( { recordEvent: jest.fn() } ) );
@@ -44,7 +44,7 @@ jest.mock( '@woocommerce/components', () => ( {
 	),
 } ) );
 jest.mock(
-	'../../tasks/fills/PaymentGatewaySuggestions/components/WCPay',
+	'../../task-lists/fills/PaymentGatewaySuggestions/components/WCPay',
 	() => ( {
 		isWCPaySupported: jest.fn(),
 	} )

plugins/woocommerce-admin/client/task-lists/progress-header/default-progress-header.tsx → plugins/woocommerce-admin/client/task-lists/components/progress-header/default-progress-header.tsx

@@ -9,7 +9,7 @@ import { getVisibleTasks, ONBOARDING_STORE_NAME } from '@woocommerce/data';
  * Internal dependencies
  */
 import './progress-header.scss';
-import { TaskListMenu } from '~/tasks/task-list-menu';
+import { TaskListMenu } from '~/task-lists/components/task-list-menu';
 
 export type DefaultProgressHeaderProps = {
 	taskListId: string;

plugins/woocommerce-admin/client/tasks/task-list.tsx → plugins/woocommerce-admin/client/task-lists/components/task-list.tsx

@@ -21,14 +21,13 @@ import { useLayoutContext } from '@woocommerce/admin-layout';
 import { TaskListItem } from './task-list-item';
 import { TaskListMenu } from './task-list-menu';
 import './task-list.scss';
-import { ProgressHeader } from '~/task-lists/progress-header';
+import { ProgressHeader } from '~/task-lists/components/progress-header';
 
 export type TaskListProps = TaskListType & {
 	query: {
 		task?: string;
 	};
 	eventName?: string;
-	twoColumns?: boolean;
 	keepCompletedTaskList?: 'yes' | 'no';
 	cesHeader?: boolean;
 };

plugins/woocommerce-admin/client/tasks/fills/Marketing/test/index.tsx → plugins/woocommerce-admin/client/task-lists/fills/Marketing/test/index.tsx

@@ -6,7 +6,7 @@ import { Extension } from '@woocommerce/data';
 /**
  * Internal dependencies
  */
-import { transformExtensionToPlugin, getMarketingExtensionLists } from '../';
+import { transformExtensionToPlugin, getMarketingExtensionLists } from '..';
 
 const basicPlugins: Extension[] = [
 	{

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/test/setup.js → plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/Setup/test/setup.js

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { Setup } from '../';
+import { Setup } from '..';
 import { enqueueScript } from '~/utils/enqueue-script';
 
 jest.mock( '@woocommerce/components', () => {

plugins/woocommerce-admin/client/tasks/fills/experimental-shipping-recommendation/components/store-location.tsx → plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/components/store-location.tsx

@@ -11,7 +11,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { getCountryCode } from '~/dashboard/utils';
 import { hasCompleteAddress } from '../../tax/utils';
-import { default as StoreLocationForm } from '~/tasks/fills/steps/location';
+import { default as StoreLocationForm } from '~/task-lists/fills/steps/location';
 
 export const StoreLocation: React.FC< {
 	nextStep: () => void;

plugins/woocommerce-admin/client/tasks/fills/index.ts → plugins/woocommerce-admin/client/task-lists/fills/index.ts

@@ -9,6 +9,7 @@ import './appearance';
 import './tax';
 import './woocommerce-payments';
 import './purchase';
+import './deprecated-tasks';
 
 const possiblyImportProductTask = async () => {
 	if ( isImportProduct() ) {

plugins/woocommerce-admin/client/tasks/fills/tax/components/store-location.tsx → plugins/woocommerce-admin/client/task-lists/fills/tax/components/store-location.tsx

@@ -16,7 +16,7 @@ import {
 	default as StoreLocationForm,
 	FormValues,
 	defaultValidate,
-} from '~/tasks/fills/steps/location';
+} from '~/task-lists/fills/steps/location';
 
 const validateLocationForm = ( values: FormValues ) => {
 	const errors = defaultValidate( values );

plugins/woocommerce-admin/client/task-lists/index.ts

@@ -1,2 +1,10 @@
-export * from './progress-header';
+/**
+ * Internal dependencies
+ */
+import './fills';
+
+export * from './task-lists';
+export * from './reminder-bar';
 export * from './progress-title';
+export * from './components/placeholder';
+export * from './hooks/useActiveSetupList';

plugins/woocommerce-admin/client/two-column-tasks/dismiss-modal.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/dismiss-modal.tsx

@@ -8,6 +8,10 @@ const DismissModal = ( {
 	showDismissModal,
 	setShowDismissModal,
 	hideTasks,
+}: {
+	showDismissModal: boolean;
+	setShowDismissModal: ( show: boolean ) => void;
+	hideTasks: ( task: string ) => void;
 } ) => {
 	const closeModal = () => setShowDismissModal( false );
 	const title = __( 'Hide store setup tasks', 'woocommerce' );

plugins/woocommerce-admin/client/two-column-tasks/headers/appearance.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/appearance.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import TimerImage from './timer.svg';
-import { WC_ASSET_URL } from '../../utils/admin-settings';
+import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const AppearanceHeader = ( { task, goToTask } ) => {
 	return (

plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import StoreDetailsHeader from './store-details';
+import TaxHeader from './tax';
+import MarketingHeader from './marketing';
+import AppearanceHeader from './appearance';
+import ShippingHeader from './shipping';
+import ProductsHeader from './products';
+import PurchaseHeader from './purchase';
+import PaymentsHeader from './payments';
+import WoocommercePaymentsHeader from './woocommerce-payments';
+
+export const taskHeaders: Record< string, React.ElementType > = {
+	store_details: StoreDetailsHeader,
+	tax: TaxHeader,
+	shipping: ShippingHeader,
+	marketing: MarketingHeader,
+	appearance: AppearanceHeader,
+	payments: PaymentsHeader,
+	products: ProductsHeader,
+	purchase: PurchaseHeader,
+	'woocommerce-payments': WoocommercePaymentsHeader,
+};

plugins/woocommerce-admin/client/two-column-tasks/headers/marketing.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/marketing.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import TimerImage from './timer.svg';
-import { WC_ASSET_URL } from '../../utils/admin-settings';
+import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const MarketingHeader = ( { task, goToTask } ) => {
 	return (

plugins/woocommerce-admin/client/two-column-tasks/headers/payments.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/payments.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import TimerImage from './timer.svg';
-import { WC_ASSET_URL } from '../../utils/admin-settings';
+import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const PaymentsHeader = ( { task, goToTask } ) => {
 	return (

plugins/woocommerce-admin/client/two-column-tasks/headers/products.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/products.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import TimerImage from './timer.svg';
-import { WC_ASSET_URL } from '../../utils/admin-settings';
+import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const ProductsHeader = ( { task, goToTask } ) => {
 	return (

plugins/woocommerce-admin/client/two-column-tasks/headers/purchase.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/purchase.js

@@ -11,7 +11,7 @@ import { recordEvent } from '@woocommerce/tracks';
  */
 import CartModal from '~/dashboard/components/cart-modal';
 import TimerImage from './timer.svg';
-import { WC_ASSET_URL } from '../../utils/admin-settings';
+import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const PurchaseHeader = ( { task } ) => {
 	const [ cartModalOpen, setCartModalOpen ] = useState( false );

plugins/woocommerce-admin/client/two-column-tasks/headers/shipping.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/shipping.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import TimerImage from './timer.svg';
-import { WC_ASSET_URL } from '../../utils/admin-settings';
+import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const ShippingHeader = ( { task, goToTask } ) => {
 	return (

plugins/woocommerce-admin/client/two-column-tasks/headers/store-details.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/store-details.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import TimerImage from './timer.svg';
-import { WC_ASSET_URL } from '../../utils/admin-settings';
+import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const StoreDetailsHeader = ( { task, goToTask } ) => {
 	return (

plugins/woocommerce-admin/client/two-column-tasks/headers/tax.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/tax.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import TimerImage from './timer.svg';
-import { WC_ASSET_URL } from '../../utils/admin-settings';
+import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const TaxHeader = ( { task, goToTask } ) => {
 	return (

plugins/woocommerce-admin/client/two-column-tasks/headers/woocommerce-payments.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/woocommerce-payments.js

@@ -14,7 +14,7 @@ import interpolateComponents from '@automattic/interpolate-components';
  * Internal dependencies
  */
 import TimerImage from './timer.svg';
-import { WC_ASSET_URL } from '../../utils/admin-settings';
+import { WC_ASSET_URL } from '~/utils/admin-settings';
 
 const connect = ( createNotice, setIsBusy ) => {
 	const errorMessage = __(

plugins/woocommerce-admin/client/two-column-tasks/completed-header.tsx → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx

@@ -21,8 +21,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import './completed-header.scss';
-import HeaderImage from './completed-celebration-header.svg';
+import './task-list-completed-header.scss';
+import HeaderImage from '../assets/completed-celebration-header.svg';
 
 type TaskListCompletedHeaderProps = {
 	hideTasks: () => void;
@@ -149,7 +149,7 @@ export const TaskListCompletedHeader: React.FC<
 		<>
 			<div
 				className={ classnames(
-					'woocommerce-task-dashboard__container two-column-experiment'
+					'woocommerce-task-dashboard__container setup-task-list'
 				) }
 			>
 				<Card

plugins/woocommerce-admin/client/two-column-tasks/completed.js → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed.tsx

@@ -8,16 +8,20 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import '../tasks/task-list.scss';
-import HeaderImage from './completed.svg';
+import HeaderImage from '../assets/task-list-completed.svg';
 
-export const TaskListCompleted = ( { twoColumns, hideTasks, keepTasks } ) => {
+export const TaskListCompleted = ( {
+	hideTasks,
+	keepTasks,
+}: {
+	hideTasks: () => void;
+	keepTasks: () => void;
+} ) => {
 	return (
 		<>
 			<div
 				className={ classnames(
-					'woocommerce-task-dashboard__container two-column-experiment',
-					{ 'two-columns': twoColumns !== false }
+					'woocommerce-task-dashboard__container setup-task-list'
 				) }
 			>
 				<Card

plugins/woocommerce-admin/client/two-column-tasks/task-list-item-two-column.tsx → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx

@@ -18,7 +18,7 @@ export type TaskListItemProps = {
 	trackClick: () => void;
 };
 
-export const TaskListItemTwoColumn: React.FC< TaskListItemProps > = ( {
+export const TaskListItem: React.FC< TaskListItemProps > = ( {
 	task,
 	activeTaskId,
 	taskIndex,

plugins/woocommerce-admin/client/two-column-tasks/placeholder.tsx → plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-placeholder.tsx

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import './style.scss';
 
 type TasksPlaceholderProps = {
 	numTasks?: number;
@@ -16,15 +15,16 @@ type TasksPlaceholderProps = {
 	};
 };
 
-const TaskListPlaceholder: React.FC< TasksPlaceholderProps > = ( props ) => {
-	const { numTasks = 5, twoColumns = false } = props;
+export const TaskListPlaceholder: React.FC< TasksPlaceholderProps > = (
+	props
+) => {
+	const { numTasks = 5 } = props;
 
 	return (
 		<div
-			className={ classnames( 'woocommerce-task-dashboard__container', {
-				'two-columns': twoColumns,
-				'two-column-experiment': true,
-			} ) }
+			className={ classnames(
+				'woocommerce-task-dashboard__container setup-task-list'
+			) }
 		>
 			<div className="components-card is-size-large woocommerce-task-card woocommerce-homescreen-card is-loading">
 				<div className="components-card__header is-size-medium">

plugins/woocommerce-admin/client/task-lists/setup-task-list/index.ts

@@ -0,0 +1,2 @@
+export * from './setup-task-list';
+export * from './components/task-list-placeholder';