seQura / 3.2.2

seQura v3.2.2

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

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

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