Merge pull request #3765 from beganovich/1804-signatures

Handling signatures

app/Designs/Designer.php

@@ -107,7 +107,7 @@ class Designer
             </div>'
         ;
 
-        $signature = '<div></div>'; /** @wip */
+        $signature = '<img class="h-40" src="$contact.signature" />';
         $logo = '<div></div>';
 
         if (!$this->entity->user->account->isPaid()) {

app/Http/Controllers/ClientPortal/PaymentController.php

@@ -14,6 +14,7 @@ namespace App\Http\Controllers\ClientPortal;
 
 use App\Filters\PaymentFilters;
 use App\Http\Controllers\Controller;
+use App\Jobs\Invoice\InjectSignature;
 use App\Models\CompanyGateway;
 use App\Models\Invoice;
 use App\Models\Payment;
@@ -90,9 +91,14 @@ class PaymentController extends Controller
         $invoices->map(function ($invoice) {
             $invoice->balance = Number::formatMoney($invoice->balance, $invoice->client);
             $invoice->due_date = $this->formatDate($invoice->due_date, $invoice->client->date_format());
+            
             return $invoice;
         });
 
+        $invoices->each(function ($invoice) {
+            InjectSignature::dispatch($invoice, request()->signature);
+        });
+
         $payment_methods = auth()->user()->client->getPaymentMethods($amount);
         $gateway = CompanyGateway::find(request()->input('company_gateway_id'));
 
@@ -110,7 +116,6 @@ class PaymentController extends Controller
             'hashed_ids' => request()->invoices,
         ];
 
-
         return $gateway->driver(auth()->user()->client)->processPaymentView($data);
     }
 

app/Jobs/Invoice/InjectSignature.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Jobs\Invoice;
+
+use App\Models\Invoice;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+
+class InjectSignature implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    /**
+     * @var App\Models\Invoice
+     */
+    public $invoice;
+
+    /**
+     * @var string
+     */
+    public $signature;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+    public function __construct(Invoice $invoice, string $signature)
+    {
+        $this->invoice = $invoice;
+
+        $this->signature = $signature;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle()
+    {
+        $invitation = $this->invoice->invitations->whereNotNull('signature_base64')->first();
+
+        if (!$invitation) {
+            return;
+        }
+
+        $invitation->signature_base64 = $this->signature;
+        $invitation->save();
+
+        CreateInvoicePdf::dispatch($invitation);
+    }
+}

app/Utils/HtmlEngine.php

@@ -301,7 +301,7 @@ class HtmlEngine
         $data['$task.tax_name2']                     = ['value' => '', 'label' => ctrans('texts.tax')];
         $data['$task.tax_name3']                     = ['value' => '', 'label' => ctrans('texts.tax')];
         $data['$task.line_total']                    = ['value' => '', 'label' => ctrans('texts.line_total')];
-        //$data['$contact.signature']
+        $data['$contact.signature']                  = ['value' => $this->invitation->signature_base64, 'label' => ctrans('texts.signature')];
 
         // $data['custom_label1']              = ['value' => '', 'label' => ctrans('texts.')];
         // $data['custom_label2']              = ['value' => '', 'label' => ctrans('texts.')];

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 i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.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 i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));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,i;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"),{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),i&&n(t,i),e}(),i=document.querySelector('meta[name="require-invoice-signature"]').content,u=document.querySelector('meta[name="show-invoice-terms"]').content;new r(Boolean(+i),Boolean(+u)).handle()}});

public/mix-manifest.json

@@ -2,7 +2,7 @@
     "/js/app.js": "/js/app.js?id=8b49701583f407403ddf",
     "/css/app.css": "/css/app.css?id=9082c02ea8f150e2a3e9",
     "/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=e01d8dcf73a3898615dd",
     "/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/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,38 @@ 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)'
+            {
-        });
+                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 +106,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/includes/signature.blade.php

@@ -27,7 +27,7 @@
                 </h3>
                 <div class="mt-2">
                     <p class="text-sm leading-5 text-gray-500">
-                        <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
+                        <canvas id="signature-pad" class="signature-pad border rounded" width=400 height=200></canvas>
                     </p>
                 </div>
             </div>

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">