make the notice dismissable, with persistent setting and separate for…

… every PM
Automattic · Apr 11, 2024 · d4f0f8c · d4f0f8c
1 parent 99928ea
commit d4f0f8c
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 7 deletions.
diff --git a/client/components/payment-methods-list/payment-method.tsx b/client/components/payment-methods-list/payment-method.tsx
@@ -3,7 +3,7 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 
 /**
  * Internal dependencies
@@ -27,6 +27,7 @@ import InlineNotice from '../inline-notice';
 import './payment-method.scss';
 import { ExternalLink } from '@wordpress/components';
 import { getAdminUrl } from 'wcpay/utils';
+import { useDispatch } from '@wordpress/data';
 
 interface PaymentMethodProps {
 	id: string;
@@ -167,6 +168,36 @@ const PaymentMethod = ( {
 		return onUncheckClick( id );
 	};
 
+	const useDuplicatesDetectionDismissedNoticeState = () => {
+		const { updateOptions } = useDispatch( 'wc/admin/options' );
+		const [
+			dismissedPaymentMethodNotices,
+			setDismissedPaymentMethodNotices,
+		] = useState( wcpaySettings.dismissedPaymentMethodNotices || [] );
+
+		const setNextDismissedPaymentMethodDuplicateNotice = () => {
+			setDismissedPaymentMethodNotices( [
+				...dismissedPaymentMethodNotices,
+				id,
+			] );
+			wcpaySettings.dismissedPaymentMethodNotices = [
+				...dismissedPaymentMethodNotices,
+				id,
+			];
+			updateOptions( {
+				wcpay_duplicate_payment_methods_notice_dismissed: [
+					...dismissedPaymentMethodNotices,
+					id,
+				],
+			} );
+		};
+
+		return {
+			dismissedPaymentMethodNotices,
+			handleDismissPaymentMethodDuplicateNotice: setNextDismissedPaymentMethodDuplicateNotice,
+		};
+	};
+
 	const getTooltipContent = ( paymentMethodId: string ) => {
 		if ( upeCapabilityStatuses.PENDING_APPROVAL === status ) {
 			return __(
@@ -259,6 +290,11 @@ const PaymentMethod = ( {
 		);
 	};
 
+	const {
+		dismissedPaymentMethodNotices,
+		handleDismissPaymentMethodDuplicateNotice,
+	} = useDuplicatesDetectionDismissedNoticeState();
+
 	return (
 		<li
 			className={ classNames(
@@ -362,11 +398,12 @@ const PaymentMethod = ( {
 					</span>
 				</InlineNotice>
 			) }
-			{ isDuplicate && (
+			{ isDuplicate && ! dismissedPaymentMethodNotices.includes( id ) && (
 				<InlineNotice
 					status="warning"
 					icon={ true }
 					isDismissible={ true }
+					onRemove={ handleDismissPaymentMethodDuplicateNotice }
 				>
 					{ interpolateComponents( {
 						mixedString: __(

diff --git a/client/globals.d.ts b/client/globals.d.ts
@@ -90,6 +90,7 @@ declare global {
 			isEligibilityModalDismissed: boolean;
 		};
 		enabledPaymentMethods: string[];
+		dismissedPaymentMethodNotices: string[];
 		accountDefaultCurrency: string;
 		isFRTReviewFeatureActive: boolean;
 		frtDiscoverBannerSettings: string;

diff --git a/client/settings/express-checkout/apple-google-pay-item.tsx b/client/settings/express-checkout/apple-google-pay-item.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Button, CheckboxControl, ExternalLink } from '@wordpress/components';
 import interpolateComponents from '@automattic/interpolate-components';
-import React from 'react';
+import React, { useState } from 'react';
 
 /**
  * Internal dependencies
@@ -19,6 +19,7 @@ import { PaymentRequestEnabledSettingsHook } from './interfaces';
 import { ApplePayIcon, GooglePayIcon } from 'wcpay/payment-methods-icons';
 import { ExpressCheckoutIncompatibilityNotice } from 'wcpay/settings/settings-warnings/incompatibility-notice';
 import InlineNotice from 'wcpay/components/inline-notice';
+import { useDispatch } from '@wordpress/data';
 
 const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => {
 	const [
@@ -28,9 +29,43 @@ const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => {
 
 	const showIncompatibilityNotice = useExpressCheckoutShowIncompatibilityNotice();
 	const duplicatedPaymentMethods = useGetDuplicatedPaymentMethodIds() as string[];
-	const isDuplicate = duplicatedPaymentMethods.includes(
-		'apple_pay_google_pay'
-	);
+	const id = 'apple_pay_google_pay';
+	const isDuplicate = duplicatedPaymentMethods.includes( id );
+
+	const useDuplicatesDetectionDismissedNoticeState = () => {
+		const { updateOptions } = useDispatch( 'wc/admin/options' );
+		const [
+			dismissedPaymentMethodNotices,
+			setDismissedPaymentMethodNotices,
+		] = useState( wcpaySettings.dismissedPaymentMethodNotices || [] );
+
+		const setNextDismissedPaymentMethodDuplicateNotice = () => {
+			setDismissedPaymentMethodNotices( [
+				...dismissedPaymentMethodNotices,
+				id,
+			] );
+			wcpaySettings.dismissedPaymentMethodNotices = [
+				...dismissedPaymentMethodNotices,
+				id,
+			];
+			updateOptions( {
+				wcpay_duplicate_payment_methods_notice_dismissed: [
+					...dismissedPaymentMethodNotices,
+					id,
+				],
+			} );
+		};
+
+		return {
+			dismissedPaymentMethodNotices,
+			handleDismissPaymentMethodDuplicateNotice: setNextDismissedPaymentMethodDuplicateNotice,
+		};
+	};
+
+	const {
+		dismissedPaymentMethodNotices,
+		handleDismissPaymentMethodDuplicateNotice,
+	} = useDuplicatesDetectionDismissedNoticeState();
 
 	return (
 		<li
@@ -175,11 +210,12 @@ const AppleGooglePayExpressCheckoutItem = (): React.ReactElement => {
 			{ showIncompatibilityNotice && (
 				<ExpressCheckoutIncompatibilityNotice />
 			) }
-			{ isDuplicate && (
+			{ isDuplicate && ! dismissedPaymentMethodNotices.includes( id ) && (
 				<InlineNotice
 					status="warning"
 					icon={ true }
 					isDismissible={ true }
+					onRemove={ handleDismissPaymentMethodDuplicateNotice }
 				>
 					{ interpolateComponents( {
 						mixedString: __(

diff --git a/includes/admin/class-wc-payments-admin.php b/includes/admin/class-wc-payments-admin.php
@@ -852,6 +852,7 @@ private function get_js_settings(): array {
 			'reporting'                     => [
 				'exportModalDismissed' => get_option( 'wcpay_reporting_export_modal_dismissed', false ),
 			],
+			'dismissedPaymentMethodNotices' => get_option( 'wcpay_duplicate_payment_methods_notice_dismissed', [] ),
 			'locale'                        => WC_Payments_Utils::get_language_data( get_locale() ),
 			'trackingInfo'                  => $this->account->get_tracking_info(),
 			'lifetimeTPV'                   => $this->account->get_lifetime_total_payments_volume(),

diff --git a/includes/class-wc-payments.php b/includes/class-wc-payments.php
@@ -1777,6 +1777,7 @@ public static function add_wcpay_options_to_woocommerce_permissions_list( $permi
 				'wcpay_capability_request_dismissed_notices',
 				'wcpay_onboarding_eligibility_modal_dismissed',
 				'wcpay_next_deposit_notice_dismissed',
+				'wcpay_duplicate_payment_methods_notice_dismissed',
 			],
 			true
 		);