From 5453737747094705ca1a860af646720f62e9ce06 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Thu, 12 May 2022 09:56:53 +0800
Subject: [PATCH] Fix product task text shown before accordion is expanded on
 stack layout

---
 .../fills/experimental-products/index.scss    |  2 +-
 .../fills/experimental-products/index.tsx     |  1 +
 .../fills/experimental-products/stack.scss    |  1 +
 .../fills/experimental-products/stack.tsx     | 75 ++++++++++---------
 .../experimental-products/test/index.tsx      |  4 +
 .../experimental-products/test/stack.tsx      | 18 +++++
 6 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.scss b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.scss
index 8f6aceb94ae..6f966a4c441 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.scss
+++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.scss
@@ -22,7 +22,7 @@
 		color: #007cba;
 		padding: 0;
 		height: fit-content;
-		margin-top: 25px;
+		margin-top: 21px;
 		justify-content: center;
 
 		svg {
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 1c5dadde5f8..406b31d79b2 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx
+++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx
@@ -116,6 +116,7 @@ export const Products = () => {
 							<Stack
 								items={ visibleProductTypes }
 								onClickLoadSampleProduct={ loadSampleProduct }
+								showOtherOptions={ isExpanded }
 							/>
 						) : (
 							<CardLayout items={ visibleProductTypes } />
diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.scss b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.scss
index 43e5c46d8cd..ed13070f743 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.scss
+++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.scss
@@ -67,6 +67,7 @@
 	.woocommerce-stack__other-options {
 		display: block;
 		margin-top: 20px;
+		margin-bottom: 4px;
 		color: $gray-700;
 		line-height: 16px;
 	}
diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx
index 191fffee528..f0a05edfc25 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx
+++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx
@@ -18,52 +18,55 @@ type StackProps = {
 		onClick: () => void;
 	} )[];
 	onClickLoadSampleProduct: () => void;
+	showOtherOptions?: boolean;
 };
 
 const Stack: React.FC< StackProps > = ( {
 	items,
 	onClickLoadSampleProduct,
+	showOtherOptions = true,
 } ) => {
 	return (
 		<div className="woocommerce-products-stack">
 			<List items={ items } />
-			<Text className="woocommerce-stack__other-options">
-				{ interpolateComponents( {
-					mixedString: __(
-						'Can’t find your product type? {{sbLink}}Start Blank{{/sbLink}} or {{LspLink}}Load Sample Products{{/LspLink}} to see what they look like in your store.',
-						'woocommerce'
-					),
-					components: {
-						sbLink: (
-							<Link
-								onClick={ () => {
-									window.location = getAdminLink(
-										'post-new.php?post_type=product&wc_onboarding_active_task=products&tutorial=true'
-									);
-									return false;
-								} }
-								href=""
-								type="wc-admin"
-							>
-								<></>
-							</Link>
+			{ showOtherOptions && (
+				<Text className="woocommerce-stack__other-options">
+					{ interpolateComponents( {
+						mixedString: __(
+							'Can’t find your product type? {{sbLink}}Start Blank{{/sbLink}} or {{LspLink}}Load Sample Products{{/LspLink}} to see what they look like in your store.',
+							'woocommerce'
 						),
-						LspLink: (
-							// TODO: Update this to the load sample product.
-							<Link
-								href=""
-								type="wc-admin"
-								onClick={ () => {
-									onClickLoadSampleProduct();
-									return false;
-								} }
-							>
-								<></>
-							</Link>
-						),
-					},
-				} ) }
-			</Text>
+						components: {
+							sbLink: (
+								<Link
+									onClick={ () => {
+										window.location = getAdminLink(
+											'post-new.php?post_type=product&wc_onboarding_active_task=products&tutorial=true'
+										);
+										return false;
+									} }
+									href=""
+									type="wc-admin"
+								>
+									<></>
+								</Link>
+							),
+							LspLink: (
+								<Link
+									href=""
+									type="wc-admin"
+									onClick={ () => {
+										onClickLoadSampleProduct();
+										return false;
+									} }
+								>
+									<></>
+								</Link>
+							),
+						},
+					} ) }
+				</Text>
+			) }
 		</div>
 	);
 };
diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx
index 933aa0abb2c..6fe976a18a2 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx
+++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx
@@ -93,6 +93,10 @@ describe( 'Products', () => {
 		const fetchMock = jest.spyOn( global, 'fetch' );
 		const { queryByText, getByRole } = render( <Products /> );
 
+		userEvent.click(
+			getByRole( 'button', { name: 'View more product types' } )
+		);
+
 		expect( queryByText( 'Load Sample Products' ) ).toBeInTheDocument();
 
 		userEvent.click(
diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx
index 509b11539d9..ab69cdf961c 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx
+++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx
@@ -27,6 +27,24 @@ describe( 'Stack', () => {
 		expect( queryAllByRole( 'link' ) ).toHaveLength( 2 );
 	} );
 
+	it( 'should not render other product options', () => {
+		const { queryByText } = render(
+			<Stack
+				showOtherOptions={ false }
+				onClickLoadSampleProduct={ () => {} }
+				items={ [
+					{
+						...productTypes[ 0 ],
+						onClick: () => {},
+					},
+				] }
+			/>
+		);
+
+		expect( queryByText( 'Start Blank' ) ).not.toBeInTheDocument();
+		expect( queryByText( 'Load Sample Products' ) ).not.toBeInTheDocument();
+	} );
+
 	it( 'should call onClickLoadSampleProduct when the "Load Sample Products" link is clicked', async () => {
 		const onClickLoadSampleProduct = jest.fn();
 		const { getByRole } = render(