PIWOO-414 Add gateway phone when on blocks

mollie · Mar 11, 2024 · 6faa795 · 6faa795
1 parent cf4a786
commit 6faa795
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
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/src/Gateway/GatewayModule.php b/src/Gateway/GatewayModule.php
@@ -274,6 +274,8 @@ static function () {
                 [$this, 'switchFields'],
                 11
             );
+            add_action( 'woocommerce_rest_checkout_process_payment_with_context', [$this, 'addPhoneWhenRest'],11 );
+
         }
         $isBancomatPayEnabled = mollieWooCommerceIsGatewayEnabled('mollie_wc_gateway_bancomatpay_settings', 'enabled');
         if ($isBancomatPayEnabled) {
@@ -293,6 +295,7 @@ static function () {
                 [$this, 'switchFields'],
                 11
             );
+            add_action( 'woocommerce_rest_checkout_process_payment_with_context', [$this, 'addPhoneWhenRest'],11 );
         }
         // Set order to paid and processed when eventually completed without Mollie
         add_action('woocommerce_payment_complete', [$this, 'setOrderPaidByOtherGateway'], 10, 1);
@@ -872,4 +875,18 @@ private function isPhoneValid($billing_phone)
     {
         return preg_match('/^\+[1-9]\d{1,14}$/', $billing_phone);
     }
+
+    public function addPhoneWhenRest($arrayContext)
+    {
+        $context = $arrayContext;
+        $phoneMandatoryGateways = ['mollie_wc_gateway_in3', 'mollie_wc_gateway_bancomatpay'];
+        $paymentMethod = $context->payment_data['payment_method'];
+        if (in_array($paymentMethod, $phoneMandatoryGateways)) {
+            $billingPhone = $context->payment_data['billing_phone'];
+            if ($billingPhone) {
+                $context->order->set_billing_phone($billingPhone);
+                $context->order->save();
+            }
+        }
+    }
 }