mirror of
				https://github.com/invoiceninja/invoiceninja.git
				synced 2025-11-04 01:17:30 -05:00 
			
		
		
		
	Merge pull request #3765 from beganovich/1804-signatures
Handling signatures
This commit is contained in:
		
						commit
						b14dc71cae
					
				@ -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()) {
 | 
			
		||||
 | 
			
		||||
@ -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);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										56
									
								
								app/Jobs/Invoice/InjectSignature.php
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										56
									
								
								app/Jobs/Invoice/InjectSignature.php
									
									
									
									
									
										Normal file
									
								
							@ -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);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
@ -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.')];
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										2
									
								
								public/js/clients/invoices/payment.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										2
									
								
								public/js/clients/invoices/payment.js
									
									
									
									
										vendored
									
									
								
							@ -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()}});
 | 
			
		||||
@ -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",
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										62
									
								
								resources/js/clients/invoices/payment.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										62
									
								
								resources/js/clients/invoices/payment.js
									
									
									
									
										vendored
									
									
								
							@ -16,13 +16,17 @@ class Payment {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    handleMethodSelect(element) {
 | 
			
		||||
        document.getElementById('company_gateway_id').value = element.dataset.companyGatewayId;
 | 
			
		||||
        document.getElementById('payment_method_id').value = element.dataset.gatewayTypeId;
 | 
			
		||||
        document.getElementById("company_gateway_id").value =
 | 
			
		||||
            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
 | 
			
		||||
                .getElementById("accept-terms-button")
 | 
			
		||||
                .addEventListener("click", () => {
 | 
			
		||||
                    this.termsAccepted = true;
 | 
			
		||||
                    this.submitForm();
 | 
			
		||||
                });
 | 
			
		||||
@ -31,7 +35,10 @@ class Payment {
 | 
			
		||||
        if (!this.shouldDisplaySignature && this.shouldDisplayTerms) {
 | 
			
		||||
            this.displaySignature();
 | 
			
		||||
 | 
			
		||||
            document.getElementById('signature-next-step').addEventListener('click', () => {
 | 
			
		||||
            document
 | 
			
		||||
                .getElementById("signature-next-step")
 | 
			
		||||
                .addEventListener("click", () => {
 | 
			
		||||
                    document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL();
 | 
			
		||||
                    this.submitForm();
 | 
			
		||||
                });
 | 
			
		||||
        }
 | 
			
		||||
@ -39,10 +46,15 @@ class Payment {
 | 
			
		||||
        if (this.shouldDisplaySignature && this.shouldDisplayTerms) {
 | 
			
		||||
            this.displaySignature();
 | 
			
		||||
 | 
			
		||||
            document.getElementById('signature-next-step').addEventListener('click', () => {
 | 
			
		||||
            document
 | 
			
		||||
                .getElementById("signature-next-step")
 | 
			
		||||
                .addEventListener("click", () => {
 | 
			
		||||
                    this.displayTerms();
 | 
			
		||||
 | 
			
		||||
                document.getElementById('accept-terms-button').addEventListener('click', () => {
 | 
			
		||||
                    document
 | 
			
		||||
                        .getElementById("accept-terms-button")
 | 
			
		||||
                        .addEventListener("click", () => {
 | 
			
		||||
                            document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL();
 | 
			
		||||
                            this.termsAccepted = true;
 | 
			
		||||
                            this.submitForm();
 | 
			
		||||
                        });
 | 
			
		||||
@ -55,27 +67,37 @@ class Payment {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    submitForm() {
 | 
			
		||||
        document.getElementById('payment-form').submit();
 | 
			
		||||
        document.getElementById("payment-form").submit();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    displayTerms() {
 | 
			
		||||
        let displayTermsModal = document.getElementById('displayTermsModal');
 | 
			
		||||
        displayTermsModal.removeAttribute('style');
 | 
			
		||||
        let displayTermsModal = document.getElementById("displayTermsModal");
 | 
			
		||||
        displayTermsModal.removeAttribute("style");
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    displaySignature() {
 | 
			
		||||
        let displaySignatureModal = document.getElementById('displaySignatureModal');
 | 
			
		||||
        displaySignatureModal.removeAttribute('style');
 | 
			
		||||
        let displaySignatureModal = document.getElementById(
 | 
			
		||||
            "displaySignatureModal"
 | 
			
		||||
        );
 | 
			
		||||
        displaySignatureModal.removeAttribute("style");
 | 
			
		||||
 | 
			
		||||
        const signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
 | 
			
		||||
            backgroundColor: 'rgb(240,240,240)',
 | 
			
		||||
            penColor: 'rgb(0, 0, 0)'
 | 
			
		||||
        });
 | 
			
		||||
        const signaturePad = new SignaturePad(
 | 
			
		||||
            document.getElementById("signature-pad"),
 | 
			
		||||
            {
 | 
			
		||||
                penColor: "rgb(0, 0, 0)"
 | 
			
		||||
            }
 | 
			
		||||
        );
 | 
			
		||||
 | 
			
		||||
        this.signaturePad = signaturePad;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    handle() {
 | 
			
		||||
        document.querySelectorAll('.dropdown-gateway-button').forEach((element) => {
 | 
			
		||||
            element.addEventListener('click', () => this.handleMethodSelect(element));
 | 
			
		||||
        document
 | 
			
		||||
            .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(
 | 
			
		||||
    'meta[name="show-invoice-terms"]'
 | 
			
		||||
).content;
 | 
			
		||||
const terms = document.querySelector('meta[name="show-invoice-terms"]').content;
 | 
			
		||||
 | 
			
		||||
new Payment(Boolean(+signature), Boolean(+terms)).handle();
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -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">
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user