fix: customer section on pos item cart (#48284)

* fix: customer recent transactions

* fix: pos customer section display customer_name instead of customer name

erpnext/public/scss/point-of-sale.scss

@@ -286,13 +286,24 @@
 					grid-template-columns: repeat(2, minmax(0, 1fr));
 					margin-top: var(--margin-md);
 					column-gap: var(--padding-sm);
-					row-gap: var(--padding-xs);
+					row-gap: var(--padding-sm);
 				}
 
-				> .transactions-label {
-					@extend .label;
+				> .transactions-section {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
 					margin-top: var(--margin-md);
 					margin-bottom: var(--margin-sm);
+
+					> .recent-transactions {
+						@extend .label;
+					}
+
+					> .last-transaction {
+						font-weight: 400;
+						font-size: var(--text-sm);
+					}
 				}
 			}
 
@@ -301,8 +312,8 @@
 				overflow-x: hidden;
 				overflow-y: scroll;
 				margin-right: -12px;
-				padding-right: 12px;
 				margin-left: -10px;
+				scrollbar-width: thin;
 
 				> .no-transactions-placeholder {
 					height: 100%;
@@ -623,7 +634,8 @@
 			background-color: var(--control-bg);
 		}
 
-		> .invoice-name-customer {
+		> .invoice-name-customer,
+		> .invoice-name-date {
 			display: flex;
 			flex-direction: column;
 			justify-content: space-around;
@@ -642,7 +654,22 @@
 			}
 		}
 
-		> .invoice-total-date {
+		> .invoice-name-date {
+			> .invoice-name {
+				font-size: var(--text-md);
+				display: flex;
+				align-items: center;
+				font-weight: 700;
+			}
+
+			> .invoice-date {
+				@extend .nowrap;
+				font-size: var(--text-sm);
+			}
+		}
+
+		> .invoice-total-date,
+		> .invoice-total-status {
 			display: flex;
 			flex-direction: column;
 			font-weight: 500;
@@ -664,6 +691,18 @@
 				font-weight: 400;
 			}
 		}
+
+		> .invoice-total-status {
+			> .invoice-total {
+				margin-right: 8px;
+			}
+
+			> .invoice-status {
+				display: flex;
+				align-items: center;
+				justify-content: right;
+			}
+		}
 	}
 
 	> .item-details-container {

erpnext/selling/page/point_of_sale/point_of_sale.py

@@ -501,7 +501,13 @@ def get_invoice_filters(doctype, status, name=None, customer=None):
 def get_customer_recent_transactions(customer):
 	sales_invoices = frappe.db.get_list(
 		"Sales Invoice",
-		filters={"customer": customer, "docstatus": 1, "is_pos": 1, "is_consolidated": 0},
+		filters={
+			"customer": customer,
+			"docstatus": 1,
+			"is_pos": 1,
+			"is_consolidated": 0,
+			"is_created_using_pos": 1,
+		},
 		fields=["name", "grand_total", "status", "posting_date", "posting_time", "currency"],
 		page_length=20,
 	)

erpnext/selling/page/point_of_sale/pos_item_cart.js

@@ -353,7 +353,13 @@ erpnext.PointOfSale.ItemCart = class {
 		if (customer) {
 			return new Promise((resolve) => {
 				frappe.db
-					.get_value("Customer", customer, ["email_id", "mobile_no", "image", "loyalty_program"])
+					.get_value("Customer", customer, [
+						"email_id",
+						"customer_name",
+						"mobile_no",
+						"image",
+						"loyalty_program",
+					])
 					.then(({ message }) => {
 						const { loyalty_program } = message;
 						// if loyalty program then fetch loyalty points too
@@ -450,7 +456,7 @@ erpnext.PointOfSale.ItemCart = class {
 
 	update_customer_section() {
 		const me = this;
-		const { customer, email_id = "", mobile_no = "", image } = this.customer_info || {};
+		const { customer, customer_name, email_id = "", mobile_no = "", image } = this.customer_info || {};
 
 		if (customer) {
 			this.$customer_section.html(
@@ -458,7 +464,7 @@ erpnext.PointOfSale.ItemCart = class {
 					<div class="customer-display">
 						${this.get_customer_image()}
 						<div class="customer-name-desc">
-							<div class="customer-name">${customer}</div>
+							<div class="customer-name">${customer_name}</div>
 							${get_customer_description()}
 						</div>
 						<div class="reset-customer-btn" data-customer="${escape(customer)}">
@@ -880,7 +886,7 @@ erpnext.PointOfSale.ItemCart = class {
 
 	toggle_customer_info(show) {
 		if (show) {
-			const { customer } = this.customer_info || {};
+			const { customer, customer_name } = this.customer_info || {};
 
 			this.$cart_container.css("display", "none");
 			this.$customer_section.css({
@@ -899,8 +905,8 @@ erpnext.PointOfSale.ItemCart = class {
 				<div class="customer-display">
 					${this.get_customer_image()}
 					<div class="customer-name-desc">
-						<div class="customer-name">${customer}</div>
-						<div class="customer-desc"></div>
+						<div class="customer-name">${customer_name}</div>
+						<div class="customer-desc">${customer}</div>
 					</div>
 				</div>
 				<div class="customer-fields-container">
@@ -909,7 +915,10 @@ erpnext.PointOfSale.ItemCart = class {
 					<div class="loyalty_program-field"></div>
 					<div class="loyalty_points-field"></div>
 				</div>
-				<div class="transactions-label">${__("Recent Transactions")}</div>`
+				<div class="transactions-section">
+					<div class="recent-transactions">${__("Recent Transactions")}</div>
+					<div class="last-transaction"></div>
+				</div>`
 			);
 			// transactions need to be in diff div from sticky elem for scrolling
 			this.$customer_section.append(`<div class="customer-transactions"></div>`);
@@ -1018,7 +1027,7 @@ erpnext.PointOfSale.ItemCart = class {
 
 				const elapsed_time = moment(res[0].posting_date + " " + res[0].posting_time).fromNow();
 				this.$customer_section
-					.find(".customer-desc")
+					.find(".last-transaction")
 					.html(`${__("Last transacted")} ${__(elapsed_time)}`);
 
 				res.forEach((invoice) => {
@@ -1031,6 +1040,8 @@ erpnext.PointOfSale.ItemCart = class {
 						Return: "gray",
 						Consolidated: "blue",
 						"Credit Note Issued": "gray",
+						"Partly Paid": "yellow",
+						Overdue: "yellow",
 					};
 
 					transaction_container.append(
@@ -1041,7 +1052,7 @@ erpnext.PointOfSale.ItemCart = class {
 						</div>
 						<div class="invoice-total-status">
 							<div class="invoice-total">
-								${format_currency(invoice.grand_total, invoice.currency, 0) || 0}
+								${format_currency(invoice.grand_total, invoice.currency, frappe.sys_defaults.currency_precision) || 0}
 							</div>
 							<div class="invoice-status">
 								<span class="indicator-pill whitespace-nowrap ${indicator_color[invoice.status]}">