Use styles from buttonAttributes

Removed the css styles. Hardcoded defaults. New component for the editor. Use the new component in cart and checkout.
mollie · Nov 5, 2024 · 836e2a9 · 836e2a9
1 parent 62c1630
commit 836e2a9
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 29 deletions.
diff --git a/resources/js/applepayButtonBlock.js b/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',

diff --git a/resources/js/blocks/ApplePayButtonComponent.js b/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>
     );

diff --git a/resources/js/blocks/ApplePayButtonEditorComponent.js b/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;
diff --git a/resources/js/mollieBlockIndex.js b/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']
                             },
                         })
                     }

diff --git a/resources/scss/mollie-applepaydirect.scss b/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;
 }