From fd378be6eb4c587297bbe37563f17c08bab36459 Mon Sep 17 00:00:00 2001
From: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Mon, 10 Jul 2023 13:39:09 +0200
Subject: [PATCH] Add "grid" and "list" view switch for Product Collection
 (https://github.com/woocommerce/woocommerce-blocks/pull/10145)

* Add Display Layout controls to Product Collection

* Adjust the layout type name

* Add explicit display layout types

* Change the function name to setDisplayLayout so it's more explicit

* Pass only the necessary props to nested inspector controls

---------

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
---
 .../display-layout-control.tsx                | 47 +++++++++++++++++++
 .../inspector-controls/index.tsx              |  9 +++-
 .../js/blocks/product-collection/types.ts     |  2 +-
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/display-layout-control.tsx

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/display-layout-control.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/display-layout-control.tsx
new file mode 100644
index 00000000000..45ed765bf78
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/display-layout-control.tsx
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarGroup } from '@wordpress/components';
+import { list, grid } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ProductCollectionDisplayLayout } from '../types';
+
+type DisplayLayoutObject = {
+	displayLayout: ProductCollectionDisplayLayout;
+};
+
+type DisplayLayoutControlProps = DisplayLayoutObject & {
+	setAttributes: ( attrs: DisplayLayoutObject ) => void;
+};
+
+const DisplayLayoutControl = ( props: DisplayLayoutControlProps ) => {
+	const { type, columns } = props.displayLayout;
+	const setDisplayLayout = (
+		displayLayout: ProductCollectionDisplayLayout
+	) => {
+		props.setAttributes( { displayLayout } );
+	};
+
+	const displayLayoutControls = [
+		{
+			icon: list,
+			title: __( 'List view', 'woo-gutenberg-products-block' ),
+			onClick: () => setDisplayLayout( { type: 'list', columns } ),
+			isActive: type === 'list',
+		},
+		{
+			icon: grid,
+			title: __( 'Grid view', 'woo-gutenberg-products-block' ),
+			onClick: () => setDisplayLayout( { type: 'flex', columns } ),
+			isActive: type === 'flex',
+		},
+	];
+
+	return <ToolbarGroup controls={ displayLayoutControls } />;
+};
+
+export default DisplayLayoutControl;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/index.tsx
index 449ba990524..ef1f1f8d21a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { BlockEditProps } from '@wordpress/blocks';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, BlockControls } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { ProductCollectionFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
@@ -28,6 +28,7 @@ import AttributesControl from './attributes-control';
 import TaxonomyControls from './taxonomy-controls';
 import HandPickedProductsControl from './hand-picked-products-control';
 import AuthorControl from './author-control';
+import DisplayLayoutControl from './display-layout-control';
 
 const ProductCollectionInspectorControls = (
 	props: BlockEditProps< ProductCollectionAttributes >
@@ -43,6 +44,12 @@ const ProductCollectionInspectorControls = (
 
 	return (
 		<InspectorControls>
+			<BlockControls>
+				<DisplayLayoutControl
+					displayLayout={ props.attributes.displayLayout }
+					setAttributes={ props.setAttributes }
+				/>
+			</BlockControls>
 			<ToolsPanel
 				label={ __( 'Settings', 'woo-gutenberg-products-block' ) }
 				resetAll={ () => {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts
index 32e66a5e49c..333de72a9c3 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts
@@ -17,7 +17,7 @@ export interface ProductCollectionAttributes {
 }
 
 export interface ProductCollectionDisplayLayout {
-	type: string;
+	type: 'flex' | 'list';
 	columns: number;
 }