fix: pos payment using non-default mode of payment (#44920)

* fix: pos payment using non-default mode of payment (#41108)

* fix: included css syntax

* refactor: created a function to sanitize the class name

* refactor: reusing method to sanitize class name

* refactor: function rename

erpnext/selling/page/point_of_sale/pos_payment.js

@@ -235,7 +235,7 @@ erpnext.PointOfSale.Payment = class {
 		frappe.ui.form.on("Sales Invoice Payment", "amount", (frm, cdt, cdn) => {
 			// for setting correct amount after loyalty points are redeemed
 			const default_mop = locals[cdt][cdn];
-			const mode = default_mop.mode_of_payment.replace(/ +/g, "_").toLowerCase();
+			const mode = this.sanitize_mode_of_payment(default_mop.mode_of_payment);
 			if (this[`${mode}_control`] && this[`${mode}_control`].get_value() != default_mop.amount) {
 				this[`${mode}_control`].set_value(default_mop.amount);
 			}
@@ -388,7 +388,7 @@ erpnext.PointOfSale.Payment = class {
 		this.$payment_modes.html(
 			`${payments
 				.map((p, i) => {
-					const mode = p.mode_of_payment.replace(/ +/g, "_").toLowerCase();
+					const mode = this.sanitize_mode_of_payment(p.mode_of_payment);
 					const payment_type = p.type;
 					const margin = i % 2 === 0 ? "pr-2" : "pl-2";
 					const amount = p.amount > 0 ? format_currency(p.amount, currency) : "";
@@ -407,7 +407,7 @@ erpnext.PointOfSale.Payment = class {
 		);
 
 		payments.forEach((p) => {
-			const mode = p.mode_of_payment.replace(/ +/g, "_").toLowerCase();
+			const mode = this.sanitize_mode_of_payment(p.mode_of_payment);
 			const me = this;
 			this[`${mode}_control`] = frappe.ui.form.make_control({
 				df: {
@@ -442,7 +442,7 @@ erpnext.PointOfSale.Payment = class {
 		const doc = this.events.get_frm().doc;
 		const payments = doc.payments;
 		payments.forEach((p) => {
-			const mode = p.mode_of_payment.replace(/ +/g, "_").toLowerCase();
+			const mode = this.sanitize_mode_of_payment(p.mode_of_payment);
 			if (p.default) {
 				setTimeout(() => {
 					this.$payment_modes.find(`.${mode}.mode-of-payment-control`).parent().click();
@@ -612,4 +612,12 @@ erpnext.PointOfSale.Payment = class {
 	toggle_component(show) {
 		show ? this.$component.css("display", "flex") : this.$component.css("display", "none");
 	}
+
+	sanitize_mode_of_payment(mode_of_payment) {
+		return mode_of_payment
+			.replace(/ +/g, "_")
+			.replace(/[^\p{L}\p{N}_-]/gu, "")
+			.replace(/^[^_a-zA-Z\p{L}]+/u, "")
+			.toLowerCase();
+	}
 };