Merge pull request #889 from mollie/feature/PIWOO-414-bancomat

PIWOO-414 Add bancomat and fix in3, billie
mollie · Apr 9, 2024 · f6e195a · f6e195a
2 parents c9d52ea + dedfade
commit f6e195a
Show file tree

Hide file tree

Showing 16 changed files with 452 additions and 78 deletions.
diff --git a/mollie-payments-for-woocommerce.php b/mollie-payments-for-woocommerce.php
@@ -3,7 +3,7 @@
  * Plugin Name: Mollie Payments for WooCommerce
  * Plugin URI: https://www.mollie.com
  * Description: Accept payments in WooCommerce with the official Mollie plugin
- * Version: 7.5.1
+ * Version: 7.5.2-beta
  * Author: Mollie
  * Author URI: https://www.mollie.com
  * Requires at least: 5.0

diff --git a/public/images/bancomatpay.svg b/public/images/bancomatpay.svg
diff --git a/resources/js/blocks/molliePaymentMethod.js b/resources/js/blocks/molliePaymentMethod.js
@@ -191,6 +191,36 @@ const MollieComponent = (props) => {
 
     }, [activePaymentMethod, onCheckoutValidation, billing.billingData, shippingData.shippingAddress, item, phoneString, inputBirthdate, inputPhone]);
 
+    useEffect(() => {
+        let phoneLabel = getPhoneField()?.labels?.[0] ?? null;
+        if (!phoneLabel || phoneLabel.length === 0) {
+            return
+        }
+        if (activePaymentMethod === 'mollie_wc_gateway_bancomatpay') {
+            phoneLabel.innerText = item.phonePlaceholder
+        } else {
+            if (phoneString !== false) {
+                phoneLabel.innerText = phoneString
+            }
+        }
+        let isPhoneEmpty = (billing.billingData.phone === '' && shippingData.shippingAddress.phone === '') && inputPhone === '';
+        const unsubscribeProcessing = onCheckoutValidation(
+
+            () => {
+                if (activePaymentMethod === 'mollie_wc_gateway_bancomatpay' && isPhoneEmpty) {
+                    return {
+                        errorMessage: item.errorMessage,
+                    };
+                }
+            }
+        );
+        return () => {
+            unsubscribeProcessing()
+        };
+
+    }, [activePaymentMethod, onCheckoutValidation, billing.billingData, shippingData.shippingAddress, item, phoneString, inputPhone]);
+
+
     onSubmitLocal = onSubmit
     const updateIssuer = ( changeEvent ) => {
         selectIssuer( changeEvent.target.value )
@@ -214,7 +244,9 @@ const MollieComponent = (props) => {
     }
 
     function fieldMarkup(id, fieldType, label, action, value) {
-        return <div><label htmlFor={id} dangerouslySetInnerHTML={{ __html: label }}></label><input type={fieldType} name={id} id={id} value={value} onChange={action}/></div>
+        const className = "wc-block-components-text-input wc-block-components-address-form__" + id;
+        return <div>
+            <input type={fieldType} name={id} id={id} value={value} onChange={action}></input><label htmlFor={id} dangerouslySetInnerHTML={{ __html: label }}></label></div>
     }
 
     if (item.name === "mollie_wc_gateway_billie"){
@@ -231,7 +263,17 @@ const MollieComponent = (props) => {
         fields.push(fieldMarkup("billing-birthdate", "date", birthdateField, updateBirthdate, inputBirthdate));
         if (!isPhoneFieldVisible) {
             const phoneField = item.phonePlaceholder ? item.phonePlaceholder : "Phone";
-            fields.push(fieldMarkup("billing-phone", "tel", phoneField, updatePhone, inputPhone));
+            fields.push(fieldMarkup("billing-phone-in3", "tel", phoneField, updatePhone, inputPhone));
+        }
+
+        return <>{fields}</>;
+    }
+
+    if (item.name === "mollie_wc_gateway_bancomatpay"){
+        let fields = [];
+        if (!isPhoneFieldVisible) {
+            const phoneField = item.phonePlaceholder ? item.phonePlaceholder : "Phone";
+            fields.push(fieldMarkup("billing-phone-bancomatpay", "tel", phoneField, updatePhone, inputPhone));
         }
 
         return <>{fields}</>;

diff --git a/resources/js/mollieBillie.js b/resources/js/mollieBillie.js
diff --git a/resources/js/mollieBlockIndex.js b/resources/js/mollieBlockIndex.js
@@ -7,33 +7,30 @@ import molliePaymentMethod from './blocks/molliePaymentMethod'
         }
         window.onload = (event) => {
             const { registerPaymentMethod } = wc.wcBlocksRegistry;
+            const { checkoutData, defaultFields } = wc.wcSettings.allSettings;
+            const { billing_address, shipping_address } = checkoutData;
             const { ajaxUrl, filters, gatewayData, availableGateways } = mollieBlockData.gatewayData;
             const {useEffect} = wp.element;
             const isAppleSession = typeof window.ApplePaySession === "function"
             const isBlockEditor = !!wp?.blockEditor;
 
             function getCompanyField() {
-                let shippingCompany = document.getElementById('shipping-company');
-                let billingCompany = document.getElementById('billing-company');
+                let shippingCompany = shipping_address.company ?? false;
+                let billingCompany = billing_address.company ?? false;
                 return shippingCompany ? shippingCompany : billingCompany;
             }
 
             function getPhoneField()
             {
-                const shippingPhone = document.getElementById('shipping-phone');
-                const billingPhone = document.getElementById('billing-phone');
+                const shippingPhone = shipping_address.phone ?? false;
+                const billingPhone = billing_address.phone ?? false
                 return billingPhone || shippingPhone;
             }
-            function isFieldVisible(field)
-            {
-                return field && field.style.display !== 'none';
-            }
-            let companyField = getCompanyField();
-            const isCompanyFieldVisible = companyField && isFieldVisible(companyField);
-            const companyNameString = companyField && companyField.parentNode.querySelector('label') ? companyField.parentNode.querySelector('label').innerHTML : false;
-            let phoneField = getPhoneField();
-            const isPhoneFieldVisible = phoneField && isFieldVisible(phoneField);
-            const phoneString = phoneField && phoneField.parentNode.querySelector('label') ? phoneField.parentNode.querySelector('label').innerHTML : false;
+
+            const isCompanyFieldVisible = getCompanyField();
+            const companyNameString = defaultFields.company.label
+            const isPhoneFieldVisible = getPhoneField();
+            const phoneString = defaultFields.phone.label
             let requiredFields = {
                 'companyNameString': companyNameString,
                 'phoneString': phoneString,

diff --git a/src/Assets/AssetsModule.php b/src/Assets/AssetsModule.php
@@ -276,13 +276,6 @@ protected function registerFrontendScripts(string $pluginUrl, string $pluginPath
             (string) filemtime($this->getPluginPath($pluginPath, '/public/js/gatewaySurcharge.min.js')),
             true
         );
-        wp_register_script(
-            'mollie-billie-classic-handles',
-            $this->getPluginUrl($pluginUrl, '/public/js/mollieBillie.min.js'),
-            ['underscore', 'jquery'],
-            (string) filemtime($this->getPluginPath($pluginPath, '/public/js/mollieBillie.min.js')),
-            true
-        );
     }
 
     public function registerBlockScripts(string $pluginUrl, string $pluginPath): void