seQura / 3.0.0

seQura v3.0.0

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

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

155 lines 5.7 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	} else {
114	paymentMethod.dispatchEvent(new Event('change'));
115	}
116	}
117	})
118	},
119
120	/**
121	* Watch for changes in the SeQura product options selection
122	* to save the selected payment method in the context and
123	* trigger proper events.
124	*/
125	addSqProductOptionChangeListener: function (sqProductOptions, paymentMethods) {
126	sqProductOptions.forEach(sqProductOption => sqProductOption.addEventListener('change', e => {
127	if (!e.target.checked) {
128	return
129	}
130
131	this.saveCheckedPaymentOpt(sqProductOption.id);
132	this.updateCheckedPaymentMethods(paymentMethods, true);
133
134	if (this.isJQueryActive()) {
135	jQuery(document.body).trigger('payment_method_selected');
136	}
137	}));
138	},
139
140	bindEvents: function () {
141	const sqProductOptions = document.querySelectorAll('.sequra-payment-method__input');
142	const paymentMethods = document.querySelectorAll('[name="payment_method"]');
143	const sqPaymentMethodInput = document.getElementById(this.SQ_PAYMENT_METHOD_ID);
144
145	this.removeInputRadioClass(sqPaymentMethodInput);
146	this.maybeSelectSeQura(sqPaymentMethodInput, sqProductOptions, paymentMethods);
147	this.addPaymentMethodChangeListener(paymentMethods, sqProductOptions);
148	this.addSqProductOptionChangeListener(sqProductOptions, paymentMethods);
149	},
150
151	isJQueryActive: () => 'undefined' !== typeof jQuery,
152	}
153
154	document.addEventListener('DOMContentLoaded', () => ClassicCheckout.init());
155	})();