Add cart view switcher

assets/js/base/context/providers/editor-context.js

@@ -1,8 +1,14 @@
 /**
  * External dependencies
  */
-import { createContext, useContext, useCallback } from '@wordpress/element';
+import {
+	createContext,
+	useContext,
+	useCallback,
+	useState,
+} from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { useEffect } from 'react';
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').EditorDataContext} EditorDataContext
@@ -15,6 +21,7 @@ const EditorContext = createContext( {
 	currentView: '',
 	previewData: {},
 	getPreviewData: () => void null,
+	setCurrentView: () => void null,
 } );
 
 /**
@@ -36,7 +43,7 @@ export const useEditorContext = () => {
 export const EditorProvider = ( {
 	children,
 	currentPostId = 0,
-	currentView = '',
+	currentView: initialView = null,
 	previewData = {},
 } ) => {
 	/**
@@ -52,7 +59,6 @@ export const EditorProvider = ( {
 		},
 		[ currentPostId ]
 	);
-
 	const getPreviewData = useCallback(
 		( name ) => {
 			if ( name in previewData ) {
@@ -62,6 +68,14 @@ export const EditorProvider = ( {
 		},
 		[ previewData ]
 	);
+	const setCurrentView = ( view ) => {
+		setView( view );
+	};
+
+	const [ currentView, setView ] = useState( initialView );
+	useEffect( () => {
+		setView( initialView );
+	}, [ initialView ] );
 
 	/**
 	 * @type {EditorDataContext}
@@ -72,6 +86,7 @@ export const EditorProvider = ( {
 		currentView,
 		previewData,
 		getPreviewData,
+		setCurrentView,
 	};
 
 	return (

assets/js/blocks/cart-checkout-shared/use-view-switcher.tsx

@@ -8,6 +8,7 @@ import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 import { eye } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useEditorContext } from '@woocommerce/base-context';
 
 interface View {
 	view: string;
@@ -21,18 +22,23 @@ function getView( viewName: string, views: View[] ) {
 
 export const useViewSwitcher = (
 	clientId: string,
-	views: View[]
+	views: View[],
+	onViewChange: ( view: View ) => void
 ): {
 	currentView: string;
 	component: JSX.Element;
 } => {
 	const initialView = views[ 0 ];
-	const [ currentView, setCurrentView ] = useState( initialView );
+	const { currentView, setCurrentView } = useEditorContext();
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 	const { getBlock, getSelectedBlockClientId, getBlockParentsByBlockName } =
 		select( blockEditorStore );
 	const selectedBlockClientId = getSelectedBlockClientId();
 
+	if ( ! currentView ) {
+		setCurrentView( initialView );
+	}
+
 	useEffect( () => {
 		const selectedBlock = getBlock( selectedBlockClientId );
 
@@ -68,7 +74,6 @@ export const useViewSwitcher = (
 		}
 
 		const newView = getView( parentBlock.name, views );
-
 		if ( newView ) {
 			setCurrentView( newView );
 		}
@@ -78,6 +83,7 @@ export const useViewSwitcher = (
 		getBlock,
 		currentView.view,
 		views,
+		setCurrentView,
 	] );
 
 	const ViewSwitcherComponent = (
@@ -103,7 +109,6 @@ export const useViewSwitcher = (
 			/>
 		</ToolbarGroup>
 	);
-
 	return {
 		currentView: currentView.view,
 		component: ViewSwitcherComponent,

assets/js/blocks/cart-checkout-shared/view-switcher/index.tsx

@@ -0,0 +1,85 @@
+// /**
+//  * External dependencies
+//  */
+// import { createHigherOrderComponent } from '@wordpress/compose';
+// import {
+// 	BlockControls,
+// 	store as blockEditorStore,
+// } from '@wordpress/block-editor';
+// import { addFilter, hasFilter } from '@wordpress/hooks';
+// import { filledCart, removeCart } from '@woocommerce/icons';
+// import { Icon } from '@wordpress/icons';
+// import { __ } from '@wordpress/i18n';
+// import { useSelect } from '@wordpress/data';
+// import { EditorProvider, useEditorContext } from '@woocommerce/base-context';
+
+// /**
+//  * Internal dependencies
+//  */
+// import { useViewSwitcher } from '../../cart-checkout-shared';
+// import { previewCart } from '@woocommerce/resource-previews';
+
+// const cartViews = [
+// 	{
+// 		view: 'woocommerce/filled-cart-block',
+// 		label: __( 'Filled Cart', 'woo-gutenberg-products-block' ),
+// 		icon: <Icon icon={ filledCart } />,
+// 	},
+// 	{
+// 		view: 'woocommerce/empty-cart-block',
+// 		label: __( 'Empty Cart', 'woo-gutenberg-products-block' ),
+// 		icon: <Icon icon={ removeCart } />,
+// 	},
+// ];
+// interface View {
+// 	view: string;
+// 	label: string;
+// 	icon: string | JSX.Element;
+// }
+
+// const withViewSwitcher = createHigherOrderComponent(
+// 	( BlockEdit ) => ( props ) => {
+// 		const { clientId } = props;
+// 		const { currentView, setCurrentView } = useEditorContext();
+// 		const onViewChange = ( view: View ) => {
+// 			console.log( 'it is working' );
+// 			setCurrentView( view );
+// 		};
+// 		const { component: ViewSwitcherComponent } = useViewSwitcher(
+// 			clientId,
+// 			cartViews,
+// 			onViewChange
+// 		);
+// 		const { isCartBlock } = useSelect( ( select ) => {
+// 			const { getBlockName } = select( blockEditorStore );
+// 			const currentBlockName = getBlockName( clientId );
+// 			return {
+// 				isCartBlock: currentBlockName === 'woocommerce/cart',
+// 			};
+// 		} );
+// 		console.log( isCartBlock );
+// 		return (
+// 			<>
+// 				<EditorProvider
+// 					currentView={ currentView }
+// 					previewData={ { previewCart } }
+// 				>
+// 					{ ! isCartBlock && (
+// 						<BlockControls>{ ViewSwitcherComponent }</BlockControls>
+// 					) }
+// 					<BlockEdit { ...props } />
+// 				</EditorProvider>
+// 			</>
+// 		);
+// 	},
+// 	'withViewSwitcher'
+// );
+
+// if ( ! hasFilter( 'editor.BlockEdit', 'woocommerce/add/cart-view-switcher' ) ) {
+// 	addFilter(
+// 		'editor.BlockEdit',
+// 		'woocommerce/add/cart-view-switcher',
+// 		withViewSwitcher,
+// 		11
+// 	);
+// }

assets/js/blocks/cart/edit.js

@@ -29,6 +29,7 @@ import {
 	BlockSettings,
 } from '../cart-checkout-shared';
 import '../cart-checkout-shared/sidebar-notices';
+import '../cart-checkout-shared/view-switcher';
 import { CartBlockContext } from './context';
 
 // This is adds a class to body to signal if the selected block is locked

package.json

@@ -26,7 +26,8 @@
 		"./assets/js/blocks/filter-wrapper/register-components.ts",
 		"./assets/js/blocks/product-query/variations/**.tsx",
 		"./assets/js/blocks/product-query/index.tsx",
-		"./assets/js/blocks/product-query/inspector-controls.tsx"
+		"./assets/js/blocks/product-query/inspector-controls.tsx",
+		"./assets/js/blocks/cart-checkout-shared/view-switcher/index.tsx"
 	],
 	"repository": {
 		"type": "git",