`
)
- this.$component = this.wrapper.find('.payment-section');
+ this.$component = this.wrapper.find('.payment-container');
this.$payment_modes = this.$component.find('.payment-modes');
- this.$totals_remarks = this.$component.find('.totals-remarks');
+ this.$totals_section = this.$component.find('.totals-section');
this.$totals = this.$component.find('.totals');
- this.$remarks = this.$component.find('.remarks');
this.$numpad = this.$component.find('.number-pad');
- this.$invoice_details_section = this.$component.find('.invoice-details-section');
+ this.$invoice_fields_section = this.$component.find('.invoice-fields-section');
}
make_invoice_fields_control() {
@@ -57,13 +47,16 @@ erpnext.PointOfSale.Payment = class {
const fields = doc.invoice_fields;
if (!fields.length) return;
- this.$invoice_details_section.html(
- `
- ADDITIONAL INFORMATION
+ this.$invoice_fields_section.html(
+ `
+ Additional Information
+
+
-
`
+
`
);
- this.$invoice_fields = this.$invoice_details_section.find('.invoice-fields');
+ this.$invoice_fields = this.$invoice_fields_section.find('.invoice-fields');
const frm = this.events.get_frm();
fields.forEach(df => {
@@ -127,9 +120,9 @@ erpnext.PointOfSale.Payment = class {
this.selected_mode.set_value(this.numpad_value);
function highlight_numpad_btn($btn) {
- $btn.addClass('shadow-inner bg-selected');
+ $btn.addClass('shadow-base-inner bg-selected');
setTimeout(() => {
- $btn.removeClass('shadow-inner bg-selected');
+ $btn.removeClass('shadow-base-inner bg-selected');
}, 100);
}
}
@@ -142,13 +135,16 @@ erpnext.PointOfSale.Payment = class {
// if clicked element doesn't have .mode-of-payment class then return
if (!$(e.target).is(mode_clicked)) return;
+ // const scrollRight = mode_clicked.offset().right - me.$payment_modes.offset().right + me.$payment_modes.scrollRight();
+ // me.$payment_modes.animate({ scrollRight });
+
const mode = mode_clicked.attr('data-mode');
// hide all control fields and shortcuts
- $(`.mode-of-payment-control`).addClass('d-none');
- $(`.cash-shortcuts`).addClass('d-none');
- me.$payment_modes.find(`.pay-amount`).removeClass('d-none');
- me.$payment_modes.find(`.loyalty-amount-name`).addClass('d-none');
+ $(`.mode-of-payment-control`).css('display', 'none');
+ $(`.cash-shortcuts`).css('display', 'none');
+ me.$payment_modes.find(`.pay-amount`).css('display', 'inline');
+ me.$payment_modes.find(`.loyalty-amount-name`).css('display', 'none');
// remove highlight from all mode-of-payments
$('.mode-of-payment').removeClass('border-primary');
@@ -161,10 +157,10 @@ erpnext.PointOfSale.Payment = class {
} else {
// clicked one is not selected then select it
mode_clicked.addClass('border-primary');
- mode_clicked.find('.mode-of-payment-control').removeClass('d-none');
- mode_clicked.find('.cash-shortcuts').removeClass('d-none');
- me.$payment_modes.find(`.${mode}-amount`).addClass('d-none');
- me.$payment_modes.find(`.${mode}-name`).removeClass('d-none');
+ mode_clicked.find('.mode-of-payment-control').css('display', 'flex');
+ mode_clicked.find('.cash-shortcuts').css('display', 'grid');
+ me.$payment_modes.find(`.${mode}-amount`).css('display', 'none');
+ me.$payment_modes.find(`.${mode}-name`).css('display', 'inline');
me.toggle_numpad(true);
me.selected_mode = me[`${mode}_control`];
@@ -198,7 +194,7 @@ erpnext.PointOfSale.Payment = class {
me.selected_mode.set_value(value);
})
- this.$component.on('click', '.submit-order', () => {
+ this.$component.on('click', '.submit-order-btn', () => {
const doc = this.events.get_frm().doc;
const paid_amount = doc.paid_amount;
const items = doc.items;
@@ -217,9 +213,9 @@ erpnext.PointOfSale.Payment = class {
this.update_totals_section(frm.doc);
// need to re calculate cash shortcuts after discount is applied
- const is_cash_shortcuts_invisible = this.$payment_modes.find('.cash-shortcuts').hasClass('d-none');
+ const is_cash_shortcuts_invisible = !this.$payment_modes.find('.cash-shortcuts').is(':visible');
this.attach_cash_shortcuts(frm.doc);
- !is_cash_shortcuts_invisible && this.$payment_modes.find('.cash-shortcuts').removeClass('d-none');
+ !is_cash_shortcuts_invisible && this.$payment_modes.find('.cash-shortcuts').css('display', 'grid');
})
frappe.ui.form.on('POS Invoice', 'loyalty_amount', (frm) => {
@@ -236,28 +232,28 @@ erpnext.PointOfSale.Payment = class {
}
});
- this.$component.on('click', '.invoice-details-section', function(e) {
+ this.$component.on('click', '.invoice-fields-section', function(e) {
if ($(e.target).closest('.invoice-fields').length) return;
- me.$payment_modes.addClass('d-none');
- me.$invoice_fields.toggleClass("d-none");
+ me.$payment_modes.css('display', 'none');
+ me.$invoice_fields.css('display', 'grid');
me.toggle_numpad(false);
});
this.$component.on('click', '.payment-section', () => {
- this.$invoice_fields.addClass("d-none");
- this.$payment_modes.toggleClass('d-none');
+ this.$invoice_fields.css('display', 'none');
+ this.$payment_modes.css('display', 'flex');
this.toggle_numpad(true);
})
}
attach_shortcuts() {
const ctrl_label = frappe.utils.is_mac() ? '⌘' : 'Ctrl';
- this.$component.find('.submit-order').attr("title", `${ctrl_label}+Enter`);
+ this.$component.find('.submit-order-btn').attr("title", `${ctrl_label}+Enter`);
frappe.ui.keys.on("ctrl+enter", () => {
const payment_is_visible = this.$component.is(":visible");
const active_mode = this.$payment_modes.find(".border-primary");
if (payment_is_visible && active_mode.length) {
- this.$component.find('.submit-order').click();
+ this.$component.find('.submit-order-btn').click();
}
});
@@ -287,15 +283,13 @@ erpnext.PointOfSale.Payment = class {
}
toggle_numpad(show) {
- if (show) {
- this.$numpad.removeClass('d-none');
- this.$remarks.addClass('d-none');
- this.$totals_remarks.addClass('w-60 justify-center').removeClass('justify-end w-full');
- } else {
- this.$numpad.addClass('d-none');
- this.$remarks.removeClass('d-none');
- this.$totals_remarks.removeClass('w-60 justify-center').addClass('justify-end w-full');
- }
+ // if (show) {
+ // this.$numpad.css('display', 'flex');
+ // this.$totals_section.addClass('w-60 justify-center').removeClass('justify-end w-full');
+ // } else {
+ // this.$numpad.css('display', 'none');
+ // this.$totals_section.removeClass('w-60 justify-center').addClass('justify-end w-full');
+ // }
}
render_payment_section() {
@@ -327,7 +321,7 @@ erpnext.PointOfSale.Payment = class {
fieldtype: 'Data',
onchange: function() {}
},
- parent: this.$totals_remarks.find(`.remarks`),
+ parent: this.$totals_section.find(`.remarks`),
render_input: true,
});
this[`remark_control`].set_value('');
@@ -348,12 +342,11 @@ erpnext.PointOfSale.Payment = class {
const amount = p.amount > 0 ? format_currency(p.amount, currency) : '';
return (
- `
-
+ `
+
${p.mode_of_payment}
-
${amount}
-
+
${amount}
+
`
)
@@ -405,12 +398,10 @@ erpnext.PointOfSale.Payment = class {
this.$payment_modes.find('.cash-shortcuts').remove();
this.$payment_modes.find('[data-payment-type="Cash"]').find('.mode-of-payment-control').after(
- `
+ `
${
shortcuts.map(s => {
- return `
- ${format_currency(s, currency, 0)}
-
`
+ return `
${format_currency(s, currency, 0)}
`
}).join('')
}
`
@@ -457,13 +448,12 @@ erpnext.PointOfSale.Payment = class {
const margin = this.$payment_modes.children().length % 2 === 0 ? 'pr-2' : 'pl-2';
const amount = doc.loyalty_amount > 0 ? format_currency(doc.loyalty_amount, doc.currency) : '';
this.$payment_modes.append(
- `
-
+ `
+
Redeem Loyalty Points
-
${amount}
-
${loyalty_program}
-
+
${amount}
+
${loyalty_program}
+
`
)
@@ -520,18 +510,24 @@ erpnext.PointOfSale.Payment = class {
const label = change ? __('Change') : __('To Be Paid');
this.$totals.html(
- `
-
Paid Amount
-
${format_currency(paid_amount, currency)}
+ `
+
Grand Total
+
${format_currency(doc.grand_total, currency)}
-
-
${label}
-
${format_currency(change || remaining, currency)}
+
+
+
Paid Amount
+
${format_currency(paid_amount, currency)}
+
+
+
+
${label}
+
${format_currency(change || remaining, currency)}
`
)
}
toggle_component(show) {
- show ? this.$component.removeClass('d-none') : this.$component.addClass('d-none');
+ show ? this.$component.css('display', 'flex') : this.$component.css('display', 'none');
}
}
\ No newline at end of file