Styling and code fixes

erpnext/public/css/pos.css

@@ -1,6 +1,16 @@
+[data-route="point-of-sale"] .layout-main-section-wrapper {
+  margin-bottom: 0;
+}
+[data-route="point-of-sale"] .pos-items-wrapper {
+  max-height: calc(100vh - 210px);
+}
 .pos {
   padding: 15px;
 }
+.list-item {
+  min-height: 40px;
+  height: auto;
+}
 .cart-container {
   padding: 0 15px;
   display: inline-block;
@@ -33,7 +43,7 @@
   flex: 1.5;
 }
 .cart-items {
-  height: 200px;
+  height: 150px;
   overflow: auto;
 }
 .cart-items .list-item.current-item {
@@ -132,3 +142,32 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #5E64FF;
   color: #ffffff;
 }
+.discount-amount .discount-inputs {
+  display: flex;
+  flex-direction: column;
+  padding: 15px 0;
+}
+.discount-amount input:first-child {
+  margin-bottom: 10px;
+}
+.taxes-and-totals {
+  border-top: 1px solid #d1d8dd;
+}
+.taxes-and-totals .taxes {
+  display: flex;
+  flex-direction: column;
+  padding: 15px 0;
+  align-items: flex-end;
+}
+.taxes-and-totals .taxes > div:first-child {
+  margin-bottom: 10px;
+}
+.grand-total {
+  border-top: 1px solid #d1d8dd;
+}
+.grand-total .list-item {
+  height: 60px;
+}
+.grand-total .grand-total-value {
+  font-size: 24px;
+}

erpnext/public/less/pos.less

@@ -1,10 +1,25 @@
 @import "../../../../frappe/frappe/public/less/variables.less";
 
+[data-route="point-of-sale"] {
+	.layout-main-section-wrapper {
+		margin-bottom: 0;
+	}
+
+	.pos-items-wrapper {
+		max-height: ~"calc(100vh - 210px)";
+	}
+}
+
 .pos {
 	// display: flex;
 	padding: 15px;
 }
 
+.list-item {
+	min-height: 40px;
+	height: auto;
+}
+
 .cart-container {
 	padding: 0 15px;
 	// flex: 2;
@@ -46,7 +61,7 @@
 }
 
 .cart-items {
-	height: 200px;
+	height: 150px;
 	overflow: auto;
 
 	.list-item.current-item {
@@ -164,3 +179,43 @@ input[type=number]::-webkit-outer-spin-button {
 		color: #ffffff;
 	}
 }
+
+// taxes, totals and discount area
+.discount-amount {
+	.discount-inputs {
+		display: flex;
+		flex-direction: column;
+		padding: 15px 0;
+	}
+
+	input:first-child {
+		margin-bottom: 10px;
+	}
+}
+
+.taxes-and-totals {
+	border-top: 1px solid @border-color;
+
+	.taxes {
+		display: flex;
+		flex-direction: column;
+		padding: 15px 0;
+		align-items: flex-end;
+
+		& > div:first-child {
+			margin-bottom: 10px;
+		}
+	}
+}
+
+.grand-total {
+	border-top: 1px solid @border-color;
+
+	.list-item {
+		height: 60px;
+	}
+
+	.grand-total-value {
+		font-size: 24px;
+	}
+}

erpnext/selling/page/point_of_sale/point_of_sale.js

@@ -150,8 +150,9 @@ class PointOfSale {
 					this.cart.add_item(item);
 				})
 				.then(() => {
-					this.show_taxes_and_totals();
+					this.cart.update_taxes_and_totals();
-				})
+					this.cart.update_grand_total();
+				});
 
 			// if (barcode) {
 			// 	const value = barcode['serial_no'] ?
@@ -170,7 +171,8 @@ class PointOfSale {
 			.then(() => {
 				// update cart
 				this.cart.add_item(item);
-				this.show_taxes_and_totals();
+				this.cart.update_taxes_and_totals();
+				this.cart.update_grand_total();
 			});
 	}
 
@@ -306,28 +308,9 @@ class PointOfSale {
 		});
 
 		this.page.add_menu_item(__("Email"), function () {
-			me.frm.email_doc();
+			this.frm.email_doc();
 		});
 	}
-
-	show_taxes_and_totals() {
-		let tax_template = '';
-		let currency = this.frm.doc.currency;
-		const taxes_wrapper = $(this.wrapper).find('.taxes');
-
-		this.frm.refresh_field('taxes');
-		$(this.wrapper).find('.net-total').html(format_currency(this.frm.doc.net_total, this.currency))
-		$.each(this.frm.doc.taxes, function(index, data) {
-			tax_template += `
-				<div class="list-item" style="padding-right: 0;">
-					<div >${data.description}</div>
-					<div class="text-right bold">${fmt_money(data.tax_amount, currency)}</div>
-				</div>`;
-		});
-
-		taxes_wrapper.empty()
-		taxes_wrapper.html(tax_template);
-	}
 }
 
 class POSCart {
@@ -363,10 +346,16 @@ class POSCart {
 								<span>No Items added to cart</span>
 							</div>
 						</div>
-					</div>
 						<div class="taxes-and-totals">
 							${this.get_taxes_and_totals()}
 						</div>
+						<div class="discount-amount">
+							${this.get_discount_amount()}
+						</div>
+						<div class="grand-total">
+							${this.get_grand_total()}
+						</div>
+					</div>
 				</div>
 				<div class="number-pad-container">
 				</div>
@@ -375,6 +364,13 @@ class POSCart {
 		this.$cart_items = this.wrapper.find('.cart-items');
 		this.$empty_state = this.wrapper.find('.cart-items .empty-state');
 		this.$taxes_and_totals = this.wrapper.find('.taxes-and-totals');
+		this.$discount_amount = this.wrapper.find('.discount-amount');
+		this.$grand_total = this.wrapper.find('.grand-total');
+
+		this.toggle_taxes_and_totals(false);
+		this.$grand_total.on('click', () => {
+			this.toggle_taxes_and_totals();
+		});
 	}
 
 	reset() {
@@ -385,6 +381,35 @@ class POSCart {
 		this.customer_field.set_value("");
 	}
 
+	get_grand_total() {
+		return `
+			<div class="list-item">
+				<div class="list-item__content list-item__content--flex-2 text-muted">${__('Grand Total')}</div>
+				<div class="list-item__content grand-total-value">0.00</div>
+			</div>
+		`;
+	}
+
+	get_discount_amount() {
+		const get_currency_symbol = window.get_currency_symbol;
+
+		return `
+			<div class="list-item">
+				<div class="list-item__content list-item__content--flex-2 text-muted">${__('Discount')}</div>
+				<div class="list-item__content discount-inputs">
+					<input type="text"
+						class="form-control discount-percentage text-right"
+						placeholder="% 0.00"
+					>
+					<input type="text"
+						class="form-control discount-amount text-right"
+						placeholder="${get_currency_symbol(this.frm.doc.currency)} 0.00"
+					>
+				</div>
+			</div>
+		`;
+	}
+
 	get_taxes_and_totals() {
 		return `
 			<div class="list-item">
@@ -394,7 +419,47 @@ class POSCart {
 			<div class="list-item">
 				<div class="list-item__content list-item__content--flex-2 text-muted">${__('Taxes')}</div>
 				<div class="list-item__content taxes">0.00</div>
-			</div>`;
+			</div>
+		`;
+	}
+
+	toggle_taxes_and_totals(flag) {
+		if (flag !== undefined) {
+			this.tax_area_is_shown = flag;
+		} else {
+			this.tax_area_is_shown = !this.tax_area_is_shown;
+		}
+
+		this.$taxes_and_totals.toggle(this.tax_area_is_shown);
+		this.$discount_amount.toggle(this.tax_area_is_shown);
+	}
+
+	update_taxes_and_totals() {
+		const currency = this.frm.doc.currency;
+		this.frm.refresh_field('taxes');
+
+		// Update totals
+		this.$taxes_and_totals.find('.net-total')
+			.html(format_currency(this.frm.doc.net_total, currency));
+
+		// Update taxes
+		const taxes_html = this.frm.doc.taxes.map(tax => {
+			return `
+				<div>
+					<span>${tax.description}</span>
+					<span class="text-right bold">
+						${format_currency(tax.tax_amount, currency)}
+					</span>
+				</div>
+			`;
+		}).join("");
+		this.$taxes_and_totals.find('.taxes').html(taxes_html);
+	}
+
+	update_grand_total() {
+		this.$grand_total.find('.grand-total-value').text(
+			format_currency(this.frm.doc.grand_total, this.frm.currency)
+		);
 	}
 
 	make_customer_field() {
@@ -965,9 +1030,9 @@ class Payment {
 				[7, 8, 9],
 				['Del', 0, '.'],
 			],
-			onclick: (btn_value) => {
+			onclick: () => {
 				if(this.fieldname) {
-					this.dialog.set_value(this.fieldname, flt(this.numpad.value))
+					this.dialog.set_value(this.fieldname, this.numpad.get_value());
 				}
 			}
 		});
@@ -976,9 +1041,9 @@ class Payment {
 	bind_events() {
 		var me = this;
 		$(this.dialog.body).find('.input-with-feedback').focusin(function() {
-			me.numpad.value = '';
+			me.numpad.reset_value();
 			me.fieldname = $(this).prop('dataset').fieldname;
-		})
+		});
 	}
 
 	set_primary_action() {