From cb9f185d71085fb48362f8fb05be7f699145b22f Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 12:36:21 +0100 Subject: [PATCH 01/49] =?UTF-8?q?=F0=9F=9A=B8=20Make=20full=20checkbox-con?= =?UTF-8?q?tainer=20clickable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/ReusableComponents/Fields/OptionSelector.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js index 9f35af23d..d5f44392c 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js @@ -49,10 +49,12 @@ const OptionItem = ( { } ) => { const boxClassName = classNames( 'ppcp-r-select-box', { 'ppcp--selected': isSelected, + 'ppcp--multiselect': isMulti, } ); return ( -
+ // eslint-disable-next-line jsx-a11y/label-has-associated-control -- label has a nested input control. +
- + ); }; From f7845c72f6e7d0b5d23678dea152205dc845e15b Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 12:50:51 +0100 Subject: [PATCH 02/49] =?UTF-8?q?=F0=9F=92=84=20Style=20the=20OptionSelect?= =?UTF-8?q?or=20boxes=20(wizard)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ppcp-settings/resources/css/_mixins.scss | 4 +- .../resources/css/_variables.scss | 4 +- .../reusable-components/_select-box.scss | 89 +++++++------------ .../Fields/OptionSelector.js | 16 ++-- 4 files changed, 43 insertions(+), 70 deletions(-) diff --git a/modules/ppcp-settings/resources/css/_mixins.scss b/modules/ppcp-settings/resources/css/_mixins.scss index 5186b893a..a09a9f00f 100644 --- a/modules/ppcp-settings/resources/css/_mixins.scss +++ b/modules/ppcp-settings/resources/css/_mixins.scss @@ -8,8 +8,8 @@ } @mixin hide-input-field() { - width: 100%; - height: 100%; + width: auto; + height: auto; position: absolute; left: 0; top: 0; diff --git a/modules/ppcp-settings/resources/css/_variables.scss b/modules/ppcp-settings/resources/css/_variables.scss index 2438d65b3..766707505 100644 --- a/modules/ppcp-settings/resources/css/_variables.scss +++ b/modules/ppcp-settings/resources/css/_variables.scss @@ -19,7 +19,6 @@ $color-divider: #F0F0F0; $color-error-red: #cc1818; $shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15); -$shadow-selection-box: 0 2px 4px 0 rgba(0, 0, 0, 0.1); $color-gradient-dark: #001435; $gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%); @@ -71,4 +70,7 @@ $card-vertical-gap: 48px; --block-separator-size: 1px; --block-separator-color: var(--color-gray-200); --block-action-gap: 16px; // Space between two consecutive action blocks. + + // Default visual effects. + --box-shadow-active-item: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss index 2f1275907..01f43c920 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_select-box.scss @@ -1,4 +1,8 @@ .ppcp-r-select-box-wrapper { + --box-border-color: var(--color-gray-200); + --box-outline-color: transparent; + --box-shadow: 0; + margin: 0 auto; display: flex; gap: 32px; @@ -6,92 +10,62 @@ } .ppcp-r-select-box { + border: 1px solid var(--box-border-color); + outline: 1px solid var(--box-outline-color); + box-shadow: var(--box-shadow); + position: relative; width: 100%; - border: 1px solid $color-gray-200; - outline: 1px solid transparent; border-radius: 4px; display: flex; gap: 16px; padding: 24px 16px 24px 16px; + transition: all 0.3s; + cursor: pointer; + &:hover { + --box-border-color: var(--color-gray-500); + --box-shadow: var(--box-shadow-active-item); + } &.ppcp--selected { - border-color: $color-blueberry; - outline-color: $color-blueberry; - box-shadow: $shadow-selection-box; + --box-border-color: var(--color-blueberry); + --box-outline-color: var(--color-blueberry); + --box-shadow: var(--box-shadow-active-item); } - &__radio-value { - @include hide-input-field; - - &:checked { - + .ppcp-r-select-box__radio-presentation { - background: $color-white; - width: 20px; - height: 20px; - border: 6px solid $color-blueberry; - } - } - } - - &__checkbox-value { - @include hide-input-field; - - &:not(:checked) + .ppcp-r-select-box__checkbox-presentation img { - display: none; - } - - &:checked { - + .ppcp-r-select-box__checkbox-presentation { - width: 20px; - height: 20px; - border: none; - - img { - border-radius: 2px; - } - } - } - } - - &__content { + .ppcp--box-content { display: flex; position: relative; pointer-events: none; - *:not(a){ + + *:not(a) { pointer-events: none; } + a { pointer-events: all; } } - &__title { + .ppcp--box-title { @include font(14, 20, 700); color: $color-black; margin: 0 0 4px 0; display: block; } - &__description { + .ppcp--box-description { @include font(13, 20, 400); color: $color-gray-700; - margin:0; + margin: 0; - &:not(:last-child){ - margin-block-end:18px; + &:not(:last-child) { + margin-block-end: 18px; } } - &__radio-presentation { - @include fake-input-field(20px); - } - - &__checkbox-presentation { - @include fake-input-field(2px); - } - &__additional-content{ + .ppcp--box-details { position: relative; z-index: 1; } @@ -99,15 +73,18 @@ @media screen and (max-width: 480px) { gap: 16px; padding: 18px 16px; - &__description { + + .ppcp--box-description { margin: 0 0 8px 0; } - &__content { + + .ppcp--box-content { gap: 12px; } } + @media screen and (max-width: 380px) { - &__content > img { + .ppcp--box-content > img { max-width: 32px; } } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js index d5f44392c..e4327273f 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/OptionSelector.js @@ -62,18 +62,12 @@ const OptionItem = ( { isSelected={ isSelected } /> -
-
- - { itemTitle } - -

- { itemDescription } -

+
+
+ { itemTitle } +

{ itemDescription }

{ children && ( -
- { children } -
+
{ children }
) }
From a3d95f23c2d4509672e4184ff9d8dacc78418fb7 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 13:07:32 +0100 Subject: [PATCH 03/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20sub-compon?= =?UTF-8?q?ents=20in=20overview=20tab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Settings/Tabs/TabOverview.js | 300 +++++++++--------- 1 file changed, 152 insertions(+), 148 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js index cb7314425..da4fa5012 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js @@ -22,8 +22,34 @@ import { } from '../../../ReusableComponents/Icons'; const TabOverview = () => { - const [ isRefreshing, setIsRefreshing ] = useState( false ); + return ( +
+ { todosData.length > 0 && ( + + + + ) } + + +
+ ); +}; + +export default TabOverview; + +const OverviewFeatures = () => { + const [ isRefreshing, setIsRefreshing ] = useState( false ); const { merchant, features: merchantFeatures } = useMerchantInfo(); const { refreshFeatureStatuses, setActiveModal } = useDispatch( STORE_NAME ); @@ -49,6 +75,7 @@ const TabOverview = () => { const refreshHandler = async () => { setIsRefreshing( true ); + try { const result = await refreshFeatureStatuses(); if ( result && ! result.success ) { @@ -87,156 +114,133 @@ const TabOverview = () => { }; return ( -
- { todosData.length > 0 && ( - - - - ) } - - -

- { __( - 'Enable additional features and capabilities on your WooCommerce store.', - 'woocommerce-paypal-payments' - ) } -

-

- { __( - 'Click Refresh to update your current features after making changes.', - 'woocommerce-paypal-payments' - ) } -

- - - } - contentItems={ features.map( ( feature ) => { - return ( - - ! button.showWhen || // Learn more buttons - ( feature.enabled && - button.showWhen === - 'enabled' ) || - ( ! feature.enabled && - button.showWhen === 'disabled' ) - ) - .map( ( button ) => ( { - ...button, - url: button.urls - ? merchant?.isSandbox - ? button.urls.sandbox - : button.urls.live - : button.url, - } ) ), - isBusy: isRefreshing, - enabled: feature.enabled, - notes: feature.notes, - badge: feature.enabled - ? { - text: __( - 'Active', - 'woocommerce-paypal-payments' - ), - type: TITLE_BADGE_POSITIVE, - } - : undefined, - } } - /> - ); - } ) } - /> - - +

+ { __( + 'Enable additional features and capabilities on your WooCommerce store.', + 'woocommerce-paypal-payments' + ) } +

+

+ { __( + 'Click Refresh to update your current features after making changes.', + 'woocommerce-paypal-payments' + ) } +

+ + + } + contentItems={ features.map( ( feature ) => { + return ( + ! button.showWhen || // Learn more buttons + ( feature.enabled && + button.showWhen === 'enabled' ) || + ( ! feature.enabled && + button.showWhen === 'disabled' ) + ) + .map( ( button ) => ( { + ...button, + url: button.urls + ? merchant?.isSandbox + ? button.urls.sandbox + : button.urls.live + : button.url, + } ) ), + isBusy: isRefreshing, + enabled: feature.enabled, + notes: feature.notes, + badge: feature.enabled + ? { + text: __( + 'Active', + 'woocommerce-paypal-payments' + ), + type: TITLE_BADGE_POSITIVE, + } + : undefined, } } - />, - , - ] } - /> -
+ /> + ); + } ) } + /> ); }; -export default TabOverview; +const OverviewHelp = () => { + return ( + , + , + ] } + /> + ); +}; From 4883077338b5e5327fceeb0cf40508aa4e972090 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 13:10:20 +0100 Subject: [PATCH 04/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Remove=20parent=20ob?= =?UTF-8?q?ject=20from=20=E2=80=9CgetFeatures=E2=80=9D=20method?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settings/Components/Overview/Features.js | 509 +++++++++--------- .../Screens/Settings/Tabs/TabOverview.js | 4 +- 2 files changed, 253 insertions(+), 260 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Features.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Features.js index 906d500fe..46be5e521 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Features.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Features.js @@ -1,276 +1,269 @@ 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', +export const 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' ); + } ); }, - { - 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', + 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', }, - { - type: 'tertiary', - text: __( 'Learn more', 'woocommerce-paypal-payments' ), - url: 'https://developer.paypal.com/studio/checkout/standard', - 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' ), - url: 'https://developer.paypal.com/studio/checkout/advanced', - 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: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + url: 'https://developer.paypal.com/studio/checkout/standard', + 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' ), - url: 'https://developer.paypal.com/docs/checkout/apm/', - showWhen: 'disabled', - class: 'small-button', + 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', }, - { - type: 'tertiary', - text: __( 'Learn more', 'woocommerce-paypal-payments' ), - url: 'https://developer.paypal.com/docs/checkout/apm/', - class: 'small-button', + showWhen: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + url: 'https://developer.paypal.com/studio/checkout/advanced', + 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' + ); }, - ], - }, - { - 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', + showWhen: 'enabled', + class: 'small-button', + }, + { + type: 'secondary', + text: __( 'Apply', 'woocommerce-paypal-payments' ), + url: 'https://developer.paypal.com/docs/checkout/apm/', + showWhen: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + url: 'https://developer.paypal.com/docs/checkout/apm/', + 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' ); + } ); }, - { - 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', + 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', }, - { - type: 'tertiary', - text: __( 'Learn more', 'woocommerce-paypal-payments' ), - url: 'https://developer.paypal.com/docs/checkout/apm/google-pay/', - class: 'small-button', + showWhen: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + url: 'https://developer.paypal.com/docs/checkout/apm/google-pay/', + class: 'small-button', + }, + ], + notes: [ + __( '¹PayPal Q2 Earnings-2021.', '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' ); + } ); }, - ], - notes: [ - __( - '¹PayPal Q2 Earnings-2021.', + showWhen: 'enabled', + class: 'small-button', + }, + { + type: 'secondary', + text: __( + 'Domain registration', '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' ); - } ); - }, - showWhen: 'enabled', - class: 'small-button', + urls: { + sandbox: + 'https://www.sandbox.paypal.com/uccservicing/apm/applepay', + live: 'https://www.paypal.com/uccservicing/apm/applepay', }, - { - 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: '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: __( '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', + showWhen: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + url: 'https://developer.paypal.com/docs/checkout/apm/apple-pay/', + 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' ), - url: 'https://developer.paypal.com/docs/checkout/apm/apple-pay/', - class: 'small-button', + showWhen: 'enabled', + class: 'small-button', + }, + { + type: 'secondary', + text: __( 'Apply', 'woocommerce-paypal-payments' ), + urls: { + sandbox: '#', + live: '#', }, - ], - }, - { - 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' ); - } ); - }, - 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' ), - url: 'https://developer.paypal.com/studio/checkout/pay-later/us', - class: 'small-button', - }, - ], - }, - ], -}; - -export default Features; + showWhen: 'disabled', + class: 'small-button', + }, + { + type: 'tertiary', + text: __( 'Learn more', 'woocommerce-paypal-payments' ), + url: 'https://developer.paypal.com/studio/checkout/pay-later/us', + class: 'small-button', + }, + ], + }, +]; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js index da4fa5012..0526c9180 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js @@ -13,7 +13,7 @@ import SettingsCard from '../../../ReusableComponents/SettingsCard'; import { TITLE_BADGE_POSITIVE } from '../../../ReusableComponents/TitleBadge'; import { useMerchantInfo } from '../../../../data/common/hooks'; import { STORE_NAME } from '../../../../data/common'; -import Features from '../Components/Overview/Features'; +import { getFeatures } from '../Components/Overview/Features'; import { todosData } from '../todo-items'; import { @@ -58,7 +58,7 @@ const OverviewFeatures = () => { // Get the features data with access to setActiveModal const featuresData = useMemo( - () => Features.getFeatures( setActiveModal ), + () => getFeatures( setActiveModal ), [ setActiveModal ] ); From 839ee7b380dc9046e826ebc23ec8906b7c03580c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 13:11:21 +0100 Subject: [PATCH 05/49] =?UTF-8?q?=F0=9F=9A=9A=20Rename=20the=20feature=20c?= =?UTF-8?q?onfig=20module?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Overview/{Features.js => features-config.js} | 0 .../js/Components/Screens/Settings/Tabs/TabOverview.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/{Features.js => features-config.js} (100%) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Features.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/features-config.js similarity index 100% rename from modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Features.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/features-config.js diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js index 0526c9180..058884369 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js @@ -13,7 +13,7 @@ import SettingsCard from '../../../ReusableComponents/SettingsCard'; import { TITLE_BADGE_POSITIVE } from '../../../ReusableComponents/TitleBadge'; import { useMerchantInfo } from '../../../../data/common/hooks'; import { STORE_NAME } from '../../../../data/common'; -import { getFeatures } from '../Components/Overview/Features'; +import { getFeatures } from '../Components/Overview/features-config'; import { todosData } from '../todo-items'; import { From a1f8f24d4c781fdce6cd5ad6fc11dd54e52b24af Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 15:31:11 +0100 Subject: [PATCH 06/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Split=20feature=20li?= =?UTF-8?q?st=20into=20smaller=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReusableComponents/SettingsCard.js | 40 ++- .../Screens/Settings/Tabs/TabOverview.js | 253 ++++++++++-------- 2 files changed, 160 insertions(+), 133 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js index 265655a21..3f32ed1e1 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js @@ -1,42 +1,31 @@ import classNames from 'classnames'; -import { Content, ContentWrapper } from './Elements'; +import { Content } from './Elements'; const SettingsCard = ( { id, - className: extraClassName, + className, title, description, children, - contentItems, contentContainer = true, } ) => { - const className = classNames( 'ppcp-r-settings-card', extraClassName ); + const cardClassNames = classNames( 'ppcp-r-settings-card', className ); + const cardProps = { + className: cardClassNames, + id, + }; - const renderContent = () => { - // If contentItems array is provided, wrap each item in Content component - if ( contentItems ) { - return ( - - { contentItems.map( ( item ) => ( - - { item } - - ) ) } - - ); + const InnerContent = ( { showCards, children: containerItems } ) => { + if ( showCards ) { + return { containerItems }; } - // Otherwise handle regular children with contentContainer prop - if ( contentContainer ) { - return { children }; - } - - return children; + return containerItems; }; return ( -
+
@@ -47,7 +36,10 @@ const SettingsCard = ( {

- { renderContent() } + + + { children } +
); }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js index 058884369..be3754884 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js @@ -9,6 +9,7 @@ import { TodoSettingsBlock, FeatureSettingsBlock, } from '../../../ReusableComponents/SettingsBlocks'; +import { Content, ContentWrapper } from '../../../ReusableComponents/Elements'; import SettingsCard from '../../../ReusableComponents/SettingsCard'; import { TITLE_BADGE_POSITIVE } from '../../../ReusableComponents/TitleBadge'; import { useMerchantInfo } from '../../../../data/common/hooks'; @@ -106,7 +107,6 @@ const OverviewFeatures = () => { icon: NOTIFICATION_SUCCESS, } ); - console.log( 'Features refreshed successfully.' ); } } finally { setIsRefreshing( false ); @@ -118,72 +118,111 @@ const OverviewFeatures = () => { className="ppcp-r-tab-overview-features" title={ __( 'Features', 'woocommerce-paypal-payments' ) } description={ - <> -

- { __( - 'Enable additional features and capabilities on your WooCommerce store.', - 'woocommerce-paypal-payments' - ) } -

-

- { __( - 'Click Refresh to update your current features after making changes.', - 'woocommerce-paypal-payments' - ) } -

- - + } - contentItems={ features.map( ( feature ) => { - return ( - + + { features.map( ( { id, ...feature } ) => ( + - ! button.showWhen || // Learn more buttons - ( feature.enabled && - button.showWhen === 'enabled' ) || - ( ! feature.enabled && - button.showWhen === 'disabled' ) - ) - .map( ( button ) => ( { - ...button, - url: button.urls - ? merchant?.isSandbox - ? button.urls.sandbox - : button.urls.live - : button.url, - } ) ), - isBusy: isRefreshing, - enabled: feature.enabled, - notes: feature.notes, - badge: feature.enabled - ? { - text: __( - 'Active', - 'woocommerce-paypal-payments' - ), - type: TITLE_BADGE_POSITIVE, - } - : undefined, - } } + buttons={ feature.buttons } + enabled={ feature.enabled } + notes={ feature.notes } /> - ); - } ) } - /> + ) ) } + + + ); +}; + +const OverviewFeatureItem = ( { + isBusy, + isSandbox, + title, + description, + buttons, + enabled, + notes, +} ) => { + const getButtonUrl = ( button ) => { + if ( button.urls ) { + return isSandbox ? button.urls.sandbox : button.urls.live; + } + + return button.url; + }; + + const visibleButtons = buttons.filter( + ( button ) => + ! button.showWhen || // Learn more buttons + ( enabled && button.showWhen === 'enabled' ) || + ( ! enabled && button.showWhen === 'disabled' ) + ); + + const actionProps = { + isBusy, + enabled, + notes, + buttons: visibleButtons.map( ( button ) => ( { + ...button, + url: getButtonUrl( button ), + } ) ), + }; + + if ( enabled ) { + actionProps.badge = { + text: __( 'Active', 'woocommerce-paypal-payments' ), + type: TITLE_BADGE_POSITIVE, + }; + } + + return ( + + + + ); +}; + +const OverviewFeatureDescription = ( { refreshHandler, isRefreshing } ) => { + const buttonLabel = isRefreshing + ? __( 'Refreshing…', 'woocommerce-paypal-payments' ) + : __( 'Refresh', 'woocommerce-paypal-payments' ); + + return ( + <> +

+ { __( + 'Enable additional features and capabilities on your WooCommerce store.', + 'woocommerce-paypal-payments' + ) } +

+

+ { __( + 'Click Refresh to update your current features after making changes.', + 'woocommerce-paypal-payments' + ) } +

+ + ); }; @@ -196,51 +235,47 @@ const OverviewHelp = () => { 'Access detailed guides and responsive support to streamline setup and enhance your experience.', 'woocommerce-paypal-payments' ) } - contentItems={ [ - , - , - ] } - /> + > + + + ); }; From d5613ca030b8cdd3c4e727584164d2060bb17b65 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 15:33:21 +0100 Subject: [PATCH 07/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20layout=20of=20?= =?UTF-8?q?=E2=80=9Chelp=20center=E2=80=9D=20block?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Settings/Tabs/TabOverview.js | 89 ++++++++++--------- 1 file changed, 49 insertions(+), 40 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js index be3754884..63557516f 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js @@ -235,47 +235,56 @@ const OverviewHelp = () => { 'Access detailed guides and responsive support to streamline setup and enhance your experience.', 'woocommerce-paypal-payments' ) } + contentContainer={ false } > - - + + + + + + + + + ); }; From 105202f8332a974a371f3b53713c0ef147f93c41 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 16:10:28 +0100 Subject: [PATCH 08/49] =?UTF-8?q?=F0=9F=92=84=20Resolve=20the=20nested=20?= =?UTF-8?q?=E2=80=9Cbutton=20>=20a=E2=80=9D=20structure?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettingsBlocks/FeatureSettingsBlock.js | 64 ++++++++++++------- 1 file changed, 42 insertions(+), 22 deletions(-) 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 9a869e025..9bd5c21fd 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js @@ -20,30 +20,30 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => { ); }; - const renderButton = ( button ) => { - const buttonElement = ( - - ); + const FeatureButton = ( { + className, + variant, + text, + isBusy, + url, + urls, + onClick, + } ) => { + const buttonProps = { + className, + isBusy, + variant, + }; - // If there's a URL (either direct or in urls object), wrap in anchor tag - if ( button.url || button.urls ) { - const href = button.urls ? button.urls.live : button.url; - return ( - - { buttonElement } - - ); + if ( url || urls ) { + buttonProps.href = urls ? urls.live : url; + buttonProps.target = '_blank'; + } + if ( ! buttonProps.href ) { + buttonProps.onClick = onClick; } - return buttonElement; + return ; }; return ( @@ -62,7 +62,27 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
- { props.actionProps?.buttons.map( renderButton ) } + { props.actionProps?.buttons.map( + ( { + class: className, + type, + text, + url, + urls, + onClick, + } ) => ( + + ) + ) }
From 95bdf8bcc79ac38302cf11250d97fdb67a1bf685 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 16:29:03 +0100 Subject: [PATCH 09/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20layout=20of=20featur?= =?UTF-8?q?e=20overview?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reusable-components/_elements.scss | 2 +- .../css/components/screens/_settings.scss | 35 ++++++++----------- .../SettingsBlocks/FeatureSettingsBlock.js | 4 +-- 3 files changed, 17 insertions(+), 24 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss index 600d8850c..7b1cad358 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss @@ -29,7 +29,7 @@ .ppcp-r-title-badge { text-transform: none; - margin-left: 6px; + margin-left: 8px; } } diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss index 08f085f6f..46617375d 100644 --- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss +++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss @@ -86,33 +86,26 @@ } } -.ppcp-r-feature-item { - padding-top: 32px; - border-top: 1px solid $color-gray-400; +.ppcp-r-tab-overview-features { + --block-header-gap: 12px; +} - &__title { - @include font(16, 20, 600); - color: $color-black; - display: block; - margin: 0 0 8px 0; - } +.ppcp-r-tab-overview-help { + --block-header-gap: 8px; +} - &__description { - @include font(14, 20, 400); - color: $color-gray-800; - margin: 0 0 18px 0; - } - - &:not(:last-child) { - padding-bottom: 32px; - } - - &__buttons { +.ppcp-r-settings-block__feature { + .ppcp--action-buttons { display: flex; gap: 18px; + + .components-button.is-tertiary { + padding-left: 0; + padding-right: 0; + } } - &__notes { + .ppcp--item-notes { display: flex; flex-direction: column; 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 9bd5c21fd..285da6896 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js @@ -12,7 +12,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => { } return ( - + { notes.map( ( note, index ) => ( { note } ) ) } @@ -61,7 +61,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => { -
+
{ props.actionProps?.buttons.map( ( { class: className, From a43427ce29c1f00f21635adc87bd789e958653cb Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 16:33:40 +0100 Subject: [PATCH 10/49] =?UTF-8?q?=F0=9F=8E=A8=20Minor=20code=20style=20imp?= =?UTF-8?q?rovement=20in=20SCSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reusable-components/_badge-box.scss | 6 ++--- .../reusable-components/_title-badge.scss | 26 +++++++++++-------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss index 74fb531ee..83c18362c 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss @@ -30,7 +30,7 @@ &--has-image-badge .ppcp-r-title-badge--info { display: block; - margin: 6px 0px 0px 0px; + margin: 6px 0 0 0; width: fit-content; } @@ -42,9 +42,9 @@ flex-direction: column; .ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge { - margin: 0px; + margin: 0; img:first-of-type { - margin: 0px; + margin: 0; } } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_title-badge.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_title-badge.scss index 38429a8f7..997ff5b6f 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_title-badge.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_title-badge.scss @@ -1,18 +1,22 @@ -.ppcp-r-title-badge{ +.ppcp-r-title-badge { + --badge-bg-color: #F5F5F5; + --badge-text-color: #2F2F2F; + + color: var(--badge-text-color); + background-color: var(--badge-bg-color); + @include font(12, 16, 400); padding: 4px 8px; border-radius: 2px; white-space: nowrap; - &--positive{ - color: #144722; - background-color: #DAFFE0; + + &.ppcp-r-title-badge--positive { + --badge-bg-color: #DAFFE0; + --badge-text-color: #144722; } - &--negative{ - color:#5c0000; - background-color: #faeded; - } - &--info{ - color: #2F2F2F; - background-color: #F5F5F5; + + &.ppcp-r-title-badge--negative { + --badge-bg-color: #faeded; + --badge-text-color: #5c0000; } } From 63185b39b7fb1096c0b3e3b6ccc8cb7f8aba9952 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 17:01:03 +0100 Subject: [PATCH 11/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20the=20payment=20meth?= =?UTF-8?q?od=20item=20grid=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/css/_variables.scss | 1 + .../_payment-method-item.scss | 50 ++++++++++--------- .../reusable-components/_settings-card.scss | 2 +- .../settings/_tab-paylater-configurator.scss | 2 +- .../screens/settings/_tab-styling.scss | 2 +- .../SettingsBlocks/PaymentMethodItemBlock.js | 14 +++--- .../SettingsBlocks/PaymentMethodsBlock.js | 10 +--- 7 files changed, 39 insertions(+), 42 deletions(-) diff --git a/modules/ppcp-settings/resources/css/_variables.scss b/modules/ppcp-settings/resources/css/_variables.scss index 766707505..a59724a1e 100644 --- a/modules/ppcp-settings/resources/css/_variables.scss +++ b/modules/ppcp-settings/resources/css/_variables.scss @@ -73,4 +73,5 @@ $card-vertical-gap: 48px; // Default visual effects. --box-shadow-active-item: 0 2px 4px 0 rgba(0, 0, 0, 0.1); + --container-border-radius: 8px; } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss index c85c5162e..820994e77 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss @@ -1,58 +1,60 @@ -.ppcp-r-settings-block__payment-methods { - &.ppcp-r-settings-block { - display: flex; - flex-wrap: wrap; - flex-direction: row; - gap: 16px; +// Grid layout. +.ppcp-r-settings-block.ppcp--grid > .ppcp--content { + --block-separator-gap: 0; + + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + + @media screen and (max-width: 767px) { + grid-template-columns: repeat(2, 1fr); } - &__item { + @media screen and (max-width: 480px) { + grid-template-columns: 1fr; + } +} + +// Theming & visual styles. +.ppcp-r-settings-block__payment-methods { + .ppcp-r-settings-block { display: flex; align-items: flex-start; - width: calc(100% / 3 - 32px / 3); border: 1px solid $color-gray-300; + border-radius: var(--container-border-radius); padding: 16px; - border-radius: 8px; min-height: 200px; - @media screen and (max-width: 767px) { - width: calc(50% - 8px); - } - - @media screen and (max-width: 480px) { - width: 100%; - } - - &__inner { + .ppcp--method-inner { display: flex; flex-direction: column; height: 100%; } - &__title-wrapper { + .ppcp--method-title-wrapper { display: flex; align-items: center; margin: 0 0 8px 0; gap: 12px; } - &__description { + .ppcp--method-description { p { + @include font(13, 20, 400); margin: 0; color: $color-text-tertiary; - @include font(13, 20, 400); } margin: 0 0 12px 0; } - &__title { + .ppcp--method-title { @include font(13, 20, 500); color: $color-black; display: block; } - &__settings { + .ppcp--method-settings { line-height: 0; transition: 0.2s ease-out transform; transform: rotate(0deg); @@ -68,7 +70,7 @@ @include small-button; } - &__footer { + .ppcp--method-footer { display: flex; justify-content: space-between; align-items: center; diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss index 6a41d0593..1bedc6240 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss @@ -16,7 +16,7 @@ @media screen and (min-width: 960px) { --card-width-header: 280px; --card-width-content: 610px; - --card-gap: 48px; + --card-gap: 24px; --card-layout: flex; } diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_tab-paylater-configurator.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-paylater-configurator.scss index d819c51f2..8e76d0028 100644 --- a/modules/ppcp-settings/resources/css/components/screens/settings/_tab-paylater-configurator.scss +++ b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-paylater-configurator.scss @@ -1,7 +1,7 @@ .ppcp-r-paylater-configurator { display: flex; border: 1px solid var(--color-separators); - border-radius: 8px; + border-radius: var(--container-border-radius); overflow: hidden; font-family: "PayPalPro", sans-serif; -webkit-font-smoothing: antialiased; diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss index 4a9dcdc15..488aef61d 100644 --- a/modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss +++ b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss @@ -8,7 +8,7 @@ display: flex; border: 1px solid var(--color-separators); - border-radius: 8px; + border-radius: var(--container-border-radius); .ppcp-r-settings-block { &.header-section { diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js index 516851977..99270dde3 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js @@ -11,21 +11,21 @@ const PaymentMethodItemBlock = ( { isSelected, } ) => { return ( - -
-
+ +
+
- + { paymentMethod.itemTitle }
-

+

{ paymentMethod.itemDescription }

-
+
{ paymentMethod?.fields && onTriggerModal && (
{ data().getImage( 'icon-settings.svg' ) } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js index b2ed5e2de..038d4978b 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js @@ -2,11 +2,7 @@ import SettingsBlock from '../SettingsBlock'; import PaymentMethodItemBlock from './PaymentMethodItemBlock'; import { usePaymentMethods } from '../../../data/payment/hooks'; -const PaymentMethodsBlock = ( { - paymentMethods, - className = '', - onTriggerModal, -} ) => { +const PaymentMethodsBlock = ( { paymentMethods, onTriggerModal } ) => { const { setPersistent } = usePaymentMethods(); if ( ! paymentMethods?.length ) { @@ -21,9 +17,7 @@ const PaymentMethodsBlock = ( { }; return ( - + { paymentMethods.map( ( paymentMethod ) => ( Date: Fri, 24 Jan 2025 17:03:23 +0100 Subject: [PATCH 12/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Use=20wp=20icon=20in?= =?UTF-8?q?stead=20of=20custom=20SVG?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettingsBlocks/PaymentMethodItemBlock.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js index 99270dde3..e4cfc048d 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js @@ -1,8 +1,8 @@ -import { ToggleControl } from '@wordpress/components'; +import { ToggleControl, Icon } from '@wordpress/components'; +import { cog } from '@wordpress/icons'; import SettingsBlock from '../SettingsBlock'; import PaymentMethodIcon from '../PaymentMethodIcon'; -import data from '../../../utils/data'; const PaymentMethodItemBlock = ( { paymentMethod, @@ -36,7 +36,7 @@ const PaymentMethodItemBlock = ( { className="ppcp--method-settings" onClick={ onTriggerModal } > - { data().getImage( 'icon-settings.svg' ) } +
) }
From 5c5601af973371aaaa60d6da70819de77e03b8f3 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 24 Jan 2025 17:06:15 +0100 Subject: [PATCH 13/49] =?UTF-8?q?=F0=9F=9A=B8=20Replace=20clickable=20div?= =?UTF-8?q?=20with=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reusable-components/_payment-method-item.scss | 3 +-- .../SettingsBlocks/PaymentMethodItemBlock.js | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss index 820994e77..2013126da 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss @@ -55,14 +55,13 @@ } .ppcp--method-settings { - line-height: 0; + padding: 0; transition: 0.2s ease-out transform; transform: rotate(0deg); zoom: 1.005; &:hover { transform: rotate(45deg); - cursor: pointer; } } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js index e4cfc048d..07e7b6f10 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js @@ -1,4 +1,4 @@ -import { ToggleControl, Icon } from '@wordpress/components'; +import { ToggleControl, Icon, Button } from '@wordpress/components'; import { cog } from '@wordpress/icons'; import SettingsBlock from '../SettingsBlock'; @@ -32,12 +32,12 @@ const PaymentMethodItemBlock = ( { onChange={ onSelect } /> { paymentMethod?.fields && onTriggerModal && ( -
-
+ ) }
From 6e2f58c565708498254ea4783d3878b8a16b2893 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 10:55:17 +0100 Subject: [PATCH 14/49] =?UTF-8?q?=F0=9F=92=84=20Give=20payment=20method=20?= =?UTF-8?q?icons=20a=20fixed=20size?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_payment-method-icons.scss | 1 + .../_payment-method-item.scss | 5 +++++ .../ReusableComponents/PaymentMethodIcon.js | 21 ++++++++++++------- 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss index ee0028e77..975f137c4 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-icons.scss @@ -3,6 +3,7 @@ gap: 8px; justify-content: center; flex-wrap: wrap; + > img{ width: 38px; height: 24px; diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss index 2013126da..c1afcb4e8 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss @@ -65,6 +65,11 @@ } } + .ppcp--method-icon { + width: 30px; + height: 30px; + } + button.is-secondary { @include small-button; } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js index c45b0ad41..e1f060640 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodIcon.js @@ -1,15 +1,20 @@ +import { Icon } from '@wordpress/components'; + import data from '../../utils/data'; -const PaymentMethodIcon = ( props ) => { - if ( - ( Array.isArray( props.icons ) && - props.icons.includes( props.type ) ) || - props.icons === 'all' - ) { - return data().getImage( 'icon-button-' + props.type + '.svg' ); +const PaymentMethodIcon = ( { icons, type } ) => { + const validIcon = Array.isArray( icons ) && icons.includes( type ); + + if ( validIcon || icons === 'all' ) { + return ( + + ); } - return <>; + return null; }; export default PaymentMethodIcon; From 9fdc370c21d4fc0d21eeddf0c92b488068b30afe Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 10:58:34 +0100 Subject: [PATCH 15/49] =?UTF-8?q?=F0=9F=8E=A8=20Leverage=20PaymentHooks=20?= =?UTF-8?q?instead=20of=20direct=20import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Overview/TabSettingsElements/Blocks/Modal.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js index 81addaa04..670a77055 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js @@ -7,19 +7,16 @@ import { } from '@wordpress/components'; import { useState } from '@wordpress/element'; import PaymentMethodModal from '../../../../ReusableComponents/PaymentMethodModal'; -import { - usePaymentMethods, - usePaymentMethodsModal, -} from '../../../../../data/payment/hooks'; +import { PaymentHooks } from '../../../../../data'; const Modal = ( { method, setModalIsVisible, onSave } ) => { - const { paymentMethods } = usePaymentMethods(); + const { paymentMethods } = PaymentHooks.usePaymentMethods(); const { paypalShowLogo, threeDSecure, fastlaneCardholderName, fastlaneDisplayWatermark, - } = usePaymentMethodsModal(); + } = PaymentHooks.usePaymentMethodsModal(); const [ settings, setSettings ] = useState( () => { if ( ! method?.id ) { From 78a6303e124ec0c3a6cb71c9e5af7376ddb9a5cd Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:00:22 +0100 Subject: [PATCH 16/49] =?UTF-8?q?=E2=9C=A8=20Implement=20default=20?= =?UTF-8?q?=E2=80=9CsetTransient=E2=80=9D=20action?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/payment/actions.js | 39 ++++++++++++------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/payment/actions.js b/modules/ppcp-settings/resources/js/data/payment/actions.js index 95c0235b1..59d68d37c 100644 --- a/modules/ppcp-settings/resources/js/data/payment/actions.js +++ b/modules/ppcp-settings/resources/js/data/payment/actions.js @@ -37,27 +37,17 @@ export const hydrate = ( payload ) => ( { } ); /** - * Transient. Marks the store as "ready", i.e., fully initialized. + * Generic transient-data updater. * - * @param {boolean} isReady + * @param {string} prop Name of the property to update. + * @param {any} value The new value of the property. * @return {Action} The action. */ -export const setIsReady = ( isReady ) => ( { +export const setTransient = ( prop, value ) => ( { type: ACTION_TYPES.SET_TRANSIENT, - payload: { isReady }, + payload: { [ prop ]: value }, } ); -/** - * Side effect. Triggers the persistence of store data to the server. - * - * @return {Action} The action. - */ -export const persist = function* () { - const data = yield select( STORE_NAME ).persistentData(); - - yield { type: ACTION_TYPES.DO_PERSIST_DATA, data }; -}; - /** * Generic persistent-data updater. * @@ -69,3 +59,22 @@ export const setPersistent = ( prop, value ) => ( { type: ACTION_TYPES.SET_PERSISTENT, payload: { [ prop ]: value }, } ); + +/** + * Transient. Marks the store as "ready", i.e., fully initialized. + * + * @param {boolean} isReady + * @return {Action} The action. + */ +export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady ); + +/** + * Side effect. Triggers the persistence of store data to the server. + * + * @return {Action} The action. + */ +export const persist = function* () { + const data = yield select( STORE_NAME ).persistentData(); + + yield { type: ACTION_TYPES.DO_PERSIST_DATA, data }; +}; From 56150740c93697c1ee9876289d6adbdf916007ae Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:02:04 +0100 Subject: [PATCH 17/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Switch=20store=20to?= =?UTF-8?q?=20=E2=80=9CcreateHooksForStore=E2=80=9D=20utility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/payment/hooks.js | 64 ++++++++----------- 1 file changed, 28 insertions(+), 36 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/payment/hooks.js b/modules/ppcp-settings/resources/js/data/payment/hooks.js index 2bc994e08..fd53b048d 100644 --- a/modules/ppcp-settings/resources/js/data/payment/hooks.js +++ b/modules/ppcp-settings/resources/js/data/payment/hooks.js @@ -7,60 +7,52 @@ * @file */ -import { useSelect, useDispatch } from '@wordpress/data'; +import { useDispatch } from '@wordpress/data'; import { STORE_NAME } from './constants'; - -const useTransient = ( key ) => - useSelect( - ( select ) => select( STORE_NAME ).transientData()?.[ key ], - [ key ] - ); - -const usePersistent = ( key ) => - useSelect( - ( select ) => select( STORE_NAME ).persistentData()?.[ key ], - [ key ] - ); +import { createHooksForStore } from '../utils'; const useHooks = () => { + const { useTransient, usePersistent } = createHooksForStore( STORE_NAME ); const { persist, setPersistent } = useDispatch( STORE_NAME ); // Read-only flags and derived state. // Nothing here yet. // Transient accessors. - const isReady = useTransient( 'isReady' ); + const [ isReady ] = useTransient( 'isReady' ); // PayPal checkout. - const paypal = usePersistent( 'ppcp-gateway' ); - const venmo = usePersistent( 'venmo' ); - const payLater = usePersistent( 'pay-later' ); - const creditCard = usePersistent( 'ppcp-card-button-gateway' ); + const [ paypal ] = usePersistent( 'ppcp-gateway' ); + const [ venmo ] = usePersistent( 'venmo' ); + const [ payLater ] = usePersistent( 'pay-later' ); + const [ creditCard ] = usePersistent( 'ppcp-card-button-gateway' ); // Online card Payments. - const advancedCreditCard = usePersistent( 'ppcp-credit-card-gateway' ); - const fastlane = usePersistent( 'ppcp-axo-gateway' ); - const applePay = usePersistent( 'ppcp-applepay' ); - const googlePay = usePersistent( 'ppcp-googlepay' ); + const [ advancedCreditCard ] = usePersistent( 'ppcp-credit-card-gateway' ); + const [ fastlane ] = usePersistent( 'ppcp-axo-gateway' ); + const [ applePay ] = usePersistent( 'ppcp-applepay' ); + const [ googlePay ] = usePersistent( 'ppcp-googlepay' ); // Alternative payment methods. - const bancontact = usePersistent( 'ppcp-bancontact' ); - const blik = usePersistent( 'ppcp-blik' ); - const eps = usePersistent( 'ppcp-eps' ); - const ideal = usePersistent( 'ppcp-ideal' ); - const mybank = usePersistent( 'ppcp-mybank' ); - const p24 = usePersistent( 'ppcp-p24' ); - const trustly = usePersistent( 'ppcp-trustly' ); - const multibanco = usePersistent( 'ppcp-multibanco' ); - const pui = usePersistent( 'ppcp-pay-upon-invoice-gateway' ); - const oxxo = usePersistent( 'ppcp-oxxo-gateway' ); + const [ bancontact ] = usePersistent( 'ppcp-bancontact' ); + const [ blik ] = usePersistent( 'ppcp-blik' ); + const [ eps ] = usePersistent( 'ppcp-eps' ); + const [ ideal ] = usePersistent( 'ppcp-ideal' ); + const [ mybank ] = usePersistent( 'ppcp-mybank' ); + const [ p24 ] = usePersistent( 'ppcp-p24' ); + const [ trustly ] = usePersistent( 'ppcp-trustly' ); + const [ multibanco ] = usePersistent( 'ppcp-multibanco' ); + const [ pui ] = usePersistent( 'ppcp-pay-upon-invoice-gateway' ); + const [ oxxo ] = usePersistent( 'ppcp-oxxo-gateway' ); // Custom modal data. - const paypalShowLogo = usePersistent( 'paypalShowLogo' ); - const threeDSecure = usePersistent( 'threeDSecure' ); - const fastlaneCardholderName = usePersistent( 'fastlaneCardholderName' ); - const fastlaneDisplayWatermark = usePersistent( + const [ paypalShowLogo ] = usePersistent( 'paypalShowLogo' ); + const [ threeDSecure ] = usePersistent( 'threeDSecure' ); + const [ fastlaneCardholderName ] = usePersistent( + 'fastlaneCardholderName' + ); + const [ fastlaneDisplayWatermark ] = usePersistent( 'fastlaneDisplayWatermark' ); From e878deb66ec7356c30e83a2101727dc4401d5c5c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:03:03 +0100 Subject: [PATCH 18/49] =?UTF-8?q?=E2=9C=A8=20New=20action=20to=20change=20?= =?UTF-8?q?payment=20method=20details?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/payment/action-types.js | 1 + .../resources/js/data/payment/actions.js | 12 ++++++++++++ .../resources/js/data/payment/hooks.js | 9 ++++++--- .../resources/js/data/payment/reducer.js | 14 ++++++++++++++ 4 files changed, 33 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/payment/action-types.js b/modules/ppcp-settings/resources/js/data/payment/action-types.js index e68253c5d..ebb89c7f4 100644 --- a/modules/ppcp-settings/resources/js/data/payment/action-types.js +++ b/modules/ppcp-settings/resources/js/data/payment/action-types.js @@ -12,6 +12,7 @@ export default { SET_PERSISTENT: 'PAYMENT:SET_PERSISTENT', RESET: 'PAYMENT:RESET', HYDRATE: 'PAYMENT:HYDRATE', + CHANGE_PAYMENT_SETTING: 'PAYMENT:CHANGE_PAYMENT_SETTING', // Controls - always start with "DO_". DO_PERSIST_DATA: 'PAYMENT:DO_PERSIST_DATA', diff --git a/modules/ppcp-settings/resources/js/data/payment/actions.js b/modules/ppcp-settings/resources/js/data/payment/actions.js index 59d68d37c..36faa1f28 100644 --- a/modules/ppcp-settings/resources/js/data/payment/actions.js +++ b/modules/ppcp-settings/resources/js/data/payment/actions.js @@ -68,6 +68,18 @@ export const setPersistent = ( prop, value ) => ( { */ export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady ); +/** + * Modify properties of a specific payment method. + * + * @param {string} id The payment method ID. + * @param {Object} props New props. + * @return {Action} The action. + */ +export const changePaymentSettings = ( id, props ) => ( { + type: ACTION_TYPES.CHANGE_PAYMENT_SETTING, + payload: { id, props }, +} ); + /** * Side effect. Triggers the persistence of store data to the server. * diff --git a/modules/ppcp-settings/resources/js/data/payment/hooks.js b/modules/ppcp-settings/resources/js/data/payment/hooks.js index fd53b048d..f15c9db57 100644 --- a/modules/ppcp-settings/resources/js/data/payment/hooks.js +++ b/modules/ppcp-settings/resources/js/data/payment/hooks.js @@ -14,7 +14,8 @@ import { createHooksForStore } from '../utils'; const useHooks = () => { const { useTransient, usePersistent } = createHooksForStore( STORE_NAME ); - const { persist, setPersistent } = useDispatch( STORE_NAME ); + const { persist, setPersistent, changePaymentSettings } = + useDispatch( STORE_NAME ); // Read-only flags and derived state. // Nothing here yet. @@ -60,6 +61,7 @@ const useHooks = () => { persist, isReady, setPersistent, + changePaymentSettings, paypal, venmo, payLater, @@ -86,8 +88,9 @@ const useHooks = () => { }; export const useStore = () => { - const { persist, isReady } = useHooks(); - return { persist, isReady }; + const { persist, isReady, setPersistent, changePaymentSettings } = + useHooks(); + return { persist, isReady, setPersistent, changePaymentSettings }; }; export const usePaymentMethods = () => { diff --git a/modules/ppcp-settings/resources/js/data/payment/reducer.js b/modules/ppcp-settings/resources/js/data/payment/reducer.js index 7d45f296e..d46106f6b 100644 --- a/modules/ppcp-settings/resources/js/data/payment/reducer.js +++ b/modules/ppcp-settings/resources/js/data/payment/reducer.js @@ -57,6 +57,20 @@ const reducer = createReducer( defaultTransient, defaultPersistent, { [ ACTION_TYPES.SET_PERSISTENT ]: ( state, payload ) => changePersistent( state, payload ), + [ ACTION_TYPES.CHANGE_PAYMENT_SETTING ]: ( state, payload ) => { + const methodId = payload.id; + const oldProps = state.data[ methodId ]; + + if ( ! oldProps || oldProps.id !== methodId ) { + return state; + } + + return changePersistent( state, { + ...state, + [ methodId ]: { ...oldProps, ...payload.props }, + } ); + }, + [ ACTION_TYPES.RESET ]: ( state ) => { const cleanState = changeTransient( changePersistent( state, defaultPersistent ), From 7613babb7c8cd58326e9fbd1f36a3ebbe32e6fa9 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:07:19 +0100 Subject: [PATCH 19/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Minor=20code=20clean?= =?UTF-8?q?up=20in=20PaymentMethodsBlock?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettingsBlocks/PaymentMethodsBlock.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js index 038d4978b..60f02063b 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js @@ -1,11 +1,12 @@ import SettingsBlock from '../SettingsBlock'; import PaymentMethodItemBlock from './PaymentMethodItemBlock'; -import { usePaymentMethods } from '../../../data/payment/hooks'; +import { PaymentHooks } from '../../../data'; -const PaymentMethodsBlock = ( { paymentMethods, onTriggerModal } ) => { - const { setPersistent } = usePaymentMethods(); +// TODO: This is not a reusable component, as it's connected to the Redux store. +const PaymentMethodsBlock = ( { paymentMethods = [], onTriggerModal } ) => { + const { setPersistent } = PaymentHooks.useStore(); - if ( ! paymentMethods?.length ) { + if ( ! paymentMethods.length ) { return null; } From e4feb1f8f8eb71c9df9ee4eaa6d4c10467b103e6 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:07:57 +0100 Subject: [PATCH 20/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Switch=20PaymentMeth?= =?UTF-8?q?odsBlock=20to=20new=20action?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettingsBlocks/PaymentMethodsBlock.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js index 60f02063b..03d578684 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js @@ -4,19 +4,17 @@ import { PaymentHooks } from '../../../data'; // TODO: This is not a reusable component, as it's connected to the Redux store. const PaymentMethodsBlock = ( { paymentMethods = [], onTriggerModal } ) => { - const { setPersistent } = PaymentHooks.useStore(); + const { changePaymentSettings } = PaymentHooks.useStore(); + + const handleSelect = ( methodId, isSelected ) => + changePaymentSettings( methodId, { + enabled: isSelected, + } ); if ( ! paymentMethods.length ) { return null; } - const handleSelect = ( paymentMethod, isSelected ) => { - setPersistent( paymentMethod.id, { - ...paymentMethod, - enabled: isSelected, - } ); - }; - return ( { paymentMethods.map( ( paymentMethod ) => ( @@ -25,7 +23,7 @@ const PaymentMethodsBlock = ( { paymentMethods = [], onTriggerModal } ) => { paymentMethod={ paymentMethod } isSelected={ paymentMethod.enabled } onSelect={ ( checked ) => - handleSelect( paymentMethod, checked ) + handleSelect( paymentMethod.id, checked ) } onTriggerModal={ () => onTriggerModal?.( paymentMethod.id ) From 6b952a7d97325fd2cc1f3ba69ab6912d7f68abe0 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:14:24 +0100 Subject: [PATCH 21/49] =?UTF-8?q?=F0=9F=9A=9A=20Move=20components=20to=20c?= =?UTF-8?q?orrect=20folder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Blocks => Settings/Components/Payment}/Modal.js | 3 ++- .../{Overview => Settings/Tabs}/TabPaymentMethods.js | 12 ++++++------ .../js/Components/Screens/Settings/Tabs/index.js | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) rename modules/ppcp-settings/resources/js/Components/Screens/{Overview/TabSettingsElements/Blocks => Settings/Components/Payment}/Modal.js (98%) rename modules/ppcp-settings/resources/js/Components/Screens/{Overview => Settings/Tabs}/TabPaymentMethods.js (90%) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js similarity index 98% rename from modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js index 670a77055..282d37ebc 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js @@ -6,11 +6,12 @@ import { RadioControl, } from '@wordpress/components'; import { useState } from '@wordpress/element'; + import PaymentMethodModal from '../../../../ReusableComponents/PaymentMethodModal'; import { PaymentHooks } from '../../../../../data'; const Modal = ( { method, setModalIsVisible, onSave } ) => { - const { paymentMethods } = PaymentHooks.usePaymentMethods(); + const paymentMethods = PaymentHooks.usePaymentMethods(); const { paypalShowLogo, threeDSecure, diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js similarity index 90% rename from modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js index 9a4f713cd..ec5ad0c50 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js @@ -1,11 +1,11 @@ import { __ } from '@wordpress/i18n'; -import SettingsCard from '../../ReusableComponents/SettingsCard'; -import { PaymentMethodsBlock } from '../../ReusableComponents/SettingsBlocks'; -import { PaymentHooks } from '../../../data'; -import { useActiveModal } from '../../../data/common/hooks'; -import Modal from './TabSettingsElements/Blocks/Modal'; -import { usePaymentMethods } from '../../../data/payment/hooks'; +import SettingsCard from '../../../ReusableComponents/SettingsCard'; +import { PaymentMethodsBlock } from '../../../ReusableComponents/SettingsBlocks'; +import { PaymentHooks } from '../../../../data'; +import { useActiveModal } from '../../../../data/common/hooks'; +import { usePaymentMethods } from '../../../../data/payment/hooks'; +import Modal from '../Components/Payment/Modal'; const TabPaymentMethods = () => { const { paymentMethodsPayPalCheckout } = diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js index 69a2cf056..ab4d2c122 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js @@ -1,7 +1,7 @@ import { __ } from '@wordpress/i18n'; import TabOverview from './TabOverview'; -import TabPaymentMethods from '../../Overview/TabPaymentMethods'; +import TabPaymentMethods from './TabPaymentMethods'; import TabSettings from './TabSettings'; import TabStyling from './TabStyling'; import TabPayLaterMessaging from '../../Overview/TabPayLaterMessaging'; From 4aca1b23473d612e3c0d2d9e6ea7bdf5672405a4 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:15:37 +0100 Subject: [PATCH 22/49] =?UTF-8?q?=F0=9F=92=A1=20Add=20some=20comments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/Screens/Settings/Tabs/TabPaymentMethods.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js index ec5ad0c50..6b5e22b51 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js @@ -92,6 +92,7 @@ const TabPaymentMethods = () => { method={ getActiveMethod() } setModalIsVisible={ () => setActiveModal( null ) } onSave={ ( methodId, settings ) => { + // TODO: Use the changePaymentSettings action. setPersistent( methodId, { ...getActiveMethod(), title: settings.checkoutPageTitle, @@ -99,24 +100,28 @@ const TabPaymentMethods = () => { } ); if ( 'paypalShowLogo' in settings ) { + // TODO: Create a dedicated setter for this value. setPersistent( 'paypalShowLogo', settings.paypalShowLogo ); } if ( 'threeDSecure' in settings ) { + // TODO: Create a dedicated setter for this value. setPersistent( 'threeDSecure', settings.threeDSecure ); } if ( 'fastlaneCardholderName' in settings ) { + // TODO: Create a dedicated setter for this value. setPersistent( 'fastlaneCardholderName', settings.fastlaneCardholderName ); } if ( 'fastlaneDisplayWatermark' in settings ) { + // TODO: Create a dedicated setter for this value. setPersistent( 'fastlaneDisplayWatermark', settings.fastlaneDisplayWatermark From 1f82eb37f335da29006a1325160388c981e4278c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:16:04 +0100 Subject: [PATCH 23/49] =?UTF-8?q?=F0=9F=94=A5=20Remove=20non-existent=20pr?= =?UTF-8?q?operties=20from=20data=20model?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ppcp-settings/src/Data/SettingsModel.php | 36 +++++++------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/modules/ppcp-settings/src/Data/SettingsModel.php b/modules/ppcp-settings/src/Data/SettingsModel.php index b38300919..9bb2b94bb 100644 --- a/modules/ppcp-settings/src/Data/SettingsModel.php +++ b/modules/ppcp-settings/src/Data/SettingsModel.php @@ -37,24 +37,18 @@ class SettingsModel { $settings = get_option( self::OPTION_NAME, array() ); $formatted = array( - 'invoicePrefix' => $settings['invoice_prefix'] ?? '', - 'authorizeOnly' => (bool) ( $settings['authorize_only'] ?? false ), - 'captureVirtualOnlyOrders' => (bool) ( $settings['capture_virtual_only_orders'] ?? false ), - 'savePaypalAndVenmo' => (bool) ( $settings['save_paypal_and_venmo'] ?? false ), - 'saveCardDetails' => (bool) ( $settings['save_credit_card_and_debit_card'] ?? false ), - 'payNowExperience' => (bool) ( $settings['pay_now_experience'] ?? false ), - 'sandboxAccountCredentials' => (bool) ( $settings['sandbox_account_credentials'] ?? false ), - 'sandboxMode' => $settings['sandbox_mode'] ?? null, - 'sandboxEnabled' => (bool) ( $settings['sandbox_enabled'] ?? false ), - 'sandboxClientId' => $settings['sandbox_client_id'] ?? '', - 'sandboxSecretKey' => $settings['sandbox_secret_key'] ?? '', - 'sandboxConnected' => (bool) ( $settings['sandbox_connected'] ?? false ), - 'logging' => (bool) ( $settings['logging'] ?? false ), - 'subtotalAdjustment' => $settings['subtotal_mismatch_fallback'] ?? null, - 'brandName' => $settings['brand_name'] ?? '', - 'softDescriptor' => $settings['soft_descriptor'] ?? '', - 'landingPage' => $settings['paypal_landing_page'] ?? null, - 'buttonLanguage' => $settings['button_language'] ?? '', + 'invoicePrefix' => $settings['invoice_prefix'] ?? '', + 'authorizeOnly' => (bool) ( $settings['authorize_only'] ?? false ), + 'captureVirtualOnlyOrders' => (bool) ( $settings['capture_virtual_only_orders'] ?? false ), + 'savePaypalAndVenmo' => (bool) ( $settings['save_paypal_and_venmo'] ?? false ), + 'saveCardDetails' => (bool) ( $settings['save_credit_card_and_debit_card'] ?? false ), + 'payNowExperience' => (bool) ( $settings['pay_now_experience'] ?? false ), + 'logging' => (bool) ( $settings['logging'] ?? false ), + 'subtotalAdjustment' => $settings['subtotal_mismatch_fallback'] ?? null, + 'brandName' => $settings['brand_name'] ?? '', + 'softDescriptor' => $settings['soft_descriptor'] ?? '', + 'landingPage' => $settings['paypal_landing_page'] ?? null, + 'buttonLanguage' => $settings['button_language'] ?? '', ); return $formatted; @@ -78,12 +72,6 @@ class SettingsModel { 'save_paypal_and_venmo' => (bool) ( $data['savePaypalAndVenmo'] ?? false ), 'save_credit_card_and_debit_card' => (bool) ( $data['saveCardDetails'] ?? false ), 'pay_now_experience' => (bool) ( $data['payNowExperience'] ?? false ), - 'sandbox_account_credentials' => (bool) ( $data['sandboxAccountCredentials'] ?? false ), - 'sandbox_mode' => $data['sandboxMode'] ?? null, - 'sandbox_enabled' => (bool) ( $data['sandboxEnabled'] ?? false ), - 'sandbox_client_id' => $data['sandboxClientId'] ?? '', - 'sandbox_secret_key' => $data['sandboxSecretKey'] ?? '', - 'sandbox_connected' => (bool) ( $data['sandboxConnected'] ?? false ), 'logging' => (bool) ( $data['logging'] ?? false ), 'subtotal_mismatch_fallback' => $data['subtotalAdjustment'] ?? null, 'brand_name' => $data['brandName'] ?? '', From 7a6ec6a1fe7ed6ed74838677332168ef5a3a8c2e Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:20:27 +0100 Subject: [PATCH 24/49] =?UTF-8?q?=F0=9F=90=9B=20Fix=20incorrect=20DOM:=20R?= =?UTF-8?q?esolve=20nested=20

-tags?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/ReusableComponents/SettingsCard.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js index 3f32ed1e1..d2d408cd1 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js @@ -31,9 +31,9 @@ const SettingsCard = ( { { title } -

+

{ description } -

+
From ab5bcd53f45874e38b8a5963a46623a3f5486f85 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:23:23 +0100 Subject: [PATCH 25/49] =?UTF-8?q?=F0=9F=8E=A8=20Minor=20store-hooks=20clea?= =?UTF-8?q?nup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/data/payment/hooks.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/payment/hooks.js b/modules/ppcp-settings/resources/js/data/payment/hooks.js index f15c9db57..385840b12 100644 --- a/modules/ppcp-settings/resources/js/data/payment/hooks.js +++ b/modules/ppcp-settings/resources/js/data/payment/hooks.js @@ -95,7 +95,6 @@ export const useStore = () => { export const usePaymentMethods = () => { const { - setPersistent, paypal, venmo, payLater, @@ -137,10 +136,7 @@ export const usePaymentMethods = () => { oxxo, ]; - return { - setPersistent, - paymentMethods, - }; + return { paymentMethods }; }; export const usePaymentMethodsModal = () => { @@ -168,9 +164,7 @@ export const usePaymentMethodsPayPalCheckout = () => { creditCard, ]; - return { - paymentMethodsPayPalCheckout, - }; + return { paymentMethodsPayPalCheckout }; }; export const usePaymentMethodsOnlineCardPayments = () => { @@ -182,9 +176,7 @@ export const usePaymentMethodsOnlineCardPayments = () => { googlePay, ]; - return { - paymentMethodsOnlineCardPayments, - }; + return { paymentMethodsOnlineCardPayments }; }; export const usePaymentMethodsAlternative = () => { @@ -214,7 +206,5 @@ export const usePaymentMethodsAlternative = () => { oxxo, ]; - return { - paymentMethodsAlternative, - }; + return { paymentMethodsAlternative }; }; From 7468e0f538e7cbf263e198e2d66768d0ddcb0493 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:28:23 +0100 Subject: [PATCH 26/49] =?UTF-8?q?=F0=9F=90=9B=20Don=E2=80=99t=20render=20i?= =?UTF-8?q?nvalid=20payment=20method=20entries?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removes items that are not initialized, during first component render --- .../SettingsBlocks/PaymentMethodsBlock.js | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js index 03d578684..7a748a18a 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js @@ -17,19 +17,22 @@ const PaymentMethodsBlock = ( { paymentMethods = [], onTriggerModal } ) => { return ( - { paymentMethods.map( ( paymentMethod ) => ( - - handleSelect( paymentMethod.id, checked ) - } - onTriggerModal={ () => - onTriggerModal?.( paymentMethod.id ) - } - /> - ) ) } + { paymentMethods + // Remove empty/invalid payment method entries. + .filter( ( m ) => m.id ) + .map( ( paymentMethod ) => ( + + handleSelect( paymentMethod.id, checked ) + } + onTriggerModal={ () => + onTriggerModal?.( paymentMethod.id ) + } + /> + ) ) } ); }; From 351982bd9436f6770e64f09360cb2fd6a361fd76 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:29:57 +0100 Subject: [PATCH 27/49] =?UTF-8?q?=F0=9F=90=9B=20Restore=20accidentally=20d?= =?UTF-8?q?eleted=20braces?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/Screens/Settings/Components/Payment/Modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js index 282d37ebc..6ad2d2bf2 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Payment/Modal.js @@ -11,7 +11,7 @@ import PaymentMethodModal from '../../../../ReusableComponents/PaymentMethodModa import { PaymentHooks } from '../../../../../data'; const Modal = ( { method, setModalIsVisible, onSave } ) => { - const paymentMethods = PaymentHooks.usePaymentMethods(); + const { paymentMethods } = PaymentHooks.usePaymentMethods(); const { paypalShowLogo, threeDSecure, From 9be36f1a44f3c922e66cbf40ca56ce719fd5df5b Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 11:32:21 +0100 Subject: [PATCH 28/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Use=20more=20specifi?= =?UTF-8?q?c=20action=20to=20update=20method=20data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Screens/Settings/Tabs/TabPaymentMethods.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js index 6b5e22b51..dd03a443d 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js @@ -4,7 +4,6 @@ import SettingsCard from '../../../ReusableComponents/SettingsCard'; import { PaymentMethodsBlock } from '../../../ReusableComponents/SettingsBlocks'; import { PaymentHooks } from '../../../../data'; import { useActiveModal } from '../../../../data/common/hooks'; -import { usePaymentMethods } from '../../../../data/payment/hooks'; import Modal from '../Components/Payment/Modal'; const TabPaymentMethods = () => { @@ -15,7 +14,7 @@ const TabPaymentMethods = () => { const { paymentMethodsAlternative } = PaymentHooks.usePaymentMethodsAlternative(); - const { setPersistent } = usePaymentMethods(); + const { setPersistent, changePaymentSettings } = PaymentHooks.useStore(); const { activeModal, setActiveModal } = useActiveModal(); @@ -92,9 +91,7 @@ const TabPaymentMethods = () => { method={ getActiveMethod() } setModalIsVisible={ () => setActiveModal( null ) } onSave={ ( methodId, settings ) => { - // TODO: Use the changePaymentSettings action. - setPersistent( methodId, { - ...getActiveMethod(), + changePaymentSettings( methodId, { title: settings.checkoutPageTitle, description: settings.checkoutPageDescription, } ); From a9e2f600abe579cbeaefbcd481d8b4609fd96f7d Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 13:41:52 +0100 Subject: [PATCH 29/49] =?UTF-8?q?=F0=9F=A9=B9=20Resolve=20component=20depr?= =?UTF-8?q?ecation=20warnings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/ReusableComponents/Controls/ControlTextInput.js | 1 + .../js/Components/ReusableComponents/Fields/Checkbox.js | 1 + .../js/Components/Screens/Settings/Components/Payment/Modal.js | 1 + 3 files changed, 3 insertions(+) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlTextInput.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlTextInput.js index 644df9029..37978c24e 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlTextInput.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlTextInput.js @@ -10,6 +10,7 @@ const ControlTextInput = ( { } ) => ( { return (
Date: Mon, 27 Jan 2025 13:45:52 +0100 Subject: [PATCH 30/49] =?UTF-8?q?=F0=9F=9A=9A=20Prepare=20reusable=20modul?= =?UTF-8?q?e=20for=20new=20VStack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/ReusableComponents/{HStack.js => Stack.js} | 6 ++---- .../Styling/Layout/StylingSectionWithCheckboxes.js | 2 +- .../Styling/Layout/StylingSectionWithRadiobuttons.js | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) rename modules/ppcp-settings/resources/js/Components/ReusableComponents/{HStack.js => Stack.js} (69%) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/HStack.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Stack.js similarity index 69% rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/HStack.js rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/Stack.js index 2c54ac7da..b812133fb 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/HStack.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Stack.js @@ -1,12 +1,12 @@ /** - * Temporary component, until the experimental HStack block editor component is stable. + * Temporary component, until the experimental VStack/HStack block editor component is stable. * * @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-hstack--docs * @file */ import classNames from 'classnames'; -const HStack = ( { className, spacing = 3, children } ) => { +export const HStack = ( { className, spacing = 3, children } ) => { const wrapperClass = classNames( 'components-flex components-h-stack', className @@ -22,5 +22,3 @@ const HStack = ( { className, spacing = 3, children } ) => {
); }; - -export default HStack; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js index 8b9f48c90..59258772b 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { CheckboxGroup } from '../../../../../ReusableComponents/Fields'; -import HStack from '../../../../../ReusableComponents/HStack'; +import { HStack } from '../../../../../ReusableComponents/Stack'; import StylingSection from './StylingSection'; const StylingSectionWithCheckboxes = ( { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js index 699acfaa9..cf60f8f8c 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js @@ -1,7 +1,7 @@ import { RadioControl } from '@wordpress/components'; import classNames from 'classnames'; -import HStack from '../../../../../ReusableComponents/HStack'; +import { HStack } from '../../../../../ReusableComponents/Stack'; import StylingSection from './StylingSection'; const StylingSectionWithRadiobuttons = ( { From 563f9e5ac1a9379b44716789a7b9bc297a53b062 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 13:50:28 +0100 Subject: [PATCH 31/49] =?UTF-8?q?=E2=9C=A8=20Create=20new=20VStack=20compo?= =?UTF-8?q?nent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/ReusableComponents/Stack.js | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Stack.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Stack.js index b812133fb..e2b34fe50 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Stack.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Stack.js @@ -2,13 +2,15 @@ * Temporary component, until the experimental VStack/HStack block editor component is stable. * * @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-hstack--docs + * @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-vstack--docs * @file */ import classNames from 'classnames'; -export const HStack = ( { className, spacing = 3, children } ) => { +const Stack = ( { type, className, spacing, children } ) => { const wrapperClass = classNames( - 'components-flex components-h-stack', + 'components-flex', + `components-${ type }-stack`, className ); @@ -22,3 +24,19 @@ export const HStack = ( { className, spacing = 3, children } ) => {
); }; + +export const HStack = ( { className, spacing = 3, children } ) => { + return ( + + { children } + + ); +}; + +export const VStack = ( { className, spacing = 3, children } ) => { + return ( + + { children } + + ); +}; From 3dc7f090ba2c0dbfa62423f2ec78d0a5040bc11a Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 13:50:45 +0100 Subject: [PATCH 32/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20payment=20method=20l?= =?UTF-8?q?ist=20in=20Styles=20tab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Styling/Layout/StylingSectionWithCheckboxes.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js index 59258772b..979801b30 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { CheckboxGroup } from '../../../../../ReusableComponents/Fields'; -import { HStack } from '../../../../../ReusableComponents/Stack'; +import { VStack } from '../../../../../ReusableComponents/Stack'; import StylingSection from './StylingSection'; const StylingSectionWithCheckboxes = ( { @@ -23,13 +23,13 @@ const StylingSectionWithCheckboxes = ( { description={ description } separatorAndGap={ separatorAndGap } > - + - + { children } From 7f260b690dea5d90b7c3a0604893d54991b0fbed Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 13:55:31 +0100 Subject: [PATCH 33/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20HStack/VStack=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/css/components/_reusable.scss | 2 +- .../reusable-components/_hstack.scss | 31 ------------------- .../reusable-components/_stack.scss | 23 ++++++++++++++ .../screens/settings/_controls.scss | 6 ++++ 4 files changed, 30 insertions(+), 32 deletions(-) delete mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_hstack.scss create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss diff --git a/modules/ppcp-settings/resources/css/components/_reusable.scss b/modules/ppcp-settings/resources/css/components/_reusable.scss index c15273368..439979d90 100644 --- a/modules/ppcp-settings/resources/css/components/_reusable.scss +++ b/modules/ppcp-settings/resources/css/components/_reusable.scss @@ -5,7 +5,6 @@ @import './reusable-components/button'; @import './reusable-components/elements'; @import './reusable-components/fields'; -@import './reusable-components/hstack'; @import './reusable-components/navigation'; @import './reusable-components/onboarding-header'; @import './reusable-components/payment-method-icons'; @@ -16,6 +15,7 @@ @import './reusable-components/settings-toggle-block'; @import './reusable-components/settings-wrapper'; @import './reusable-components/spinner-overlay'; +@import './reusable-components/stack'; @import './reusable-components/tab-navigation'; @import './reusable-components/title-badge'; @import './reusable-components/welcome-docs'; diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_hstack.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_hstack.scss deleted file mode 100644 index 8a3e44022..000000000 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_hstack.scss +++ /dev/null @@ -1,31 +0,0 @@ -.ppcp-r-app { - .components-flex { - display: flex; - -webkit-box-align: stretch; - align-items: stretch; - -webkit-box-pack: center; - - .components-h-stack { - flex-direction: row; - justify-content: flex-start; - gap: 32px; - } - - .components-v-stack { - flex-direction: column; - justify-content: center; - } - - // Fix layout for checkboxes inside a flex-stack. - .components-checkbox-control > .components-base-control__field > .components-flex { - flex-direction: row; - gap: 12px; - } - } - - .ppcp--horizontal { - flex-direction: row; - align-items: center; - justify-content: space-between; - } -} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss new file mode 100644 index 000000000..afa9d8250 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss @@ -0,0 +1,23 @@ +.ppcp-r-app { + .components-flex { + display: flex; + -webkit-box-align: stretch; + align-items: stretch; + -webkit-box-pack: center; + } + + .components-flex.components-h-stack, + .ppcp--horizontal { + flex-direction: row; + align-items: center; + } + + .ppcp--horizontal { + justify-content: space-between; + } + + .components-flex.components-v-stack { + flex-direction: column; + justify-content: center; + } +} diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss index 953ea8121..5d0e487e2 100644 --- a/modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss +++ b/modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss @@ -5,3 +5,9 @@ overflow: hidden; text-overflow: ellipsis; } + +// Fix layout for checkboxes inside a flex-stack. +.components-checkbox-control > .components-base-control__field > .components-flex { + flex-direction: row; + gap: 12px; +} From 023bc277d074b1993da906cdf9fc444220a2def5 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 15:16:22 +0100 Subject: [PATCH 34/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20alignment=20of=20onb?= =?UTF-8?q?oarding=20wizard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/css/components/screens/_onboarding.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/modules/ppcp-settings/resources/css/components/screens/_onboarding.scss b/modules/ppcp-settings/resources/css/components/screens/_onboarding.scss index cfef2e04f..63bd39a2b 100644 --- a/modules/ppcp-settings/resources/css/components/screens/_onboarding.scss +++ b/modules/ppcp-settings/resources/css/components/screens/_onboarding.scss @@ -7,6 +7,9 @@ .ppcp-r-container--onboarding { --max-container-width: var(--max-width-onboarding); + margin-left: auto; + margin-right: auto; + .ppcp-r-inner-container { max-width: var(--max-width-onboarding-content); } From 9c1803e8ea4a39b4219e7cfe04bee9f5b101078d Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 15:30:21 +0100 Subject: [PATCH 35/49] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Resolve=20unnecessar?= =?UTF-8?q?y=20re-render=20of=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Screens/Settings/Components/Navigation.js | 9 +++------ .../ppcp-settings/resources/js/hooks/useSaveSettings.js | 6 ++++-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js index 9767730b7..e43644f7b 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js @@ -2,7 +2,6 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import TopNavigation from '../../../ReusableComponents/TopNavigation'; -import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper'; import { useSaveSettings } from '../../../../hooks/useSaveSettings'; const SettingsNavigation = () => { @@ -12,11 +11,9 @@ const SettingsNavigation = () => { return ( - - - + ); }; diff --git a/modules/ppcp-settings/resources/js/hooks/useSaveSettings.js b/modules/ppcp-settings/resources/js/hooks/useSaveSettings.js index bc5e95f20..f268d3214 100644 --- a/modules/ppcp-settings/resources/js/hooks/useSaveSettings.js +++ b/modules/ppcp-settings/resources/js/hooks/useSaveSettings.js @@ -1,3 +1,5 @@ +import { useCallback } from '@wordpress/element'; + import { CommonHooks, PaymentHooks, @@ -12,7 +14,7 @@ export const useSaveSettings = () => { const { persist: persistSettings } = SettingsHooks.useStore(); const { persist: persistStyling } = StylingHooks.useStore(); - const persistAll = () => { + const persistAll = useCallback( () => { withActivity( 'persist-methods', 'Save payment methods', @@ -28,7 +30,7 @@ export const useSaveSettings = () => { 'Save styling details', persistStyling ); - }; + }, [ persistPayment, persistSettings, persistStyling, withActivity ] ); return { persistAll }; }; From 727462305b912219aea2d2d126d40ee9e07fd3a4 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 15:47:31 +0100 Subject: [PATCH 36/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Consolidate=20paymen?= =?UTF-8?q?t-method=20hooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settings/Tabs/TabPaymentMethods.js | 22 ++--- .../resources/js/data/payment/hooks.js | 86 +++++++------------ 2 files changed, 35 insertions(+), 73 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js index dd03a443d..eb1754f38 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js @@ -7,13 +7,7 @@ import { useActiveModal } from '../../../../data/common/hooks'; import Modal from '../Components/Payment/Modal'; const TabPaymentMethods = () => { - const { paymentMethodsPayPalCheckout } = - PaymentHooks.usePaymentMethodsPayPalCheckout(); - const { paymentMethodsOnlineCardPayments } = - PaymentHooks.usePaymentMethodsOnlineCardPayments(); - const { paymentMethodsAlternative } = - PaymentHooks.usePaymentMethodsAlternative(); - + const methods = PaymentHooks.usePaymentMethods(); const { setPersistent, changePaymentSettings } = PaymentHooks.useStore(); const { activeModal, setActiveModal } = useActiveModal(); @@ -23,13 +17,7 @@ const TabPaymentMethods = () => { return null; } - const allMethods = [ - ...paymentMethodsPayPalCheckout, - ...paymentMethodsOnlineCardPayments, - ...paymentMethodsAlternative, - ]; - - return allMethods.find( ( method ) => method.id === activeModal ); + return methods.all.find( ( method ) => method.id === activeModal ); }; return ( @@ -45,7 +33,7 @@ const TabPaymentMethods = () => { contentContainer={ false } > @@ -63,7 +51,7 @@ const TabPaymentMethods = () => { contentContainer={ false } > @@ -81,7 +69,7 @@ const TabPaymentMethods = () => { contentContainer={ false } > diff --git a/modules/ppcp-settings/resources/js/data/payment/hooks.js b/modules/ppcp-settings/resources/js/data/payment/hooks.js index 162de35c9..253710580 100644 --- a/modules/ppcp-settings/resources/js/data/payment/hooks.js +++ b/modules/ppcp-settings/resources/js/data/payment/hooks.js @@ -95,14 +95,19 @@ export const useStore = () => { export const usePaymentMethods = () => { const { + // PayPal Checkout. paypal, venmo, payLater, creditCard, + + // Online card payments. advancedCreditCard, fastlane, applePay, googlePay, + + // Local APMs. bancontact, blik, eps, @@ -115,6 +120,25 @@ export const usePaymentMethods = () => { oxxo, } = useHooks(); + const payPalCheckout = [ paypal, venmo, payLater, creditCard ]; + const onlineCardPayments = [ + advancedCreditCard, + fastlane, + applePay, + googlePay, + ]; + const alternative = [ + bancontact, + blik, + eps, + ideal, + mybank, + p24, + trustly, + multibanco, + pui, + oxxo, + ]; const paymentMethods = [ paypal, venmo, @@ -136,7 +160,12 @@ export const usePaymentMethods = () => { oxxo, ]; - return { paymentMethods }; + return { + all: paymentMethods, + paypal: payPalCheckout, + cardPayment: onlineCardPayments, + apm: alternative, + }; }; export const usePaymentMethodsModal = () => { @@ -154,58 +183,3 @@ export const usePaymentMethodsModal = () => { fastlaneDisplayWatermark, }; }; - -export const usePaymentMethodsPayPalCheckout = () => { - const { paypal, venmo, payLater, creditCard } = useHooks(); - - const paymentMethodsPayPalCheckout = [ - paypal, - venmo, - payLater, - creditCard, - ].filter( ( item ) => Object.keys( item ).length !== 0 ); - - return { paymentMethodsPayPalCheckout }; -}; - -export const usePaymentMethodsOnlineCardPayments = () => { - const { advancedCreditCard, fastlane, applePay, googlePay } = useHooks(); - const paymentMethodsOnlineCardPayments = [ - advancedCreditCard, - fastlane, - applePay, - googlePay, - ].filter( ( item ) => Object.keys( item ).length !== 0 ); - - return { paymentMethodsOnlineCardPayments }; -}; - -export const usePaymentMethodsAlternative = () => { - const { - bancontact, - blik, - eps, - ideal, - mybank, - p24, - trustly, - multibanco, - pui, - oxxo, - } = useHooks(); - - const paymentMethodsAlternative = [ - bancontact, - blik, - eps, - ideal, - mybank, - p24, - trustly, - multibanco, - pui, - oxxo, - ].filter( ( item ) => Object.keys( item ).length !== 0 ); - - return { paymentMethodsAlternative }; -}; From 60f54d56ead20f3ba4529570c6a9a88611aa2140 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 17:22:35 +0100 Subject: [PATCH 37/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20settings-container?= =?UTF-8?q?=20alignment=20&=20width?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reusable-components/_settings-card.scss | 12 +++-- .../_settings-wrapper.scss | 46 +++++++++---------- .../reusable-components/_tab-navigation.scss | 1 - 3 files changed, 31 insertions(+), 28 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss index 1bedc6240..441cf4608 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss @@ -1,3 +1,8 @@ +// Configuration for this module. +$width_container: 938px; +$width_header: 280px; +$width_gap: 24px; + /* Styles the `SettingsCard` layout component. @@ -14,9 +19,9 @@ --card-layout: block; @media screen and (min-width: 960px) { - --card-width-header: 280px; - --card-width-content: 610px; - --card-gap: 24px; + --card-width-header: #{$width_header}; + --card-width-content: #{$width_container - $width_header - $width_gap}; + --card-gap: #{$width_gap}; --card-layout: flex; } @@ -46,6 +51,7 @@ &.ppcp--is-card { max-width: var(--card-width-content); border: 1px solid var(--color-gray-200); + width: 100%; border-radius: 4px; padding: 24px; } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss index 48753bade..90c14d734 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss @@ -1,28 +1,26 @@ -.ppcp-r { - &-container { - max-width: var(--max-container-width, none); - margin-right: auto; - } +.ppcp-r-container { + max-width: var(--max-container-width, none); + margin: 0 auto 0 35px; +} - &-inner-container { - margin-left: auto; - margin-right: auto; - padding: 0 16px 48px; - box-sizing: content-box; +.ppcp-r-inner-container { + margin-left: auto; + margin-right: auto; + padding: 0 16px 48px; + box-sizing: content-box; - @media screen and (max-width: 480px) { - padding-bottom: 36px; - } - } - - &-settings { - > * { - margin-bottom: $card-vertical-gap; - } - - > *:not(:last-child) { - padding-bottom: $card-vertical-gap; - border-bottom: 1px solid $color-gray-200; - } + @media screen and (max-width: 480px) { + padding-bottom: 36px; + } +} + +.ppcp-r-settings { + > * { + margin-bottom: $card-vertical-gap; + } + + > *:not(:last-child) { + padding-bottom: $card-vertical-gap; + border-bottom: 1px solid $color-gray-200; } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss index a1e07f374..92ccf41fd 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss @@ -4,7 +4,6 @@ max-width: var(--max-container-width); transition: max-width 0.2s; - padding:0 35px; .components-tab-panel__tabs { box-shadow: 0 -1px 0 0 $color-gray-400 inset; From 9d3080a259c02b219257d1860b3c8f66a47382fc Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 18:04:47 +0100 Subject: [PATCH 38/49] =?UTF-8?q?=F0=9F=92=84=20FIx=20the=20loading-spinne?= =?UTF-8?q?r=20position=20and=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/css/_variables.scss | 7 ++++++ .../reusable-components/_spinner-overlay.scss | 24 ++++++++++++++----- .../ReusableComponents/SpinnerOverlay.js | 4 +--- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/modules/ppcp-settings/resources/css/_variables.scss b/modules/ppcp-settings/resources/css/_variables.scss index a59724a1e..4e97c1e40 100644 --- a/modules/ppcp-settings/resources/css/_variables.scss +++ b/modules/ppcp-settings/resources/css/_variables.scss @@ -74,4 +74,11 @@ $card-vertical-gap: 48px; // Default visual effects. --box-shadow-active-item: 0 2px 4px 0 rgba(0, 0, 0, 0.1); --container-border-radius: 8px; + + // Spinner/loader. + --spinner-size: 20px; + --spinner-overlay-width: 320px; + --spinner-overlay-height: 320px; + --spinner-overlay-color: #fafafa; + --spinner-overlay-box-shadow: var(--box-shadow-active-item); } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss index 8f5e136e9..0f50066f3 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss @@ -1,11 +1,13 @@ .ppcp-r-spinner-overlay { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - z-index: 10; + width: var(--spinner-overlay-width); + height: var(--spinner-overlay-height); + box-shadow: var(--spinner-overlay-box-shadow); background: var(--spinner-overlay-color); + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 10; .components-spinner { position: absolute; @@ -13,5 +15,15 @@ left: 50%; transform: translate(-50%, -50%); margin: 0; + width: var(--spinner-size); + height: var(--spinner-size); + } + + .ppcp--spinner-message { + position: absolute; + left: 0; + width: 100%; + text-align: center; + top: calc(50% + 20px + var(--spinner-size)); } } diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js index de3858408..a0ef82572 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js @@ -9,9 +9,7 @@ const SpinnerOverlay = ( { message = null } ) => { return (
{ message && ( - - { message } - + { message } ) }
From dd454d4d127dc6f4907d6cbd5a717e16856f7c88 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 18:52:19 +0100 Subject: [PATCH 39/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20alignment=20of=20hor?= =?UTF-8?q?izontal=20radio-controls?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/components/screens/settings/_controls.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss index 5d0e487e2..8bc05b2ef 100644 --- a/modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss +++ b/modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss @@ -6,8 +6,19 @@ text-overflow: ellipsis; } -// Fix layout for checkboxes inside a flex-stack. +// Fix the checkbox layout (add gap between checkbox and label). .components-checkbox-control > .components-base-control__field > .components-flex { flex-direction: row; gap: 12px; } + +// Fix layout for radio groups inside a horizontal flex-stack. +.components-flex.components-h-stack > .components-radio-control { + width: 100%; + + .components-radio-control__group-wrapper { + justify-content: flex-start; + flex-direction: row; + gap: 12px; + } +} From 94069238f3e54600bb6f894038c698fd8858e672 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 18:54:02 +0100 Subject: [PATCH 40/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Add=20a=20=E2=80=9Cn?= =?UTF-8?q?ame=E2=80=9D=20prop=20to=20every=20CheckboxGroup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Styling/Content/LocationSelector.js | 2 +- .../Components/Styling/Content/PaymentMethods.js | 2 +- .../Settings/Components/Styling/Content/Tagline.js | 2 +- .../Styling/Layout/StylingSectionWithCheckboxes.js | 11 ++++++++++- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js index a747e93b3..677d1a71a 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js @@ -49,7 +49,7 @@ const LocationSelector = ( { location, setLocation } ) => { ) } { return ( { return ( { - className = classNames( 'ppcp--has-checkboxes', className ); + className = classNames( 'ppcp--has-checkboxes', name, className ); + + if ( ! name ) { + console.error( + 'Checkbox sections need a unique name! No name given to:', + title + ); + } return ( Date: Mon, 27 Jan 2025 18:54:27 +0100 Subject: [PATCH 41/49] =?UTF-8?q?=F0=9F=90=9B=20Fix=20broken=20checkbox=20?= =?UTF-8?q?logic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Fields/CheckboxGroup.js | 48 ++++++++++++++----- 1 file changed, 35 insertions(+), 13 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/CheckboxGroup.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/CheckboxGroup.js index 3c867ddb3..24ee22a32 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/CheckboxGroup.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/CheckboxGroup.js @@ -1,15 +1,39 @@ import { PayPalCheckbox } from './index'; +import { useCallback } from '@wordpress/element'; -const CheckboxGroup = ( { options, value, onChange } ) => { - const handleChange = ( key, checked ) => { - const getNewValue = () => { - if ( checked ) { - return [ ...value, key ]; - } - return value.filter( ( val ) => val !== key ); - }; +const CheckboxGroup = ( { name, options, value, onChange } ) => { + const handleChange = useCallback( + ( key, checked ) => { + const getNewValue = () => { + if ( 'boolean' === typeof value ) { + return checked; + } - onChange( getNewValue() ); + if ( checked ) { + return [ ...value, key ]; + } + return value.filter( ( val ) => val !== key ); + }; + + onChange( getNewValue() ); + }, + [ onChange, value ] + ); + + const isItemChecked = ( checked, itemValue ) => { + if ( typeof checked === 'boolean' ) { + return checked; + } + + if ( Array.isArray( value ) ) { + return value.includes( itemValue ); + } + + if ( typeof value === 'boolean' ) { + return value; + } + + return value === itemValue; }; return ( @@ -21,16 +45,14 @@ const CheckboxGroup = ( { options, value, onChange } ) => { checked, disabled, description, - tooltip, } ) => ( ) From 9de82ee1524bf231549ed1f3c8bb94e13040d17b Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 18:58:37 +0100 Subject: [PATCH 42/49] =?UTF-8?q?=F0=9F=9A=9A=20Move=20a=20config=20file?= =?UTF-8?q?=20to=20better=20location?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Settings/Components/Overview/features-config.js | 4 ++-- .../Settings/Components/Overview/pay-later-messaging.js} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename modules/ppcp-settings/resources/js/{data/settings/pay-later-messaging-component-data.js => Components/Screens/Settings/Components/Overview/pay-later-messaging.js} (99%) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/features-config.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/features-config.js index 76ad0d9b1..5dfd30c0c 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/features-config.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/features-config.js @@ -1,6 +1,6 @@ import { __ } from '@wordpress/i18n'; import { TAB_IDS, selectTab } from '../../../../../utils/tabSelector'; -import { payLaterMessagingComponentData } from '../../../../../data/settings/pay-later-messaging-component-data'; +import { payLaterMessaging } from './pay-later-messaging'; export const getFeatures = ( setActiveModal ) => { const storeCountry = ppcpSettings?.storeCountry; @@ -237,7 +237,7 @@ export const getFeatures = ( setActiveModal ) => { }, ]; - const countryData = payLaterMessagingComponentData[ storeCountry ] || {}; + const countryData = payLaterMessaging[ storeCountry ] || {}; // Add "Pay Later Messaging" to the feature list, if it's available. if ( diff --git a/modules/ppcp-settings/resources/js/data/settings/pay-later-messaging-component-data.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/pay-later-messaging.js similarity index 99% rename from modules/ppcp-settings/resources/js/data/settings/pay-later-messaging-component-data.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/pay-later-messaging.js index 13df867aa..1354f9c57 100644 --- a/modules/ppcp-settings/resources/js/data/settings/pay-later-messaging-component-data.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/pay-later-messaging.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -export const payLaterMessagingComponentData = { +export const payLaterMessaging = { US: { description: sprintf( __( From 26bd9f2d05657fd542ec1281dc4bb590c255291c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 20:35:54 +0100 Subject: [PATCH 43/49] =?UTF-8?q?=F0=9F=90=9B=20Fix=20re-render=20issues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReusableComponents/SettingsBlock.js | 32 +++++++++---------- .../ReusableComponents/SettingsCard.js | 16 +++++----- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js index 2c92942c7..f71d70528 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js @@ -15,22 +15,6 @@ const SettingsBlock = ( { 'ppcp--horizontal': horizontalLayout, } ); - const BlockTitle = ( { blockTitle, blockSuffix, blockDescription } ) => { - if ( ! blockTitle && ! blockDescription ) { - return null; - } - - return ( -
- - { blockTitle } - <TitleExtra>{ blockSuffix }</TitleExtra> - - { blockDescription } -
- ); - }; - return (
{ + if ( ! blockTitle && ! blockDescription ) { + return null; + } + + return ( +
+ + { blockTitle } + <TitleExtra>{ blockSuffix }</TitleExtra> + + { blockDescription } +
+ ); +}; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js index d2d408cd1..97db00c2f 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js @@ -16,14 +16,6 @@ const SettingsCard = ( { id, }; - const InnerContent = ( { showCards, children: containerItems } ) => { - if ( showCards ) { - return { containerItems }; - } - - return containerItems; - }; - return (
@@ -45,3 +37,11 @@ const SettingsCard = ( { }; export default SettingsCard; + +const InnerContent = ( { showCards, children } ) => { + if ( showCards ) { + return { children }; + } + + return children; +}; From 41afaafa5f3c15ab29091afd01d66311f46956cb Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 27 Jan 2025 22:28:27 +0100 Subject: [PATCH 44/49] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Improve=20TabPayment?= =?UTF-8?q?Methods=20structure?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settings/Tabs/TabPaymentMethods.js | 125 +++++++++--------- 1 file changed, 62 insertions(+), 63 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js index eb1754f38..48da574f0 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js @@ -1,4 +1,5 @@ import { __ } from '@wordpress/i18n'; +import { useCallback } from '@wordpress/element'; import SettingsCard from '../../../ReusableComponents/SettingsCard'; import { PaymentMethodsBlock } from '../../../ReusableComponents/SettingsBlocks'; @@ -9,20 +10,44 @@ import Modal from '../Components/Payment/Modal'; const TabPaymentMethods = () => { const methods = PaymentHooks.usePaymentMethods(); const { setPersistent, changePaymentSettings } = PaymentHooks.useStore(); - const { activeModal, setActiveModal } = useActiveModal(); const getActiveMethod = () => { if ( ! activeModal ) { return null; } - return methods.all.find( ( method ) => method.id === activeModal ); }; + const handleSave = useCallback( + ( methodId, settings ) => { + changePaymentSettings( methodId, { + title: settings.checkoutPageTitle, + description: settings.checkoutPageDescription, + } ); + + const persistentSettings = [ + 'paypalShowLogo', + 'threeDSecure', + 'fastlaneCardholderName', + 'fastlaneDisplayWatermark', + ]; + + persistentSettings.forEach( ( setting ) => { + if ( setting in settings ) { + // TODO: Create a dedicated setter for those values. + setPersistent( setting, settings[ setting ] ); + } + } ); + + setActiveModal( null ); + }, + [ changePaymentSettings, setActiveModal, setPersistent ] + ); + return (
- { 'woocommerce-paypal-payments' ) } icon="icon-checkout-standard.svg" - contentContainer={ false } - > - - - + { 'woocommerce-paypal-payments' ) } icon="icon-checkout-online-methods.svg" - contentContainer={ false } - > - - - + { 'woocommerce-paypal-payments' ) } icon="icon-checkout-alternative-methods.svg" - contentContainer={ false } - > - - + methods={ methods.apm } + onTriggerModal={ setActiveModal } + /> { activeModal && ( setActiveModal( null ) } - onSave={ ( methodId, settings ) => { - changePaymentSettings( methodId, { - title: settings.checkoutPageTitle, - description: settings.checkoutPageDescription, - } ); - - if ( 'paypalShowLogo' in settings ) { - // TODO: Create a dedicated setter for this value. - setPersistent( - 'paypalShowLogo', - settings.paypalShowLogo - ); - } - if ( 'threeDSecure' in settings ) { - // TODO: Create a dedicated setter for this value. - setPersistent( - 'threeDSecure', - settings.threeDSecure - ); - } - if ( 'fastlaneCardholderName' in settings ) { - // TODO: Create a dedicated setter for this value. - setPersistent( - 'fastlaneCardholderName', - settings.fastlaneCardholderName - ); - } - if ( 'fastlaneDisplayWatermark' in settings ) { - // TODO: Create a dedicated setter for this value. - setPersistent( - 'fastlaneDisplayWatermark', - settings.fastlaneDisplayWatermark - ); - } - - setActiveModal( null ); - } } + onSave={ handleSave } /> ) }
@@ -122,3 +99,25 @@ const TabPaymentMethods = () => { }; export default TabPaymentMethods; + +const PaymentMethodCard = ( { + id, + title, + description, + icon, + methods, + onTriggerModal, +} ) => ( + + + +); From 609fe0fd5963778f9575edd82839445f4689d229 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 09:54:26 +0100 Subject: [PATCH 45/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20title=20appearance?= =?UTF-8?q?=20in=20the=20Styling=20tab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settings/Components/Styling/Layout/StylingSection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js index 28c57bcd0..b2c1e1fd8 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js @@ -20,7 +20,7 @@ const StylingSection = ( { separatorAndGap={ separatorAndGap } >
- + <Title noCaps={ true } big={ bigTitle }> { title } { description } From b9282b510c4a8342643ad3b11cad55cba974d8c3 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 10:22:42 +0100 Subject: [PATCH 46/49] =?UTF-8?q?=F0=9F=92=84=20For=20send-only=20country:?= =?UTF-8?q?=20Hide=20Save,=20add=20CTA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/Screens/SendOnlyMessage.js | 16 +++++++++++++++- .../Screens/Settings/Components/Navigation.js | 10 ++++++---- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js b/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js index 676b691eb..3b50bdfdf 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js @@ -1,4 +1,5 @@ import { __, sprintf } from '@wordpress/i18n'; +import { Button } from '@wordpress/components'; import Container from '../ReusableComponents/Container'; import SettingsCard from '../ReusableComponents/SettingsCard'; @@ -9,7 +10,7 @@ const SendOnlyMessage = () => { return ( <> - + { ), } } /> + +
+ +
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js index e43644f7b..933e86678 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js @@ -4,16 +4,18 @@ import { __ } from '@wordpress/i18n'; import TopNavigation from '../../../ReusableComponents/TopNavigation'; import { useSaveSettings } from '../../../../hooks/useSaveSettings'; -const SettingsNavigation = () => { +const SettingsNavigation = ( { canSave = true } ) => { const { persistAll } = useSaveSettings(); const title = __( 'PayPal Payments', 'woocommerce-paypal-payments' ); return ( - + { canSave && ( + + ) } ); }; From d09e48df774147810d190ac75c28d3819cdad052 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 10:30:26 +0100 Subject: [PATCH 47/49] =?UTF-8?q?=F0=9F=9A=9A=20Move=20settings-tab=20file?= =?UTF-8?q?s=20to=20correct=20folder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReusableComponents/Controls/ControlButton.js | 7 ++++++- .../Components/Settings}/Blocks/ConnectionDetails.js | 6 +++--- .../Components/Settings/Blocks/HooksListBlock.js} | 4 ++-- .../Components/Settings}/Blocks/OtherSettings.js | 8 ++++---- .../Components/Settings}/Blocks/PaypalSettings.js | 8 ++++---- .../Components/Settings/Blocks}/ResubscribeBlock.js | 0 .../Components/Settings/Blocks}/SimulationBlock.js | 0 .../Components/Settings/Blocks}/Troubleshooting.js | 4 ++-- .../Settings/Components/Settings/ExpertSettings.js | 8 ++++---- 9 files changed, 25 insertions(+), 20 deletions(-) rename modules/ppcp-settings/resources/js/Components/Screens/{Overview/TabSettingsElements => Settings/Components/Settings}/Blocks/ConnectionDetails.js (96%) rename modules/ppcp-settings/resources/js/Components/Screens/{Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js => Settings/Components/Settings/Blocks/HooksListBlock.js} (93%) rename modules/ppcp-settings/resources/js/Components/Screens/{Overview/TabSettingsElements => Settings/Components/Settings}/Blocks/OtherSettings.js (84%) rename modules/ppcp-settings/resources/js/Components/Screens/{Overview/TabSettingsElements => Settings/Components/Settings}/Blocks/PaypalSettings.js (94%) rename modules/ppcp-settings/resources/js/Components/Screens/{Overview/TabSettingsElements/Blocks/Troubleshooting => Settings/Components/Settings/Blocks}/ResubscribeBlock.js (100%) rename modules/ppcp-settings/resources/js/Components/Screens/{Overview/TabSettingsElements/Blocks/Troubleshooting => Settings/Components/Settings/Blocks}/SimulationBlock.js (100%) rename modules/ppcp-settings/resources/js/Components/Screens/{Overview/TabSettingsElements/Blocks/Troubleshooting => Settings/Components/Settings/Blocks}/Troubleshooting.js (95%) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlButton.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlButton.js index bebfcf68b..5eafe70bc 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlButton.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlButton.js @@ -9,7 +9,12 @@ const ControlButton = ( { buttonLabel, } ) => ( - diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ConnectionDetails.js similarity index 96% rename from modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ConnectionDetails.js index 73664fcb9..351c06113 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ConnectionDetails.js @@ -4,9 +4,9 @@ import { Button } from '@wordpress/components'; import { ControlTextInput, ControlRadioGroup, -} from '../../../../ReusableComponents/Controls'; -import Accordion from '../../../../ReusableComponents/AccordionSection'; -import SettingsBlock from '../../../../ReusableComponents/SettingsBlock'; +} from '../../../../../ReusableComponents/Controls'; +import Accordion from '../../../../../ReusableComponents/AccordionSection'; +import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock'; const ConnectionDetails = ( { settings, updateFormValue } ) => { const isSandbox = settings.sandboxConnected; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js similarity index 93% rename from modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js index 5e1b335f3..dad255d25 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js @@ -4,7 +4,7 @@ import { CommonHooks } from '../../../../../../data'; import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock'; import { Title } from '../../../../../ReusableComponents/Elements'; -const HooksTableBlock = () => { +const HooksListBlock = () => { const { webhooks } = CommonHooks.useWebhooks(); const { url, events } = webhooks; @@ -46,4 +46,4 @@ const WebhookEvents = ( { events } ) => { ); }; -export default HooksTableBlock; +export default HooksListBlock; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OtherSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OtherSettings.js similarity index 84% rename from modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OtherSettings.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OtherSettings.js index ff5057da0..b2983eaf1 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OtherSettings.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OtherSettings.js @@ -1,9 +1,9 @@ import { __ } from '@wordpress/i18n'; -import Accordion from '../../../../ReusableComponents/AccordionSection'; -import SettingsBlock from '../../../../ReusableComponents/SettingsBlock'; -import { ControlSelect } from '../../../../ReusableComponents/Controls'; -import { SettingsHooks } from '../../../../../data'; +import Accordion from '../../../../../ReusableComponents/AccordionSection'; +import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock'; +import { ControlSelect } from '../../../../../ReusableComponents/Controls'; +import { SettingsHooks } from '../../../../../../data'; const OtherSettings = () => { const { disabledCards, setDisabledCards } = SettingsHooks.useSettings(); diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/PaypalSettings.js similarity index 94% rename from modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/PaypalSettings.js index c62b181b5..3baee0658 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/PaypalSettings.js @@ -5,10 +5,10 @@ import { ControlToggleButton, ControlTextInput, ControlSelect, -} from '../../../../ReusableComponents/Controls'; -import SettingsBlock from '../../../../ReusableComponents/SettingsBlock'; -import Accordion from '../../../../ReusableComponents/AccordionSection'; -import { SettingsHooks } from '../../../../../data'; +} from '../../../../../ReusableComponents/Controls'; +import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock'; +import Accordion from '../../../../../ReusableComponents/AccordionSection'; +import { SettingsHooks } from '../../../../../../data'; const PaypalSettings = () => { const { diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js similarity index 100% rename from modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SimulationBlock.js similarity index 100% rename from modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SimulationBlock.js diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/Troubleshooting.js similarity index 95% rename from modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/Troubleshooting.js index 1ce49bcdc..1c4e75c0d 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/Troubleshooting.js @@ -6,7 +6,7 @@ import Accordion from '../../../../../ReusableComponents/AccordionSection'; import SimulationBlock from './SimulationBlock'; import ResubscribeBlock from './ResubscribeBlock'; -import HooksTableBlock from './HooksTableBlock'; +import HooksListBlock from './HooksListBlock'; import { SettingsHooks } from '../../../../../../data'; const Troubleshooting = () => { @@ -43,7 +43,7 @@ const Troubleshooting = () => { 'https://woocommerce.com/document/woocommerce-paypal-payments/#webhook-status' ) } > - + diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js index a762f7eff..13f8e0928 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js @@ -4,10 +4,10 @@ import { Content, ContentWrapper, } from '../../../../ReusableComponents/Elements'; -import ConnectionDetails from '../../../Overview/TabSettingsElements/Blocks/ConnectionDetails'; -import Troubleshooting from '../../../Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting'; -import PaypalSettings from '../../../Overview/TabSettingsElements/Blocks/PaypalSettings'; -import OtherSettings from '../../../Overview/TabSettingsElements/Blocks/OtherSettings'; +import ConnectionDetails from './Blocks/ConnectionDetails'; +import Troubleshooting from './Blocks/Troubleshooting'; +import PaypalSettings from './Blocks/PaypalSettings'; +import OtherSettings from './Blocks/OtherSettings'; const ExpertSettings = () => { const settings = {}; // dummy object From 4a611cf3b4e8a0ed99f322938739fca1b93e7563 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 28 Jan 2025 10:47:22 +0100 Subject: [PATCH 48/49] =?UTF-8?q?=F0=9F=92=84=20Improve=20webhook=20detail?= =?UTF-8?q?s=20in=20Troubleshooting=20tab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reusable-components/_button.scss | 2 ++ .../screens/settings/_tab-settings.scss | 22 +++++++++++++++++++ .../Settings/Blocks/HooksListBlock.js | 4 ++-- .../Settings/Blocks/ResubscribeBlock.js | 1 + .../Settings/Blocks/SimulationBlock.js | 1 + 5 files changed, 28 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss index 558ccaaf2..8116068a9 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss @@ -38,6 +38,8 @@ button.components-button, a.components-button { /* style the button template */ + text-align: center; + &:not(:disabled) { @extend %button-style-default; } diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_tab-settings.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-settings.scss index 57a225917..2dbe2486d 100644 --- a/modules/ppcp-settings/resources/css/components/screens/settings/_tab-settings.scss +++ b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-settings.scss @@ -7,3 +7,25 @@ --block-header-gap: 0; --block-separator-size: 0; } + +.ppcp--webhooks { + .ppcp--webhook-list li { + list-style: none; + + &::before { + content: '✔︎'; + opacity: 0.35; + font-size: 0.75em; + line-height: 1.35; + display: inline-block; + margin-right: 8px; + } + } +} +.ppcp--webhook-resubscribe, +.ppcp--webhook-simulation { + .ppcp--action .components-button { + min-width: 160px; + display: block; + } +} diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js index dad255d25..572d3f2e6 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js @@ -13,7 +13,7 @@ const HooksListBlock = () => { } return ( - + @@ -37,7 +37,7 @@ const WebhookEvents = ( { events } ) => { { __( 'Subscribed Events', 'woocommerce-paypal-payments' ) } -
    +
      { events.map( ( event, index ) => (
    • { event }
      • ) ) } diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js index 3e49b7660..77014703d 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js @@ -59,6 +59,7 @@ const ResubscribeBlock = () => { 'woocommerce-paypal-payments' ) } horizontalLayout={ true } + className="ppcp--webhook-resubscribe" > { 'woocommerce-paypal-payments' ) } horizontalLayout={ true } + className="ppcp--webhook-simulation" > Date: Tue, 28 Jan 2025 10:48:26 +0100 Subject: [PATCH 49/49] =?UTF-8?q?=F0=9F=92=84=20Fix=20radio-button=20align?= =?UTF-8?q?ment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/css/components/reusable-components/_stack.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss index afa9d8250..5040759a8 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss @@ -11,7 +11,7 @@ flex-direction: row; align-items: center; } - + .ppcp--horizontal { justify-content: space-between; } @@ -19,5 +19,6 @@ .components-flex.components-v-stack { flex-direction: column; justify-content: center; + align-items: flex-start; } }