Feature/style express piwoo 560

resources/js/applepayButtonBlock.js

@@ -1,4 +1,5 @@
 import {ApplePayButtonComponent} from "./blocks/ApplePayButtonComponent";
+import {ApplePayButtonEditorComponent} from "./blocks/ApplePayButtonEditorComponent";
 
 (
     function ({mollieApplePayBlockDataCart}) {
@@ -15,7 +16,7 @@ import {ApplePayButtonComponent} from "./blocks/ApplePayButtonComponent";
         registerExpressPaymentMethod({
             name: 'mollie_wc_gateway_applepay_express',
             content: < ApplePayButtonComponent/>,
-            edit: < ApplePayButtonComponent/>,
+            edit: < ApplePayButtonEditorComponent/>,
             ariaLabel: 'Apple Pay',
             canMakePayment: () => true,
             paymentMethodId: 'mollie_wc_gateway_applepay',

resources/js/blocks/ApplePayButtonComponent.js

@@ -1,7 +1,7 @@
 import {request} from "../applePayRequest";
 import {createAppleErrors} from "../applePayError";
 
-export const ApplePayButtonComponent = ({cart, extensions}) => {
+export const ApplePayButtonComponent = ({ buttonAttributes = {} }) => {
     const mollieApplePayBlockDataCart = window.mollieApplePayBlockDataCart || window.mollieBlockData.mollieApplePayBlockDataCart
     const nonce = document.getElementById("woocommerce-process-checkout-nonce").value
     let updatedContactInfo = []
@@ -11,6 +11,11 @@ export const ApplePayButtonComponent = ({cart, extensions}) => {
         shop: {countryCode, currencyCode = 'EUR', totalLabel = ''},
         ajaxUrl,
     } = mollieApplePayBlockDataCart
+    const { useMemo } = wp.element;
+    const style = useMemo(() => ({
+        height: `${buttonAttributes.height || 48}px`,
+        borderRadius: `${buttonAttributes.borderRadius || 4}px`
+    }), [buttonAttributes.height, buttonAttributes.borderRadius]);
 
     const findSelectedShippingMethod = (shippingRates) => {
         let shippingRate = shippingRates.find((shippingMethod) => shippingMethod.selected === true)
@@ -177,6 +182,7 @@ export const ApplePayButtonComponent = ({cart, extensions}) => {
                 event.preventDefault();
                 applePaySession();
             }}
+            style={style}
         >
         </button>
     );

resources/js/blocks/ApplePayButtonEditorComponent.js

@@ -0,0 +1,17 @@
+export const ApplePayButtonEditorComponent = ({ buttonAttributes = {} }) => {
+    const { useMemo } = wp.element;
+    const style = useMemo(() => ({
+        height: `${buttonAttributes.height || 48}px`,
+        borderRadius: `${buttonAttributes.borderRadius || 4}px`
+    }), [buttonAttributes.height, buttonAttributes.borderRadius]);
+
+    return (
+        <button
+            id="mollie_applepay_button"
+            className="apple-pay-button apple-pay-button-black"
+            style={style}
+        >
+        </button>
+    );
+};
+export default ApplePayButtonEditorComponent;

resources/js/mollieBlockIndex.js

@@ -1,5 +1,6 @@
 import molliePaymentMethod from './blocks/molliePaymentMethod'
 import ApplePayButtonComponent from './blocks/ApplePayButtonComponent'
+import ApplePayButtonEditorComponent from './blocks/ApplePayButtonEditorComponent'
 
 (
     function ({ mollieBlockData, wc, _, jQuery}) {
@@ -48,8 +49,8 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent'
             }
             gatewayData.forEach(item => {
                 let register = () => registerPaymentMethod(molliePaymentMethod(useEffect, ajaxUrl, filters, gatewayData, availableGateways, item, jQuery, requiredFields, isCompanyFieldVisible, isPhoneFieldVisible));
-                if (item.name === 'mollie_wc_gateway_applepay'  && !isBlockEditor) {
-                     const {isExpressEnabled} = item;
+                if (item.name === 'mollie_wc_gateway_applepay') {
+                    const {isExpressEnabled} = item;
                     if ((isAppleSession && window.ApplePaySession.canMakePayments())) {
                         register();
                         if (isExpressEnabled !== true) {
@@ -58,13 +59,17 @@ import ApplePayButtonComponent from './blocks/ApplePayButtonComponent'
                         const {registerExpressPaymentMethod} = wc.wcBlocksRegistry;
                         registerExpressPaymentMethod({
                             name: 'mollie_wc_gateway_applepay_express',
+                            title: 'Apple Pay Express button',
+                            description: 'Apple Pay Express button',
                             content: <ApplePayButtonComponent />,
-                            edit: <ApplePayButtonComponent />,
+                            edit: <ApplePayButtonEditorComponent />,
                             ariaLabel: 'Apple Pay',
                             canMakePayment: () => true,
                             paymentMethodId: 'mollie_wc_gateway_applepay',
+                            gatewayId: 'mollie_wc_gateway_applepay',
                             supports: {
                                 features: ['products'],
+                                style: ['height', 'borderRadius']
                             },
                         })
                     }

resources/scss/mollie-applepaydirect.scss

@@ -8,30 +8,6 @@
   -apple-pay-button-type: checkout; /* also: check-out, book, or subscribe */
 }
 
-@media (max-width: 480px) {
-  .apple-pay-button {
-    height: 41px;
-    min-height: 40px;
-    max-height: 47px;
-  }
-}
-
-@media (min-width: 481px) and (max-width: 1024px) {
-  .apple-pay-button {
-    height: 48px;
-    min-height: 48px;
-    max-height: 55px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .apple-pay-button {
-    height: 56px;
-    min-height: 56px;
-    max-height: 64px;
-  }
-}
-
 .apple-pay-button-black {
   -apple-pay-button-style: black;
 }

src/PaymentMethods/Applepay.php

@@ -30,6 +30,19 @@ protected function getConfig(): array
 
     public function getFormFields($generalFormFields): array
     {
+        $notice = [
+            'notice' => [
+                'title' =>
+
+                    __(
+                        '<p>Important: The Cart & Express Checkout Smart Button Stylings may be controlled in the Editor on the Block Checkout configuration.</p>',
+                        'mollie-payments-for-woocommerce'
+                    ),
+                'type' => 'title',
+                'class' => 'notice notice-warning',
+                'css' => 'padding:20px;',
+            ],
+        ];
         $paymentMethodFormFieds = [
             'mollie_apple_pay_button_enabled_cart' => [
                 'title' => __('Enable Apple Pay Button on Cart page', 'mollie-payments-for-woocommerce'),
@@ -56,6 +69,6 @@ public function getFormFields($generalFormFields): array
                 'default' => 'no',
             ],
         ];
-        return array_merge($generalFormFields, $paymentMethodFormFieds);
+        return array_merge($notice, $generalFormFields, $paymentMethodFormFieds);
     }
 }