From 047cb16fee5adb0ca5c587fc6af9743a9e730a72 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Wed, 22 Jan 2025 17:09:52 +0400 Subject: [PATCH 1/5] =?UTF-8?q?Rename=20the=20button=20=E2=80=9CApply?= =?UTF-8?q?=E2=80=9C=20into=20=E2=80=9CConfigure=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Overview/TabSettingsElements/Blocks/Features.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Features.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Features.js index 0529cba66..99cd05eb7 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Features.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Features.js @@ -272,7 +272,7 @@ const Features = { }, { type: 'secondary', - text: __( 'Apply', 'woocommerce-paypal-payments' ), + text: __( 'Configure', 'woocommerce-paypal-payments' ), urls: { sandbox: '#', live: '#', From b3f64f3700a03c2e15b502c276005b3b52bc7837 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Wed, 22 Jan 2025 18:19:33 +0400 Subject: [PATCH 2/5] Add the pay later feature only if the configurator is available --- .../TabSettingsElements/Blocks/Features.js | 561 +++++++++--------- 1 file changed, 282 insertions(+), 279 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Features.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Features.js index 99cd05eb7..fc54c2899 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Features.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Features.js @@ -2,296 +2,299 @@ import { __ } from '@wordpress/i18n'; import { TAB_IDS, selectTab } from '../../../../../utils/tabSelector'; const Features = { - getFeatures: ( setActiveModal ) => [ - { - id: 'save_paypal_and_venmo', - title: __( 'Save PayPal and Venmo', 'woocommerce-paypal-payments' ), - description: __( - 'Securely save PayPal and Venmo payment methods for subscriptions or return buyers.', - 'woocommerce-paypal-payments' - ), - buttons: [ - { - type: 'secondary', - text: __( 'Configure', 'woocommerce-paypal-payments' ), - onClick: () => { - selectTab( - TAB_IDS.PAYMENT_METHODS, - 'ppcp-paypal-checkout-card' - ).then( () => { - setActiveModal( 'paypal' ); - } ); - }, - showWhen: 'enabled', - class: 'small-button', - }, - { - type: 'secondary', - text: __( 'Apply', 'woocommerce-paypal-payments' ), - urls: { - sandbox: - 'https://www.sandbox.paypal.com/bizsignup/entry?product=ADVANCED_VAULTING', - live: 'https://www.paypal.com/bizsignup/entry?product=ADVANCED_VAULTING', - }, - showWhen: 'disabled', - class: 'small-button', - }, - { - type: 'tertiary', - text: __( 'Learn more', 'woocommerce-paypal-payments' ), - urls: { - sandbox: '#', - live: '#', - }, - class: 'small-button', - }, - ], - }, - { - id: 'advanced_credit_and_debit_cards', - title: __( - 'Advanced Credit and Debit Cards', - 'woocommerce-paypal-payments' - ), - description: __( - 'Process major credit and debit cards including Visa, Mastercard, American Express and Discover.', - 'woocommerce-paypal-payments' - ), - buttons: [ - { - type: 'secondary', - text: __( 'Configure', 'woocommerce-paypal-payments' ), - onClick: () => { - selectTab( - TAB_IDS.PAYMENT_METHODS, - 'ppcp-card-payments-card' - ).then( () => { - setActiveModal( - 'advanced_credit_and_debit_card_payments' - ); - } ); - }, - showWhen: 'enabled', - class: 'small-button', - }, - { - type: 'secondary', - text: __( 'Apply', 'woocommerce-paypal-payments' ), - urls: { - sandbox: - 'https://www.sandbox.paypal.com/bizsignup/entry?product=ppcp', - live: 'https://www.paypal.com/bizsignup/entry?product=ppcp', - }, - showWhen: 'disabled', - class: 'small-button', - }, - { - type: 'tertiary', - text: __( 'Learn more', 'woocommerce-paypal-payments' ), - urls: { - sandbox: '#', - live: '#', - }, - class: 'small-button', - }, - ], - }, - { - id: 'alternative_payment_methods', - title: __( - 'Alternative Payment Methods', - 'woocommerce-paypal-payments' - ), - description: __( - 'Offer global, country-specific payment options for your customers.', - 'woocommerce-paypal-payments' - ), - buttons: [ - { - type: 'secondary', - text: __( 'Configure', 'woocommerce-paypal-payments' ), - onClick: () => { - selectTab( - TAB_IDS.PAYMENT_METHODS, - 'ppcp-alternative-payments-card' - ); - }, - showWhen: 'enabled', - class: 'small-button', - }, - { - type: 'secondary', - text: __( 'Apply', 'woocommerce-paypal-payments' ), - urls: { - sandbox: '#', - live: '#', - }, - showWhen: 'disabled', - class: 'small-button', - }, - { - type: 'tertiary', - text: __( 'Learn more', 'woocommerce-paypal-payments' ), - urls: { - sandbox: '#', - live: '#', - }, - class: 'small-button', - }, - ], - }, - { - id: 'google_pay', - title: __( 'Google Pay', 'woocommerce-paypal-payments' ), - description: __( - 'Let customers pay using their Google Pay wallet.', - 'woocommerce-paypal-payments' - ), - buttons: [ - { - type: 'secondary', - text: __( 'Configure', 'woocommerce-paypal-payments' ), - onClick: () => { - selectTab( - TAB_IDS.PAYMENT_METHODS, - 'ppcp-card-payments-card' - ).then( () => { - setActiveModal( 'google_pay' ); - } ); - }, - showWhen: 'enabled', - class: 'small-button', - }, - { - type: 'secondary', - text: __( 'Apply', 'woocommerce-paypal-payments' ), - urls: { - sandbox: - 'https://www.sandbox.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=GOOGLE_PAY', - live: 'https://www.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=GOOGLE_PAY', - }, - showWhen: 'disabled', - class: 'small-button', - }, - { - type: 'tertiary', - text: __( 'Learn more', 'woocommerce-paypal-payments' ), - urls: { - sandbox: '#', - live: '#', - }, - class: 'small-button', - }, - ], - notes: [ - __( - '¹PayPal Q2 Earnings-2021.', + getFeatures: ( setActiveModal ) => { + const features = [ + { + id: 'save_paypal_and_venmo', + title: __( + 'Save PayPal and Venmo', 'woocommerce-paypal-payments' ), - ], - }, - { - id: 'apple_pay', - title: __( 'Apple Pay', 'woocommerce-paypal-payments' ), - description: __( - 'Let customers pay using their Apple Pay wallet.', - 'woocommerce-paypal-payments' - ), - buttons: [ - { - type: 'secondary', - text: __( 'Configure', 'woocommerce-paypal-payments' ), - onClick: () => { - selectTab( - TAB_IDS.PAYMENT_METHODS, - 'ppcp-card-payments-card' - ).then( () => { - setActiveModal( 'apple_pay' ); - } ); + description: __( + 'Securely save PayPal and Venmo payment methods for subscriptions or return buyers.', + 'woocommerce-paypal-payments' + ), + buttons: [ + { + type: 'secondary', + text: __( 'Configure', 'woocommerce-paypal-payments' ), + onClick: () => { + selectTab( + TAB_IDS.PAYMENT_METHODS, + 'ppcp-paypal-checkout-card' + ).then( () => { + setActiveModal( 'paypal' ); + } ); + }, + showWhen: 'enabled', + class: 'small-button', }, - showWhen: 'enabled', - class: 'small-button', - }, - { - type: 'secondary', - text: __( - 'Domain registration', + { + type: 'secondary', + text: __( 'Apply', 'woocommerce-paypal-payments' ), + urls: { + sandbox: + 'https://www.sandbox.paypal.com/bizsignup/entry?product=ADVANCED_VAULTING', + live: 'https://www.paypal.com/bizsignup/entry?product=ADVANCED_VAULTING', + }, + showWhen: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + urls: { + sandbox: '#', + live: '#', + }, + class: 'small-button', + }, + ], + }, + { + id: 'advanced_credit_and_debit_cards', + title: __( + 'Advanced Credit and Debit Cards', + 'woocommerce-paypal-payments' + ), + description: __( + 'Process major credit and debit cards including Visa, Mastercard, American Express and Discover.', + 'woocommerce-paypal-payments' + ), + buttons: [ + { + type: 'secondary', + text: __( 'Configure', 'woocommerce-paypal-payments' ), + onClick: () => { + selectTab( + TAB_IDS.PAYMENT_METHODS, + 'ppcp-card-payments-card' + ).then( () => { + setActiveModal( + 'advanced_credit_and_debit_card_payments' + ); + } ); + }, + showWhen: 'enabled', + class: 'small-button', + }, + { + type: 'secondary', + text: __( 'Apply', 'woocommerce-paypal-payments' ), + urls: { + sandbox: + 'https://www.sandbox.paypal.com/bizsignup/entry?product=ppcp', + live: 'https://www.paypal.com/bizsignup/entry?product=ppcp', + }, + showWhen: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + urls: { + sandbox: '#', + live: '#', + }, + class: 'small-button', + }, + ], + }, + { + id: 'alternative_payment_methods', + title: __( + 'Alternative Payment Methods', + 'woocommerce-paypal-payments' + ), + description: __( + 'Offer global, country-specific payment options for your customers.', + 'woocommerce-paypal-payments' + ), + buttons: [ + { + type: 'secondary', + text: __( 'Configure', 'woocommerce-paypal-payments' ), + onClick: () => { + selectTab( + TAB_IDS.PAYMENT_METHODS, + 'ppcp-alternative-payments-card' + ); + }, + showWhen: 'enabled', + class: 'small-button', + }, + { + type: 'secondary', + text: __( 'Apply', 'woocommerce-paypal-payments' ), + urls: { + sandbox: '#', + live: '#', + }, + showWhen: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + urls: { + sandbox: '#', + live: '#', + }, + class: 'small-button', + }, + ], + }, + { + id: 'google_pay', + title: __( 'Google Pay', 'woocommerce-paypal-payments' ), + description: __( + 'Let customers pay using their Google Pay wallet.', + 'woocommerce-paypal-payments' + ), + buttons: [ + { + type: 'secondary', + text: __( 'Configure', 'woocommerce-paypal-payments' ), + onClick: () => { + selectTab( + TAB_IDS.PAYMENT_METHODS, + 'ppcp-card-payments-card' + ).then( () => { + setActiveModal( 'google_pay' ); + } ); + }, + showWhen: 'enabled', + class: 'small-button', + }, + { + type: 'secondary', + text: __( 'Apply', 'woocommerce-paypal-payments' ), + urls: { + sandbox: + 'https://www.sandbox.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=GOOGLE_PAY', + live: 'https://www.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=GOOGLE_PAY', + }, + showWhen: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + urls: { + sandbox: '#', + live: '#', + }, + class: 'small-button', + }, + ], + notes: [ + __( + '¹PayPal Q2 Earnings-2021.', 'woocommerce-paypal-payments' ), - urls: { - sandbox: - 'https://www.sandbox.paypal.com/uccservicing/apm/applepay', - live: 'https://www.paypal.com/uccservicing/apm/applepay', + ], + }, + { + id: 'apple_pay', + title: __( 'Apple Pay', 'woocommerce-paypal-payments' ), + description: __( + 'Let customers pay using their Apple Pay wallet.', + 'woocommerce-paypal-payments' + ), + buttons: [ + { + type: 'secondary', + text: __( 'Configure', 'woocommerce-paypal-payments' ), + onClick: () => { + selectTab( + TAB_IDS.PAYMENT_METHODS, + 'ppcp-card-payments-card' + ).then( () => { + setActiveModal( 'apple_pay' ); + } ); + }, + showWhen: 'enabled', + class: 'small-button', }, - showWhen: 'enabled', - class: 'small-button', - }, - { - type: 'secondary', - text: __( 'Apply', 'woocommerce-paypal-payments' ), - urls: { - sandbox: - 'https://www.sandbox.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=APPLE_PAY', - live: 'https://www.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=APPLE_PAY', + { + type: 'secondary', + text: __( + 'Domain registration', + 'woocommerce-paypal-payments' + ), + urls: { + sandbox: + 'https://www.sandbox.paypal.com/uccservicing/apm/applepay', + live: 'https://www.paypal.com/uccservicing/apm/applepay', + }, + showWhen: 'enabled', + class: 'small-button', }, - showWhen: 'disabled', - class: 'small-button', - }, - { - type: 'tertiary', - text: __( 'Learn more', 'woocommerce-paypal-payments' ), - urls: { - sandbox: '#', - live: '#', + { + type: 'secondary', + text: __( 'Apply', 'woocommerce-paypal-payments' ), + urls: { + sandbox: + 'https://www.sandbox.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=APPLE_PAY', + live: 'https://www.paypal.com/bizsignup/add-product?product=payment_methods&capabilities=APPLE_PAY', + }, + showWhen: 'disabled', + class: 'small-button', }, - class: 'small-button', - }, - ], - }, - { - id: 'pay_later_messaging', - title: __( 'Pay Later Messaging', 'woocommerce-paypal-payments' ), - description: __( - 'Let customers know they can buy now and pay later with PayPal. Adding this messaging can boost conversion rates and increase cart sizes by 39%¹, with no extra cost to you—plus, you get paid up front.', - 'woocommerce-paypal-payments' - ), - buttons: [ - { - type: 'secondary', - text: __( 'Configure', 'woocommerce-paypal-payments' ), - onClick: () => { - selectTab( - TAB_IDS.PAYMENT_METHODS, - 'ppcp-paypal-checkout-card' - ).then( () => { - setActiveModal( 'paypal' ); - } ); + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + urls: { + sandbox: '#', + live: '#', + }, + class: 'small-button', }, - showWhen: 'enabled', - class: 'small-button', - }, - { - type: 'secondary', - text: __( 'Configure', 'woocommerce-paypal-payments' ), - urls: { - sandbox: '#', - live: '#', + ], + }, + ]; + + if ( !! window.ppcpSettings?.isPayLaterConfiguratorAvailable ) { + features.push( { + id: 'pay_later_messaging', + title: __( + 'Pay Later Messaging', + 'woocommerce-paypal-payments' + ), + description: __( + 'Let customers know they can buy now and pay later with PayPal. Adding this messaging can boost conversion rates and increase cart sizes by 39%¹, with no extra cost to you—plus, you get paid up front.', + 'woocommerce-paypal-payments' + ), + buttons: [ + { + type: 'secondary', + text: __( 'Configure', 'woocommerce-paypal-payments' ), + onClick: () => selectTab( TAB_IDS.PAY_LATER_MESSAGING ), + showWhen: 'enabled', + class: 'small-button', }, - showWhen: 'disabled', - class: 'small-button', - }, - { - type: 'tertiary', - text: __( 'Learn more', 'woocommerce-paypal-payments' ), - urls: { - sandbox: '#', - live: '#', + { + type: 'secondary', + text: __( 'Configure', 'woocommerce-paypal-payments' ), + onClick: () => selectTab( TAB_IDS.PAY_LATER_MESSAGING ), + showWhen: 'disabled', + class: 'small-button', }, - class: 'small-button', - }, - ], - }, - ], + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + urls: { + sandbox: '#', + live: '#', + }, + class: 'small-button', + }, + ], + } ); + } + + return features; + }, }; export default Features; From 750a851919519f6e4fa8d87cbf6c0d9e95d05490 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Thu, 23 Jan 2025 19:44:39 +0400 Subject: [PATCH 3/5] Implement country based descriptions --- .../SettingsBlocks/FeatureSettingsBlock.js | 13 ++- .../TabSettingsElements/Blocks/Features.js | 17 ++- .../pay-later-messaging-component-data.js | 106 ++++++++++++++++++ 3 files changed, 129 insertions(+), 7 deletions(-) create mode 100644 modules/ppcp-settings/resources/js/data/settings/pay-later-messaging-component-data.js diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js index 3f747bda7..0863257e1 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js @@ -19,12 +19,21 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => { ); }; + const renderDescription = () => { + return ( + + ); + }; + const renderButton = ( button ) => { const buttonElement = (