+ Dear
+ Your Payment Proof Attachment is Uploaded Successfully +
+Best regards,
+ +
+
+
+
+
+
+
+
diff --git a/payment_proof_attachment/static/src/css/payment_proof.css b/payment_proof_attachment/static/src/css/payment_proof.css
new file mode 100755
index 000000000..b9b324532
--- /dev/null
+++ b/payment_proof_attachment/static/src/css/payment_proof.css
@@ -0,0 +1,68 @@
+.payment_proof_modal {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 1300; /* Sit on top */
+ padding-top: 100px; /* Location of the box */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: rgb(0,0,0); /* Fallback color */
+ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.payment_proof_modal_content {
+ position: relative;
+ background-color: #fefefe;
+ margin: auto;
+ padding: 0;
+ border: 1px solid #888;
+ width: 40%;
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+ -webkit-animation-name: animatetop;
+ -webkit-animation-duration: 0.4s;
+ animation-name: animatetop;
+ animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+ from {top:-300px; opacity:0}
+ to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+ from {top:-300px; opacity:0}
+ to {top:0; opacity:1}
+}
+/* The Close Button */
+.close {
+ color: white;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+ color: #000;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.payment_proof_modal_header {
+ padding: 2px 16px;
+ background-color: #8595A2;
+ color: white;
+}
+
+.payment_proof_modal_body {padding: 2px 16px;}
+
+.payment_proof_modal_footer {
+ padding: 2px 16px;
+ background-color: #8595A2;
+ color: white;
+}
+
diff --git a/payment_proof_attachment/static/src/js/my_account_screen.js b/payment_proof_attachment/static/src/js/my_account_screen.js
new file mode 100755
index 000000000..868e4aa4a
--- /dev/null
+++ b/payment_proof_attachment/static/src/js/my_account_screen.js
@@ -0,0 +1,91 @@
+/** @odoo-module **/
+import publicWidget from "@web/legacy/js/public/public_widget";
+import { rpc } from "@web/core/network/rpc";
+
+publicWidget.registry.Template = publicWidget.Widget.extend({
+// init() {
+// this.rpc = this.env.services.rpc;
+// },
+ selector: '#wrapwrap',
+ events: {
+ 'click #btnShowModal': '_onClickShowModal',
+ 'click .close_modal': '_onClickCloseModal',
+ 'change #payment_proof': '_onChangePaymentProof',
+ 'click #payment_proof_update': '_onClickUpdateAttachment',
+ 'click #btnShowReceipt': '_onClickShowReceipt',
+ 'click #refresh_receipt': '_onClickShowReceipt',
+
+
+ },
+ /**
+ *for showing the modal dialog
+ */
+ _onClickShowModal: function () {
+ this.el.querySelector('#myModal').style.display = 'block';
+ },
+ /**
+ *for closing the modal dialog
+ */
+ _onClickCloseModal: function () {
+ this.el.querySelector('#myModal').style.display = 'none';
+ },
+ /**
+ *getting content from the uploaded file
+ */
+ _onChangePaymentProof: function (ev) {
+ const files = ev.target.files;
+ var fileList = [];
+ for (let i = 0; i < files.length; i++) {
+ var reader = new FileReader();
+ var reader_content = reader.readAsDataURL(files[i]);
+ reader.onload = function (reader_content) {
+ var dataURL = reader_content.target.result.split(',')[1];
+ var fileName = files[i].name;
+ fileList.push({
+ name: fileName,
+ content: dataURL
+ });
+ }
+ }
+ this.fileList = fileList;
+ },
+ /**
+ *transfer the content to python in my account screen
+ */
+ _onClickUpdateAttachment: function (ev) {
+ var self = this;
+ this.el.querySelector('#myModal').style.display = 'none';
+ if (self.fileList) {
+ rpc('/payment_proof/submit', {
+ 'sale_id': Number(self.$(ev.currentTarget).attr('value')),
+ 'attachments': this.fileList
+ }).then(function () {
+ self.fileList = ""
+ self.$el.find("#payment_proof").val("")
+ });
+ }
+ },
+ /**
+ *getting updated attachments
+ */
+ _onClickShowReceipt: function () {
+ var self = this;
+ this.el.querySelector('#updated_receipt').style.display = 'block';
+ this.el.querySelector('#btnShowReceipt').style.display = 'none';
+ rpc('/my_account_screen/show_updated', {
+ 'data': this.el.querySelector('#btnShowReceipt').getAttribute('value'),
+ }).then(function (attachment_ids) {
+ if (attachment_ids.length > 0) {
+ self.$el.find("#showing_updated_receipt").empty();
+ $(attachment_ids).each(function (attachment_id) {
+ var id = "/web/content/" + attachment_ids[attachment_id]['id']
+ var name = attachment_ids[attachment_id]['name']
+ self.$el.find('#showing_updated_receipt').append("
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Let your customer can attach the proof of payment. +
+Payment Proof Attachment +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Heighlights
+
+
+
+
+
+ 
+
+
+ + User can upload their payment information. +
++ User can upload both image and pdf files while creating quotation or in the payment screen.
+
+
+
+
+
+
+
+
+
+ + Displays attached payment +
++ User can display already uploaded files. +
+
+
+
+
+
+
+
+
+ + It is available for all manual transactions. +
+
+
+
+
+
+
+
+
+
+ Payment Proof Attachment
+
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + In the "my account" section. + +
+
+
+ + My account --> Quotations to Review +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Save or Update Transaction Receipt + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + User can upload both image and pdf files. + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + Show Updated Receipt Button + +
+
+
+ + User can see the uploaded files. +
+
+
+
+ 
+
+
+ +
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + In the Payment screen section. + +
+
+
+ + User can update transaction receipt and see the added receipts. +
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Admin backend Quotation view + + +
+
+
+ + Admin can see the uploaded files in the backend. Also, the mail will be sent to the customer. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Customer can attach files in the "my account" screen and "payment" screen.
+
+
+
+
+
+
+
+
+
+ + Customer can upload both image and pdf files.
+
+
+
+
+
+
+
+
+
+ + Customer can upload multiple files.
+
+
+
+
+
+
+
+
+
+
+ + It is available for all manual transactions. +
+
+
+
+
+
+
+
+
+
+ + Admin can see the uploaded file in the sale order section.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + This module enables customers to upload and attach proof documents or files directly from the website when placing orders or submitting requests. It streamlines the process of providing necessary documentation for verification. +
+
+
+
+
+
+
+ + Customers can easily attach proof documents during their interaction on the website (e.g., order form, inquiry form, or any relevant section) by using the "Attach File" button, which supports multiple file formats like PDF, PNG, JPEG, etc. +
+
+
+
+
+
+
+ + The module supports common file types such as PDFs, images (JPEG, PNG), and Word documents (DOC, DOCX), depending on the website settings. +
+
+
+
+
+
+ + Yes, the maximum file size for attachments can be configured by the website administrator. If a customer attempts to upload a file that exceeds this limit, an error message will be displayed. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 26th September, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+
+
+
+
+
+
+
+
+ Related Modules
+
+
+
+ 
+
+
+
+
+ 
+ 
+
+
+
+
+
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+ "); + }); + } else { + self.$el.find("#showing_updated_receipt").empty(); + self.$el.find('#showing_updated_receipt').append("
There is no attachments for this sale order.
") + } + }) + } +}) diff --git a/payment_proof_attachment/static/src/js/payment_screen.js b/payment_proof_attachment/static/src/js/payment_screen.js new file mode 100755 index 000000000..918d7e733 --- /dev/null +++ b/payment_proof_attachment/static/src/js/payment_screen.js @@ -0,0 +1,88 @@ +/** @odoo-module **/ +import publicWidget from "@web/legacy/js/public/public_widget"; +import { rpc } from "@web/core/network/rpc"; + +publicWidget.registry.PaymentProof = publicWidget.Widget.extend({ +// init() { +// this.rpc = this.env.services.rpc; +// }, + selector: '.payment_screen', + events: { + 'click #btnShowModal': '_onClickShowModal', + 'click .close_modal': '_onClickCloseModal', + 'change #payment_proof': '_onChangePaymentProof', + 'click #payment_proof_cart_update': '_onClickUpdateAttachment', + 'click #paymentScreenBtnShowReceipt': '_onClickShowReceipt', + 'click #refresh_payment_receipt': '_onClickShowReceipt', + }, + /** + *for closing the modal dialog + */ + _onClickShowModal: function () { + this.el.querySelector('#myModal').style.display = 'block'; +// document.querySelector('#wrapwrap').style.overflow = 'hidden'; + }, + /** + *for closing the modal dialog + */ + _onClickCloseModal: function () { + this.el.querySelector('#myModal').style.display = 'none'; +// document.querySelector('#wrapwrap').style.overflow = 'auto'; + }, + /** + *getting content from the uploaded file + */ + _onChangePaymentProof: function (ev) { + const files = ev.target.files; + var fileList = []; + for (let i = 0; i < files.length; i++) { + var reader = new FileReader(); + var reader_content = reader.readAsDataURL(files[i]); + reader.onload = function (reader_content) { + var dataURL = reader_content.target.result.split(',')[1]; + var fileName = files[i].name; + fileList.push({ + name: fileName, + content: dataURL + }); + } + } + this.fileList = fileList; + }, + /** + *transfer the content to python in payment screen + */ + _onClickUpdateAttachment: function (ev) { + var self = this; + this.el.querySelector('#myModal').style.display = 'none'; + if (self.fileList) { + rpc('/payment_proof/submit', { + 'attachments': this.fileList + }).then(function () { + self.fileList = "" + self.$el.find("#payment_proof").val("") + }); + } + }, + /** + *getting updated attachments + */ + _onClickShowReceipt: function () { + var self = this; + this.$el.find('#updated_receipt').css("display", "block") + this.$el.find('#paymentScreenBtnShowReceipt').css("display", "none") + rpc('/my_account_screen/show_updated', {}).then(function (attachment_ids) { + if (attachment_ids.length > 0) { + self.$el.find("#showing_updated_receipt").empty(); + $(attachment_ids).each(function (attachment_id) { + var id = "/web/content/" + attachment_ids[attachment_id]['id'] + var name = attachment_ids[attachment_id]['name'] + self.$el.find('#showing_updated_receipt').append(""); + }); + } else { + self.$el.find("#showing_updated_receipt").empty(); + self.$el.find('#showing_updated_receipt').append("
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Update Transaction Receipt
+
+
+
+ Show Updated Receipt
+
+
+
+
+
+
+