Fix: recaptcha compatible to 2.4.7 and pay button not work whenselect…

… element in product page
airwallex · May 6, 2024 · efd03d5 · efd03d5
1 parent 4db8870
commit efd03d5
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 31 deletions.
diff --git a/Model/Service.php b/Model/Service.php
@@ -460,10 +460,34 @@ public function addToCart(): string
     public function postAddress(): string
     {
         $countryId = $this->request->getParam('country_id');
-        $regionName = $this->request->getParam('region');
+        if (!$countryId) {
+            throw new Exception(__('Country is required.'));
+        }
+
+        $region = $this->request->getParam('region');
+        if (!$region) {
+            throw new Exception(__('Region is required.'));
+        }
+
+        $city = $this->request->getParam('city');
+        if (!$city) {
+            throw new Exception(__('City is required.'));
+        }
+
+        $postcode = $this->request->getParam('postcode');
+        if (!$postcode) {
+            throw new Exception(__('Postal code is required.'));
+        }
+
+        $regionId = $this->regionFactory->create()->loadByName($region, $countryId)->getRegionId();
+        if (!$regionId) {
+            $regionId = $this->regionFactory->create()->loadByCode($region, $countryId)->getRegionId();
+            if (!$regionId) {
+                throw new Exception(__('Region is required.'));
+            }
+        }
 
-        $regionId = $this->regionFactory->create()->loadByName($regionName, $countryId)->getRegionId();
-        $region = $this->regionInterfaceFactory->create()->setRegion($regionName)->setRegionId($regionId);
+        $region = $this->regionInterfaceFactory->create()->setRegion($region)->setRegionId($regionId);
 
         $quote = $this->checkoutHelper->getQuote();
 
@@ -473,10 +497,10 @@ public function postAddress(): string
         }
 
         $address = $quote->getShippingAddress();
-        $address->setCountryId($this->request->getParam('country_id'));
-        $address->setCity($this->request->getParam('city'));
+        $address->setCountryId($countryId);
+        $address->setCity($city);
         $address->setRegion($region->getRegion());
-        $address->setPostcode($this->request->getParam('postcode'));
+        $address->setPostcode($postcode);
         $methods = $this->shipmentEstimation->estimateByExtendedAddress($cartId, $address);
 
         $res = [];

diff --git a/etc/adminhtml/system/express.xml b/etc/adminhtml/system/express.xml
@@ -40,7 +40,7 @@
                 <field id="active">1</field>
             </depends>
         </field>
-        <include path="Airwallex_Payments::system/express/apple_pay.xml"/>
+<!--        <include path="Airwallex_Payments::system/express/apple_pay.xml"/>-->
         <include path="Airwallex_Payments::system/express/google_pay.xml"/>
     </group>
 </include>
diff --git a/view/frontend/web/js/view/payment/method-renderer/address/address-handler.js b/view/frontend/web/js/view/payment/method-renderer/address/address-handler.js
@@ -80,7 +80,7 @@ define([
                 "addressInformation": {
                     "shipping_address": {
                         "countryId": data.shippingAddress.countryCode,
-                        "regionId": this.regionId,
+                        "regionId": this.regionId || 0,
                         "region": data.shippingAddress.administrativeArea,
                         "street": [data.shippingAddress.address1 + ' ' + data.shippingAddress.address2 + ' ' + data.shippingAddress.address3],
                         "telephone": data.shippingAddress.phoneNumber,
@@ -102,7 +102,7 @@ define([
                 "addressInformation": {
                     "shipping_address": {
                         "countryId": data.shippingContact.countryCode,
-                        "regionId": this.regionId,
+                        "regionId": this.regionId || 0,
                         "region": data.shippingContact.administrativeArea,
                         "street": data.shippingContact.addressLines,
                         "telephone": data.shippingContact.phoneNumber,

diff --git a/view/frontend/web/js/view/payment/method-renderer/card-method.js b/view/frontend/web/js/view/payment/method-renderer/card-method.js
@@ -98,6 +98,13 @@ define(
                 );
             },
 
+            getRecaptchaId() {
+                if ($('#recaptcha-checkout-place-order').length) {
+                    return this.recaptchaId;
+                }
+                return $('.airwallex-card-container .g-recaptcha').attr('id')
+            },
+
             initiateOrderPlacement: async function () {
                 const self = this;
 
@@ -149,10 +156,10 @@ define(
                         try {
                             if (self.isRecaptchaEnabled) {
                                 payload.xReCaptchaValue = await new Promise((resolve, reject) => {
-                                    recaptchaRegistry.addListener(self.recaptchaId, (token) => {
+                                    recaptchaRegistry.addListener(self.getRecaptchaId(), (token) => {
                                         resolve(token);
                                     });
-                                    recaptchaRegistry.triggers[self.recaptchaId]();
+                                    recaptchaRegistry.triggers[self.getRecaptchaId()]();
                                 });
                             }
 

diff --git a/view/frontend/web/js/view/payment/method-renderer/express-checkout.js b/view/frontend/web/js/view/payment/method-renderer/express-checkout.js
@@ -73,7 +73,7 @@ define(
                 let obj = JSON.parse(resp);
                 this.updateExpressData(obj.quote_data);
                 this.updateMethods(obj.methods, obj.selected_method);
-                addressHandler.regionId = obj.region_id;
+                addressHandler.regionId = obj.region_id || 0;
                 return obj;
             },
 
@@ -107,12 +107,12 @@ define(
                         return;
                     }
 
-                    this.destroyElement()
+                    this.destroyElement();
                     await this.fetchExpressData();
                     if (this.from === 'minicart' && utils.isCartEmpty(this.expressData)) {
                         return;
                     }
-                    this.createPays()
+                    this.createPays();
                 };
 
                 let cartData = customerData.get('cart');
@@ -151,29 +151,28 @@ define(
                 });
 
                 this.isShow(true);
+            },
 
-                // dom loaded
+            async loadPayment() {
                 utils.toggleMaskFormLogin();
-
                 this.initMinicartClickEvents();
                 utils.initProductPageFormClickEvents();
                 this.initHashPaymentEvent();
-            },
+                utils.initCheckoutPageExpressCheckoutClick();
 
-            async loadPayment() {
                 if (this.from === 'minicart' && utils.isCartEmpty(this.expressData)) {
                     return;
                 }
-                this.createPays()
+                this.createPays();
             },
 
             initHashPaymentEvent() {
                 window.addEventListener('hashchange', async () => {
                     if (window.location.hash === '#payment') {
-                        this.destroyElement()
+                        this.destroyElement();
                         // we need update quote, because we choose shipping method last step
                         await this.fetchExpressData();
-                        this.createPays()
+                        this.createPays();
                     }
                 });
             },
@@ -185,7 +184,7 @@ define(
 
             createPays() {
                 googlepay.create(this);
-                applepay.create(this);
+                // applepay.create(this);
             },
 
             placeOrder(pay) {
@@ -211,7 +210,7 @@ define(
                         }
 
                         if (!utils.isLoggedIn()) {
-                            payload.email = utils.isCheckoutPage() ? $("#customer-email").val() : this.guestEmail;
+                            payload.email = utils.isCheckoutPage() ? $(utils.guestEmailSelector).val() : this.guestEmail;
                         }
 
                         const intentResponse = await storage.post(
@@ -228,7 +227,7 @@ define(
                             params.payment_method.billing = addressHandler.intentConfirmBillingAddressFromOfficial;
                         }
 
-                        await eval(pay).confirmIntent(params)
+                        await eval(pay).confirmIntent(params);
 
                         payload.intent_id = intentResponse.intent_id;
                         const endResult = await storage.post(
@@ -237,8 +236,8 @@ define(
 
                         resolve(endResult);
                     } catch (e) {
-                        this.destroyElement()
-                        this.createPays()
+                        this.destroyElement();
+                        this.createPays();
                         reject(e);
                     }
                 })).then(response => {

diff --git a/view/frontend/web/js/view/payment/method-renderer/express/applepay.js b/view/frontend/web/js/view/payment/method-renderer/express/applepay.js
@@ -104,7 +104,7 @@ define([
         getRequestOptions() {
             let paymentDataRequest = this.getOptions();
 
-            if (!utils.isRequireShippingOption()) {
+            if (!utils.isRequireShippingOption() && !utils.isProductPage()) {
                 paymentDataRequest.requiredShippingContactFields = this.requiredShippingContactFields.filter(e => e !== 'postalAddress');
             }
 

diff --git a/view/frontend/web/js/view/payment/method-renderer/express/utils.js b/view/frontend/web/js/view/payment/method-renderer/express/utils.js
@@ -6,6 +6,7 @@ define([
     'Magento_ReCaptchaWebapiUi/js/webapiReCaptcha',
     'Magento_ReCaptchaWebapiUi/js/webapiReCaptchaRegistry',
     'Magento_Customer/js/customer-data',
+    'Magento_Ui/js/modal/alert',
 ], function (
     urlBuilder,
     $,
@@ -14,11 +15,13 @@ define([
     webapiReCaptcha,
     webapiRecaptchaRegistry,
     customerData,
+    alert,
 ) {
     'use strict';
 
     return {
         productFormSelector: "#product_addtocart_form",
+        guestEmailSelector: "#customer-email",
         cartPageIdentitySelector: '.cart-summary',
         checkoutPageIdentitySelector: '#co-payment-form',
         buttonMaskSelector: '.aws-button-mask',
@@ -73,6 +76,35 @@ define([
         showLoginForm(e) {
             e.preventDefault();
             popup.showModal();
+            if (popup.modalWindow) {
+                popup.showModal();
+            } else {
+                alert({
+                    content: $.mage.__('Guest checkout is disabled.')
+                });
+            }
+        },
+
+        initCheckoutPageExpressCheckoutClick() {
+            if (this.isCheckoutPage() && !this.isLoggedIn() && this.expressData.is_virtual) {
+                this.checkGuestEmailInput();
+                $(this.guestEmailSelector).on('input', () => {
+                    this.checkGuestEmailInput();
+                });
+                $(this.buttonMaskSelector).on('click', (e) => {
+                    e.stopPropagation();
+                    $($(this.guestEmailSelector).closest('form')).valid();
+                    this.checkGuestEmailInput();
+                });
+            }
+        },
+
+        checkGuestEmailInput() {
+            if ($(this.guestEmailSelector).closest('form').validate().checkForm()) {
+                $(this.buttonMaskSelector).hide();
+            } else {
+                $(this.buttonMaskSelector).show();
+            }
         },
 
         initProductPageFormClickEvents() {
@@ -84,6 +116,12 @@ define([
                 $(this.buttonMaskSelector).on('click', (e) => {
                     e.stopPropagation();
                     $(this.productFormSelector).valid();
+                    this.validateProductOptions();
+                });
+                $.each($(this.productFormSelector)[0].elements, (index, element) => {
+                    $(element).on('change', () => {
+                        this.validateProductOptions();
+                    });
                 });
             }
         },
@@ -93,7 +131,7 @@ define([
                 return;
             }
 
-            if (this.paymentConfig.is_recaptcha_enabled && !this.isCheckoutPage() && !window.grecaptcha && !window.isShowAwxGrecaptcha) {
+            if (this.paymentConfig.is_recaptcha_enabled && !$('#recaptcha-checkout-place-order').length) {
                 window.isShowAwxGrecaptcha = true;
                 isShowRecaptcha(true);
                 let re = webapiReCaptcha();
@@ -126,11 +164,10 @@ define([
             if (!$(this.buttonMaskSelectorForLogin).length) {
                 return;
             }
+            $(this.buttonMaskSelectorForLogin).off('click').on('click', this.showLoginForm);
             if ((this.isProductPage() && this.expressData.product_is_virtual) || this.expressData.is_virtual) {
                 $(this.buttonMaskSelectorForLogin).show();
-                $(this.buttonMaskSelectorForLogin).on('click', this.showLoginForm);
             } else {
-                $(this.buttonMaskSelectorForLogin).remove('click', this.showLoginForm);
                 $(this.buttonMaskSelectorForLogin).hide();
             }
         },

diff --git a/view/frontend/web/template/payment/card-method.html b/view/frontend/web/template/payment/card-method.html
@@ -14,7 +14,7 @@
  * file that was distributed with this source code.
  */
 -->
-<div class="payment-method airwallex-payments" data-bind="css: {'_active': (getCode() == isChecked())}">
+<div class="payment-method airwallex-payments airwallex-card-container" data-bind="css: {'_active': (getCode() == isChecked())}">
     <div class="payment-method-title field choice">
         <input type="radio"
                name="payment[method]"