Shiloh/brotherton-erpnext
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: pos payment with new ui

Browse Source
This commit is contained in:
Saqib Ansari 2020-11-13 17:33:20 +05:30
parent fc3315a6d7
commit 7202e9f658
5 changed files with 297 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
erpnext/public/scss/point-of-sale.scss
View File

@ -5,12 +5,12 @@
section {
min-height: 45rem;
height: calc(100vh - 200px);
max-height: calc(100vh - 200px);
}
.frappe-control {
margin: 0 !important;
padding: 5px 5px;
width: 100%;
}
@ -63,9 +63,7 @@
align-items: center;
justify-content: center;
padding: var(--padding-sm);
margin: var(--margin-xs);
margin-top: var(--margin-sm);
margin-bottom: var(--margin-xs);
border-radius: var(--border-radius-md);
font-size: var(--text-lg);
font-weight: 700;
@ -91,21 +89,21 @@
position: sticky;
top: -1px;
z-index: 1;
padding: var(--padding-md);
padding: var(--padding-lg);
padding-bottom: var(--padding-sm);
align-items: center;
> .label {
@extend .label;
grid-column: span 4 / span 4;
padding: var(--padding-xs);
padding-top: 0px;
padding-bottom: var(--padding-xs);
}
> .search-field {
grid-column: span 5 / span 5;
display: flex;
align-items: center;
margin-right: var(--padding-sm);
}
> .item-group-field {
@ -177,7 +175,7 @@
@extend .pos-card;
display: flex;
flex-direction: column;
padding: var(--padding-md);
padding: var(--padding-md) var(--padding-lg);
> .customer-field {
display: flex;
@ -288,36 +286,33 @@
position: absolute;
display: flex;
flex-direction: column;
padding: var(--padding-md);
padding: var(--padding-lg);
width: 100%;
height: 100%;
> .cart-label {
@extend .label;
padding-bottom: var(--padding-md);
padding-left: var(--margin-sm);
}
> .cart-header {
display: flex;
width: 100%;
font-size: var(--text-md);
padding-left: var(--padding-xs);
padding-right: var(--padding-xs);
padding-bottom: var(--padding-md);
> .name-header {
flex: 1 1 0%;
margin-left: var(--margin-xs);
}
> .qty-header {
margin-right: var(--margin-lg);
text-align: center;
}
> .rate-amount-header {
margin-right: var(--margin-xs);
text-align: right;
margin-right: var(--margin-sm);
}
}
@ -429,11 +424,38 @@
width: 100%;
margin-top: var(--margin-md);
> .add-discount-wrapper {
@extend .pointer-no-select;
display: none;
align-items: center;
border-radius: var(--border-radius-md);
border: 1px dashed var(--gray-500);
padding: var(--padding-sm) var(--padding-md);
margin-bottom: var(--margin-sm);
> .add-discount-field {
width: 100%;
}
> .discount-icon {
margin-right: var(--margin-sm);
}
> .edit-discount-btn {
padding: 3px var(--padding-sm);
border-radius: var(--border-radius-sm);
background-color: var(--green-100);
color: var(--green-700);
font-size: var(--text-sm);
font-weight: 700;
}
}
> .net-total-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--padding-sm);
padding: var(--padding-sm) 0px;
font-weight: 500;
font-size: var(--text-md);
}
@ -442,7 +464,7 @@
display: none;
align-items: center;
justify-content: space-between;
padding: var(--padding-sm);
padding: var(--padding-sm) 0px;
font-weight: 500;
font-size: var(--text-md);
@ -460,7 +482,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--padding-sm);
padding: var(--padding-sm) 0px;
font-weight: 700;
font-size: var(--text-lg);
}
@ -474,8 +496,15 @@
> .edit-cart-btn {
@extend .primary-action;
display: none;
background-color: var(--gray-100);
background-color: var(--gray-300);
font-weight: 500;
transition: all 0.15s ease-in-out;
&:hover {
background-color: var(--gray-600);
color: white;
font-weight: 700;
}
}
}
@ -682,12 +711,144 @@
> .form-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--padding-xs);
column-gap: var(--padding-md);
> .auto-fetch-btn {
@extend .pointer-no-select;
margin: auto var(--margin-xs);
margin: var(--margin-xs);
}
}
}
> .payment-container {
@extend .pos-card;
grid-column: span 6 / span 6;
display: none;
flex-direction: column;
padding: var(--padding-lg);
.border-primary {
border: 1px solid var(--blue-500);
}
.submit-order-btn {
@extend .primary-action;
background-color: var(--blue-500);
color: white;
}
.section-label {
@extend .label;
@extend .pointer-no-select;
margin-bottom: var(--margin-md);
}
> .payment-modes {
display: flex;
margin-bottom: var(--margin-md);
overflow-x: scroll;
overflow-y: hidden;
> .payment-mode-wrapper {
min-width: 40%;
padding: var(--padding-xs);
> .mode-of-payment {
@extend .pos-card;
@extend .pointer-no-select;
padding: var(--padding-md) var(--padding-lg);
> .pay-amount {
display: inline;
float: right;
font-weight: 700;
}
> .mode-of-payment-control {
display: none;
align-items: center;
margin-top: var(--margin-sm);
margin-bottom: var(--margin-xs);
}
> .loyalty-amount-name {
display: none;
float: right;
font-weight: 700;
}
> .cash-shortcuts {
display: none;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--margin-sm);
font-size: var(--text-sm);
text-align: center;
> .shortcut {
@extend .pointer-no-select;
border-radius: var(--border-radius-sm);
background-color: var(--gray-100);
font-weight: 500;
padding: var(--padding-xs) var(--padding-sm);
transition: all 0.15s ease-in-out;
&:hover {
background-color: var(--gray-300);
}
}
}
}
}
}
.invoice-fields {
display: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--padding-md);
}
> .totals-section {
display: flex;
margin-top: auto;
margin-bottom: var(--margin-sm);
justify-content: center;
flex-direction: column;
> .totals {
display: flex;
padding-top: var(--padding-md);
background-color: var(--gray-100);
justify-content: center;
padding: var(--padding-md);
border-radius: var(--border-radius-md);
> .col {
flex-grow: 1;
text-align: center;
> .total-label {
font-size: var(--text-md);
font-weight: 500;
color: var(--gray-600);
}
> .value {
font-size: var(--text-2xl);
font-weight: 700;
}
}
> .seperator-y {
margin-left: var(--margin-sm);
margin-right: var(--margin-sm);
border-right: 1px solid var(--gray-300);
}
}
> .number-pad {
display: none;
}
}
}
}

6
erpnext/selling/page/point_of_sale/pos_controller.js
View File

@ -356,10 +356,10 @@ erpnext.PointOfSale.Controller = class {
toggle_other_sections: (show) => {
if (show) {
this.item_details.$component.hasClass('d-none') ? '' : this.item_details.$component.addClass('d-none');
this.item_selector.$component.addClass('d-none');
this.item_details.$component.is(':visible') ? this.item_details.$component.css('display', 'none') : '';
this.item_selector.$component.css('display', 'none');
} else {
this.item_selector.$component.removeClass('d-none');
this.item_selector.$component.css('display', 'flex');
}
},

57
erpnext/selling/page/point_of_sale/pos_item_cart.js
View File

@ -78,12 +78,23 @@ erpnext.PointOfSale.ItemCart = class {
);
}
get_discount_icon() {
return (
`<svg class="discount-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 15.6213C19 15.2235 19.158 14.842 19.4393 14.5607L20.9393 13.0607C21.5251 12.4749 21.5251 11.5251 20.9393 10.9393L19.4393 9.43934C19.158 9.15804 19 8.7765 19 8.37868V6.5C19 5.67157 18.3284 5 17.5 5H15.6213C15.2235 5 14.842 4.84196 14.5607 4.56066L13.0607 3.06066C12.4749 2.47487 11.5251 2.47487 10.9393 3.06066L9.43934 4.56066C9.15804 4.84196 8.7765 5 8.37868 5H6.5C5.67157 5 5 5.67157 5 6.5V8.37868C5 8.7765 4.84196 9.15804 4.56066 9.43934L3.06066 10.9393C2.47487 11.5251 2.47487 12.4749 3.06066 13.0607L4.56066 14.5607C4.84196 14.842 5 15.2235 5 15.6213V17.5C5 18.3284 5.67157 19 6.5 19H8.37868C8.7765 19 9.15804 19.158 9.43934 19.4393L10.9393 20.9393C11.5251 21.5251 12.4749 21.5251 13.0607 20.9393L14.5607 19.4393C14.842 19.158 15.2235 19 15.6213 19H17.5C18.3284 19 19 18.3284 19 17.5V15.6213Z" stroke="#323C45" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 9L9 15" stroke="#323C45" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 9.5C10.5 10.0523 10.0523 10.5 9.5 10.5C8.94772 10.5 8.5 10.0523 8.5 9.5C8.5 8.94772 8.94772 8.5 9.5 8.5C10.0523 8.5 10.5 8.94772 10.5 9.5Z" fill="white" stroke="#323C45" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5 14.5C15.5 15.0523 15.0523 15.5 14.5 15.5C13.9477 15.5 13.5 15.0523 13.5 14.5C13.5 13.9477 13.9477 13.5 14.5 13.5C15.0523 13.5 15.5 13.9477 15.5 14.5Z" fill="white" stroke="#323C45" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`
);
}
make_cart_totals_section() {
this.$totals_section = this.$component.find('.cart-totals-section');
this.$totals_section.append(
`<div class="add-discount flex items-center pt-4 pb-4 pr-4 pl-4 text-grey pointer no-select d-none">
+ Add Discount
`<div class="add-discount-wrapper">
${this.get_discount_icon()} Add Discount
</div>
<div class="net-total-container">
<div class="net-total-label">Net Total</div>
@ -98,7 +109,7 @@ erpnext.PointOfSale.ItemCart = class {
<div class="edit-cart-btn">Edit Cart</div>`
)
this.$add_discount_elem = this.$component.find(".add-discount");
this.$add_discount_elem = this.$component.find(".add-discount-wrapper");
}
make_cart_numpad() {
@ -178,19 +189,15 @@ erpnext.PointOfSale.ItemCart = class {
me.events.checkout();
me.toggle_checkout_btn(false);
me.$add_discount_elem.removeClass("d-none");
});
this.$totals_section.on('click', '.edit-cart-btn', () => {
this.events.edit_cart();
this.toggle_checkout_btn(true);
this.$add_discount_elem.addClass("d-none");
});
this.$component.on('click', '.add-discount', () => {
const can_edit_discount = this.$add_discount_elem.find('.edit-discount').length;
this.$component.on('click', '.add-discount-wrapper', () => {
const can_edit_discount = this.$add_discount_elem.find('.edit-discount-btn').length;
if(!this.discount_field || can_edit_discount) this.show_discount_control();
});
@ -244,10 +251,10 @@ erpnext.PointOfSale.ItemCart = class {
this.$component.find(".edit-cart-btn").click()
}
});
this.$component.find(".add-discount").attr("title", `${ctrl_label}+D`);
this.$component.find(".add-discount-wrapper").attr("title", `${ctrl_label}+D`);
frappe.ui.keys.add_shortcut({
shortcut: "ctrl+d",
action: () => this.$component.find(".add-discount").click(),
action: () => this.$component.find(".add-discount-wrapper").click(),
condition: () => this.$add_discount_elem.is(":visible"),
description: __("Add Order Discount"),
ignore_inputs: true,
@ -292,7 +299,6 @@ erpnext.PointOfSale.ItemCart = class {
label: __('Customer'),
fieldtype: 'Link',
options: 'Customer',
input_class: 'input-xs',
placeholder: __('Search by customer name, phone, email.'),
get_query: () => query,
onchange: function() {
@ -351,9 +357,9 @@ erpnext.PointOfSale.ItemCart = class {
}
show_discount_control() {
this.$add_discount_elem.removeClass("pr-4 pl-4");
this.$add_discount_elem.css({ 'padding': '0px', 'border': 'none' })
this.$add_discount_elem.html(
`<div class="add-discount-field flex flex-1 items-center"></div>`
`<div class="add-discount-field"></div>`
);
const me = this;
@ -362,14 +368,19 @@ erpnext.PointOfSale.ItemCart = class {
label: __('Discount'),
fieldtype: 'Data',
placeholder: __('Enter discount percentage.'),
input_class: 'input-xs',
onchange: function() {
const frm = me.events.get_frm();
if (this.value.length || this.value === 0) {
if (flt(this.value) != 0) {
frappe.model.set_value(frm.doc.doctype, frm.doc.name, 'additional_discount_percentage', flt(this.value));
me.hide_discount_control(this.value);
} else {
frappe.model.set_value(frm.doc.doctype, frm.doc.name, 'additional_discount_percentage', 0);
me.$add_discount_elem.html(`+ Add Discount`);
me.$add_discount_elem.css({
'border': '1px dashed var(--gray-500)',
'padding': 'var(--padding-sm) var(--padding-md)'
});
me.$add_discount_elem.html(`${me.get_discount_icon()} Add Discount`);
me.discount_field = undefined;
}
},
@ -383,21 +394,19 @@ erpnext.PointOfSale.ItemCart = class {
hide_discount_control(discount) {
if (!discount) {
this.$add_discount_elem.removeClass("pr-4 pl-4");
this.$add_discount_elem.css({ 'padding': '0px', 'border': 'none' });
this.$add_discount_elem.html(
`<div class="add-discount-field flex flex-1 items-center"></div>`
`<div class="add-discount-field"></div>`
);
} else {
this.$add_discount_elem.addClass('pr-4 pl-4');
this.$add_discount_elem.html(
`<svg class="mr-2" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"
`<svg class="discount-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"
stroke-linecap="round" stroke-linejoin="round">
<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
</svg>
<div class="edit-discount p-1 pr-3 pl-3 text-dark-grey rounded-md w-fit bg-green-200 mb-2">
<div class="edit-discount-btn">
${String(discount).bold()}% off
</div>
`
</div>`
);
}
}
@ -652,10 +661,12 @@ erpnext.PointOfSale.ItemCart = class {
highlight_checkout_btn(toggle) {
if (toggle) {
this.$add_discount_elem.css('display', 'flex');
this.$cart_container.find('.checkout-btn').css({
'background-color': 'var(--blue-500)'
});
} else {
this.$add_discount_elem.css('display', 'none');
this.$cart_container.find('.checkout-btn').css({
'background-color': 'var(--blue-200)'
});

2
erpnext/selling/page/point_of_sale/pos_item_selector.js
View File

@ -261,6 +261,6 @@ erpnext.PointOfSale.ItemSelector = class {
}
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');
}
}

162
erpnext/selling/page/point_of_sale/pos_payment.js
View File

@ -18,38 +18,28 @@ erpnext.PointOfSale.Payment = class {
prepare_dom() {
this.wrapper.append(
`<section class="col-span-6 flex shadow rounded payment-section bg-white mx-h-70 h-100 d-none">
<div class="flex flex-col p-16 pt-8 pb-8 w-full">
<div class="text-grey mb-6 payment-section no-select pointer">
PAYMENT METHOD<span class="octicon octicon-chevron-down collapse-indicator"></span>
</div>
<div class="payment-modes flex flex-wrap"></div>
<div class="invoice-details-section"></div>
<div class="flex mt-auto justify-center w-full">
<div class="flex flex-col justify-center flex-1 ml-4">
<div class="flex w-full">
<div class="totals-remarks items-end justify-end flex flex-1">
<div class="remarks text-md-0 text-grey mr-auto"></div>
<div class="totals flex justify-end pt-4"></div>
</div>
<div class="number-pad w-40 mb-4 ml-8 d-none"></div>
</div>
<div class="flex items-center justify-center mt-4 submit-order h-16 w-full rounded bg-primary text-md text-white no-select pointer text-bold">
Complete Order
</div>
<div class="order-time flex items-center justify-end mt-2 pt-2 pb-2 w-full text-md-0 text-grey no-select pointer d-none"></div>
</div>
</div>
`<section class="payment-container">
<div class="section-label payment-section">
Payment Method
<span class="ml-2 collapse-indicator mb-1" style="display: inline;">
<svg class="icon icon-sm" style=""><use class="mb-1" href="#icon-down"></use></svg>
</span>
</div>
<div class="payment-modes"></div>
<div class="invoice-fields-section"></div>
<div class="totals-section">
<div class="totals"></div>
<div class="number-pad"></div>
</div>
<div class="submit-order-btn">Complete Order</div>
</section>`
)
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(
`<div class="text-grey pb-6 mt-2 pointer no-select">
ADDITIONAL INFORMATION<span class="octicon octicon-chevron-down collapse-indicator"></span>
this.$invoice_fields_section.html(
`<div class="section-label">
Additional Information
<span class="ml-2 collapse-indicator mb-1" style="display: inline;">
<svg class="icon icon-sm" style=""><use class="mb-1" href="#icon-down"></use></svg>
</span>
</div>
<div class="invoice-fields grid grid-cols-2 gap-4 mb-6 d-none"></div>`
<div class="invoice-fields"></div>`
);
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 (
`<div class="w-half ${margin} bg-white">
<div class="mode-of-payment rounded border border-grey text-grey text-md
mb-4 p-8 pt-4 pb-4 no-select pointer" data-mode="${mode}" data-payment-type="${payment_type}">
`<div class="payment-mode-wrapper">
<div class="mode-of-payment" data-mode="${mode}" data-payment-type="${payment_type}">
${p.mode_of_payment}
<div class="${mode}-amount pay-amount inline float-right text-bold">${amount}</div>
<div class="${mode} mode-of-payment-control mt-4 flex flex-1 items-center d-none"></div>
<div class="${mode}-amount pay-amount">${amount}</div>
<div class="${mode} mode-of-payment-control"></div>
</div>
</div>`
)
@ -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(
`<div class="cash-shortcuts grid grid-cols-3 gap-2 flex-1 text-center text-md-0 mb-2 d-none">
`<div class="cash-shortcuts">
${
shortcuts.map(s => {
return `<div class="shortcut rounded bg-light-grey text-dark-grey pt-2 pb-2 no-select pointer" data-value="${s}">
${format_currency(s, currency, 0)}
</div>`
return `<div class="shortcut" data-value="${s}">${format_currency(s, currency, 0)}</div>`
}).join('')
}
</div>`
@ -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(
`<div class="w-half ${margin} bg-white">
<div class="mode-of-payment rounded border border-grey text-grey text-md
mb-4 p-8 pt-4 pb-4 no-select pointer" data-mode="loyalty-amount" data-payment-type="loyalty-amount">
`<div class="payment-mode-wrapper">
<div class="mode-of-payment" data-mode="loyalty-amount" data-payment-type="loyalty-amount">
Redeem Loyalty Points
<div class="loyalty-amount-amount pay-amount inline float-right text-bold">${amount}</div>
<div class="loyalty-amount-name inline float-right text-bold text-md-0 d-none">${loyalty_program}</div>
<div class="loyalty-amount mode-of-payment-control mt-4 flex flex-1 items-center d-none"></div>
<div class="loyalty-amount-amount pay-amount">${amount}</div>
<div class="loyalty-amount-name">${loyalty_program}</div>
<div class="loyalty-amount mode-of-payment-control"></div>
</div>
</div>`
)
@ -520,18 +510,24 @@ erpnext.PointOfSale.Payment = class {
const label = change ? __('Change') : __('To Be Paid');
this.$totals.html(
`<div>
<div class="pr-8 border-r-grey">Paid Amount</div>
<div class="pr-8 border-r-grey text-bold text-2xl">${format_currency(paid_amount, currency)}</div>
`<div class="col">
<div class="total-label">Grand Total</div>
<div class="value">${format_currency(doc.grand_total, currency)}</div>
</div>
<div>
<div class="pl-8">${label}</div>
<div class="pl-8 text-green-400 text-bold text-2xl">${format_currency(change || remaining, currency)}</div>
<div class="seperator-y"></div>
<div class="col">
<div class="total-label">Paid Amount</div>
<div class="value">${format_currency(paid_amount, currency)}</div>
</div>
<div class="seperator-y"></div>
<div class="col">
<div class="total-label">${label}</div>
<div class="value">${format_currency(change || remaining, currency)}</div>
</div>`
)
}
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');
}
}