LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.8

LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.8

learnpress / assets / src / js / frontend / checkout.js

checkout.js in LearnPress – WordPress LMS Plugin for Create and Sell Online Courses 4.4.8, at assets/src/js/frontend/checkout.js

203 lines 5.5 KB

Raw Download Zip

1	/**
2	* File JS handling checkout page.
3	*/
4
5	import { lpAddQueryArgs, lpFetchAPI, lpAjaxParseJsonOld } from '../utils.js';
6
7	// Events
8	document.addEventListener( 'submit', ( e ) => {
9	window.lpCheckout.submit( e );
10	} );
11	document.addEventListener( 'change', ( e ) => {
12	window.lpCheckout.paymentSelect( e );
13	} );
14	document.addEventListener( 'keyup', ( e ) => {
15	window.lpCheckout.checkEmailGuest( e );
16	} );
17
18	window.lpCheckout = {
19	idFormCheckout: 'learn-press-checkout-form',
20	idBtnPlaceOrder: 'learn-press-checkout-place-order',
21	classPaymentMethod: 'lp-payment-method',
22	classPaymentMethodForm: 'payment-method-form',
23	timeOutCheckEmail: null,
24	fetchAPI: ( url, params, callBack ) => {
25	const option = { headers: {} };
26	if ( 0 !== parseInt( lpData.user_id ) ) {
27	option.headers[ 'X-WP-Nonce' ] = lpData.nonce;
28	}
29
30	const searchParams = new URLSearchParams();
31	Object.keys( params ).forEach( ( key ) => {
32	searchParams.append( key, params[ key ] );
33	} );
34
35	option.method = 'POST';
36	option.body = searchParams;
37
38	fetch( url, option )
39	.then( ( res ) => res.text() )
40	.then( ( data ) => {
41	data = lpAjaxParseJsonOld( data );
42	callBack.success( data );
43	} )
44	.finally( () => {
45	callBack.completed();
46	} )
47	.catch( ( err ) => callBack.error( err ) );
48	},
49	submit: ( e ) => {
50	const formCheckout = e.target;
51	if ( formCheckout.id !== window.lpCheckout.idFormCheckout ) {
52	return;
53	}
54
55	if ( formCheckout.classList.contains( 'processing' ) ) {
56	return;
57	}
58
59	e.preventDefault();
60
61	formCheckout.classList.add( 'processing' );
62	const btnSubmit = formCheckout.querySelector( 'button[type="submit"]' );
63	btnSubmit.disabled = true;
64
65	window.lpCheckout.removeMessage();
66	const elBtnPlaceOrder = document.getElementById( window.lpCheckout.idBtnPlaceOrder );
67
68	const urlHandle = new URL( lpCheckoutSettings.ajaxurl );
69	urlHandle.searchParams.set( 'lp-ajax', 'checkout' );
70
71	// get values from FormData
72	const formData = new FormData( formCheckout );
73	const dataSend = Object.fromEntries( Array.from( formData.keys(), ( key ) => {
74	const val = formData.getAll( key );
75
76	return [ key, val.length > 1 ? val : val.pop() ];
77	} ) );
78
79	elBtnPlaceOrder.classList.add( 'loading' );
80
81	const callBack = {
82	success: ( response ) => {
83	response = lpAjaxParseJsonOld( response );
84	const { message, result } = response;
85
86	if ( response.redirect ) {
87	window.location.href = response.redirect;
88	} else if ( 'success' !== result ) {
89	window.lpCheckout.showErrors( formCheckout, 'error', message );
90	}
91	},
92	error: ( error ) => {
93	window.lpCheckout.showErrors( formCheckout, 'error', error );
94	},
95	completed: () => {
96	elBtnPlaceOrder.classList.remove( 'loading' );
97	formCheckout.classList.remove( 'processing' );
98	btnSubmit.disabled = false;
99	},
100	};
101
102	window.lpCheckout.fetchAPI( urlHandle, dataSend, callBack );
103	},
104	paymentSelect: ( e ) => {
105	const target = e.target;
106	const elPaymentMethod = target.closest( `.${ window.lpCheckout.classPaymentMethod }` );
107	if ( ! elPaymentMethod ) {
108	return;
109	}
110
111	const elUlPaymentMethods = elPaymentMethod.closest( '.payment-methods' );
112	if ( ! elUlPaymentMethods ) {
113	return;
114	}
115
116	const elPaymentMethods = elUlPaymentMethods.querySelectorAll( `.${ window.lpCheckout.classPaymentMethod }` );
117	elPaymentMethods.forEach( ( el ) => {
118	el.classList.remove( 'selected' );
119	const elPaymentMethodForm = el.querySelector( `.${ window.lpCheckout.classPaymentMethodForm }` );
120	if ( ! elPaymentMethodForm ) {
121	return;
122	}
123
124	if ( elPaymentMethod !== el ) {
125	elPaymentMethodForm.style.display = 'none';
126	} else {
127	elPaymentMethodForm.style.display = 'block';
128	}
129	} );
130
131	elPaymentMethod.classList.add( 'selected' );
132	},
133	checkEmailGuest: ( e ) => {
134	const target = e.target;
135	if ( target.id !== 'guest_email' ) {
136	return;
137	}
138
139	if ( ! window.lpCheckout.isEmail( target.value ) ) {
140	return;
141	}
142
143	target.classList.add( 'loading' );
144
145	if ( window.lpCheckout.timeOutCheckEmail !== null ) {
146	clearTimeout( window.lpCheckout.timeOutCheckEmail );
147	}
148
149	window.lpCheckout.timeOutCheckEmail = setTimeout( () => {
150	const callBack = {
151	success: ( response ) => {
152	const { message, data, status } = response;
153	if ( 'success' === status ) {
154	const content = data.content \|\| '';
155	const elGuestOutput = document.querySelector( '.lp-guest-checkout-output' );
156	if ( elGuestOutput ) {
157	elGuestOutput.remove();
158	}
159
160	target.insertAdjacentHTML( 'afterend', content );
161	} else {
162	window.lpCheckout.showErrors( target.closest( 'form' ), status, message );
163	}
164	},
165	error: ( error ) => {
166	window.lpCheckout.showErrors( target.closest( 'form' ), 'error', error );
167	},
168	completed: () => {
169	target.classList.remove( 'loading' );
170	},
171	};
172
173	window.lpCheckout.fetchAPI(
174	window.location.href,
175	{
176	'lp-ajax': 'checkout-user-email-exists',
177	email: target.value,
178	},
179	callBack,
180	);
181	}, 500 );
182	},
183	removeMessage: () => {
184	const lpMessages = document.querySelectorAll( '.learn-press-message' );
185
186	if ( ! lpMessages ) {
187	return;
188	}
189
190	lpMessages.forEach( ( el ) => {
191	el.remove();
192	} );
193	},
194	showErrors: ( form, status, message ) => {
195	const mesHtml = `<div class="learn-press-message ${ status }">${ message }</div>`;
196	form.insertAdjacentHTML( 'afterbegin', mesHtml );
197	form.scrollIntoView();
198	},
199	isEmail: ( email ) => {
200	return new RegExp( '^[-!#$%&\'+\\./0-9=?A-Z^_`a-z{\|}~]+@[-!#$%&\'+\\/0-9=?A-Z^_`a-z{\|}~]+\.[-!#$%&\'*+\\./0-9=?A-Z^_`a-z{\|}~]+$' ).test( email );
201	},
202	};
203