fix js issues

buckaroo-it · Nov 2, 2023 · 51cc114 · 51cc114
1 parent fb8d439
commit 51cc114
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 93 deletions.
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,4 @@
-<script>
-    let buckarooTask;
-    window.addEventListener("buckaroo-add-task", (event) => {
-        if (event.detail.buckarooTask) {
-            buckarooTask = event.detail.buckarooTask;
-        }
-    });
-
-
-    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(() => {
-        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>
 <div class="bk-modal-wrap" x-data="{
     showModal: false,
     title: '<?= $escaper->escapeHtml(__('Success')); ?>',
@@ -96,6 +9,7 @@
         this.showModal = false;
     },
     initModal() {
+        buckarooStart();
         window.addEventListener('buckaroo-modal-show', (event) => {
             if(event.detail.data) {
                 this.showModal = true;
@@ -173,3 +87,91 @@
         </div>
     </div>
 </div>
+<script>
+    function buckarooStart() {
+        let buckarooTask;
+        window.addEventListener("buckaroo-add-task", (event) => {
+            if (event.detail.buckarooTask) {
+                buckarooTask = event.detail.buckarooTask;
+            }
+        });
+
+        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(() => {
+            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>