feat: number pad in payment screen
diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index b9f6f6b..c35ca81 100644
--- a/erpnext/public/scss/point-of-sale.scss
+++ b/erpnext/public/scss/point-of-sale.scss
@@ -747,7 +747,8 @@
> .payment-modes {
display: flex;
- margin-bottom: var(--margin-md);
+ padding-bottom: var(--padding-sm);
+ margin-bottom: var(--margin-xs);
overflow-x: scroll;
overflow-y: hidden;
@@ -803,10 +804,37 @@
}
}
- .invoice-fields {
- display: none;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- column-gap: var(--padding-md);
+ > .fields-numpad-container {
+ display: flex;
+ flex: 1;
+
+ > .fields-section {
+ flex: 1;
+ }
+
+ > .number-pad {
+ flex: 1;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+
+ .numpad-container {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: var(--margin-md);
+ margin-bottom: var(--margin-md);
+
+ > .numpad-btn {
+ @extend .pointer-no-select;
+ border-radius: var(--border-radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--padding-md);
+ box-shadow: var(--shadow-sm);
+ }
+ }
+ }
}
> .totals-section {
diff --git a/erpnext/selling/page/point_of_sale/pos_payment.js b/erpnext/selling/page/point_of_sale/pos_payment.js
index 5354ac1..fc8f8d8 100644
--- a/erpnext/selling/page/point_of_sale/pos_payment.js
+++ b/erpnext/selling/page/point_of_sale/pos_payment.js
@@ -19,17 +19,17 @@
prepare_dom() {
this.wrapper.append(
`<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="section-label payment-section">Payment Method</div>
<div class="payment-modes"></div>
- <div class="invoice-fields-section"></div>
+ <div class="fields-numpad-container">
+ <div class="fields-section">
+ <div class="section-label">Additional Information</div>
+ <div class="invoice-fields"></div>
+ </div>
+ <div class="number-pad"></div>
+ </div>
<div class="totals-section">
<div class="totals"></div>
- <div class="number-pad"></div>
</div>
<div class="submit-order-btn">Complete Order</div>
</section>`
@@ -39,7 +39,7 @@
this.$totals_section = this.$component.find('.totals-section');
this.$totals = this.$component.find('.totals');
this.$numpad = this.$component.find('.number-pad');
- this.$invoice_fields_section = this.$component.find('.invoice-fields-section');
+ this.$invoice_fields_section = this.$component.find('.fields-section');
}
make_invoice_fields_control() {
@@ -47,15 +47,6 @@
const fields = doc.invoice_fields;
if (!fields.length) return;
- 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"></div>`
- );
this.$invoice_fields = this.$invoice_fields_section.find('.invoice-fields');
const frm = this.events.get_frm();
@@ -153,7 +144,6 @@
// clicked one is selected then unselect it
mode_clicked.removeClass('border-primary');
me.selected_mode = '';
- me.toggle_numpad(false);
} else {
// clicked one is not selected then select it
mode_clicked.addClass('border-primary');
@@ -161,13 +151,14 @@
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`];
const doc = me.events.get_frm().doc;
me.selected_mode?.$input?.get(0).focus();
const current_value = me.selected_mode?.get_value()
!current_value && doc.grand_total > doc.paid_amount ? me.selected_mode?.set_value(doc.grand_total - doc.paid_amount) : '';
+
+ me.numpad_value = '';
}
})
@@ -231,19 +222,6 @@
this[`${mode}_control`].set_value(default_mop.amount);
}
});
-
- this.$component.on('click', '.invoice-fields-section', function(e) {
- if ($(e.target).closest('.invoice-fields').length) return;
-
- 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.css('display', 'none');
- this.$payment_modes.css('display', 'flex');
- this.toggle_numpad(true);
- })
}
attach_shortcuts() {