← All changes | square/js/action.js +66 -25 6.25 → trunk View file →

		@@ -7,8 +7,64 @@
7	7	jQuery( actions ).on( 'change', '.frm_trans_type', onToggleSub );
8	8
9	9	const { __ } = wp.i18n;
10	10
	11	+ function updateGatewaySettingsVisibility( settings ) {
	12	+ const typeDropdown = settings.querySelector( 'select.frm_trans_type' );
	13	+ if ( ! typeDropdown ) {
	14	+ return;
	15	+ }
	16	+
	17	+ if ( 'recurring' === typeDropdown.value ) {
	18	+ const activeGateways = Array.from( settings.querySelectorAll( '[name*="[post_content][gateway]"]:checked' ) ).map( function( el ) {
	19	+ return el.value;
	20	+ } );
	21	+
	22	+ settings.querySelectorAll( '.frm_trans_sub_opts' ).forEach(
	23	+ function( subOpts ) {
	24	+ // Check if this setting has a show_* class for any active gateway
	25	+ const hasActiveGatewayClass = Array.from( subOpts.classList ).some( function( className ) {
	26	+ return activeGateways.some( function( gateway ) {
	27	+ return className === `show_${ gateway }`;
	28	+ } );
	29	+ } );
	30	+
	31	+ if ( hasActiveGatewayClass ) {
	32	+ subOpts.classList.remove( 'frm_hidden' );
	33	+ if ( subOpts.classList.contains( 'frm_grid_container' ) ) {
	34	+ subOpts.style.display = 'grid';
	35	+ }
	36	+ } else {
	37	+ // Check if it has any show_* class for a different gateway
	38	+ const hasAnyGatewayClass = Array.from( subOpts.classList ).some( function( className ) {
	39	+ return className.startsWith( 'show_' );
	40	+ } );
	41	+
	42	+ if ( hasAnyGatewayClass ) {
	43	+ // Hide if it has a show_* class but not for any active gateway
	44	+ subOpts.classList.add( 'frm_hidden' );
	45	+ subOpts.style.display = 'none';
	46	+ } else {
	47	+ // Show if it has no show_* class (shared setting)
	48	+ subOpts.classList.remove( 'frm_hidden' );
	49	+ if ( subOpts.classList.contains( 'frm_grid_container' ) ) {
	50	+ subOpts.style.display = 'grid';
	51	+ }
	52	+ }
	53	+ }
	54	+ }
	55	+ );
	56	+ return;
	57	+ }
	58	+
	59	+ settings.querySelectorAll( '.frm_trans_sub_opts' ).forEach(
	60	+ function( subOpts ) {
	61	+ subOpts.classList.add( 'frm_hidden' );
	62	+ subOpts.style.display = 'none';
	63	+ }
	64	+ );
	65	+ }
	66	+
11	67	function onGatewayToggle( { gateway, settings, checked } ) {
12	68	if ( 'square' === gateway && checked ) {
13	69	syncRepeat( settings.get( 0 ) );
14	70	}
		@@ -14,16 +70,9 @@
14	70	}
15	71
16	72	syncCurrency( gateway, settings.get( 0 ) );
17	73
18		- const typeDropdown = settings.get( 0 ).querySelector( 'select.frm_trans_type' );
19		- if ( typeDropdown && 'recurring' !== typeDropdown.value ) {
20		- settings.get( 0 ).querySelectorAll( '.frm_trans_sub_opts' ).forEach(
21		- function( subOpts ) {
22		- subOpts.style.display = 'none';
23		- }
24		- );
25		- }
	74	+ updateGatewaySettingsVisibility( settings.get( 0 ) );
26	75
27	76	const captureSetting = settings.get( 0 ).querySelector( '[name*="[post_content][capture]"]' );
28	77	if ( captureSetting ) {
29	78	const wrapper = captureSetting.closest( '.frm_gateway_no_recur' );
		@@ -29,11 +78,8 @@
29	78	const wrapper = captureSetting.closest( '.frm_gateway_no_recur' );
30	79	if ( wrapper ) {
31	80	if ( 'square' === gateway ) {
32	81	wrapper.style.display = 'none';
33		- } else if ( 'recurring' !== typeDropdown.value ) {
34		- // Capture appearing with Stripe selected and recurring selected.
35		- wrapper.style.removeProperty( 'display' );
36	82	}
37	83	}
38	84	}
39	85	}
		@@ -47,8 +93,10 @@
47	93	const squareGatewayOption = settings.querySelector( '[name*="[post_content][gateway]"][value="square"]' );
48	94	if ( squareGatewayOption?.checked ) {
49	95	syncRepeat( settings );
50	96	}
	97	+
	98	+ updateGatewaySettingsVisibility( settings );
51	99	}
52	100
53	101	function onToggleSub() {
54	102	const target = this;
		@@ -53,17 +101,9 @@
53	101	function onToggleSub() {
54	102	const target = this;
55	103	setTimeout( function() {
56	104	const settings = target.closest( '.frm_form_action_settings' );
57		- const squareIsActive = settings.querySelector( '[name*="[post_content][gateway]"][value="square"]' ).checked;
58		-
59		- settings.querySelectorAll( '.frm_trans_sub_opts' ).forEach(
60		- function( subOpts ) {
61		- if ( subOpts.classList.contains( 'show_stripe' ) && ! subOpts.classList.contains( 'show_square' ) && squareIsActive ) {
62		- subOpts.style.display = 'none';
63		- }
64		- }
65		- );
	105	+ updateGatewaySettingsVisibility( settings );
66	106	}, 0 );
67	107	}
68	108
69	109	function syncRepeat( settings ) {
		@@ -116,9 +156,9 @@
116	156	if ( selectedOption && selectedOption.value === optionKey ) {
117	157	option.selected = true;
118	158	}
119	159
120		- newDropdown.appendChild( option );
	160	+ newDropdown.append( option );
121	161	}
122	162
123	163	intervalCountSetting.parentNode.insertBefore( newDropdown, intervalCountSetting.nextSibling );
124	164
		@@ -126,20 +166,21 @@
126	166	clone.querySelector( '[name*="[post_content][interval]"]' )?.remove();
127	167	settingWrapper.parentNode.insertBefore( clone, settingWrapper.nextSibling );
128	168
129	169	const label = newDropdown.closest( '.frm_trans_sub_opts' )?.querySelector( 'label' );
130		- if ( label && label.textContent.includes( 'Repeat Every' ) ) {
	170	+ if ( label?.textContent.includes( 'Repeat Every' ) ) {
131	171	label.textContent = 'Repeat';
132	172	}
133	173
134	174	newDropdown.closest( '.frm_trans_sub_opts' )?.classList.add( 'show_square' );
	175	+ newDropdown.closest( '.frm_trans_sub_opts' )?.classList.remove( 'frm_hidden' );
135	176
136	177	const stripeLabel = intervalCount.closest( '.frm_trans_sub_opts' )?.querySelector( 'label' );
137		- if ( stripeLabel && stripeLabel.textContent.includes( 'Repeat Every' ) ) {
	178	+ if ( stripeLabel?.textContent.includes( 'Repeat Every' ) ) {
138	179	stripeLabel.textContent = 'Repeat';
139	180	}
140	181
141		- intervalCount.closest( '.frm_trans_sub_opts' )?.classList.add( 'show_stripe', 'frm_hidden' );
	182	+ intervalCount.closest( '.frm_trans_sub_opts' )?.classList.add( 'show_stripe', 'show_paypal', 'frm_hidden' );
142	183	}
143	184
144	185	function syncCurrency( gateway, settings ) {
145	186	// Sync currency setting.
		@@ -167,9 +208,9 @@
167	208	option = document.createElement( 'option' );
168	209	option.value = 'square';
169	210	option.textContent = 'Use Square Merchant Currency';
170	211	option.classList.add( 'square-currency' );
171		- currencySetting.appendChild( option );
	212	+ currencySetting.append( option );
172	213
173	214	currencySetting.value = option.value;
174	215	currencySetting.disabled = true;
175	216	} else {