From 69ef766a93befb5a90ee26cb3796c016f3cb1769 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Mon, 23 Nov 2020 16:38:32 +0530
Subject: [PATCH] feat: number pad in payment screen

---
 erpnext/public/scss/point-of-sale.scss        | 38 +++++++++++++---
 .../selling/page/point_of_sale/pos_payment.js | 44 +++++--------------
 2 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index b9f6f6bd97..c35ca81a94 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 5354ac17ef..fc8f8d8c70 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 @@ erpnext.PointOfSale.Payment = class {
 	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 @@ erpnext.PointOfSale.Payment = class {
 		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 @@ erpnext.PointOfSale.Payment = class {
 			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 @@ erpnext.PointOfSale.Payment = class {
 				// 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 @@ erpnext.PointOfSale.Payment = class {
 				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 @@ erpnext.PointOfSale.Payment = class {
 				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() {