mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-09 03:14:30 -04:00
Refactor Payment class to handle additional steps
This commit is contained in:
parent
a93b452c39
commit
290827b2d8
134
resources/js/clients/invoices/payment.js
vendored
134
resources/js/clients/invoices/payment.js
vendored
@ -9,11 +9,57 @@
|
||||
*/
|
||||
|
||||
class Payment {
|
||||
constructor(displayTerms, displaySignature) {
|
||||
constructor(displayTerms, displaySignature, displayRff) {
|
||||
this.shouldDisplayTerms = displayTerms;
|
||||
this.shouldDisplaySignature = displaySignature;
|
||||
this.termsAccepted = false;
|
||||
this.shouldDisplayRff = displayRff;
|
||||
|
||||
this.submitting = false;
|
||||
this.steps = new Map()
|
||||
|
||||
if (this.shouldDisplayRff) {
|
||||
this.steps.set("rff", {
|
||||
element: document.getElementById('displayRequiredFieldsModal'),
|
||||
callback: () => {
|
||||
const fields = {
|
||||
firstName: document.querySelector('input[name="rff_first_name"]'),
|
||||
lastName: document.querySelector('input[name="rff_last_name"]'),
|
||||
email: document.querySelector('input[name="rff_email"]'),
|
||||
}
|
||||
|
||||
if (fields.firstName) {
|
||||
document.querySelector('input[name="contact_first_name"]').value = fields.firstName.value;
|
||||
}
|
||||
|
||||
if (fields.lastName) {
|
||||
document.querySelector('input[name="contact_last_name"]').value = fields.lastName.value;
|
||||
}
|
||||
|
||||
if (fields.email) {
|
||||
document.querySelector('input[name="contact_email"]').value = fields.email.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (this.shouldDisplaySignature) {
|
||||
this.steps.set("signature", {
|
||||
element: document.getElementById('displaySignatureModal'),
|
||||
boot: () => this.signaturePad = new SignaturePad(
|
||||
document.getElementById("signature-pad"),
|
||||
{
|
||||
penColor: "rgb(0, 0, 0)"
|
||||
}
|
||||
),
|
||||
callback: () => document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL(),
|
||||
});
|
||||
}
|
||||
|
||||
if (this.shouldDisplayTerms) {
|
||||
this.steps.set("terms", {
|
||||
element: document.getElementById('displayTermsModal'),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleMethodSelect(element) {
|
||||
@ -23,53 +69,29 @@ class Payment {
|
||||
document.getElementById("payment_method_id").value =
|
||||
element.dataset.gatewayTypeId;
|
||||
|
||||
if (this.shouldDisplaySignature && !this.shouldDisplayTerms) {
|
||||
|
||||
if(this.signaturePad && this.signaturePad.isEmpty())
|
||||
alert("Please sign");
|
||||
|
||||
this.displayTerms();
|
||||
|
||||
document
|
||||
.getElementById("accept-terms-button")
|
||||
.addEventListener("click", () => {
|
||||
this.termsAccepted = true;
|
||||
this.submitForm();
|
||||
});
|
||||
if (this.steps.size === 0) {
|
||||
return this.submitForm();
|
||||
}
|
||||
|
||||
if (!this.shouldDisplaySignature && this.shouldDisplayTerms) {
|
||||
this.displaySignature();
|
||||
const next = this.steps.values().next().value;
|
||||
|
||||
document
|
||||
.getElementById("signature-next-step")
|
||||
.addEventListener("click", () => {
|
||||
document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL();
|
||||
this.submitForm();
|
||||
});
|
||||
next.element.removeAttribute("style");
|
||||
|
||||
if (next.boot) {
|
||||
next.boot();
|
||||
}
|
||||
|
||||
if (this.shouldDisplaySignature && this.shouldDisplayTerms) {
|
||||
this.displaySignature();
|
||||
next.element.querySelector('#next-step').addEventListener('click', () => {
|
||||
next.element.setAttribute("style", "display: none;");
|
||||
|
||||
document
|
||||
.getElementById("signature-next-step")
|
||||
.addEventListener("click", () => {
|
||||
this.displayTerms();
|
||||
this.steps = new Map(Array.from(this.steps.entries()).slice(1));
|
||||
|
||||
document
|
||||
.getElementById("accept-terms-button")
|
||||
.addEventListener("click", () => {
|
||||
document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL();
|
||||
this.termsAccepted = true;
|
||||
this.submitForm();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (next.callback) {
|
||||
next.callback();
|
||||
}
|
||||
|
||||
if (!this.shouldDisplaySignature && !this.shouldDisplayTerms) {
|
||||
this.submitForm();
|
||||
}
|
||||
this.handleMethodSelect(element);
|
||||
});
|
||||
}
|
||||
|
||||
submitForm() {
|
||||
@ -78,33 +100,6 @@ class Payment {
|
||||
document.getElementById("payment-form").submit();
|
||||
}
|
||||
|
||||
displayTerms() {
|
||||
let displayTermsModal = document.getElementById("displayTermsModal");
|
||||
displayTermsModal.removeAttribute("style");
|
||||
}
|
||||
|
||||
displaySignature() {
|
||||
document.getElementById("signature-next-step").disabled = true;
|
||||
|
||||
let displaySignatureModal = document.getElementById(
|
||||
"displaySignatureModal"
|
||||
);
|
||||
displaySignatureModal.removeAttribute("style");
|
||||
|
||||
const signaturePad = new SignaturePad(
|
||||
document.getElementById("signature-pad"),
|
||||
{
|
||||
penColor: "rgb(0, 0, 0)"
|
||||
}
|
||||
);
|
||||
|
||||
signaturePad.onEnd = function(){
|
||||
document.getElementById("signature-next-step").disabled = false;
|
||||
};
|
||||
|
||||
this.signaturePad = signaturePad;
|
||||
}
|
||||
|
||||
handle() {
|
||||
|
||||
document
|
||||
@ -124,5 +119,6 @@ const signature = document.querySelector(
|
||||
).content;
|
||||
|
||||
const terms = document.querySelector('meta[name="show-invoice-terms"]').content;
|
||||
const rff = document.querySelector('meta[name="show-required-fields-form"]').content;
|
||||
|
||||
new Payment(Boolean(+signature), Boolean(+terms)).handle();
|
||||
new Payment(Boolean(+terms), Boolean(+signature), Boolean(+rff)).handle();
|
||||
|
Loading…
x
Reference in New Issue
Block a user