From 37e1f484ce8dc3f03f7feba467116b0c0e7847e6 Mon Sep 17 00:00:00 2001
From: David Bomba <turbo124@gmail.com>
Date: Fri, 23 Jun 2023 23:53:59 +1000
Subject: [PATCH] Fixes for paytrace payment method authorization

---
 .../clients/payments/paytrace-credit-card.js  |   1 +
 .../gateways/paytrace/authorize.blade.php     | 140 +++++++++++++++++-
 2 files changed, 140 insertions(+), 1 deletion(-)

diff --git a/resources/js/clients/payments/paytrace-credit-card.js b/resources/js/clients/payments/paytrace-credit-card.js
index cce2ada0386a..9b67b1ed8d07 100644
--- a/resources/js/clients/payments/paytrace-credit-card.js
+++ b/resources/js/clients/payments/paytrace-credit-card.js
@@ -173,6 +173,7 @@ class PayTraceCreditCard {
     }
 
     handle() {
+        
         Array.from(
             document.getElementsByClassName('toggle-payment-with-token')
         ).forEach((element) =>
diff --git a/resources/views/portal/ninja2020/gateways/paytrace/authorize.blade.php b/resources/views/portal/ninja2020/gateways/paytrace/authorize.blade.php
index 3a358432da9b..8ca6f62fe7fa 100644
--- a/resources/views/portal/ninja2020/gateways/paytrace/authorize.blade.php
+++ b/resources/views/portal/ninja2020/gateways/paytrace/authorize.blade.php
@@ -37,5 +37,143 @@
     @else
     <script src='https://protect.paytrace.com/js/protect.min.js'></script>
     @endif
-    <script src="{{ asset('js/clients/payments/paytrace-credit-card.js') }}"></script>
+    <!-- <script src="{{ asset('js/clients/payments/paytrace-credit-card.js') }}"></script> -->
+
+    <script>
+          // Minimal Protect.js setup call
+    PTPayment.setup({   
+    
+    styles: {
+                code: {
+                    'font_color': '#000',
+                    'border_color': '#a1b1c9',
+                    'border_style': 'dotted',
+                    'font_size': '13pt',
+                    'input_border_radius': '2px',
+                    'input_border_width': '1px',
+                    'input_font': 'serif, cursive, fantasy',
+                    'input_font_weight': '700',
+                    'input_margin': '5px 0px 5px 20px',
+                    'input_padding': '0px 5px 0px 5px',
+                    'label_color': '#a0aec0',
+                    'label_size': '16px',
+                    'label_width': '150px',
+                    'label_font': 'sans-serif, arial, serif',
+                    'label_font_weight': 'bold',
+                    'label_margin': '5px 0px 0px 20px',
+                    'label_padding': '2px 5px 2px 5px',
+                    'background_color': 'white',
+                    'height': '30px',
+                    'width': '150px',
+                    'padding_bottom': '2px'
+                },
+                cc: {
+                    'font_color': '#000',
+                    'border_color': '#a1b1c9',
+                    'border_style': 'dotted',
+                    'font_size': '13pt',
+                    'input_border_radius': '3px',
+                    'input_border_width': '1px',
+                    'input_font': 'Times New Roman, arial, fantasy',
+                    'input_font_weight': '400',
+                    'input_margin': '5px 0px 5px 0px',
+                    'input_padding': '0px 5px 0px 5px',
+                    'label_color': '#a0aec0',
+                    'label_size': '16px',
+                    'label_width': '150px',
+                    'label_font': 'Times New Roman, sans-serif, serif',
+                    'label_font_weight': 'light',
+                    'label_margin': '5px 0px 0px 0px',
+                    'label_padding': '0px 5px 0px 5px',
+                    'background_color': 'white',
+                    'height': '30px',
+                    'width': '370px',
+                    'padding_bottom': '0px'
+                },
+                exp:  {
+                    'font_color': '#000',
+                    'border_color': '#a1b1c9',
+                    'border_style': 'dashed',
+                    'font_size': '12pt',
+                    'input_border_radius': '0px',
+                    'input_border_width': '2px',
+                    'input_font': 'arial, cursive, fantasy',
+                    'input_font_weight': '400',
+                    'input_margin': '5px 0px 5px 0px',
+                    'input_padding': '0px 5px 0px 5px',
+                    'label_color': '#a0aec0',
+                    'label_size': '16px',
+                    'label_width': '150px',
+                    'label_font': 'arial, fantasy, serif',
+                    'label_font_weight': 'normal',
+                    'label_margin': '5px 0px 0px 0px',
+                    'label_padding': '2px 5px 2px 5px',
+                    'background_color': 'white',
+                    'height': '30px',
+                    'width': '85px',
+                    'padding_bottom': '2px',
+                    'type': 'dropdown'
+                },
+            },
+
+        authorization: { clientKey: "{{ $client_key }}" }
+        }).then(function(instance){
+        window.instance = instance;
+    });
+
+
+    document.getElementById("pay-now").addEventListener("click",function(e){
+    e.preventDefault();
+    e.stopPropagation();
+
+    e.target.parentElement.disabled = true;
+    document.getElementById('errors').hidden = true;
+
+    // To trigger the validation of sensitive data payment fields within the iframe before calling the tokenization process:
+    PTPayment.validate(function(errors) {
+        if (errors.length >= 1) {
+
+            if (errors.length >= 1) {
+                let errorsContainer = document.getElementById('errors');
+
+                errorsContainer.textContent = errors[0].description;
+                errorsContainer.hidden = false;
+
+                return (e.target.parentElement.disabled = false);
+            }
+            
+        } else {
+        // no error so tokenize
+        instance.process()
+        .then( (response) => {
+                document.getElementById('HPF_Token').value =
+                    response.message.hpf_token;
+                document.getElementById('enc_key').value =
+                    response.message.enc_key;
+
+                let tokenBillingCheckbox = document.querySelector(
+                    'input[name="token-billing-checkbox"]:checked'
+                );
+
+                if (tokenBillingCheckbox) {
+                    document.querySelector(
+                        'input[name="store_card"]'
+                    ).value = tokenBillingCheckbox.value;
+                }
+
+                document.getElementById('server_response').submit();
+            })
+            .catch((error) => {
+                document.getElementById(
+                    'errors'
+                ).textContent = JSON.stringify(error);
+                document.getElementById('errors').hidden = false;
+
+                console.log(error);
+            });
+        }
+    });
+});
+
+    </script>
 @endsection