BP-3105 Magento 2 - Hyva - Cannot place order with PayPerEmail (#2)

* BP-3105 Magento 2 - Hyva - Cannot place order with PayPerEmail * fix js issues * fix issues --------- Co-authored-by: Ivascu Madalin <[email protected]>
buckaroo-it · Nov 3, 2023 · cef6dbc · cef6dbc
1 parent a75fc76
commit cef6dbc
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 154 deletions.
diff --git a/Magewire/Payment/Method/Afterpay20.php b/Magewire/Payment/Method/Afterpay20.php
@@ -30,7 +30,7 @@ class Afterpay20 extends Component\Form implements EvaluationInterface
 
     public ?bool $tos = true;
 
-    public ?string $dateOfBirth = null;
+    public string $dateOfBirth = '';
 
     public string $fullName = '';
 
@@ -93,7 +93,7 @@ public function mount(): void
         $this->coc = $payment->getAdditionalInformation('customer_coc');
         $this->phone = $payment->getAdditionalInformation('customer_telephone');
         $this->identificationNumber = $payment->getAdditionalInformation('customer_identificationNumber');
-        $this->dateOfBirth = $payment->getAdditionalInformation('customer_DoB');
+        $this->dateOfBirth = (string)$payment->getAdditionalInformation('customer_DoB');
         $this->fullName = $this->getFullName();
     }
 
@@ -136,6 +136,7 @@ public function updatedCoc(string $value): ?string
             ['coc.digits_between' => 'Invalid COC number']
         );
 
+        $this->updatePaymentField('customer_DoB', '', '');
         $this->updatePaymentField('customer_coc', $value);
         return $value;
     }
@@ -194,9 +195,9 @@ private function getPhoneRules(): array
      *
      * @return void
      */
-    private function updatePaymentField(string $name, $value): void
+    private function updatePaymentField(string $name, $value, $default = null): void
     {
-        $value = empty($value) ? null : $value;
+        $value = empty($value) ? $default : $value;
 
         try {
             $quote = $this->sessionCheckout->getQuote();

diff --git a/Magewire/Payment/Method/PayPerEmail.php b/Magewire/Payment/Method/PayPerEmail.php
@@ -69,15 +69,16 @@ public function __construct(
      */
     public function mount(): void
     {
-        $payment = $this->getPayment();
+        $quote = $this->getQuote();
+        $payment = $quote->getPayment();
 
         $firstName = $payment->getAdditionalInformation('customer_billingFirstName');
         $lastName = $payment->getAdditionalInformation('customer_billingLastName');
         $middleName = $payment->getAdditionalInformation('customer_billingMiddleName');
         $email = $payment->getAdditionalInformation('customer_email');
         $this->gender = $payment->getAdditionalInformation('customer_gender');
 
-        $billingAddress = $this->getBillingAddress();
+        $billingAddress = $quote->getBillingAddress();
 
         if ($firstName === null) {
             $firstName = $billingAddress->getFirstname();
@@ -103,6 +104,7 @@ public function mount(): void
         $this->lastName = $lastName;
         $this->middleName = $middleName;
         $this->email = $email;
+        $this->quoteRepository->save($quote);
     }
 
 
@@ -138,24 +140,6 @@ public function hydrateEmail()
         }
     }
 
-    /**
-     * Get payment from quote
-     *
-     * @return Payment
-     */
-    private function getPayment()
-    {
-        return $this->sessionCheckout->getQuote()->getPayment();
-    }
-    /**
-     * Get billing address from quote
-     *
-     * @return Address
-     */
-    private function getBillingAddress(): Address
-    {
-        return $this->sessionCheckout->getQuote()->getBillingAddress();
-    }
 
     /**
      * Validate single field with rules

diff --git a/view/frontend/layout/hyva_checkout_components.xml b/view/frontend/layout/hyva_checkout_components.xml
@@ -3,12 +3,6 @@
       xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"
 >
     <body>
-        <referenceContainer name="checkout.payment.methods.before">
-             <block name="checkout.payment.method.buckaroo_before_payments"
-                    as="buckaroo_before_payments"
-                    template="Buckaroo_HyvaCheckout::component/payment/before.phtml">
-            </block>
-        </referenceContainer>
         <referenceBlock name="checkout.payment.methods">
             <!-- Payment Renderer: iDEAL -->
             <block name="checkout.payment.method.buckaroo_magento2_ideal"

diff --git a/view/frontend/layout/hyva_checkout_index_index.xml b/view/frontend/layout/hyva_checkout_index_index.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      layout="checkout"
+      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"
+>
+    <body>
+        <referenceContainer name="hyva.checkout.api-v1.after">
+             <block name="checkout.buckaroo_after_api-v1"
+                    as="buckaroo_after_api-v1"
+                    template="Buckaroo_HyvaCheckout::component/payment/after.phtml">
+            </block>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/.../templates/component/payment/before.phtml → ...d/templates/component/payment/after.phtml b/.../templates/component/payment/before.phtml → ...d/templates/component/payment/after.phtml
@@ -1,91 +1,3 @@
-<script>
-    let buckarooTask;
-    window.addEventListener("buckaroo-add-task", (event) => {
-        if (event.detail.buckarooTask) {
-            buckarooTask = event.detail.buckarooTask;
-        }
-    });
-
-    document.addEventListener("DOMContentLoaded", () => {
-        hyvaCheckout.navigation.addTask(async () => {
-            if (buckarooTask) {
-                await buckarooTask();
-            }
-        })
-
-        function buckaroo_load_sdk() {
-            return new Promise(resolve => {
-                const script = document.createElement('script');
-                script.type = 'text/javascript';
-                script.src = '//static.buckaroo.nl/script/ClientSideEncryption001.js';
-                script.async = true;
-                script.onload = resolve;
-                document.head.appendChild(script);
-            })
-        }
-
-        buckaroo_load_sdk().then(() => {
-            hyva.formValidation.addRule('bk-validateCardNumber', (value) => {
-                if (!BuckarooClientSideEncryption.V001.validateCardNumber(value.replace(/\s+/g, ''))) {
-                    return '<?= $escaper->escapeJs(__('Please enter a valid creditcard number.')) ?>';
-                };
-                return true;
-            });
-
-            hyva.formValidation.addRule('bk-validateCardCvc', (value, options, field, context) => {
-                if (!BuckarooClientSideEncryption.V001.validateCvc(
-                    value,
-                    context.determineIssuer(context.cardNumber)
-                    )
-                ) {
-                    return '<?= $escaper->escapeJs(__('Please enter a valid Cvc number.')) ?>';
-                };
-                return true;
-            });
-
-            hyva.formValidation.addRule('bk-validateCardHolderName', (value) => {
-                if (!BuckarooClientSideEncryption.V001.validateCardholderName(value)) {
-                    return '<?= $escaper->escapeJs(__('Please enter a valid card holder name.')) ?>';
-                };
-                return true;
-            });
-
-            hyva.formValidation.addRule('bk-ValidateYear', (value) => {
-                const message = '<?= $escaper->escapeJs(__('Enter a valid year number.')) ?>';
-
-                if (value.length === 0) {
-                    return message;
-                }
-                const parts = value.split("/");
-                if (!BuckarooClientSideEncryption.V001.validateYear(parts[1])) {
-                    return message;
-                };
-                return true;
-            });
-
-            hyva.formValidation.addRule('bk-ValidateMonth', (value) => {
-                const message = '<?= $escaper->escapeJs(__('Enter a valid month number.')) ?>';
-                if (value.length === 0) {
-                    return message;
-                }
-
-                const parts = value.split("/");
-                if (!BuckarooClientSideEncryption.V001.validateMonth(parts[0])) {
-                    return message;
-                };
-                return true;
-            });
-            window.dispatchEvent(new CustomEvent("buckaroo-cse-load"));
-        })
-
-
-        Magewire.hook('element.removed', (el, component) => {
-            if (el.id !== undefined && el.id.indexOf('payment-method-view-buckaroo_magento2') > -1) {
-                buckarooTask = undefined;
-            }
-        })
-    });
-</script>
 <div class="bk-modal-wrap" x-data="{
     showModal: false,
     title: '<?= $escaper->escapeHtml(__('Success')); ?>',
@@ -96,6 +8,7 @@
         this.showModal = false;
     },
     initModal() {
+        buckarooStart();
         window.addEventListener('buckaroo-modal-show', (event) => {
             if(event.detail.data) {
                 this.showModal = true;
@@ -151,7 +64,7 @@
                     </p>
                 </div>
                 <!-- Modal footer -->
-                
+
                 <div class="flex items-center p-2 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
                     <template x-if="Array.isArray(buttons)">
                         <template x-for="(button, index) in buttons" :key="index">
@@ -173,3 +86,92 @@
         </div>
     </div>
 </div>
+<script>
+    function buckarooStart() {
+        const addTask = function() {
+            hyvaCheckout.navigation.addTask(async () => {
+                if (window.buckarooTask) {
+                    await window.buckarooTask();
+                }
+            })
+        }
+        addTask();
+        window.addEventListener('checkout:navigation:success', (event) => {
+            if (event.detail.route === 'payment')
+                addTask();
+        });
+
+
+        function buckaroo_load_sdk() {
+            return new Promise(resolve => {
+                const script = document.createElement('script');
+                script.type = 'text/javascript';
+                script.src = '//static.buckaroo.nl/script/ClientSideEncryption001.js';
+                script.async = true;
+                script.onload = resolve;
+                document.head.appendChild(script);
+            })
+        }
+
+        buckaroo_load_sdk().then(() => {
+            window.buckarooCseHasLoaded = true;
+            hyva.formValidation.addRule('bk-validateCardNumber', (value) => {
+                if (!BuckarooClientSideEncryption.V001.validateCardNumber(value.replace(/\s+/g, ''))) {
+                    return '<?= $escaper->escapeJs(__('Please enter a valid creditcard number.')) ?>';
+                };
+                return true;
+            });
+
+            hyva.formValidation.addRule('bk-validateCardCvc', (value, options, field, context) => {
+                if (!BuckarooClientSideEncryption.V001.validateCvc(
+                        value,
+                        context.determineIssuer(context.cardNumber)
+                    )) {
+                    return '<?= $escaper->escapeJs(__('Please enter a valid Cvc number.')) ?>';
+                };
+                return true;
+            });
+
+            hyva.formValidation.addRule('bk-validateCardHolderName', (value) => {
+                if (!BuckarooClientSideEncryption.V001.validateCardholderName(value)) {
+                    return '<?= $escaper->escapeJs(__('Please enter a valid card holder name.')) ?>';
+                };
+                return true;
+            });
+
+            hyva.formValidation.addRule('bk-ValidateYear', (value) => {
+                const message = '<?= $escaper->escapeJs(__('Enter a valid year number.')) ?>';
+
+                if (value.length === 0) {
+                    return message;
+                }
+                const parts = value.split("/");
+                if (!BuckarooClientSideEncryption.V001.validateYear(parts[1])) {
+                    return message;
+                };
+                return true;
+            });
+
+            hyva.formValidation.addRule('bk-ValidateMonth', (value) => {
+                const message = '<?= $escaper->escapeJs(__('Enter a valid month number.')) ?>';
+                if (value.length === 0) {
+                    return message;
+                }
+
+                const parts = value.split("/");
+                if (!BuckarooClientSideEncryption.V001.validateMonth(parts[0])) {
+                    return message;
+                };
+                return true;
+            });
+            window.dispatchEvent(new CustomEvent("buckaroo-cse-load"));
+        })
+
+
+        Magewire.hook('element.removed', (el, component) => {
+            if (el.id !== undefined && el.id.indexOf('payment-method-view-buckaroo_magento2') > -1) {
+                buckarooTask = undefined;
+            }
+        })
+    }
+</script>
diff --git a/view/frontend/templates/component/payment/method/applepay.phtml b/view/frontend/templates/component/payment/method/applepay.phtml
@@ -86,15 +86,10 @@ use Magento\Framework\Escaper;
         this.config = this.$wire.get('config');
         this.loadSdk().then(async () => {
             this.canDisplay = await BuckarooApplePay.checkPaySupport();
-            const v = async () => {
+            window.buckarooTask = async () => {
                 if(this.canDisplay)
                     await this.beginPayment();
             };
-            window.dispatchEvent(new CustomEvent('buckaroo-add-task', {
-                detail: {
-                    buckarooTask: v
-                }
-            }));
         });
     }
 }" x-init="register()" novalidate>

diff --git a/view/frontend/templates/component/payment/method/creditcards.phtml b/view/frontend/templates/component/payment/method/creditcards.phtml
@@ -11,7 +11,7 @@ use Magento\Framework\Escaper;
 
     <form x-data="Object.assign(hyva.formValidation($el), {
                     issuerImages: [],
-                    cseHasLoaded: false,
+                    cseHasLoaded: window.buckarooCseHasLoaded,
                     cardHolder: '',
                     cardNumber: '',
                     cardExpiration: '',
@@ -50,7 +50,7 @@ use Magento\Framework\Escaper;
                             }
                             return true;
                         }
-                        const v = async () => {
+                        window.buckarooTask = async () => {
                             const isValid = await formValid();
                             if (this.cseHasLoaded && isValid) {
                                 const encryptedCardData = await this.saveEncryptedData();
@@ -60,11 +60,6 @@ use Magento\Framework\Escaper;
                                 );
                             }
                         };
-                        window.dispatchEvent(new CustomEvent('buckaroo-add-task', {
-                            detail: {
-                                buckarooTask: v
-                            }
-                        }));
 
                     },
                     getIssuerImage: function() {

diff --git a/view/frontend/templates/component/payment/method/giftcards.phtml b/view/frontend/templates/component/payment/method/giftcards.phtml
@@ -69,17 +69,11 @@ if (!$magewire->isRedirect()) {
         },
         register() {
             this.listenToSubmit();
-            const v = async () => {
+            window.buckarooTask = async () => {
                 if(!this.canSubmit) {
                     await this.submit();
                 }
             };
-            window.dispatchEvent(new CustomEvent('buckaroo-add-task', {
-                detail: {
-                    buckarooTask: v
-                }
-            }));
-
         },
 
     })" x-init="register()" novalidate>