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-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-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-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/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/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; } } } 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..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 ) => ( false, 'step' => 0, 'is_casual_seller' => null, - 'are_optional_payment_methods_enabled' => true, + 'are_optional_payment_methods_enabled' => null, 'products' => array(), ); }