← All changes | assets/src/js/frontend/checkout.js +202 -199 4.3.8 → 4.4.9 View file →

		@@ -1,199 +1,202 @@
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		-};
	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	+};