seQura / 3.1.1

seQura v3.1.1

sequra / assets / js / src / page / checkout.js

checkout.js in seQura 3.1.1, at assets/js/src/page/checkout.js

164 lines 6.2 KB

Raw Download Zip

1	(function () {
2	const ClassicCheckout = {
3
4	SQ_PAYMENT_METHOD_ID: 'payment_method_sequra',
5
6	init: function () {
7	if ('undefined' !== typeof SeQuraCheckout && SeQuraCheckout.isBlockCheckout) {
8	return
9	}
10
11	this.bindEvents();
12
13	if (this.isJQueryActive()) {
14	jQuery(document.body).on('updated_checkout', e => {
15	this.bindEvents()
16	});
17	}
18	},
19
20	/**
21	* Save selected SeQura payment method in the context.
22	* @param {string\|null} id
23	*/
24	saveCheckedPaymentOpt: function (id) {
25	if ('undefined' === typeof SeQuraCheckout) {
26	return;
27	}
28	SeQuraCheckout.selectedPaymentMethod = id;
29	},
30
31	/**
32	* Get selected SeQura payment method from the context.
33	* @returns {string\|null}
34	*/
35	getCheckedPaymentOpt: function () {
36	if ('undefined' === typeof SeQuraCheckout) {
37	return null
38	}
39	return SeQuraCheckout.selectedPaymentMethod;
40	},
41
42	checkSqProductOption: function (sqProductOptions) {
43	let selectedPaymentMethod = this.getCheckedPaymentOpt();
44
45	if (selectedPaymentMethod && !document.querySelector(`#${selectedPaymentMethod}`)) {
46	selectedPaymentMethod = null;
47	this.saveCheckedPaymentOpt(selectedPaymentMethod);
48	}
49
50	sqProductOptions.forEach((sqProductOption, i) => {
51	let checked = sqProductOption.id === selectedPaymentMethod;
52	if (i === 0 && !selectedPaymentMethod) {
53	checked = true;
54	this.saveCheckedPaymentOpt(sqProductOption.id);
55	}
56	sqProductOption.checked = checked;
57	});
58	},
59
60	/**
61	* Uncheck all SeQura payment options and reset the selected one.
62	*/
63	uncheckSqOptions: function (sqProductOptions) {
64	this.saveCheckedPaymentOpt(null);
65	sqProductOptions.forEach(sqProductOption => sqProductOption.checked = false);
66	},
67
68	/**
69	* Select SeQura payment method and option based on the current context.
70	*/
71	maybeSelectSeQura: function (sqPaymentMethodInput, sqProductOptions, paymentMethods) {
72	const isChecked = sqPaymentMethodInput && sqPaymentMethodInput.checked;
73	const optionChecked = this.getCheckedPaymentOpt();
74	if (!isChecked && !optionChecked) {
75	return;
76	}
77
78	this.updateCheckedPaymentMethods(paymentMethods);
79	this.checkSqProductOption(sqProductOptions);
80	},
81
82	removeInputRadioClass: function (sqPaymentMethodInput) {
83	if (sqPaymentMethodInput) {
84	sqPaymentMethodInput.classList.remove('input-radio');
85	}
86	},
87
88	/**
89	* Watch for changes in the WooCommerce payment methods
90	* and uncheck SeQura options if another payment method is selected.
91	*/
92	addPaymentMethodChangeListener: function (paymentMethods, sqProductOptions) {
93	paymentMethods.forEach(paymentMethod => {
94	paymentMethod.addEventListener('change', e => {
95	if (e.target.id !== this.SQ_PAYMENT_METHOD_ID && e.target.checked) {
96	this.uncheckSqOptions(sqProductOptions);
97	}
98	});
99	});
100	},
101
102	updateCheckedPaymentMethods: function (paymentMethods, emitEvent = false) {
103	paymentMethods.forEach(paymentMethod => {
104	const checked = paymentMethod.id === this.SQ_PAYMENT_METHOD_ID;
105	if (checked === paymentMethod.checked) {
106	return;
107	}
108	paymentMethod.checked = checked;
109
110	if (emitEvent) {
111	if (this.isJQueryActive()) {
112	jQuery(paymentMethod).trigger('change');
113
114	if (paymentMethod.id === this.SQ_PAYMENT_METHOD_ID && paymentMethod.checked) {
115	// This refreshes the complete order button text.
116	jQuery(paymentMethod).trigger('click');
117	}
118	} else {
119	paymentMethod.dispatchEvent(new Event('change'));
120	}
121	}
122	})
123	},
124
125	/**
126	* Watch for changes in the SeQura product options selection
127	* to save the selected payment method in the context and
128	* trigger proper events.
129	*/
130	addSqProductOptionChangeListener: function (sqProductOptions, paymentMethods) {
131	sqProductOptions.forEach(sqProductOption => sqProductOption.addEventListener('change', e => {
132	if (!e.target.checked) {
133	return
134	}
135
136	this.saveCheckedPaymentOpt(sqProductOption.id);
137	this.updateCheckedPaymentMethods(paymentMethods, true);
138
139	if (this.isJQueryActive()) {
140	jQuery(document.body).trigger('payment_method_selected');
141	}
142	}));
143	},
144
145	bindEvents: function () {
146	const sqProductOptions = document.querySelectorAll('.sequra-payment-method__input');
147	const paymentMethods = document.querySelectorAll('[name="payment_method"]');
148	const sqPaymentMethodInput = document.getElementById(this.SQ_PAYMENT_METHOD_ID);
149
150	this.removeInputRadioClass(sqPaymentMethodInput);
151	this.maybeSelectSeQura(sqPaymentMethodInput, sqProductOptions, paymentMethods);
152	this.addPaymentMethodChangeListener(paymentMethods, sqProductOptions);
153	this.addSqProductOptionChangeListener(sqProductOptions, paymentMethods);
154
155	if ('undefined' !== typeof Sequra && 'function' === typeof Sequra.refreshComponents && 'function' === typeof Sequra.onLoad) {
156	Sequra.onLoad(() => Sequra.refreshComponents());
157	}
158	},
159
160	isJQueryActive: () => 'undefined' !== typeof jQuery,
161	}
162
163	document.addEventListener('DOMContentLoaded', () => ClassicCheckout.init());
164	})();