From 65483dec5ca108fb969eb071aa9e425f03772f90 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Thu, 8 May 2025 21:57:03 +0600 Subject: [PATCH 01/12] add 'is_reusable' attribute in paymentMethodsMap --- client/payment-methods-map.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/client/payment-methods-map.js b/client/payment-methods-map.js index c1e56c02b1..ddf51b3a6a 100644 --- a/client/payment-methods-map.js +++ b/client/payment-methods-map.js @@ -45,6 +45,7 @@ const paymentMethodsMap = { Icon: icons.card, currencies: [], allows_manual_capture: true, + is_reusable: true, }, giropay: { id: PAYMENT_METHOD_GIROPAY, @@ -55,6 +56,7 @@ const paymentMethodsMap = { ), Icon: icons.giropay, currencies: [ 'EUR' ], + is_reusable: false, }, klarna: { id: PAYMENT_METHOD_KLARNA, @@ -79,6 +81,7 @@ const paymentMethodsMap = { 'USD', ], allows_manual_capture: true, + is_reusable: false, }, affirm: { id: PAYMENT_METHOD_AFFIRM, @@ -91,6 +94,7 @@ const paymentMethodsMap = { Icon: icons.affirm, currencies: [ 'USD', 'CAD' ], allows_manual_capture: true, + is_reusable: false, }, // Clearpay and Afterpay are the same payment method, but with different strings and icon. afterpay_clearpay: { @@ -112,6 +116,7 @@ const paymentMethodsMap = { Icon: accountCountry === 'GB' ? icons.clearpay : icons.afterpay, currencies: [ 'USD', 'AUD', 'CAD', 'NZD', 'GBP' ], allows_manual_capture: true, + is_reusable: false, }, sepa_debit: { id: PAYMENT_METHOD_SEPA, @@ -122,6 +127,7 @@ const paymentMethodsMap = { ), Icon: icons.sepa_debit, currencies: [ 'EUR' ], + is_reusable: true, }, sepa: { id: 'sepa', @@ -132,6 +138,7 @@ const paymentMethodsMap = { ), Icon: icons.sepa_debit, currencies: [ 'EUR' ], + is_reusable: true, }, sofort: { id: PAYMENT_METHOD_SOFORT, @@ -142,6 +149,7 @@ const paymentMethodsMap = { ), Icon: icons.sofort, currencies: [ 'EUR' ], + is_reusable: true, }, eps: { id: PAYMENT_METHOD_EPS, @@ -152,6 +160,7 @@ const paymentMethodsMap = { ), Icon: icons.eps, currencies: [ 'EUR' ], + is_reusable: false, }, bancontact: { id: PAYMENT_METHOD_BANCONTACT, @@ -162,6 +171,7 @@ const paymentMethodsMap = { ), Icon: icons.bancontact, currencies: [ 'EUR' ], + is_reusable: true, }, ideal: { id: PAYMENT_METHOD_IDEAL, @@ -172,6 +182,7 @@ const paymentMethodsMap = { ), Icon: icons.ideal, currencies: [ 'EUR' ], + is_reusable: true, }, p24: { id: PAYMENT_METHOD_P24, @@ -182,6 +193,7 @@ const paymentMethodsMap = { ), Icon: icons.p24, currencies: [ 'EUR', 'PLN' ], + is_reusable: false, }, boleto: { id: PAYMENT_METHOD_BOLETO, @@ -192,6 +204,7 @@ const paymentMethodsMap = { ), Icon: icons.boleto, currencies: [ 'BRL' ], + is_reusable: false, }, oxxo: { id: PAYMENT_METHOD_OXXO, @@ -202,6 +215,7 @@ const paymentMethodsMap = { ), Icon: icons.oxxo, currencies: [ 'MXN' ], + is_reusable: false, }, alipay: { id: PAYMENT_METHOD_ALIPAY, @@ -223,6 +237,7 @@ const paymentMethodsMap = { 'NZD', 'USD', ], + is_reusable: false, }, multibanco: { id: PAYMENT_METHOD_MULTIBANCO, @@ -233,6 +248,7 @@ const paymentMethodsMap = { ), Icon: icons.multibanco, currencies: [ 'EUR' ], + is_reusable: false, }, wechat_pay: { id: PAYMENT_METHOD_WECHAT_PAY, @@ -257,6 +273,7 @@ const paymentMethodsMap = { 'SEK', 'CHF', ], + is_reusable: false, }, cashapp: { id: PAYMENT_METHOD_CASHAPP, @@ -268,6 +285,7 @@ const paymentMethodsMap = { Icon: icons.cashapp, currencies: [ 'USD' ], capability: 'cashapp_payments', + is_reusable: true, }, }; @@ -282,6 +300,7 @@ if ( isAchEnabled ) { ), Icon: icons.us_bank_account, currencies: [ 'USD' ], + is_reusable: true, }; } @@ -296,6 +315,7 @@ if ( isAcssEnabled ) { ), Icon: icons.acss_debit, currencies: [ 'CAD' ], + is_reusable: true, }; } @@ -310,6 +330,7 @@ if ( isBacsEnabled ) { ), Icon: icons.bacs_debit, currencies: [ 'GBP' ], + is_reusable: true, }; } @@ -324,6 +345,7 @@ if ( isBecsDebitEnabled ) { ), Icon: icons.au_becs_debit, currencies: [ 'AUD' ], + is_reusable: true, }; } @@ -338,6 +360,7 @@ if ( isBlikEnabled ) { ), Icon: icons.blik, currencies: [ 'PLN' ], + is_reusable: false, }; } From b6fb477a211fdca02e8b28953238724a896385c4 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Fri, 9 May 2025 00:40:44 +0600 Subject: [PATCH 02/12] get the correct recurring support status for bancontact and ideal --- client/payment-methods-map.js | 6 ++++-- includes/admin/class-wc-stripe-settings-controller.php | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/client/payment-methods-map.js b/client/payment-methods-map.js index ddf51b3a6a..880c751f45 100644 --- a/client/payment-methods-map.js +++ b/client/payment-methods-map.js @@ -33,6 +33,8 @@ const isBacsEnabled = window.wc_stripe_settings_params?.is_bacs_enabled === '1'; const isBecsDebitEnabled = window.wc_stripe_settings_params?.is_becs_debit_enabled === '1'; const isBlikEnabled = window.wc_stripe_settings_params?.is_blik_enabled === '1'; +const isSepaTokensEnabled = + window.wc_stripe_settings_params?.is_sepa_tokens_enabled === '1'; const paymentMethodsMap = { card: { @@ -171,7 +173,7 @@ const paymentMethodsMap = { ), Icon: icons.bancontact, currencies: [ 'EUR' ], - is_reusable: true, + is_reusable: isSepaTokensEnabled, }, ideal: { id: PAYMENT_METHOD_IDEAL, @@ -182,7 +184,7 @@ const paymentMethodsMap = { ), Icon: icons.ideal, currencies: [ 'EUR' ], - is_reusable: true, + is_reusable: isSepaTokensEnabled, }, p24: { id: PAYMENT_METHOD_P24, diff --git a/includes/admin/class-wc-stripe-settings-controller.php b/includes/admin/class-wc-stripe-settings-controller.php index c33964e624..6a35dfbb56 100644 --- a/includes/admin/class-wc-stripe-settings-controller.php +++ b/includes/admin/class-wc-stripe-settings-controller.php @@ -250,6 +250,7 @@ public function admin_scripts( $hook_suffix ) { 'is_amazon_pay_available' => WC_Stripe_Feature_Flags::is_amazon_pay_available(), 'is_oc_available' => WC_Stripe_Feature_Flags::is_oc_available(), 'oauth_nonce' => wp_create_nonce( 'wc_stripe_get_oauth_urls' ), + 'is_sepa_tokens_enabled' => 'yes' === $this->gateway->get_option( 'sepa_tokens_for_other_methods', 'no' ), ]; wp_localize_script( 'woocommerce_stripe_admin', From 713d4001ad92ac1bada2ed27dd4b3ba7d8360b0b Mon Sep 17 00:00:00 2001 From: Mayisha Date: Fri, 9 May 2025 00:41:45 +0600 Subject: [PATCH 03/12] rename --- client/payment-methods-map.js | 46 +++++++++++++++++------------------ 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/client/payment-methods-map.js b/client/payment-methods-map.js index 880c751f45..7c699b18e2 100644 --- a/client/payment-methods-map.js +++ b/client/payment-methods-map.js @@ -47,7 +47,7 @@ const paymentMethodsMap = { Icon: icons.card, currencies: [], allows_manual_capture: true, - is_reusable: true, + supports_recurring: true, }, giropay: { id: PAYMENT_METHOD_GIROPAY, @@ -58,7 +58,7 @@ const paymentMethodsMap = { ), Icon: icons.giropay, currencies: [ 'EUR' ], - is_reusable: false, + supports_recurring: false, }, klarna: { id: PAYMENT_METHOD_KLARNA, @@ -83,7 +83,7 @@ const paymentMethodsMap = { 'USD', ], allows_manual_capture: true, - is_reusable: false, + supports_recurring: false, }, affirm: { id: PAYMENT_METHOD_AFFIRM, @@ -96,7 +96,7 @@ const paymentMethodsMap = { Icon: icons.affirm, currencies: [ 'USD', 'CAD' ], allows_manual_capture: true, - is_reusable: false, + supports_recurring: false, }, // Clearpay and Afterpay are the same payment method, but with different strings and icon. afterpay_clearpay: { @@ -118,7 +118,7 @@ const paymentMethodsMap = { Icon: accountCountry === 'GB' ? icons.clearpay : icons.afterpay, currencies: [ 'USD', 'AUD', 'CAD', 'NZD', 'GBP' ], allows_manual_capture: true, - is_reusable: false, + supports_recurring: false, }, sepa_debit: { id: PAYMENT_METHOD_SEPA, @@ -129,7 +129,7 @@ const paymentMethodsMap = { ), Icon: icons.sepa_debit, currencies: [ 'EUR' ], - is_reusable: true, + supports_recurring: true, }, sepa: { id: 'sepa', @@ -140,7 +140,7 @@ const paymentMethodsMap = { ), Icon: icons.sepa_debit, currencies: [ 'EUR' ], - is_reusable: true, + supports_recurring: true, }, sofort: { id: PAYMENT_METHOD_SOFORT, @@ -151,7 +151,7 @@ const paymentMethodsMap = { ), Icon: icons.sofort, currencies: [ 'EUR' ], - is_reusable: true, + supports_recurring: true, }, eps: { id: PAYMENT_METHOD_EPS, @@ -162,7 +162,7 @@ const paymentMethodsMap = { ), Icon: icons.eps, currencies: [ 'EUR' ], - is_reusable: false, + supports_recurring: false, }, bancontact: { id: PAYMENT_METHOD_BANCONTACT, @@ -173,7 +173,7 @@ const paymentMethodsMap = { ), Icon: icons.bancontact, currencies: [ 'EUR' ], - is_reusable: isSepaTokensEnabled, + supports_recurring: isSepaTokensEnabled, }, ideal: { id: PAYMENT_METHOD_IDEAL, @@ -184,7 +184,7 @@ const paymentMethodsMap = { ), Icon: icons.ideal, currencies: [ 'EUR' ], - is_reusable: isSepaTokensEnabled, + supports_recurring: isSepaTokensEnabled, }, p24: { id: PAYMENT_METHOD_P24, @@ -195,7 +195,7 @@ const paymentMethodsMap = { ), Icon: icons.p24, currencies: [ 'EUR', 'PLN' ], - is_reusable: false, + supports_recurring: false, }, boleto: { id: PAYMENT_METHOD_BOLETO, @@ -206,7 +206,7 @@ const paymentMethodsMap = { ), Icon: icons.boleto, currencies: [ 'BRL' ], - is_reusable: false, + supports_recurring: false, }, oxxo: { id: PAYMENT_METHOD_OXXO, @@ -217,7 +217,7 @@ const paymentMethodsMap = { ), Icon: icons.oxxo, currencies: [ 'MXN' ], - is_reusable: false, + supports_recurring: false, }, alipay: { id: PAYMENT_METHOD_ALIPAY, @@ -239,7 +239,7 @@ const paymentMethodsMap = { 'NZD', 'USD', ], - is_reusable: false, + supports_recurring: false, }, multibanco: { id: PAYMENT_METHOD_MULTIBANCO, @@ -250,7 +250,7 @@ const paymentMethodsMap = { ), Icon: icons.multibanco, currencies: [ 'EUR' ], - is_reusable: false, + supports_recurring: false, }, wechat_pay: { id: PAYMENT_METHOD_WECHAT_PAY, @@ -275,7 +275,7 @@ const paymentMethodsMap = { 'SEK', 'CHF', ], - is_reusable: false, + supports_recurring: false, }, cashapp: { id: PAYMENT_METHOD_CASHAPP, @@ -287,7 +287,7 @@ const paymentMethodsMap = { Icon: icons.cashapp, currencies: [ 'USD' ], capability: 'cashapp_payments', - is_reusable: true, + supports_recurring: true, }, }; @@ -302,7 +302,7 @@ if ( isAchEnabled ) { ), Icon: icons.us_bank_account, currencies: [ 'USD' ], - is_reusable: true, + supports_recurring: true, }; } @@ -317,7 +317,7 @@ if ( isAcssEnabled ) { ), Icon: icons.acss_debit, currencies: [ 'CAD' ], - is_reusable: true, + supports_recurring: true, }; } @@ -332,7 +332,7 @@ if ( isBacsEnabled ) { ), Icon: icons.bacs_debit, currencies: [ 'GBP' ], - is_reusable: true, + supports_recurring: true, }; } @@ -347,7 +347,7 @@ if ( isBecsDebitEnabled ) { ), Icon: icons.au_becs_debit, currencies: [ 'AUD' ], - is_reusable: true, + supports_recurring: true, }; } @@ -362,7 +362,7 @@ if ( isBlikEnabled ) { ), Icon: icons.blik, currencies: [ 'PLN' ], - is_reusable: false, + supports_recurring: false, }; } From 2c41f20bb5a774432d92632124aafae5af647d94 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Fri, 9 May 2025 13:51:40 +0600 Subject: [PATCH 04/12] show recurring icon beside payment method label --- client/components/recurring-payment-icon/icon.svg | 4 ++++ client/components/recurring-payment-icon/index.js | 12 ++++++++++++ .../payment-method-description.js | 3 +++ .../general-settings-section/payment-method.js | 9 +++++++-- .../general-settings-section/payment-methods-list.js | 2 ++ 5 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 client/components/recurring-payment-icon/icon.svg create mode 100644 client/components/recurring-payment-icon/index.js diff --git a/client/components/recurring-payment-icon/icon.svg b/client/components/recurring-payment-icon/icon.svg new file mode 100644 index 0000000000..77f1aacf79 --- /dev/null +++ b/client/components/recurring-payment-icon/icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/components/recurring-payment-icon/index.js b/client/components/recurring-payment-icon/index.js new file mode 100644 index 0000000000..79349163e6 --- /dev/null +++ b/client/components/recurring-payment-icon/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import styled from '@emotion/styled'; +import icon from './icon.svg'; + +const IconWrapper = styled.img` + height: 12px; + width: 12px; +`; + +const RecurringPaymentIcon = () => ; + +export default RecurringPaymentIcon; diff --git a/client/settings/general-settings-section/payment-method-description.js b/client/settings/general-settings-section/payment-method-description.js index a179845db4..2c89f81ee9 100644 --- a/client/settings/general-settings-section/payment-method-description.js +++ b/client/settings/general-settings-section/payment-method-description.js @@ -1,6 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; import PaymentMethodMissingCurrencyPill from '../../components/payment-method-missing-currency-pill'; +import RecurringPaymentIcon from '../../components/recurring-payment-icon'; import PaymentMethodCapabilityStatusPill from 'wcstripe/components/payment-method-capability-status-pill'; import PaymentMethodDeprecationPill from 'wcstripe/components/payment-method-deprecation-pill'; @@ -45,6 +46,7 @@ const PaymentMethodDescription = ( { description, id, deprecated, + supportsRecurring, ...restProps } ) => { return ( @@ -55,6 +57,7 @@ const PaymentMethodDescription = ( {
+ { supportsRecurring && } { deprecated && } { ! deprecated && ( <> diff --git a/client/settings/general-settings-section/payment-method.js b/client/settings/general-settings-section/payment-method.js index 9e347682d8..f39b30cbc8 100644 --- a/client/settings/general-settings-section/payment-method.js +++ b/client/settings/general-settings-section/payment-method.js @@ -119,8 +119,12 @@ const PaymentMethod = ( { const [ isManualCaptureEnabled ] = useManualCapture(); const paymentMethodCurrencies = usePaymentMethodCurrencies( method ); - const { Icon, label, allows_manual_capture: isAllowingManualCapture } = - PaymentMethodsMap[ method ] || {}; + const { + Icon, + label, + allows_manual_capture: isAllowingManualCapture, + supports_recurring: supportsRecurring, + } = PaymentMethodsMap[ method ] || {}; // Skip if there are no mapped fields for the payment method. if ( ! Icon || ! label ) { @@ -178,6 +182,7 @@ const PaymentMethod = ( { ) } label={ label } deprecated={ deprecated } + supportsRecurring={ supportsRecurring } /> diff --git a/client/settings/general-settings-section/payment-methods-list.js b/client/settings/general-settings-section/payment-methods-list.js index dbe70e2a40..47a0b7114a 100644 --- a/client/settings/general-settings-section/payment-methods-list.js +++ b/client/settings/general-settings-section/payment-methods-list.js @@ -219,6 +219,7 @@ const GeneralSettingsSection = ( { Icon, label, allows_manual_capture: isAllowingManualCapture, + supports_recurring: supportsRecurring, } = PaymentMethodsMap[ method ] || {}; // Skip if there are no mapped fields for the payment method. @@ -251,6 +252,7 @@ const GeneralSettingsSection = ( { data.account?.default_currency ) } label={ label } + supportsRecurring={ supportsRecurring } /> From 1f345bd3f1ede6e9dad81bea8378003d881b65fc Mon Sep 17 00:00:00 2001 From: Mayisha Date: Fri, 9 May 2025 15:30:07 +0600 Subject: [PATCH 05/12] add popover --- .../recurring-payment-icon/index.js | 58 ++++++++++++++++++- 1 file changed, 55 insertions(+), 3 deletions(-) diff --git a/client/components/recurring-payment-icon/index.js b/client/components/recurring-payment-icon/index.js index 79349163e6..6fe599b91d 100644 --- a/client/components/recurring-payment-icon/index.js +++ b/client/components/recurring-payment-icon/index.js @@ -1,12 +1,64 @@ -import React from 'react'; +import { __ } from '@wordpress/i18n'; +import React, { useState } from 'react'; import styled from '@emotion/styled'; +import { Popover as PopoverComponent } from '@wordpress/components'; import icon from './icon.svg'; -const IconWrapper = styled.img` +const Icon = styled.img` height: 12px; width: 12px; + cursor: pointer; `; -const RecurringPaymentIcon = () => ; +const StyledPopover = styled( PopoverComponent )` + top: -11px !important; + + .components-popover__content { + border-radius: 4px; + box-shadow: 0px 2px 6px 0px rgba( 0, 0, 0, 0.05 ); + padding: 5px 10px; + background-color: #000000; + color: #ffffff; + } + + @media ( min-width: 660px ) { + .components-popover__content { + width: auto; + } + } +`; + +const IconComponent = ( { children, ...props } ) => ( + + + { children } + +); + +const RecurringPaymentIcon = () => { + const [ isVisible, setIsVisible ] = useState( false ); + + const toggleVisible = () => { + setIsVisible( ( state ) => ! state ); + }; + + return ( + + { isVisible && ( + setIsVisible( false ) } + > + { __( + 'Supports recurring payments', + 'woocommerce-gateway-stripe' + ) } + + ) } + + ); +}; export default RecurringPaymentIcon; From 52ac2bb7fe933e4f6e3fcb1ee25b2d5f429c3faa Mon Sep 17 00:00:00 2001 From: Mayisha Date: Fri, 9 May 2025 18:44:40 +0600 Subject: [PATCH 06/12] add changelog --- changelog.txt | 1 + readme.txt | 1 + 2 files changed, 2 insertions(+) diff --git a/changelog.txt b/changelog.txt index b42440bd29..54f99a4df2 100644 --- a/changelog.txt +++ b/changelog.txt @@ -29,6 +29,7 @@ * Dev - Minor fix to e2e setup code * Dev - Make PHP error log from Docker container available in docker/logs/php/error.log * Fix - Fix invalid IP address error encountered during mandate data creation. +* Add - Show an icon beside the payment methods that supports automattic recurring payments. = 9.4.1 - 2025-04-17 = * Dev - Forces rollback of version 9.4.0. diff --git a/readme.txt b/readme.txt index fff527d12a..da0f3ad695 100644 --- a/readme.txt +++ b/readme.txt @@ -139,5 +139,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o * Dev - Minor fix to e2e setup code * Dev - Make PHP error log from Docker container available in docker/logs/php/error.log * Fix - Fix invalid IP address error encountered during mandate data creation. +* Add - Show an icon beside the payment methods that supports automattic recurring payments. [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt). From 0d47a02296056ca05f9acdcaa59609a6634f5a43 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Wed, 14 May 2025 12:57:11 +0600 Subject: [PATCH 07/12] fix changelog statement --- changelog.txt | 2 +- readme.txt | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/changelog.txt b/changelog.txt index c6fa793ffe..6370f0cf06 100644 --- a/changelog.txt +++ b/changelog.txt @@ -29,7 +29,7 @@ * Fix - Fix invalid IP address error encountered during mandate data creation. * Fix - Fix payment method title display when new payment settings experience is enabled * Fix - Prevent styles from non-checkout pages affecting the appearance of Stripe element. -* Add - Show an icon beside the payment methods that supports automattic recurring payments. +* Add - Show an icon beside the payment methods that support automatic recurring payments. = 9.4.1 - 2025-04-17 = * Dev - Forces rollback of version 9.4.0. diff --git a/readme.txt b/readme.txt index d8b937354a..14754cb90f 100644 --- a/readme.txt +++ b/readme.txt @@ -181,7 +181,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o * Update - Remove BACS from the unsupported 'change payment method for subscription' page. * Fix - Fix payment method title display when new payment settings experience is enabled * Fix - Prevent styles from non-checkout pages affecting the appearance of Stripe element. -* Add - Show an icon beside the payment methods that supports automattic recurring payments. - +* Add - Show an icon beside the payment methods that support automatic recurring payments. [See changelog for full details across versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt). From 97d80d7a55c7d5f09138a9fcb7bc13a3677b1a6d Mon Sep 17 00:00:00 2001 From: Mayisha Date: Wed, 14 May 2025 23:56:18 +0600 Subject: [PATCH 08/12] fix styles --- client/components/recurring-payment-icon/index.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/client/components/recurring-payment-icon/index.js b/client/components/recurring-payment-icon/index.js index 6fe599b91d..2dfdcab048 100644 --- a/client/components/recurring-payment-icon/index.js +++ b/client/components/recurring-payment-icon/index.js @@ -5,11 +5,16 @@ import { Popover as PopoverComponent } from '@wordpress/components'; import icon from './icon.svg'; const Icon = styled.img` - height: 12px; - width: 12px; + height: 14px; + width: 14px; cursor: pointer; `; +const IconWrapper = styled.span` + display: inline-flex; + align-items: center; +`; + const StyledPopover = styled( PopoverComponent )` top: -11px !important; @@ -29,10 +34,10 @@ const StyledPopover = styled( PopoverComponent )` `; const IconComponent = ( { children, ...props } ) => ( - + { children } - + ); const RecurringPaymentIcon = () => { From 2227fb591e013626640964430996d1028098391d Mon Sep 17 00:00:00 2001 From: Mayisha Date: Thu, 15 May 2025 00:02:51 +0600 Subject: [PATCH 09/12] use camelCase in key name and remove redundant declarations --- client/payment-methods-map.js | 34 +++++++++++----------------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/client/payment-methods-map.js b/client/payment-methods-map.js index 7c699b18e2..cb396f0362 100644 --- a/client/payment-methods-map.js +++ b/client/payment-methods-map.js @@ -47,7 +47,7 @@ const paymentMethodsMap = { Icon: icons.card, currencies: [], allows_manual_capture: true, - supports_recurring: true, + supportsRecurring: true, }, giropay: { id: PAYMENT_METHOD_GIROPAY, @@ -58,7 +58,6 @@ const paymentMethodsMap = { ), Icon: icons.giropay, currencies: [ 'EUR' ], - supports_recurring: false, }, klarna: { id: PAYMENT_METHOD_KLARNA, @@ -83,7 +82,6 @@ const paymentMethodsMap = { 'USD', ], allows_manual_capture: true, - supports_recurring: false, }, affirm: { id: PAYMENT_METHOD_AFFIRM, @@ -96,7 +94,6 @@ const paymentMethodsMap = { Icon: icons.affirm, currencies: [ 'USD', 'CAD' ], allows_manual_capture: true, - supports_recurring: false, }, // Clearpay and Afterpay are the same payment method, but with different strings and icon. afterpay_clearpay: { @@ -118,7 +115,6 @@ const paymentMethodsMap = { Icon: accountCountry === 'GB' ? icons.clearpay : icons.afterpay, currencies: [ 'USD', 'AUD', 'CAD', 'NZD', 'GBP' ], allows_manual_capture: true, - supports_recurring: false, }, sepa_debit: { id: PAYMENT_METHOD_SEPA, @@ -129,7 +125,7 @@ const paymentMethodsMap = { ), Icon: icons.sepa_debit, currencies: [ 'EUR' ], - supports_recurring: true, + supportsRecurring: true, }, sepa: { id: 'sepa', @@ -140,7 +136,7 @@ const paymentMethodsMap = { ), Icon: icons.sepa_debit, currencies: [ 'EUR' ], - supports_recurring: true, + supportsRecurring: true, }, sofort: { id: PAYMENT_METHOD_SOFORT, @@ -151,7 +147,7 @@ const paymentMethodsMap = { ), Icon: icons.sofort, currencies: [ 'EUR' ], - supports_recurring: true, + supportsRecurring: true, }, eps: { id: PAYMENT_METHOD_EPS, @@ -162,7 +158,6 @@ const paymentMethodsMap = { ), Icon: icons.eps, currencies: [ 'EUR' ], - supports_recurring: false, }, bancontact: { id: PAYMENT_METHOD_BANCONTACT, @@ -173,7 +168,7 @@ const paymentMethodsMap = { ), Icon: icons.bancontact, currencies: [ 'EUR' ], - supports_recurring: isSepaTokensEnabled, + supportsRecurring: isSepaTokensEnabled, }, ideal: { id: PAYMENT_METHOD_IDEAL, @@ -184,7 +179,7 @@ const paymentMethodsMap = { ), Icon: icons.ideal, currencies: [ 'EUR' ], - supports_recurring: isSepaTokensEnabled, + supportsRecurring: isSepaTokensEnabled, }, p24: { id: PAYMENT_METHOD_P24, @@ -195,7 +190,6 @@ const paymentMethodsMap = { ), Icon: icons.p24, currencies: [ 'EUR', 'PLN' ], - supports_recurring: false, }, boleto: { id: PAYMENT_METHOD_BOLETO, @@ -206,7 +200,6 @@ const paymentMethodsMap = { ), Icon: icons.boleto, currencies: [ 'BRL' ], - supports_recurring: false, }, oxxo: { id: PAYMENT_METHOD_OXXO, @@ -217,7 +210,6 @@ const paymentMethodsMap = { ), Icon: icons.oxxo, currencies: [ 'MXN' ], - supports_recurring: false, }, alipay: { id: PAYMENT_METHOD_ALIPAY, @@ -239,7 +231,6 @@ const paymentMethodsMap = { 'NZD', 'USD', ], - supports_recurring: false, }, multibanco: { id: PAYMENT_METHOD_MULTIBANCO, @@ -250,7 +241,6 @@ const paymentMethodsMap = { ), Icon: icons.multibanco, currencies: [ 'EUR' ], - supports_recurring: false, }, wechat_pay: { id: PAYMENT_METHOD_WECHAT_PAY, @@ -275,7 +265,6 @@ const paymentMethodsMap = { 'SEK', 'CHF', ], - supports_recurring: false, }, cashapp: { id: PAYMENT_METHOD_CASHAPP, @@ -287,7 +276,7 @@ const paymentMethodsMap = { Icon: icons.cashapp, currencies: [ 'USD' ], capability: 'cashapp_payments', - supports_recurring: true, + supportsRecurring: true, }, }; @@ -302,7 +291,7 @@ if ( isAchEnabled ) { ), Icon: icons.us_bank_account, currencies: [ 'USD' ], - supports_recurring: true, + supportsRecurring: true, }; } @@ -317,7 +306,7 @@ if ( isAcssEnabled ) { ), Icon: icons.acss_debit, currencies: [ 'CAD' ], - supports_recurring: true, + supportsRecurring: true, }; } @@ -332,7 +321,7 @@ if ( isBacsEnabled ) { ), Icon: icons.bacs_debit, currencies: [ 'GBP' ], - supports_recurring: true, + supportsRecurring: true, }; } @@ -347,7 +336,7 @@ if ( isBecsDebitEnabled ) { ), Icon: icons.au_becs_debit, currencies: [ 'AUD' ], - supports_recurring: true, + supportsRecurring: true, }; } @@ -362,7 +351,6 @@ if ( isBlikEnabled ) { ), Icon: icons.blik, currencies: [ 'PLN' ], - supports_recurring: false, }; } From 12425b9687fab82573f8d7fe344da2b6be822f09 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Sun, 18 May 2025 22:37:48 +0600 Subject: [PATCH 10/12] fix attribute --- client/settings/general-settings-section/payment-method.js | 2 +- .../settings/general-settings-section/payment-methods-list.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/settings/general-settings-section/payment-method.js b/client/settings/general-settings-section/payment-method.js index f39b30cbc8..f5ca752a7a 100644 --- a/client/settings/general-settings-section/payment-method.js +++ b/client/settings/general-settings-section/payment-method.js @@ -123,7 +123,7 @@ const PaymentMethod = ( { Icon, label, allows_manual_capture: isAllowingManualCapture, - supports_recurring: supportsRecurring, + supportsRecurring, } = PaymentMethodsMap[ method ] || {}; // Skip if there are no mapped fields for the payment method. diff --git a/client/settings/general-settings-section/payment-methods-list.js b/client/settings/general-settings-section/payment-methods-list.js index 47a0b7114a..2bab1bcf4a 100644 --- a/client/settings/general-settings-section/payment-methods-list.js +++ b/client/settings/general-settings-section/payment-methods-list.js @@ -219,7 +219,7 @@ const GeneralSettingsSection = ( { Icon, label, allows_manual_capture: isAllowingManualCapture, - supports_recurring: supportsRecurring, + supportsRecurring, } = PaymentMethodsMap[ method ] || {}; // Skip if there are no mapped fields for the payment method. From facce12b5604d9f84ce10561b5b120093df918ce Mon Sep 17 00:00:00 2001 From: Mayisha Date: Sun, 18 May 2025 22:38:30 +0600 Subject: [PATCH 11/12] use the tooltip component instead of popover component --- .../recurring-payment-icon/index.js | 62 ++++--------------- 1 file changed, 12 insertions(+), 50 deletions(-) diff --git a/client/components/recurring-payment-icon/index.js b/client/components/recurring-payment-icon/index.js index 2dfdcab048..ee92292149 100644 --- a/client/components/recurring-payment-icon/index.js +++ b/client/components/recurring-payment-icon/index.js @@ -1,8 +1,8 @@ import { __ } from '@wordpress/i18n'; -import React, { useState } from 'react'; +import React from 'react'; import styled from '@emotion/styled'; -import { Popover as PopoverComponent } from '@wordpress/components'; import icon from './icon.svg'; +import Tooltip from 'wcstripe/components/tooltip'; const Icon = styled.img` height: 14px; @@ -10,59 +10,21 @@ const Icon = styled.img` cursor: pointer; `; -const IconWrapper = styled.span` - display: inline-flex; - align-items: center; +const StyledTooltip = styled( Tooltip )` + border-radius: 4px; + padding: 5px 10px; `; -const StyledPopover = styled( PopoverComponent )` - top: -11px !important; - - .components-popover__content { - border-radius: 4px; - box-shadow: 0px 2px 6px 0px rgba( 0, 0, 0, 0.05 ); - padding: 5px 10px; - background-color: #000000; - color: #ffffff; - } - - @media ( min-width: 660px ) { - .components-popover__content { - width: auto; - } - } -`; - -const IconComponent = ( { children, ...props } ) => ( - - - { children } - -); - const RecurringPaymentIcon = () => { - const [ isVisible, setIsVisible ] = useState( false ); - - const toggleVisible = () => { - setIsVisible( ( state ) => ! state ); - }; - return ( - - { isVisible && ( - setIsVisible( false ) } - > - { __( - 'Supports recurring payments', - 'woocommerce-gateway-stripe' - ) } - + + > + + ); }; From e9818cbf9ad5fac0058dbcb26f290a40296a0567 Mon Sep 17 00:00:00 2001 From: Mayisha Date: Mon, 19 May 2025 21:37:18 +0600 Subject: [PATCH 12/12] remove cursor --- client/components/recurring-payment-icon/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/components/recurring-payment-icon/index.js b/client/components/recurring-payment-icon/index.js index ee92292149..1e8eb7d460 100644 --- a/client/components/recurring-payment-icon/index.js +++ b/client/components/recurring-payment-icon/index.js @@ -7,7 +7,6 @@ import Tooltip from 'wcstripe/components/tooltip'; const Icon = styled.img` height: 14px; width: 14px; - cursor: pointer; `; const StyledTooltip = styled( Tooltip )`