From 5a014e24b21b7a18181b89634857df4b22028c6b Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Tue, 3 Dec 2024 15:27:16 +0400 Subject: [PATCH 1/5] Add more APMs and their descriptions from the old settings --- .../icon-button-payment-method-multibanco.svg | 1 + .../icon-button-payment-method-mybank.svg | 28 +++++++++++++ .../icon-button-payment-method-przelewy24.svg | 38 ++++++++++++++++++ .../icon-button-payment-method-trustly.svg | 1 + .../Screens/Overview/TabPaymentMethods.js | 40 ++++++++++++++++++- 5 files changed, 106 insertions(+), 2 deletions(-) create mode 100644 modules/ppcp-settings/images/icon-button-payment-method-multibanco.svg create mode 100644 modules/ppcp-settings/images/icon-button-payment-method-mybank.svg create mode 100644 modules/ppcp-settings/images/icon-button-payment-method-przelewy24.svg create mode 100644 modules/ppcp-settings/images/icon-button-payment-method-trustly.svg diff --git a/modules/ppcp-settings/images/icon-button-payment-method-multibanco.svg b/modules/ppcp-settings/images/icon-button-payment-method-multibanco.svg new file mode 100644 index 000000000..9d423223c --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-multibanco.svg @@ -0,0 +1 @@ +Logo_Multibanco diff --git a/modules/ppcp-settings/images/icon-button-payment-method-mybank.svg b/modules/ppcp-settings/images/icon-button-payment-method-mybank.svg new file mode 100644 index 000000000..82dd40ca4 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-mybank.svg @@ -0,0 +1,28 @@ + + + + MyBank + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-przelewy24.svg b/modules/ppcp-settings/images/icon-button-payment-method-przelewy24.svg new file mode 100644 index 000000000..3ab7a31be --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-przelewy24.svg @@ -0,0 +1,38 @@ + + + + logo P24 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-trustly.svg b/modules/ppcp-settings/images/icon-button-payment-method-trustly.svg new file mode 100644 index 000000000..85bfacbe0 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-trustly.svg @@ -0,0 +1 @@ + diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js index 453a34426..8e81aac8e 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js @@ -173,7 +173,7 @@ const paymentMethodsAlternativeDefault = [ id: 'eps', title: __( 'eps', 'woocommerce-paypal-payments' ), description: __( - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor massa ex, eget luctus lacus iaculis at.', + 'An online payment method in Austria, enabling Austrian buyers to make secure payments directly through their bank accounts. Transactions are processed in EUR.', 'woocommerce-paypal-payments' ), icon: 'payment-method-eps', @@ -182,11 +182,47 @@ const paymentMethodsAlternativeDefault = [ id: 'blik', title: __( 'BLIK', 'woocommerce-paypal-payments' ), description: __( - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor massa ex, eget luctus lacus iaculis at.', + 'A widely used mobile payment method in Poland, allowing Polish customers to pay directly via their banking apps. Transactions are processed in PLN.', 'woocommerce-paypal-payments' ), icon: 'payment-method-blik', }, + { + id: 'mybank', + title: __( 'MyBank', 'woocommerce-paypal-payments' ), + description: __( + 'A European online banking payment solution primarily used in Italy, enabling customers to make secure bank transfers during checkout. Transactions are processed in EUR.', + 'woocommerce-paypal-payments' + ), + icon: 'payment-method-mybank', + }, + { + id: 'przelewy24', + title: __( 'Przelewy24', 'woocommerce-paypal-payments' ), + description: __( + 'A popular online payment gateway in Poland, offering various payment options for Polish customers. Transactions can be processed in PLN or EUR.', + 'woocommerce-paypal-payments' + ), + icon: 'payment-method-przelewy24', + }, + { + id: 'trustly', + title: __( 'Trustly', 'woocommerce-paypal-payments' ), + description: __( + 'A European payment method that allows buyers to make payments directly from their bank accounts, suitable for customers across multiple European countries. Supported currencies include EUR, DKK, SEK, GBP, and NOK.', + 'woocommerce-paypal-payments' + ), + icon: 'payment-method-trustly', + }, + { + id: 'multibanco', + title: __( 'Multibanco', 'woocommerce-paypal-payments' ), + description: __( + 'An online payment method in Portugal, enabling Portuguese buyers to make secure payments directly through their bank accounts. Transactions are processed in EUR.', + 'woocommerce-paypal-payments' + ), + icon: 'payment-method-multibanco', + }, ]; export default TabPaymentMethods; From fbbec10ea31987e3c91b3ba43f0fc48a66ae9574 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Tue, 3 Dec 2024 18:06:23 +0400 Subject: [PATCH 2/5] Conditionally add PUI and OXXO --- .../icon-button-payment-method-oxxo.svg | 18 ++++++++++ .../icon-button-payment-method-ratepay.svg | 3 ++ .../Screens/Overview/TabPaymentMethods.js | 35 ++++++++++++++++++- 3 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 modules/ppcp-settings/images/icon-button-payment-method-oxxo.svg create mode 100644 modules/ppcp-settings/images/icon-button-payment-method-ratepay.svg diff --git a/modules/ppcp-settings/images/icon-button-payment-method-oxxo.svg b/modules/ppcp-settings/images/icon-button-payment-method-oxxo.svg new file mode 100644 index 000000000..4f69e152d --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-oxxo.svg @@ -0,0 +1,18 @@ + + + + logo OXXO + Created with Sketch. + + + + + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-button-payment-method-ratepay.svg b/modules/ppcp-settings/images/icon-button-payment-method-ratepay.svg new file mode 100644 index 000000000..f0da1b689 --- /dev/null +++ b/modules/ppcp-settings/images/icon-button-payment-method-ratepay.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js index 8e81aac8e..c0dec5075 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js @@ -4,12 +4,25 @@ import PaymentMethodItem from '../../ReusableComponents/PaymentMethodItem'; import ModalPayPal from './Modals/ModalPayPal'; import ModalFastlane from './Modals/ModalFastlane'; import ModalAcdc from './Modals/ModalAcdc'; +import { CommonHooks } from '../../../data'; const TabPaymentMethods = () => { const renderPaymentMethods = ( data ) => { + const { storeCountry, storeCurrency } = CommonHooks.useWooSettings(); + + const conditionallyUpdatedPaymentMethods = [ + ...data, + ...( storeCountry === 'DE' && storeCurrency === 'EUR' + ? [ puiPaymentMethod ] + : [] ), + ...( storeCountry === 'MX' && storeCurrency === 'MXN' + ? [ oxxoPaymentMethod ] + : [] ), + ]; + return (
- { data.map( ( paymentMethod ) => ( + { conditionallyUpdatedPaymentMethods.map( ( paymentMethod ) => ( Date: Wed, 4 Dec 2024 18:36:35 +0400 Subject: [PATCH 3/5] Fix the welcome screen --- .../reusable-components/_badge-box.scss | 15 +++++++++++++++ .../reusable-components/_onboarding-header.scss | 4 ++++ .../reusable-components/_welcome-docs.scss | 3 +-- .../screens/onboarding/_step-welcome.scss | 1 + 4 files changed, 21 insertions(+), 2 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 427b4b1fb..74fb531ee 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 @@ -33,5 +33,20 @@ margin: 6px 0px 0px 0px; width: fit-content; } + + @media screen and (max-width: 480px) { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + flex-direction: column; + + .ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge { + margin: 0px; + img:first-of-type { + margin: 0px; + } + } + } } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss index d6d8cf4f3..70348532e 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss @@ -31,5 +31,9 @@ @include font(14, 22, 400); margin: 0 20%; text-align: center; + + @media screen and (max-width: 480px) { + margin: 0px; + } } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss index 411d5a987..f6dce1407 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss @@ -20,8 +20,7 @@ justify-content: center; @media screen and (max-width: 480px) { - flex-wrap: wrap; - row-gap: 8px; + display: block; } } } diff --git a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss index 3399a1bc9..47af9c99a 100644 --- a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss +++ b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss @@ -78,6 +78,7 @@ border-right: 0; padding-right: 0; padding-bottom: 8px; + margin: 0px; } } } From 87ff0c23a004efc0fe194662b5680032ef2d43f6 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Wed, 4 Dec 2024 18:36:35 +0400 Subject: [PATCH 4/5] Fix the welcome screen --- .../reusable-components/_badge-box.scss | 15 +++++++++++++++ .../reusable-components/_onboarding-header.scss | 4 ++++ .../reusable-components/_welcome-docs.scss | 3 +-- .../screens/onboarding/_step-welcome.scss | 1 + 4 files changed, 21 insertions(+), 2 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 427b4b1fb..74fb531ee 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 @@ -33,5 +33,20 @@ margin: 6px 0px 0px 0px; width: fit-content; } + + @media screen and (max-width: 480px) { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + flex-direction: column; + + .ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge { + margin: 0px; + img:first-of-type { + margin: 0px; + } + } + } } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss index d6d8cf4f3..70348532e 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss @@ -31,5 +31,9 @@ @include font(14, 22, 400); margin: 0 20%; text-align: center; + + @media screen and (max-width: 480px) { + margin: 0px; + } } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss index 411d5a987..f6dce1407 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss @@ -20,8 +20,7 @@ justify-content: center; @media screen and (max-width: 480px) { - flex-wrap: wrap; - row-gap: 8px; + display: block; } } } diff --git a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss index 3399a1bc9..47af9c99a 100644 --- a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss +++ b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss @@ -78,6 +78,7 @@ border-right: 0; padding-right: 0; padding-bottom: 8px; + margin: 0px; } } } From 84060d1b2903cc4c692c544fc08d6ba032aa5d2e Mon Sep 17 00:00:00 2001 From: Himad M Date: Thu, 5 Dec 2024 09:33:24 -0400 Subject: [PATCH 5/5] New Settings UI: Set Optional Payment Methods default to null --- modules/ppcp-settings/resources/js/data/onboarding/reducer.js | 2 +- modules/ppcp-settings/src/Data/OnboardingProfile.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js index 176d4875d..5b59b75e6 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js @@ -27,7 +27,7 @@ const defaultPersistent = { completed: false, step: 0, isCasualSeller: null, // null value will uncheck both options in the UI. - areOptionalPaymentMethodsEnabled: true, + areOptionalPaymentMethodsEnabled: null, products: [], }; diff --git a/modules/ppcp-settings/src/Data/OnboardingProfile.php b/modules/ppcp-settings/src/Data/OnboardingProfile.php index 03a0a7d1c..9381b58ee 100644 --- a/modules/ppcp-settings/src/Data/OnboardingProfile.php +++ b/modules/ppcp-settings/src/Data/OnboardingProfile.php @@ -67,7 +67,7 @@ class OnboardingProfile extends AbstractDataModel { 'completed' => false, 'step' => 0, 'is_casual_seller' => null, - 'are_optional_payment_methods_enabled' => true, + 'are_optional_payment_methods_enabled' => null, 'products' => array(), ); }