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

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

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

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

200 lines 5.4 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	const elPaymentMethodForm = el.querySelector( `.${ window.lpCheckout.classPaymentMethodForm }` );
119	if ( ! elPaymentMethodForm ) {
120	return;
121	}
122
123	if ( elPaymentMethod !== el ) {
124	elPaymentMethodForm.style.display = 'none';
125	} else {
126	elPaymentMethodForm.style.display = 'block';
127	}
128	} );
129	},
130	checkEmailGuest: ( e ) => {
131	const target = e.target;
132	if ( target.id !== 'guest_email' ) {
133	return;
134	}
135
136	if ( ! window.lpCheckout.isEmail( target.value ) ) {
137	return;
138	}
139
140	target.classList.add( 'loading' );
141
142	if ( window.lpCheckout.timeOutCheckEmail !== null ) {
143	clearTimeout( window.lpCheckout.timeOutCheckEmail );
144	}
145
146	window.lpCheckout.timeOutCheckEmail = setTimeout( () => {
147	const callBack = {
148	success: ( response ) => {
149	const { message, data, status } = response;
150	if ( 'success' === status ) {
151	const content = data.content \|\| '';
152	const elGuestOutput = document.querySelector( '.lp-guest-checkout-output' );
153	if ( elGuestOutput ) {
154	elGuestOutput.remove();
155	}
156
157	target.insertAdjacentHTML( 'afterend', content );
158	} else {
159	window.lpCheckout.showErrors( target.closest( 'form' ), status, message );
160	}
161	},
162	error: ( error ) => {
163	window.lpCheckout.showErrors( target.closest( 'form' ), 'error', error );
164	},
165	completed: () => {
166	target.classList.remove( 'loading' );
167	},
168	};
169
170	window.lpCheckout.fetchAPI(
171	window.location.href,
172	{
173	'lp-ajax': 'checkout-user-email-exists',
174	email: target.value,
175	},
176	callBack,
177	);
178	}, 500 );
179	},
180	removeMessage: () => {
181	const lpMessages = document.querySelectorAll( '.learn-press-message' );
182
183	if ( ! lpMessages ) {
184	return;
185	}
186
187	lpMessages.forEach( ( el ) => {
188	el.remove();
189	} );
190	},
191	showErrors: ( form, status, message ) => {
192	const mesHtml = `<div class="learn-press-message ${ status }">${ message }</div>`;
193	form.insertAdjacentHTML( 'afterbegin', mesHtml );
194	form.scrollIntoView();
195	},
196	isEmail: ( email ) => {
197	return new RegExp( '^[-!#$%&\'+\\./0-9=?A-Z^_`a-z{\|}~]+@[-!#$%&\'+\\/0-9=?A-Z^_`a-z{\|}~]+\.[-!#$%&\'*+\\./0-9=?A-Z^_`a-z{\|}~]+$' ).test( email );
198	},
199	};
200