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 );