brotherton-erpnext/erpnext/selling/page/point_of_sale/pos_payment.js

{% include "erpnext/selling/page/point_of_sale/pos_number_pad.js" %}

erpnext.PointOfSale.Payment = class {
	constructor({ events, wrapper }) {
		this.wrapper = wrapper;
		this.events = events;

		this.init_component();
	}

	init_component() {
		this.prepare_dom();
		this.initialize_numpad();
		this.bind_events();
		this.attach_shortcuts();
		
	}

	prepare_dom() {
		this.wrapper.append(
			`<section class="col-span-6 flex shadow rounded payment-section bg-white mx-h-70 h-100 d-none">
				<div class="flex flex-col p-16 pt-8 pb-8 w-full">
					<div class="text-grey mb-6 payment-section no-select pointer">
						PAYMENT METHOD<span class="octicon octicon-chevron-down collapse-indicator"></span>
					</div>
					<div class="payment-modes flex flex-wrap"></div>
					<div class="invoice-details-section"></div>
					<div class="flex mt-auto justify-center w-full">
							<div class="flex flex-col justify-center flex-1 ml-4">
							<div class="flex w-full">
								<div class="totals-remarks items-end justify-end flex flex-1">
									<div class="remarks text-md-0 text-grey mr-auto"></div>
									<div class="totals flex justify-end pt-4"></div>
								</div>
								<div class="number-pad w-40 mb-4 ml-8 d-none"></div>
							</div>
							<div class="flex items-center justify-center mt-4 submit-order h-16 w-full rounded bg-primary text-md text-white no-select pointer text-bold">
								Complete Order
							</div>
							<div class="order-time flex items-center justify-end mt-2 pt-2 pb-2 w-full text-md-0 text-grey no-select pointer d-none"></div>
						</div>
					</div>
				</div>
			</section>`
		)
		this.$component = this.wrapper.find('.payment-section');
		this.$payment_modes = this.$component.find('.payment-modes');
		this.$totals_remarks = this.$component.find('.totals-remarks');
		this.$totals = this.$component.find('.totals');
		this.$remarks = this.$component.find('.remarks');
		this.$numpad = this.$component.find('.number-pad');
		this.$invoice_details_section = this.$component.find('.invoice-details-section');
	}

	make_invoice_fields_control() {
		frappe.db.get_doc("POS Settings", undefined).then((doc) => {
			const fields = doc.invoice_fields;
			if (!fields.length) return;

			this.$invoice_details_section.html(
				`<div class="text-grey pb-6 mt-2 pointer no-select">
					ADDITIONAL INFORMATION<span class="octicon octicon-chevron-down collapse-indicator"></span>
				</div>
				<div class="invoice-fields grid grid-cols-2 gap-4 mb-6 d-none"></div>`
			);
			this.$invoice_fields = this.$invoice_details_section.find('.invoice-fields');
			const frm = this.events.get_frm();

			fields.forEach(df => {
				this.$invoice_fields.append(
					`<div class="invoice_detail_field ${df.fieldname}-field" data-fieldname="${df.fieldname}"></div>`
				);
				let df_events = {
					onchange: function() { frm.set_value(this.df.fieldname, this.value); }
				}
				if (df.fieldtype == "Button") {
					df_events = {
						click: function() {
							if (frm.script_manager.has_handlers(df.fieldname, frm.doc.doctype)) {
								frm.script_manager.trigger(df.fieldname, frm.doc.doctype, frm.doc.docname);
							}
						}
					}
				}

				this[`${df.fieldname}_field`] = frappe.ui.form.make_control({
					df: { 
						...df,
						...df_events
					},
					parent: this.$invoice_fields.find(`.${df.fieldname}-field`),
					render_input: true,
				});
				this[`${df.fieldname}_field`].set_value(frm.doc[df.fieldname]);
			})
		});
	}

	initialize_numpad() {
		const me = this;
		this.number_pad = new erpnext.PointOfSale.NumberPad({
			wrapper: this.$numpad,
			events: {
				numpad_event: function($btn) {
					me.on_numpad_clicked($btn);
				}
			},
			cols: 3,
			keys: [
				[ 1, 2, 3 ],
				[ 4, 5, 6 ],
				[ 7, 8, 9 ],
				[ '.', 0, 'Delete' ]
			],
		})

		this.numpad_value = '';
	}

	on_numpad_clicked($btn) {
		const me = this;
		const button_value = $btn.attr('data-button-value');

		highlight_numpad_btn($btn);
		this.numpad_value = button_value === 'delete' ? this.numpad_value.slice(0, -1) : this.numpad_value + button_value;
		this.selected_mode.$input.get(0).focus();
		this.selected_mode.set_value(this.numpad_value);

		function highlight_numpad_btn($btn) {
			$btn.addClass('shadow-inner bg-selected');
			setTimeout(() => {
				$btn.removeClass('shadow-inner bg-selected');
			}, 100);
		}
	}

	bind_events() {
		const me = this;

		this.$payment_modes.on('click', '.mode-of-payment', function(e) {
			const mode_clicked = $(this);
			// if clicked element doesn't have .mode-of-payment class then return
			if (!$(e.target).is(mode_clicked)) return;

			const mode = mode_clicked.attr('data-mode');

			// hide all control fields and shortcuts
			$(`.mode-of-payment-control`).addClass('d-none');
			$(`.cash-shortcuts`).addClass('d-none');
			me.$payment_modes.find(`.pay-amount`).removeClass('d-none');
			me.$payment_modes.find(`.loyalty-amount-name`).addClass('d-none');

			// remove highlight from all mode-of-payments
			$('.mode-of-payment').removeClass('border-primary');

			if (mode_clicked.hasClass('border-primary')) {
				// 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');
				mode_clicked.find('.mode-of-payment-control').removeClass('d-none');
				mode_clicked.find('.cash-shortcuts').removeClass('d-none');
				me.$payment_modes.find(`.${mode}-amount`).addClass('d-none');
				me.$payment_modes.find(`.${mode}-name`).removeClass('d-none');
				me.toggle_numpad(true);

				me.selected_mode = me[`${mode}_control`];
				const doc = me.events.get_frm().doc;
				me.selected_mode?.$input?.get(0).focus();
				!me.selected_mode?.get_value() ? me.selected_mode?.set_value(doc.grand_total - doc.paid_amount) : '';
			}
		})

		frappe.realtime.on("process_phone_payment", function(data) {
			frappe.dom.unfreeze();
			cur_frm.reload_doc();
			let message = data["ResultDesc"];
			let title = __("Payment Failed");

			if (data["ResultCode"] == 0) {
				title = __("Payment Received");
				$('.btn.btn-xs.btn-default[data-fieldname=request_for_payment]').html(`Payment Received`)
				me.events.submit_invoice();
			}

			frappe.msgprint({
				"message": message,
				"title": title
			});
		});

		this.$payment_modes.on('click', '.shortcut', function(e) {
			const value = $(this).attr('data-value');
			me.selected_mode.set_value(value);
		})

		// this.$totals_remarks.on('click', '.remarks', () => {
		// 	this.toggle_remarks_control();
		// })

		this.$component.on('click', '.submit-order', () => {
			const doc = this.events.get_frm().doc;
			const paid_amount = doc.paid_amount;
			const items = doc.items;

			if (paid_amount == 0 || !items.length) {
				const message = items.length ? __("You cannot submit the order without payment.") : __("You cannot submit empty order.")
				frappe.show_alert({ message, indicator: "orange" });
				frappe.utils.play_sound("error");
				return;
			}

			this.events.submit_invoice();
		})

		frappe.ui.form.on('POS Invoice', 'paid_amount', (frm) => {
			this.update_totals_section(frm.doc);

			// need to re calculate cash shortcuts after discount is applied
			const is_cash_shortcuts_invisible = this.$payment_modes.find('.cash-shortcuts').hasClass('d-none');
			this.attach_cash_shortcuts(frm.doc);
			!is_cash_shortcuts_invisible && this.$payment_modes.find('.cash-shortcuts').removeClass('d-none');
		})

		frappe.ui.form.on('POS Invoice', 'loyalty_amount', (frm) => {
			const formatted_currency = format_currency(frm.doc.loyalty_amount, frm.doc.currency);
			this.$payment_modes.find(`.loyalty-amount-amount`).html(formatted_currency);
		});

		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(' ', '_').toLowerCase();
			if (this[`${mode}_control`] && this[`${mode}_control`].get_value() != default_mop.amount) {
				this[`${mode}_control`].set_value(default_mop.amount);
			}
		});

		this.$component.on('click', '.invoice-details-section', function(e) {
			if ($(e.target).closest('.invoice-fields').length) return;

			me.$payment_modes.addClass('d-none');
			me.$invoice_fields.toggleClass("d-none");
			me.toggle_numpad(false);
		});
		this.$component.on('click', '.payment-section', () => {
			this.$invoice_fields.addClass("d-none");
			this.$payment_modes.toggleClass('d-none');
			this.toggle_numpad(true);
		})
	}

	attach_shortcuts() {
		frappe.ui.keys.on("ctrl+enter", () => {
			const payment_is_visible = this.$component.is(":visible");
			const active_mode = this.$payment_modes.find(".border-primary");
			if (payment_is_visible && active_mode.length) {
				this.$component.find('.submit-order').click();
			}
		});

		frappe.ui.keys.on("tab", () => {
			const payment_is_visible = this.$component.is(":visible");
			const mode_of_payments = Array.from(this.$payment_modes.find(".mode-of-payment")).map(m => $(m).attr("data-mode"));
			let active_mode = this.$payment_modes.find(".border-primary");
			active_mode = active_mode.length ? active_mode.attr("data-mode") : undefined;

			if (!active_mode) return;

			const mode_index = mode_of_payments.indexOf(active_mode);
			const next_mode_index = (mode_index + 1) % mode_of_payments.length;
			const next_mode_to_be_clicked = this.$payment_modes.find(`.mode-of-payment[data-mode="${mode_of_payments[next_mode_index]}"]`);

			if (payment_is_visible && mode_index != next_mode_index) {
				next_mode_to_be_clicked.click();
			}
		});
	}

	toggle_numpad(show) {
		if (show) {
			this.$numpad.removeClass('d-none');
			this.$remarks.addClass('d-none');
			this.$totals_remarks.addClass('w-60 justify-center').removeClass('justify-end w-full');
		} else {
			this.$numpad.addClass('d-none');
			this.$remarks.removeClass('d-none');
			this.$totals_remarks.removeClass('w-60 justify-center').addClass('justify-end w-full');
		}
	}

	render_payment_section() {
		this.render_payment_mode_dom();
		this.make_invoice_fields_control();
		this.update_totals_section();
	}

	edit_cart() {
		this.events.toggle_other_sections(false);
		this.toggle_component(false);
	}

	checkout() {
		this.events.toggle_other_sections(true);
		this.toggle_component(true);

		this.render_payment_section();
	}

	toggle_remarks_control() {
		if (this.$remarks.find('.frappe-control').length) {
			this.$remarks.html('+ Add Remark');
		} else {
			this.$remarks.html('');
			this[`remark_control`] = frappe.ui.form.make_control({
				df: {
					label: __('Remark'),
					fieldtype: 'Data',
					onchange: function() {}
				},
				parent: this.$totals_remarks.find(`.remarks`),
				render_input: true,
			});
			this[`remark_control`].set_value('');
		}
	}

	render_payment_mode_dom() {
		const doc = this.events.get_frm().doc;
		const payments = doc.payments;
		const currency = doc.currency;

		this.$payment_modes.html(
		   `${
			   payments.map((p, i) => {
				const mode = p.mode_of_payment.replace(' ', '_').toLowerCase();
				const payment_type = p.type;
				const margin = i % 2 === 0 ? 'pr-2' : 'pl-2';
				const amount = p.amount > 0 ? format_currency(p.amount, currency) : '';

				return (
					`<div class="w-half ${margin} bg-white">
						<div class="mode-of-payment rounded border border-grey text-grey text-md
								mb-4 p-8 pt-4 pb-4 no-select pointer" data-mode="${mode}" data-payment-type="${payment_type}">
							${p.mode_of_payment}
							<div class="${mode}-amount pay-amount inline float-right text-bold">${amount}</div>
							<div class="${mode} mode-of-payment-control mt-4 flex flex-1 items-center d-none"></div>
						</div>
					</div>`
				)
			   }).join('')
		   }`
		)

		payments.forEach(p => {
			const mode = p.mode_of_payment.replace(' ', '_').toLowerCase();
			const me = this;
			this[`${mode}_control`] = frappe.ui.form.make_control({
				df: {
					label: __(`${p.mode_of_payment}`),
					fieldtype: 'Currency',
					placeholder: __(`Enter ${p.mode_of_payment} amount.`),
					onchange: function() {
						if (this.value || this.value == 0) {
							frappe.model.set_value(p.doctype, p.name, 'amount', flt(this.value))
								.then(() => me.update_totals_section());

							const formatted_currency = format_currency(this.value, currency);
							me.$payment_modes.find(`.${mode}-amount`).html(formatted_currency);
						}
					}
				},
				parent: this.$payment_modes.find(`.${mode}.mode-of-payment-control`),
				render_input: true,
			});
			this[`${mode}_control`].toggle_label(false);
			this[`${mode}_control`].set_value(p.amount);

			if (p.default) {
				setTimeout(() => {
					this.$payment_modes.find(`.${mode}.mode-of-payment-control`).parent().click();
				}, 500);
			}
		})

		this.render_loyalty_points_payment_mode();
		
		this.attach_cash_shortcuts(doc);
	}

	attach_cash_shortcuts(doc) {
		const grand_total = doc.grand_total;
		const currency = doc.currency;

		const shortcuts = this.get_cash_shortcuts(flt(grand_total));

		this.$payment_modes.find('.cash-shortcuts').remove();
		this.$payment_modes.find('[data-payment-type="Cash"]').find('.mode-of-payment-control').after(
			`<div class="cash-shortcuts grid grid-cols-3 gap-2 flex-1 text-center text-md-0 mb-2 d-none">
				${
					shortcuts.map(s => {
						return `<div class="shortcut rounded bg-light-grey text-dark-grey pt-2 pb-2 no-select pointer" data-value="${s}">
									${format_currency(s, currency)}
								</div>`
					}).join('')
				}
			</div>`
		)
	}

	get_cash_shortcuts(grand_total) {
		let steps = [1, 5, 10];
		const digits = String(Math.round(grand_total)).length;

		steps = steps.map(x => x * (10 ** (digits - 2)));

		const get_nearest = (amount, x) => {
			let nearest_x = Math.ceil((amount / x)) * x;
			return nearest_x === amount ? nearest_x + x : nearest_x;
		}

		return steps.reduce((finalArr, x) => {
			let nearest_x = get_nearest(grand_total, x);
			nearest_x = finalArr.indexOf(nearest_x) != -1 ? nearest_x + x : nearest_x;
			return [...finalArr, nearest_x];
		}, []);	
	}

	render_loyalty_points_payment_mode() {
		const me = this;
		const doc = this.events.get_frm().doc;
		const { loyalty_program, loyalty_points, conversion_factor } = this.events.get_customer_details();

		this.$payment_modes.find(`.mode-of-payment[data-mode="loyalty-amount"]`).parent().remove();
		
		if (!loyalty_program) return;

		let description, read_only, max_redeemable_amount;
		if (!loyalty_points) {
			description = __(`You don't have enough points to redeem.`);
			read_only = true;
		} else {
			max_redeemable_amount = flt(flt(loyalty_points) * flt(conversion_factor), precision("loyalty_amount", doc))
			description = __(`You can redeem upto ${format_currency(max_redeemable_amount)}.`);
			read_only = false;
		}

		const margin = this.$payment_modes.children().length % 2 === 0 ? 'pr-2' : 'pl-2';
		const amount = doc.loyalty_amount > 0 ? format_currency(doc.loyalty_amount, doc.currency) : '';
		this.$payment_modes.append(
			`<div class="w-half ${margin} bg-white">
				<div class="mode-of-payment rounded border border-grey text-grey text-md
						mb-4 p-8 pt-4 pb-4 no-select pointer" data-mode="loyalty-amount" data-payment-type="loyalty-amount">
					Redeem Loyalty Points
					<div class="loyalty-amount-amount pay-amount inline float-right text-bold">${amount}</div>
					<div class="loyalty-amount-name inline float-right text-bold text-md-0 d-none">${loyalty_program}</div>
					<div class="loyalty-amount mode-of-payment-control mt-4 flex flex-1 items-center d-none"></div>
				</div>
			</div>`
		)

		this['loyalty-amount_control'] = frappe.ui.form.make_control({
			df: {
				label: __('Redeem Loyalty Points'),
				fieldtype: 'Currency',
				placeholder: __(`Enter amount to be redeemed.`),
				options: 'company:currency',
				read_only,
				onchange: async function() {
					if (!loyalty_points) return;

					if (this.value > max_redeemable_amount) {
						frappe.show_alert({
							message: __(`You cannot redeem more than ${format_currency(max_redeemable_amount)}.`),
							indicator: "red"
						});
						frappe.utils.play_sound("submit");
						me['loyalty-amount_control'].set_value(0);
						return;
					}
					const redeem_loyalty_points = this.value > 0 ? 1 : 0;
					await frappe.model.set_value(doc.doctype, doc.name, 'redeem_loyalty_points', redeem_loyalty_points);
					frappe.model.set_value(doc.doctype, doc.name, 'loyalty_points', parseInt(this.value / conversion_factor));
				},
				description
			},
			parent: this.$payment_modes.find(`.loyalty-amount.mode-of-payment-control`),
			render_input: true,
		});
		this['loyalty-amount_control'].toggle_label(false);

		// this.render_add_payment_method_dom();
	}

	render_add_payment_method_dom() {
		const docstatus = this.events.get_frm().doc.docstatus;
		if (docstatus === 0)
			this.$payment_modes.append(
				`<div class="w-full pr-2">
					<div class="add-mode-of-payment w-half text-grey mb-4 no-select pointer">+ Add Payment Method</div>
				</div>`
			)
	}

	update_totals_section(doc) {
		if (!doc) doc = this.events.get_frm().doc;
		const paid_amount = doc.paid_amount;
		const remaining = doc.grand_total - doc.paid_amount;
		const change = doc.change_amount || remaining <= 0 ? -1 * remaining : undefined;
		const currency = doc.currency
		const label = change ? __('Change') : __('To Be Paid');

		this.$totals.html(
			`<div>
				<div class="pr-8 border-r-grey">Paid Amount</div>
				<div class="pr-8 border-r-grey text-bold text-2xl">${format_currency(paid_amount, currency)}</div>
			</div>
			<div>
				<div class="pl-8">${label}</div>
				<div class="pl-8 text-green-400 text-bold text-2xl">${format_currency(change || remaining, currency)}</div>
			</div>`
		)
	}

	toggle_component(show) {
		show ? this.$component.removeClass('d-none') : this.$component.addClass('d-none');
	}
 }