Merge pull request #961 from mollie/feature/style-express-PIWOO-560

Feature/style express piwoo 560
mollie · Nov 27, 2024 · 4f2674d · 4f2674d
2 parents 6f62bf7 + e20dca3
commit 4f2674d
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 30 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,10 @@ export const ApplePayButtonComponent = ({cart, extensions}) => {
         shop: {countryCode, currencyCode = 'EUR', totalLabel = ''},
         ajaxUrl,
     } = mollieApplePayBlockDataCart
+    const style = {
+        height: `${buttonAttributes.height || 48}px`,
+        borderRadius: `${buttonAttributes.borderRadius || 4}px`
+    }
 
     const findSelectedShippingMethod = (shippingRates) => {
         let shippingRate = shippingRates.find((shippingMethod) => shippingMethod.selected === true)
@@ -177,6 +181,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,16 @@
+export const ApplePayButtonEditorComponent = ({ buttonAttributes = {} }) => {
+    const style = {
+        height: `${buttonAttributes.height || 48}px`,
+        borderRadius: `${buttonAttributes.borderRadius || 4}px`
+    }
+
+    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;
 }

diff --git a/src/PaymentMethods/Applepay.php b/src/PaymentMethods/Applepay.php
@@ -30,6 +30,25 @@ protected function getConfig(): array
 
     public function getFormFields($generalFormFields): array
     {
+
+        $checkout_page_id = wc_get_page_id('checkout');
+        $edit_checkout_page_link = get_edit_post_link($checkout_page_id);
+
+        $notice = [
+            'notice' => [
+                'title' => sprintf(
+                    /* translators: Placeholder 1: link url */
+                    __(
+                        '<p>The appearance of the Apple Pay button can be controlled in the <a href="%1$s">Checkout page editor</a>.</p>',
+                        'mollie-payments-for-woocommerce'
+                    ),
+                    esc_url($edit_checkout_page_link)
+                ),
+                '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 +75,6 @@ public function getFormFields($generalFormFields): array
                 'default' => 'no',
             ],
         ];
-        return array_merge($generalFormFields, $paymentMethodFormFieds);
+        return array_merge($notice, $generalFormFields, $paymentMethodFormFieds);
     }
 }