add: update onboarding task list copies and illustrations

packages/js/admin-e2e-tests/changelog/update-task-list-copies

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Update tests for new task list copies

packages/js/admin-e2e-tests/src/constants/taskTitles.ts

@@ -1,10 +1,9 @@
 export const TaskTitles = {
 	storeDetails: 'Store details',
-	addPayments: 'Set up payments',
-	wooPayments:
-		'Set up WooPaymentsBy setting up, you are agreeing to the Terms of Service2 minutes',
-	addProducts: 'Add my products',
-	taxSetup: 'Set up tax rates',
-	setUpShippingCosts: 'Set up shipping',
+	addPayments: 'Get paid',
+	wooPayments: 'Get paid with WooPayments',
+	addProducts: 'Add your products',
+	taxSetup: 'Collect sales tax',
+	setUpShippingCosts: 'Get your products shipped',
 	personalizeStore: 'Personalize my store',
 };

packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts

@@ -18,7 +18,7 @@ export class PaymentsSetup extends BasePage {
 	url = 'wp-admin/admin.php?page=wc-admin&task=payments';
 
 	async isDisplayed(): Promise< void > {
-		await waitForElementByText( 'h1', 'Set up payments' );
+		await waitForElementByText( 'h1', 'Get paid' );
 	}
 
 	async possiblyCloseHelpModal(): Promise< void > {

packages/js/admin-e2e-tests/src/pages/ProductsSetup.ts

@@ -8,7 +8,7 @@ export class ProductsSetup extends BasePage {
 	url = 'wp-admin/admin.php?page=wc-admin&task=products';
 
 	async isDisplayed(): Promise< void > {
-		await waitForElementByText( 'h1', 'Add my products' );
+		await waitForElementByText( 'h1', 'Add your products' );
 	}
 
 	async isStartWithATemplateDisplayed(

packages/js/admin-e2e-tests/src/specs/tasks/payment.ts

@@ -44,7 +44,7 @@ export const testAdminPaymentSetupTask = () => {
 		} );
 
 		it( 'Can visit the payment setup task from the homescreen if the setup wizard has been skipped', async () => {
-			await homeScreen.clickOnTaskList( 'Set up payments' );
+			await homeScreen.clickOnTaskList( 'Get paid' );
 			await paymentsSetup.possiblyCloseHelpModal();
 			await paymentsSetup.isDisplayed();
 		} );
@@ -71,7 +71,7 @@ export const testAdminPaymentSetupTask = () => {
 			await homeScreen.navigate();
 			await homeScreen.isDisplayed();
 			await waitForTimeout( 1000 );
-			await homeScreen.clickOnTaskList( 'Set up payments' );
+			await homeScreen.clickOnTaskList( 'Get paid' );
 			await paymentsSetup.possiblyCloseHelpModal();
 			await paymentsSetup.isDisplayed();
 			await paymentsSetup.showOtherPaymentMethods();

packages/js/e2e-core-tests/src/specs/activate-and-setup/onboarding-tasklist.test.js

@@ -78,9 +78,9 @@ const runTaskListTest = () => {
 
 			// Work around for https://github.com/woocommerce/woocommerce-admin/issues/6761
 			if ( taskListItems.length === 6 ) {
-				// Click on "Set up shipping" task to move to the next step
+				// Click on "Get your products shipped" task to move to the next step
 				const [ setupTaskListItem ] = await page.$x(
-					'//div[contains(text(),"Set up shipping")]'
+					'//div[contains(text(),"Get your products shipped")]'
 				);
 				await setupTaskListItem.click();
 

plugins/woocommerce-admin/client/task-lists/fills/utils.js

@@ -11,7 +11,7 @@ const onboardingData = getAdminSetting( 'onboarding' );
 export const isImportProduct = () => {
 	return (
 		window?.wcAdminFeatures?.[ 'import-products-task' ] &&
-		onboardingData?.profile?.selling_venues &&
-		onboardingData?.profile?.selling_venues !== 'no'
+		onboardingData?.profile?.business_choice &&
+		onboardingData?.profile?.business_choice === 'im_already_selling'
 	);
 };

plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/appearance.js

@@ -7,7 +7,6 @@ import { Button } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import TimerImage from './timer.svg';
 import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 import { useAppearanceClick } from '../../../fills/appearance';
 
@@ -17,7 +16,6 @@ const AppearanceHeader = ( { task } ) => {
 	const taskTitle = task.title;
 	const taskDescription = task.content;
 	const taskCta = task.actionLabel;
-	const taskTime = task.time;
 
 	return (
 		<div className="woocommerce-task-header__contents-container">
@@ -39,10 +37,6 @@ const AppearanceHeader = ( { task } ) => {
 				>
 					{ taskCta }
 				</Button>
-				<p className="woocommerce-task-header__timer">
-					<img src={ TimerImage } alt="Timer" />{ ' ' }
-					<span>{ taskTime }</span>
-				</p>
 			</div>
 		</div>
 	);

plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/marketing.js

@@ -7,22 +7,21 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TimerImage from './timer.svg';
 import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const MarketingHeader = ( { task, goToTask } ) => {
 	return (
 		<div className="woocommerce-task-header__contents-container">
 			<img
 				alt={ __( 'Marketing illustration', 'woocommerce' ) }
-				src={ WC_ASSET_URL + 'images/task_list/sales-illustration.png' }
+				src={ WC_ASSET_URL + 'images/task_list/sales-illustration.svg' }
 				className="svg-background"
 			/>
 			<div className="woocommerce-task-header__contents">
-				<h1>{ __( 'Get more sales', 'woocommerce' ) }</h1>
+				<h1>{ __( 'Reach more customers', 'woocommerce' ) }</h1>
 				<p>
 					{ __(
-						'Give your business a boost by enabling social channels such as newsletter, Facebook, Google, in-person selling, and more.',
+						'Start growing your business by showcasing your products on social media and Google, boost engagement with email marketing, and more!',
 						'woocommerce'
 					) }
 				</p>
@@ -31,12 +30,8 @@ const MarketingHeader = ( { task, goToTask } ) => {
 					isPrimary={ ! task.isComplete }
 					onClick={ goToTask }
 				>
-					{ __( 'Add sales channels', 'woocommerce' ) }
+					{ __( 'Grow your business', 'woocommerce' ) }
 				</Button>
-				<p className="woocommerce-task-header__timer">
-					<img src={ TimerImage } alt="Timer" />{ ' ' }
-					<span>{ task.time }</span>
-				</p>
 			</div>
 		</div>
 	);

plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/payments.js

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TimerImage from './timer.svg';
 import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const PaymentsHeader = ( { task, goToTask } ) => {
@@ -16,15 +15,15 @@ const PaymentsHeader = ( { task, goToTask } ) => {
 			<img
 				alt={ __( 'Payment illustration', 'woocommerce' ) }
 				src={
-					WC_ASSET_URL + 'images/task_list/payment-illustration.png'
+					WC_ASSET_URL + 'images/task_list/payment-illustration.svg'
 				}
 				className="svg-background"
 			/>
 			<div className="woocommerce-task-header__contents">
-				<h1>{ __( 'Add a way to get paid', 'woocommerce' ) }</h1>
+				<h1>{ __( 'It’s time to get paid', 'woocommerce' ) }</h1>
 				<p>
 					{ __(
-						'Choose from fast & secure online and offline payment methods to make it easy for your customers to pay in your store.',
+						'Give your customers an easy and convenient way to pay! Set up one (or more!) of our fast and secure online or in person payment methods.',
 						'woocommerce'
 					) }
 				</p>
@@ -33,12 +32,8 @@ const PaymentsHeader = ( { task, goToTask } ) => {
 					isPrimary={ ! task.isComplete }
 					onClick={ goToTask }
 				>
-					{ __( 'View options', 'woocommerce' ) }
+					{ __( 'Get paid', 'woocommerce' ) }
 				</Button>
-				<p className="woocommerce-task-header__timer">
-					<img src={ TimerImage } alt="Timer" />{ ' ' }
-					<span>{ task.time }</span>
-				</p>
 			</div>
 		</div>
 	);

plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/products.js

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TimerImage from './timer.svg';
 import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const ProductsHeader = ( { task, goToTask } ) => {
@@ -17,15 +16,15 @@ const ProductsHeader = ( { task, goToTask } ) => {
 				alt={ __( 'Products illustration', 'woocommerce' ) }
 				src={
 					WC_ASSET_URL +
-					'images/task_list/sales-section-illustration.png'
+					'images/task_list/sales-section-illustration.svg'
 				}
 				className="svg-background"
 			/>
 			<div className="woocommerce-task-header__contents">
-				<h1>{ __( 'Add products to sell', 'woocommerce' ) }</h1>
+				<h1>{ __( 'List your products', 'woocommerce' ) }</h1>
 				<p>
 					{ __(
-						'Build your catalog by adding what you want to sell. You can add products manually or import them from a different store.',
+						'Start selling by adding products or services to your store. Choose to list products manually, or import them from a different store. ',
 						'woocommerce'
 					) }
 				</p>
@@ -36,10 +35,6 @@ const ProductsHeader = ( { task, goToTask } ) => {
 				>
 					{ __( 'Add products', 'woocommerce' ) }
 				</Button>
-				<p className="woocommerce-task-header__timer">
-					<img src={ TimerImage } alt="Timer" />{ ' ' }
-					<span>{ __( '2 minutes', 'woocommerce' ) }</span>
-				</p>
 			</div>
 		</div>
 	);

plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/purchase.js

@@ -10,7 +10,6 @@ import { recordEvent } from '@woocommerce/tracks';
  * Internal dependencies
  */
 import CartModal from '~/dashboard/components/cart-modal';
-import TimerImage from './timer.svg';
 import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const PurchaseHeader = ( { task } ) => {
@@ -48,10 +47,6 @@ const PurchaseHeader = ( { task } ) => {
 				>
 					{ __( 'Continue', 'woocommerce' ) }
 				</Button>
-				<p className="woocommerce-task-header__timer">
-					<img src={ TimerImage } alt="Timer" />{ ' ' }
-					<span>{ task.time }</span>
-				</p>
 			</div>
 			{ cartModalOpen && (
 				<CartModal

plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/shipping.js

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TimerImage from './timer.svg';
 import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const ShippingHeader = ( { task, goToTask } ) => {
@@ -16,17 +15,15 @@ const ShippingHeader = ( { task, goToTask } ) => {
 			<img
 				alt={ __( 'Shipping illustration', 'woocommerce' ) }
 				src={
-					WC_ASSET_URL + 'images/task_list/shipping-illustration.png'
+					WC_ASSET_URL + 'images/task_list/shipping-illustration.svg'
 				}
 				className="svg-background"
 			/>
 			<div className="woocommerce-task-header__contents">
-				<h1>
-					{ __( 'Set up shipping for your store', 'woocommerce' ) }
-				</h1>
+				<h1>{ __( 'Get your products shipped', 'woocommerce' ) }</h1>
 				<p>
 					{ __(
-						'Choose where and how you will ship your products, select shipping methods, and add fixed or calculated rates.',
+						'Choose where and how you’d like to ship your products, along with any fixed or calculated rates.',
 						'woocommerce'
 					) }
 				</p>
@@ -35,12 +32,8 @@ const ShippingHeader = ( { task, goToTask } ) => {
 					isPrimary={ ! task.isComplete }
 					onClick={ goToTask }
 				>
-					{ __( 'Add shipping zones', 'woocommerce' ) }
+					{ __( 'Start shipping', 'woocommerce' ) }
 				</Button>
-				<p className="woocommerce-task-header__timer">
-					<img src={ TimerImage } alt="Timer" />{ ' ' }
-					<span>{ task.time }</span>
-				</p>
 			</div>
 		</div>
 	);

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

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TimerImage from './timer.svg';
 import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const StoreDetailsHeader = ( { task, goToTask } ) => {
@@ -38,10 +37,6 @@ const StoreDetailsHeader = ( { task, goToTask } ) => {
 				>
 					{ __( 'Add details', 'woocommerce' ) }
 				</Button>
-				<p className="woocommerce-task-header__timer">
-					<img src={ TimerImage } alt="Timer" />{ ' ' }
-					<span>{ __( '2 minutes', 'woocommerce' ) }</span>
-				</p>
 			</div>
 		</div>
 	);

plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/tax.js

@@ -7,22 +7,21 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TimerImage from './timer.svg';
 import { WC_ASSET_URL } from '../../../../utils/admin-settings';
 
 const TaxHeader = ( { task, goToTask } ) => {
 	return (
 		<div className="woocommerce-task-header__contents-container">
 			<img
 				alt={ __( 'Tax illustration', 'woocommerce' ) }
-				src={ WC_ASSET_URL + 'images/task_list/tax-illustration.png' }
+				src={ WC_ASSET_URL + 'images/task_list/tax-illustration.svg' }
 				className="svg-background"
 			/>
 			<div className="woocommerce-task-header__contents">
-				<h1>{ __( 'Add your tax rates', 'woocommerce' ) }</h1>
+				<h1>{ __( 'Configure your tax settings', 'woocommerce' ) }</h1>
 				<p>
 					{ __(
-						'Set up tax rates manually or use WooCommerce Tax to automate your sales tax calculations for you.',
+						'Choose to set up your tax rates manually, or use one of our tax automation tools.',
 						'woocommerce'
 					) }
 				</p>
@@ -31,12 +30,8 @@ const TaxHeader = ( { task, goToTask } ) => {
 					isPrimary={ ! task.isComplete }
 					onClick={ goToTask }
 				>
-					{ __( 'Yes, please', 'woocommerce' ) }
+					{ __( 'Collect sales tax', 'woocommerce' ) }
 				</Button>
-				<p className="woocommerce-task-header__timer">
-					<img src={ TimerImage } alt="Timer" />{ ' ' }
-					<span>{ task.time }</span>
-				</p>
 			</div>
 		</div>
 	);