| 1 |
( function() { |
| 2 |
const hookNamespace = 'formidable-square'; |
| 3 |
wp.hooks.addAction( 'frm_trans_toggled_gateway', hookNamespace, onGatewayToggle ); |
| 4 |
wp.hooks.addAction( 'frm_filled_form_action', hookNamespace, onFilledFormAction ); |
| 5 |
|
| 6 |
const actions = document.getElementById( 'frm_notification_settings' ); |
| 7 |
jQuery( actions ).on( 'change', '.frm_trans_type', onToggleSub ); |
| 8 |
|
| 9 |
const { __ } = wp.i18n; |
| 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 |
|
| 67 |
function onGatewayToggle( { gateway, settings, checked } ) { |
| 68 |
if ( 'square' === gateway && checked ) { |
| 69 |
syncRepeat( settings.get( 0 ) ); |
| 70 |
} |
| 71 |
|
| 72 |
syncCurrency( gateway, settings.get( 0 ) ); |
| 73 |
|
| 74 |
updateGatewaySettingsVisibility( settings.get( 0 ) ); |
| 75 |
|
| 76 |
const captureSetting = settings.get( 0 ).querySelector( '[name*="[post_content][capture]"]' ); |
| 77 |
if ( captureSetting ) { |
| 78 |
const wrapper = captureSetting.closest( '.frm_gateway_no_recur' ); |
| 79 |
if ( wrapper ) { |
| 80 |
if ( 'square' === gateway ) { |
| 81 |
wrapper.style.display = 'none'; |
| 82 |
} |
| 83 |
} |
| 84 |
} |
| 85 |
} |
| 86 |
|
| 87 |
function onFilledFormAction( $container ) { |
| 88 |
const settings = $container.get( 0 ).closest( '.frm_form_action_settings' ); |
| 89 |
if ( ! settings || ! settings.classList.contains( 'frm_single_payment_settings' ) ) { |
| 90 |
return; |
| 91 |
} |
| 92 |
|
| 93 |
const squareGatewayOption = settings.querySelector( '[name*="[post_content][gateway]"][value="square"]' ); |
| 94 |
if ( squareGatewayOption?.checked ) { |
| 95 |
syncRepeat( settings ); |
| 96 |
} |
| 97 |
|
| 98 |
updateGatewaySettingsVisibility( settings ); |
| 99 |
} |
| 100 |
|
| 101 |
function onToggleSub() { |
| 102 |
const target = this; |
| 103 |
setTimeout( function() { |
| 104 |
const settings = target.closest( '.frm_form_action_settings' ); |
| 105 |
updateGatewaySettingsVisibility( settings ); |
| 106 |
}, 0 ); |
| 107 |
} |
| 108 |
|
| 109 |
function syncRepeat( settings ) { |
| 110 |
// Sync recurring payment setting. |
| 111 |
const repeatCadence = settings.querySelector( '[name*="[post_content][repeat_cadence]"]' ); |
| 112 |
if ( repeatCadence ) { |
| 113 |
return; |
| 114 |
} |
| 115 |
|
| 116 |
const intervalCount = settings.querySelector( '[name*="[post_content][interval_count]"]' ); |
| 117 |
if ( ! intervalCount ) { |
| 118 |
return; |
| 119 |
} |
| 120 |
|
| 121 |
const settingWrapper = intervalCount.closest( '.frm_trans_sub_opts' ); |
| 122 |
if ( ! settingWrapper ) { |
| 123 |
return; |
| 124 |
} |
| 125 |
|
| 126 |
const clone = settingWrapper.cloneNode( true ); |
| 127 |
const intervalCountSetting = clone.querySelector( '[name*="[post_content][interval_count]"]' ); |
| 128 |
|
| 129 |
const repeatCadenceName = intervalCountSetting.name.replace( 'interval_count', 'repeat_cadence' ); |
| 130 |
|
| 131 |
const newDropdown = document.createElement( 'select' ); |
| 132 |
newDropdown.name = repeatCadenceName; |
| 133 |
const repeatCadenceOptions = { |
| 134 |
DAILY: __( 'Daily', 'formidable' ), |
| 135 |
WEEKLY: __( 'Weekly', 'formidable' ), |
| 136 |
EVERY_TWO_WEEKS: __( 'Every Two Weeks', 'formidable' ), |
| 137 |
THIRTY_DAYS: __( 'Every Thirty Days', 'formidable' ), |
| 138 |
SIXTY_DAYS: __( 'Every Sixty Days', 'formidable' ), |
| 139 |
NINETY_DAYS: __( 'Every Ninety Days', 'formidable' ), |
| 140 |
MONTHLY: __( 'Monthly', 'formidable' ), |
| 141 |
EVERY_TWO_MONTHS: __( 'Every Two Months', 'formidable' ), |
| 142 |
QUARTERLY: __( 'Quarterly', 'formidable' ), |
| 143 |
EVERY_FOUR_MONTHS: __( 'Every Four Months', 'formidable' ), |
| 144 |
EVERY_SIX_MONTHS: __( 'Every Six Months', 'formidable' ), |
| 145 |
ANNUAL: __( 'Annual', 'formidable' ), |
| 146 |
EVERY_TWO_YEARS: __( 'Every Two Years', 'formidable' ) |
| 147 |
}; |
| 148 |
|
| 149 |
const selectedOption = settings.querySelector( '.frm-repeat-cadence-value' ); |
| 150 |
|
| 151 |
for ( const optionKey in repeatCadenceOptions ) { |
| 152 |
const option = document.createElement( 'option' ); |
| 153 |
option.value = optionKey; |
| 154 |
option.textContent = repeatCadenceOptions[ optionKey ]; |
| 155 |
|
| 156 |
if ( selectedOption && selectedOption.value === optionKey ) { |
| 157 |
option.selected = true; |
| 158 |
} |
| 159 |
|
| 160 |
newDropdown.append( option ); |
| 161 |
} |
| 162 |
|
| 163 |
intervalCountSetting.parentNode.insertBefore( newDropdown, intervalCountSetting.nextSibling ); |
| 164 |
|
| 165 |
intervalCountSetting.remove(); |
| 166 |
clone.querySelector( '[name*="[post_content][interval]"]' )?.remove(); |
| 167 |
settingWrapper.parentNode.insertBefore( clone, settingWrapper.nextSibling ); |
| 168 |
|
| 169 |
const label = newDropdown.closest( '.frm_trans_sub_opts' )?.querySelector( 'label' ); |
| 170 |
if ( label?.textContent.includes( 'Repeat Every' ) ) { |
| 171 |
label.textContent = 'Repeat'; |
| 172 |
} |
| 173 |
|
| 174 |
newDropdown.closest( '.frm_trans_sub_opts' )?.classList.add( 'show_square' ); |
| 175 |
newDropdown.closest( '.frm_trans_sub_opts' )?.classList.remove( 'frm_hidden' ); |
| 176 |
|
| 177 |
const stripeLabel = intervalCount.closest( '.frm_trans_sub_opts' )?.querySelector( 'label' ); |
| 178 |
if ( stripeLabel?.textContent.includes( 'Repeat Every' ) ) { |
| 179 |
stripeLabel.textContent = 'Repeat'; |
| 180 |
} |
| 181 |
|
| 182 |
intervalCount.closest( '.frm_trans_sub_opts' )?.classList.add( 'show_stripe', 'show_paypal', 'frm_hidden' ); |
| 183 |
} |
| 184 |
|
| 185 |
function syncCurrency( gateway, settings ) { |
| 186 |
// Sync currency setting. |
| 187 |
const currencySetting = settings.querySelector( '[name*="[post_content][currency]"]' ); |
| 188 |
if ( ! currencySetting ) { |
| 189 |
return; |
| 190 |
} |
| 191 |
|
| 192 |
let option = currencySetting.querySelector( 'option.square-currency' ); |
| 193 |
|
| 194 |
if ( option ) { |
| 195 |
if ( 'square' === gateway ) { |
| 196 |
currencySetting.value = option.value; |
| 197 |
currencySetting.disabled = true; |
| 198 |
} else { |
| 199 |
currencySetting.disabled = false; |
| 200 |
option.remove(); |
| 201 |
currencySetting.value = 'usd'; |
| 202 |
} |
| 203 |
return; |
| 204 |
} |
| 205 |
|
| 206 |
// Option didn't exist yet, so add it. |
| 207 |
if ( 'square' === gateway ) { |
| 208 |
option = document.createElement( 'option' ); |
| 209 |
option.value = 'square'; |
| 210 |
option.textContent = 'Use Square Merchant Currency'; |
| 211 |
option.classList.add( 'square-currency' ); |
| 212 |
currencySetting.append( option ); |
| 213 |
|
| 214 |
currencySetting.value = option.value; |
| 215 |
currencySetting.disabled = true; |
| 216 |
} else { |
| 217 |
currencySetting.disabled = false; |
| 218 |
} |
| 219 |
} |
| 220 |
}() ); |
| 221 |
|
