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

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

* fix: customer recent transactions

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

(cherry picked from commit e1d9f863c6)

# Conflicts:
#	erpnext/public/scss/point-of-sale.scss
#	erpnext/selling/page/point_of_sale/point_of_sale.py
#	erpnext/selling/page/point_of_sale/pos_item_cart.js

* chore: resolve conflict

* chore: resolve conflict

* chore: resolve conflict

---------

Co-authored-by: Diptanil Saha <diptanil@frappe.io>

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

@@ -284,13 +284,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 {
+				> .transactions-section {
-					@extend .label;
+					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);
+					}
 				}
 			}
 
@@ -299,8 +310,8 @@
 				overflow-x: hidden;
 				overflow-y: scroll;
 				margin-right: -12px;
-				padding-right: 12px;
 				margin-left: -10px;
+				scrollbar-width: thin;
 
 				> .no-transactions-placeholder {
 					height: 100%;
@@ -611,6 +622,11 @@
 			background-color: var(--gray-50);
 		}
 
+		&.invoice-selected {
+			background-color: var(--control-bg);
+		}
+
+		> .invoice-name-customer,
 		> .invoice-name-date {
 			display: flex;
 			flex-direction: column;
@@ -630,6 +646,21 @@
 			}
 		}
 
+		> .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;
@@ -650,6 +681,18 @@
 				justify-content: right;
 			}
 		}
+
+		> .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/pos_item_cart.js

@@ -342,7 +342,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
@@ -439,7 +445,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(
@@ -447,7 +453,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)}">
@@ -867,7 +873,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({
@@ -886,8 +892,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-name">${customer_name}</div>
-						<div class="customer-desc"></div>
+						<div class="customer-desc">${customer}</div>
 					</div>
 				</div>
 				<div class="customer-fields-container">
@@ -896,7 +902,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>`);
@@ -1005,7 +1014,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) => {
@@ -1027,7 +1036,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]}">