[Product Block Editor]: Be able to dismiss AdviceCard instances (#43124)

* introduce packages/js/data/src/user/types.ts pref

* be able to dismiss the Upsells advice

* rename user pref key

* typify product_advice_card_dismissed prop

* store is dismissed state in the user pref

* delegate the dismiss state to the component

* changelog

* remove console.log :'(

* fix TS issue

* fix TS issue

* changelog

packages/js/data/changelog/update-product-editor-dismiss-linked-product-empty-advices

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+[Product Block Editor]: dismiss AdviceCard by clicking close button

packages/js/data/src/user/types.ts

@@ -30,12 +30,16 @@ export type UserPreferences = {
 	variations_report_columns?: string;
 	local_attributes_notice_dismissed_ids?: number[];
 	variable_items_without_price_notice_dismissed?: Record< number, string >;
+	product_advice_card_dismissed?: {
+		[ key: string ]: 'yes' | 'no';
+	};
 };
 
 export type WoocommerceMeta = UserPreferences & {
 	task_list_tracked_started_tasks?: string;
 	variable_items_without_price_notice_dismissed?: string;
 	local_attributes_notice_dismissed_ids?: string;
+	product_advice_card_dismissed?: string;
 };
 
 export type WCUser<

packages/js/product-editor/changelog/update-product-editor-dismiss-linked-product-empty-advices

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+[Product Block Editor]: dismiss AdviceCard by clicking close button

packages/js/product-editor/src/blocks/product-fields/cross-sells/edit.tsx

@@ -28,7 +28,6 @@ export function CrossSellsBlockEdit( {
 						'woocommerce'
 					) }
 					image={ <CashRegister /> }
-					isDismissible={ true }
 				/>
 			</div>
 		);

packages/js/product-editor/src/blocks/product-fields/upsells/edit.tsx

@@ -26,7 +26,6 @@ export function UpsellsBlockEdit( { attributes }: UpsellsBlockEditComponent ) {
 						'woocommerce'
 					) }
 					image={ <ShoppingBags /> }
-					isDismissible={ true }
 				/>
 			</div>
 		);

packages/js/product-editor/src/components/advice-card/index.tsx

@@ -11,6 +11,8 @@ import {
 	CardHeader,
 } from '@wordpress/components';
 import { close } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
+import { useUserPreferences } from '@woocommerce/data';
 
 export interface AdviceCardProps {
 	tip?: string;
@@ -22,9 +24,37 @@ export interface AdviceCardProps {
 export const AdviceCard: React.FC< AdviceCardProps > = ( {
 	tip,
 	image = null,
-	isDismissible = false,
-	onDismiss = () => {},
+	isDismissible = true,
+	onDismiss,
 } ) => {
+	// Generate a unique ID for the advice card.
+	const adviceCardId = useInstanceId(
+		AdviceCard,
+		'advice-card-instance'
+	) as string;
+
+	const { updateUserPreferences, product_advice_card_dismissed } =
+		useUserPreferences();
+
+	if ( ! onDismiss ) {
+		onDismiss = () => {
+			updateUserPreferences( {
+				product_advice_card_dismissed: {
+					...product_advice_card_dismissed,
+					[ adviceCardId ]: 'yes',
+				},
+			} );
+		};
+	}
+
+	// Check if the advice card has been dismissed.
+	if (
+		product_advice_card_dismissed &&
+		product_advice_card_dismissed?.[ adviceCardId ] === 'yes'
+	) {
+		return null;
+	}
+
 	return (
 		<Card className="woocommerce-advice-card">
 			{ isDismissible && (

plugins/woocommerce/changelog/update-product-editor-dismiss-linked-product-empty-advices

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+[Product Block Editor]: dismiss AdviceCard by clicking close button

plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php

@@ -185,6 +185,7 @@ class Init {
 				'variable_product_block_tour_shown',
 				'local_attributes_notice_dismissed_ids',
 				'variable_items_without_price_notice_dismissed',
+				'product_advice_card_dismissed',
 			)
 		);
 	}