diff --git a/client/components/payment-methods-list/payment-method.tsx b/client/components/payment-methods-list/payment-method.tsx
index 314a1ea077d..12db71c87a3 100644
--- 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 (
) }
- { isDuplicate && (
+ { isDuplicate && ! dismissedPaymentMethodNotices.includes( id ) && (
{ interpolateComponents( {
mixedString: __(
diff --git a/client/globals.d.ts b/client/globals.d.ts
index 9f2e38eb39f..30a946da1f9 100644
--- 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
index 22505c6b7d4..e048cbd587b 100644
--- 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 (
{
{ showIncompatibilityNotice && (
) }
- { isDuplicate && (
+ { isDuplicate && ! dismissedPaymentMethodNotices.includes( id ) && (
{ interpolateComponents( {
mixedString: __(
diff --git a/includes/admin/class-wc-payments-admin.php b/includes/admin/class-wc-payments-admin.php
index e93ac78686f..ce4ec72ec14 100644
--- 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
index da9198c6492..6db1f639f32 100644
--- 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
);