wip

app/Http/Controllers/ClientPortal/PaymentController.php

@@ -71,6 +71,8 @@ class PaymentController extends Controller
      */
     public function process()
     {
+        // $signature = request()->signature // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICA..
+
         $invoices = Invoice::whereIn('id', $this->transformKeys(request()->invoices))
             ->where('company_id', auth('contact')->user()->company->id)
             ->get();

package.json

@@ -25,7 +25,6 @@
         "resolve-url-loader": "^3.1.0",
         "sass": "^1.15.2",
         "sass-loader": "^8.0.0",
-        "tailwindcss": "^1.4",
+        "tailwindcss": "^1.4"
-        "turbolinks": "^5.2.0"
     }
 }

public/js/clients/invoices/payment.js

@@ -1,2 +1,2 @@
 /*! For license information please see payment.js.LICENSE.txt */
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=3)}({3:function(e,t,n){e.exports=n("FuOr")},FuOr:function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var r=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.shouldDisplayTerms=t,this.shouldDisplaySignature=n,this.termsAccepted=!1}var t,r,o;return t=e,(r=[{key:"handleMethodSelect",value:function(e){var t=this;document.getElementById("company_gateway_id").value=e.dataset.companyGatewayId,document.getElementById("payment_method_id").value=e.dataset.gatewayTypeId,this.shouldDisplaySignature&&!this.shouldDisplayTerms&&(this.displayTerms(),document.getElementById("accept-terms-button").addEventListener("click",(function(){t.termsAccepted=!0,t.submitForm()}))),!this.shouldDisplaySignature&&this.shouldDisplayTerms&&(this.displaySignature(),document.getElementById("signature-next-step").addEventListener("click",(function(){t.submitForm()}))),this.shouldDisplaySignature&&this.shouldDisplayTerms&&(this.displaySignature(),document.getElementById("signature-next-step").addEventListener("click",(function(){t.displayTerms(),document.getElementById("accept-terms-button").addEventListener("click",(function(){t.termsAccepted=!0,t.submitForm()}))}))),this.shouldDisplaySignature||this.shouldDisplayTerms||this.submitForm()}},{key:"submitForm",value:function(){document.getElementById("payment-form").submit()}},{key:"displayTerms",value:function(){document.getElementById("displayTermsModal").removeAttribute("style")}},{key:"displaySignature",value:function(){document.getElementById("displaySignatureModal").removeAttribute("style"),new SignaturePad(document.getElementById("signature-pad"),{backgroundColor:"rgb(240,240,240)",penColor:"rgb(0, 0, 0)"})}},{key:"handle",value:function(){var e=this;document.querySelectorAll(".dropdown-gateway-button").forEach((function(t){t.addEventListener("click",(function(){return e.handleMethodSelect(t)}))}))}}])&&n(t.prototype,r),o&&n(t,o),e}(),o=document.querySelector('meta[name="require-invoice-signature"]').content,i=document.querySelector('meta[name="show-invoice-terms"]').content;new r(Boolean(+o),Boolean(+i)).handle()}});
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=3)}({3:function(e,t,n){e.exports=n("FuOr")},FuOr:function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var r=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.shouldDisplayTerms=t,this.shouldDisplaySignature=n,this.termsAccepted=!1}var t,r,o;return t=e,(r=[{key:"handleMethodSelect",value:function(e){var t=this;document.getElementById("company_gateway_id").value=e.dataset.companyGatewayId,document.getElementById("payment_method_id").value=e.dataset.gatewayTypeId,this.shouldDisplaySignature&&!this.shouldDisplayTerms&&(this.displayTerms(),document.getElementById("accept-terms-button").addEventListener("click",(function(){t.termsAccepted=!0,t.submitForm()}))),!this.shouldDisplaySignature&&this.shouldDisplayTerms&&(this.displaySignature(),document.getElementById("signature-next-step").addEventListener("click",(function(){document.querySelector('input[name="signature"').value=t.signaturePad.toDataURL(),t.submitForm()}))),this.shouldDisplaySignature&&this.shouldDisplayTerms&&(this.displaySignature(),document.getElementById("signature-next-step").addEventListener("click",(function(){t.displayTerms(),document.getElementById("accept-terms-button").addEventListener("click",(function(){document.querySelector('input[name="signature"').value=t.signaturePad.toDataURL(),t.termsAccepted=!0,t.submitForm()}))}))),this.shouldDisplaySignature||this.shouldDisplayTerms||this.submitForm()}},{key:"submitForm",value:function(){document.getElementById("payment-form").submit()}},{key:"displayTerms",value:function(){document.getElementById("displayTermsModal").removeAttribute("style")}},{key:"displaySignature",value:function(){document.getElementById("displaySignatureModal").removeAttribute("style");var e=new SignaturePad(document.getElementById("signature-pad"),{backgroundColor:"rgb(240,240,240)",penColor:"rgb(0, 0, 0)"});this.signaturePad=e}},{key:"handle",value:function(){var e=this;document.querySelectorAll(".dropdown-gateway-button").forEach((function(t){t.addEventListener("click",(function(){return e.handleMethodSelect(t)}))}))}}])&&n(t.prototype,r),o&&n(t,o),e}(),o=document.querySelector('meta[name="require-invoice-signature"]').content,u=document.querySelector('meta[name="show-invoice-terms"]').content;new r(Boolean(+o),Boolean(+u)).handle()}});

public/mix-manifest.json

@@ -1,8 +1,8 @@
 {
-    "/js/app.js": "/js/app.js?id=49b0ee243139f6e72bd9",
+    "/js/app.js": "/js/app.js?id=8b49701583f407403ddf",
-    "/css/app.css": "/css/app.css?id=9b6694588d0604760071",
+    "/css/app.css": "/css/app.css?id=0a07ef0066801862cfc9",
     "/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=3e58537817b968346c9f",
-    "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=af49e24958be5fc00c92",
+    "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=525161c39ee36858c5b0",
     "/js/clients/payment_methods/authorize-stripe-card.js": "/js/clients/payment_methods/authorize-stripe-card.js?id=f4c45f0da9868d840799",
     "/js/clients/payments/process.js": "/js/clients/payments/process.js?id=bb91cb611d1bdab40973",
     "/js/clients/quotes/action-selectors.js": "/js/clients/quotes/action-selectors.js?id=f7c6bfdbf9cfc3efdf0b",

resources/js/app.js

@@ -4,13 +4,4 @@
  * Promise based HTTP client for the browser and node.js
  * https://github.com/axios/axios
  */
-window.axios = require("axios");
+window.axios = require("axios");
-
-/**
- * Turoblinks
- *
- * Turbolinks makes navigating your web application faster
- * https://github.com/turbolinks/turbolinks
- */
-const Turbolinks = require("turbolinks");
-Turbolinks.start();

resources/js/clients/invoices/payment.js

@@ -16,37 +16,49 @@ class Payment {
     }
 
     handleMethodSelect(element) {
-        document.getElementById('company_gateway_id').value = element.dataset.companyGatewayId;
+        document.getElementById("company_gateway_id").value =
-        document.getElementById('payment_method_id').value = element.dataset.gatewayTypeId;
+            element.dataset.companyGatewayId;
+        document.getElementById("payment_method_id").value =
+            element.dataset.gatewayTypeId;
 
         if (this.shouldDisplaySignature && !this.shouldDisplayTerms) {
             this.displayTerms();
 
-            document.getElementById('accept-terms-button').addEventListener('click', () => {
+            document
-                this.termsAccepted = true;
+                .getElementById("accept-terms-button")
-                this.submitForm();
+                .addEventListener("click", () => {
-            });
+                    this.termsAccepted = true;
+                    this.submitForm();
+                });
         }
 
         if (!this.shouldDisplaySignature && this.shouldDisplayTerms) {
             this.displaySignature();
 
-            document.getElementById('signature-next-step').addEventListener('click', () => {
+            document
-                this.submitForm();
+                .getElementById("signature-next-step")
-            });
+                .addEventListener("click", () => {
+                    document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL();
+                    this.submitForm();
+                });
         }
 
         if (this.shouldDisplaySignature && this.shouldDisplayTerms) {
             this.displaySignature();
 
-            document.getElementById('signature-next-step').addEventListener('click', () => {
+            document
-                this.displayTerms();
+                .getElementById("signature-next-step")
+                .addEventListener("click", () => {
+                    this.displayTerms();
 
-                document.getElementById('accept-terms-button').addEventListener('click', () => {
+                    document
-                    this.termsAccepted = true;
+                        .getElementById("accept-terms-button")
-                    this.submitForm();
+                        .addEventListener("click", () => {
+                            document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL();
+                            this.termsAccepted = true;
+                            this.submitForm();
+                        });
                 });
-            });
         }
 
         if (!this.shouldDisplaySignature && !this.shouldDisplayTerms) {
@@ -55,28 +67,39 @@ class Payment {
     }
 
     submitForm() {
-        document.getElementById('payment-form').submit();
+        document.getElementById("payment-form").submit();
     }
 
     displayTerms() {
-        let displayTermsModal = document.getElementById('displayTermsModal');
+        let displayTermsModal = document.getElementById("displayTermsModal");
-        displayTermsModal.removeAttribute('style');
+        displayTermsModal.removeAttribute("style");
     }
 
     displaySignature() {
-        let displaySignatureModal = document.getElementById('displaySignatureModal');
+        let displaySignatureModal = document.getElementById(
-        displaySignatureModal.removeAttribute('style');
+            "displaySignatureModal"
+        );
+        displaySignatureModal.removeAttribute("style");
 
-        const signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
+        const signaturePad = new SignaturePad(
-            backgroundColor: 'rgb(240,240,240)',
+            document.getElementById("signature-pad"),
-            penColor: 'rgb(0, 0, 0)'
+            {
-        });
+                backgroundColor: "rgb(240,240,240)",
+                penColor: "rgb(0, 0, 0)"
+            }
+        );
+
+        this.signaturePad = signaturePad;
     }
 
     handle() {
-        document.querySelectorAll('.dropdown-gateway-button').forEach((element) => {
+        document
-            element.addEventListener('click', () => this.handleMethodSelect(element));
+            .querySelectorAll(".dropdown-gateway-button")
-        });
+            .forEach(element => {
+                element.addEventListener("click", () =>
+                    this.handleMethodSelect(element)
+                );
+            });
     }
 }
 
@@ -84,10 +107,6 @@ const signature = document.querySelector(
     'meta[name="require-invoice-signature"]'
 ).content;
 
-const terms = document.querySelector(
+const terms = document.querySelector('meta[name="show-invoice-terms"]').content;
-    'meta[name="show-invoice-terms"]'
-).content;
 
 new Payment(Boolean(+signature), Boolean(+terms)).handle();
-
-

resources/views/portal/ninja2020/invoices/payment.blade.php

@@ -16,6 +16,7 @@
         @endforeach
         <input type="hidden" name="company_gateway_id" id="company_gateway_id">
         <input type="hidden" name="payment_method_id" id="payment_method_id">
+        <input type="hidden" name="signature">
     </form>
     <div class="container mx-auto">
         <div class="grid grid-cols-6 gap-4">