[Woo beta tester]: add User Preference panel (#43125)

* introduce UserPreference panel

* render user preference panel

* expose UserPreferences type

* introduce force mode to update user pref

* rename global object with `__wcbt`

* changelog

* changelog

packages/js/data/changelog/update-woocommerce-beta-tester-add-user-preferences-tool

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+[Data]: expose UserPreference TS prop

packages/js/data/src/index.ts

@@ -109,6 +109,7 @@ export {
 export { TaxClass } from './tax-classes/types';
 export { ProductTag, Query } from './product-tags/types';
 export { WCUser } from './user/types';
+export { UserPreferences } from './user/types';
 
 /**
  * Internal dependencies

plugins/woocommerce-beta-tester/changelog/update-woocommerce-beta-tester-add-user-preferences-tool

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Woo Beta Tester]: add User Preference dev tool panel

plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.scss

@@ -83,6 +83,7 @@
 	font-family: var(--woocommerce-product-editor-dev-tools-code-font-family);
 }
 
+.woocommerce-product-editor-dev-tools-user-preferences,
 .woocommerce-product-editor-dev-tools-product {
 	display: flex;
 	flex-direction: row;
@@ -90,6 +91,7 @@
 	height: 100%;
 }
 
+.woocommerce-product-editor-dev-tools-user-preferences-entity,
 .woocommerce-product-editor-dev-tools-product-entity {
 	flex: 1;
 

plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx

@@ -24,6 +24,7 @@ import { useEntityProp } from '@wordpress/core-data';
 import { BlockInspectorTabPanel } from './block-inspector-tab-panel';
 import { HelpTabPanel } from './help-tab-panel';
 import { ProductTabPanel } from './product-tab-panel';
+import { UserPreferencesTabPanel } from './user-preferences-panel';
 
 function TabButton( {
 	name,
@@ -111,6 +112,15 @@ export function ProductEditorDevToolsBar( {
 							>
 								{ __( 'Product', 'woocommerce' ) }
 							</TabButton>
+
+							<TabButton
+								name="user-preferences"
+								selectedTab={ selectedTab }
+								onClick={ handleTabClick }
+							>
+								{ __( 'User Preferences', 'woocommerce' ) }
+							</TabButton>
+
 							<TabButton
 								name="help"
 								selectedTab={ selectedTab }
@@ -137,6 +147,9 @@ export function ProductEditorDevToolsBar( {
 						evaluationContext={ evaluationContext }
 						isSelected={ selectedTab === 'product' }
 					/>
+					<UserPreferencesTabPanel
+						isSelected={ selectedTab === 'user-preferences' }
+					/>
 					<HelpTabPanel isSelected={ selectedTab === 'help' } />
 				</div>
 			</div>

plugins/woocommerce-beta-tester/src/product-editor-dev-tools/user-preferences-panel.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { useUserPreferences, UserPreferences } from '@woocommerce/data';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { TabPanel } from './tab-panel';
+
+declare global {
+	interface Window {
+		__wcbt: object;
+	}
+}
+
+type UserPreferenceProp = keyof UserPreferences;
+
+export function UserPreferencesTabPanel( {
+	isSelected,
+}: {
+	isSelected: boolean;
+} ) {
+	const { updateUserPreferences, ...userPreferences } = useUserPreferences();
+
+	const update = useCallback(
+		(
+			preferences: UserPreferences | UserPreferenceProp,
+			value?,
+			force = false
+		) => {
+			const dataToUpdate =
+				typeof preferences === 'string'
+					? { [ preferences ]: value }
+					: preferences;
+
+			/*
+			 * When force is not True,
+			 * only update the preferences already defined
+			 * @todo: consider to implement straight in the data layer.
+			 */
+			if ( ! force ) {
+				Object.keys( dataToUpdate ).forEach( ( key: string ) => {
+					const userPreferenceKey = key as UserPreferenceProp;
+					if (
+						! userPreferences.hasOwnProperty( userPreferenceKey )
+					) {
+						delete dataToUpdate[ userPreferenceKey ];
+					}
+				} );
+			}
+
+			updateUserPreferences( dataToUpdate );
+		},
+		[ updateUserPreferences, userPreferences ]
+	);
+
+	// Expose updateUserPreferences globaly for debugging purposes.
+	window.__wcbt = {
+		...window.__wcbt,
+		updateUserPreferences: update,
+		userPreferences,
+	};
+
+	return (
+		<TabPanel isSelected={ isSelected }>
+			<div className="woocommerce-product-editor-dev-tools-user-preferences">
+				<div className="woocommerce-product-editor-dev-tools-user-preferences-entity">
+					{ JSON.stringify( userPreferences, null, 4 ) }
+				</div>
+			</div>
+		</TabPanel>
+	);
+}