| 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 onGatewayToggle( { gateway, settings, checked } ) { |
| 12 |
if ( 'square' === gateway && checked ) { |
| 13 |
syncRepeat( settings.get( 0 ) ); |
| 14 |
} |
| 15 |
|
| 16 |
syncCurrency( gateway, settings.get( 0 ) ); |
| 17 |
|
| 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 |
} |
| 26 |
|
| 27 |
const captureSetting = settings.get( 0 ).querySelector( '[name*="[post_content][capture]"]' ); |
| 28 |
if ( captureSetting ) { |
| 29 |
const wrapper = captureSetting.closest( '.frm_gateway_no_recur' ); |
| 30 |
if ( wrapper ) { |
| 31 |
if ( 'square' === gateway ) { |
| 32 |
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 |
} |
| 37 |
} |
| 38 |
} |
| 39 |
} |
| 40 |
|
| 41 |
function onFilledFormAction( $container ) { |
| 42 |
const settings = $container.get( 0 ).closest( '.frm_form_action_settings' ); |
| 43 |
if ( ! settings || ! settings.classList.contains( 'frm_single_payment_settings' ) ) { |
| 44 |
return; |
| 45 |
} |
| 46 |
|
| 47 |
const squareGatewayOption = settings.querySelector( '[name*="[post_content][gateway]"][value="square"]' ); |
| 48 |
if ( squareGatewayOption?.checked ) { |
| 49 |
syncRepeat( settings ); |
| 50 |
} |
| 51 |
} |
| 52 |
|
| 53 |
function onToggleSub() { |
| 54 |
const target = this; |
| 55 |
setTimeout( function() { |
| 56 |
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 |
); |
| 66 |
}, 0 ); |
| 67 |
} |
| 68 |
|
| 69 |
function syncRepeat( settings ) { |
| 70 |
// Sync recurring payment setting. |
| 71 |
const repeatCadence = settings.querySelector( '[name*="[post_content][repeat_cadence]"]' ); |
| 72 |
if ( repeatCadence ) { |
| 73 |
return; |
| 74 |
} |
| 75 |
|
| 76 |
const intervalCount = settings.querySelector( '[name*="[post_content][interval_count]"]' ); |
| 77 |
if ( ! intervalCount ) { |
| 78 |
return; |
| 79 |
} |
| 80 |
|
| 81 |
const settingWrapper = intervalCount.closest( '.frm_trans_sub_opts' ); |
| 82 |
if ( ! settingWrapper ) { |
| 83 |
return; |
| 84 |
} |
| 85 |
|
| 86 |
const clone = settingWrapper.cloneNode( true ); |
| 87 |
const intervalCountSetting = clone.querySelector( '[name*="[post_content][interval_count]"]' ); |
| 88 |
|
| 89 |
const repeatCadenceName = intervalCountSetting.name.replace( 'interval_count', 'repeat_cadence' ); |
| 90 |
|
| 91 |
const newDropdown = document.createElement( 'select' ); |
| 92 |
newDropdown.name = repeatCadenceName; |
| 93 |
const repeatCadenceOptions = { |
| 94 |
DAILY: __( 'Daily', 'formidable' ), |
| 95 |
WEEKLY: __( 'Weekly', 'formidable' ), |
| 96 |
EVERY_TWO_WEEKS: __( 'Every Two Weeks', 'formidable' ), |
| 97 |
THIRTY_DAYS: __( 'Every Thirty Days', 'formidable' ), |
| 98 |
SIXTY_DAYS: __( 'Every Sixty Days', 'formidable' ), |
| 99 |
NINETY_DAYS: __( 'Every Ninety Days', 'formidable' ), |
| 100 |
MONTHLY: __( 'Monthly', 'formidable' ), |
| 101 |
EVERY_TWO_MONTHS: __( 'Every Two Months', 'formidable' ), |
| 102 |
QUARTERLY: __( 'Quarterly', 'formidable' ), |
| 103 |
EVERY_FOUR_MONTHS: __( 'Every Four Months', 'formidable' ), |
| 104 |
EVERY_SIX_MONTHS: __( 'Every Six Months', 'formidable' ), |
| 105 |
ANNUAL: __( 'Annual', 'formidable' ), |
| 106 |
EVERY_TWO_YEARS: __( 'Every Two Years', 'formidable' ) |
| 107 |
}; |
| 108 |
|
| 109 |
const selectedOption = settings.querySelector( '.frm-repeat-cadence-value' ); |
| 110 |
|
| 111 |
for ( const optionKey in repeatCadenceOptions ) { |
| 112 |
const option = document.createElement( 'option' ); |
| 113 |
option.value = optionKey; |
| 114 |
option.textContent = repeatCadenceOptions[ optionKey ]; |
| 115 |
|
| 116 |
if ( selectedOption && selectedOption.value === optionKey ) { |
| 117 |
option.selected = true; |
| 118 |
} |
| 119 |
|
| 120 |
newDropdown.appendChild( option ); |
| 121 |
} |
| 122 |
|
| 123 |
intervalCountSetting.parentNode.insertBefore( newDropdown, intervalCountSetting.nextSibling ); |
| 124 |
|
| 125 |
intervalCountSetting.remove(); |
| 126 |
clone.querySelector( '[name*="[post_content][interval]"]' )?.remove(); |
| 127 |
settingWrapper.parentNode.insertBefore( clone, settingWrapper.nextSibling ); |
| 128 |
|
| 129 |
const label = newDropdown.closest( '.frm_trans_sub_opts' )?.querySelector( 'label' ); |
| 130 |
if ( label && label.textContent.includes( 'Repeat Every' ) ) { |
| 131 |
label.textContent = 'Repeat'; |
| 132 |
} |
| 133 |
|
| 134 |
newDropdown.closest( '.frm_trans_sub_opts' )?.classList.add( 'show_square' ); |
| 135 |
|
| 136 |
const stripeLabel = intervalCount.closest( '.frm_trans_sub_opts' )?.querySelector( 'label' ); |
| 137 |
if ( stripeLabel && stripeLabel.textContent.includes( 'Repeat Every' ) ) { |
| 138 |
stripeLabel.textContent = 'Repeat'; |
| 139 |
} |
| 140 |
|
| 141 |
intervalCount.closest( '.frm_trans_sub_opts' )?.classList.add( 'show_stripe', 'frm_hidden' ); |
| 142 |
} |
| 143 |
|
| 144 |
function syncCurrency( gateway, settings ) { |
| 145 |
// Sync currency setting. |
| 146 |
const currencySetting = settings.querySelector( '[name*="[post_content][currency]"]' ); |
| 147 |
if ( ! currencySetting ) { |
| 148 |
return; |
| 149 |
} |
| 150 |
|
| 151 |
let option = currencySetting.querySelector( 'option.square-currency' ); |
| 152 |
|
| 153 |
if ( option ) { |
| 154 |
if ( 'square' === gateway ) { |
| 155 |
currencySetting.value = option.value; |
| 156 |
currencySetting.disabled = true; |
| 157 |
} else { |
| 158 |
currencySetting.disabled = false; |
| 159 |
option.remove(); |
| 160 |
currencySetting.value = 'usd'; |
| 161 |
} |
| 162 |
return; |
| 163 |
} |
| 164 |
|
| 165 |
// Option didn't exist yet, so add it. |
| 166 |
if ( 'square' === gateway ) { |
| 167 |
option = document.createElement( 'option' ); |
| 168 |
option.value = 'square'; |
| 169 |
option.textContent = 'Use Square Merchant Currency'; |
| 170 |
option.classList.add( 'square-currency' ); |
| 171 |
currencySetting.appendChild( option ); |
| 172 |
|
| 173 |
currencySetting.value = option.value; |
| 174 |
currencySetting.disabled = true; |
| 175 |
} else { |
| 176 |
currencySetting.disabled = false; |
| 177 |
} |
| 178 |
} |
| 179 |
}() ); |
| 180 |
|
