import {
setVisible,
setVisibleByClass,
} from '../../../ppcp-button/resources/js/modules/Helper/Hiding';
document.addEventListener( 'DOMContentLoaded', () => {
const payLaterMessagingSelectableLocations = [
'product',
'cart',
'checkout',
'shop',
'home',
];
const payLaterMessagingAllLocations =
payLaterMessagingSelectableLocations.concat( 'general' );
const payLaterMessagingLocationsSelector =
'#field-pay_later_messaging_locations';
const payLaterMessagingLocationsSelect =
payLaterMessagingLocationsSelector + ' select';
const payLaterMessagingEnabledSelector =
'#ppcp-pay_later_messaging_enabled';
const smartButtonLocationsSelector = '#field-smart_button_locations';
const smartButtonLocationsSelect = smartButtonLocationsSelector + ' select';
const smartButtonSelectableLocations = [
'product',
'cart',
'checkout',
'mini-cart',
'cart-block',
'checkout-block-express',
];
const groupToggle = ( selector, group ) => {
const toggleElement = document.querySelector( selector );
if ( ! toggleElement ) {
return;
}
if ( ! toggleElement.checked ) {
group.forEach( ( elementToHide ) => {
const element = document.querySelector( elementToHide );
if ( element ) {
element.style.display = 'none';
}
} );
}
toggleElement.addEventListener( 'change', ( event ) => {
if ( ! event.target.checked ) {
group.forEach( ( elementToHide ) => {
const element = document.querySelector( elementToHide );
if ( element ) {
element.style.display = 'none';
}
} );
return;
}
group.forEach( ( elementToShow ) => {
document.querySelector( elementToShow ).style.display = '';
} );
togglePayLaterMessageFields();
} );
};
const groupToggleSelect = ( selector, group ) => {
const toggleElement = document.querySelector( selector );
if ( ! toggleElement ) {
return;
}
const value = toggleElement.value;
group.forEach( ( elementToToggle ) => {
const domElement = document.querySelector(
elementToToggle.selector
);
if ( ! domElement ) {
return;
}
if (
value === elementToToggle.value &&
domElement.style.display !== 'none'
) {
domElement.style.display = '';
return;
}
domElement.style.display = 'none';
} );
// We need to use jQuery here as the select might be a select2 element, which doesn't use native events.
jQuery( toggleElement ).on( 'change', ( event ) => {
const value = event.target.value;
group.forEach( ( elementToToggle ) => {
if ( value === elementToToggle.value ) {
document.querySelector(
elementToToggle.selector
).style.display = '';
return;
}
document.querySelector(
elementToToggle.selector
).style.display = 'none';
} );
} );
};
const togglePayLaterMessageFields = () => {
payLaterMessagingAllLocations.forEach( ( location ) => {
groupToggleSelect(
'#ppcp-pay_later_' + location + '_message_layout',
[
{
value: 'text',
selector:
'#field-pay_later_' + location + '_message_logo',
},
{
value: 'text',
selector:
'#field-pay_later_' +
location +
'_message_position',
},
{
value: 'text',
selector:
'#field-pay_later_' + location + '_message_color',
},
{
value: 'flex',
selector:
'#field-pay_later_' +
location +
'_message_flex_ratio',
},
{
value: 'flex',
selector:
'#field-pay_later_' +
location +
'_message_flex_color',
},
]
);
} );
};
const removeDisabledCardIcons = (
disabledCardsSelectSelector,
iconsSelectSelector
) => {
const iconsSelect = document.querySelector( iconsSelectSelector );
if ( ! iconsSelect ) {
return;
}
const allOptions = Array.from(
document.querySelectorAll( disabledCardsSelectSelector + ' option' )
);
const iconVersions = {
visa: {
light: { label: 'Visa (light)' },
dark: { label: 'Visa (dark)', value: 'visa-dark' },
},
mastercard: {
light: { label: 'Mastercard (light)' },
dark: { label: 'Mastercard (dark)', value: 'mastercard-dark' },
},
};
const replace = () => {
const validOptions = allOptions.filter(
( option ) => ! option.selected
);
const selectedValidOptions = validOptions
.map( ( option ) => {
option = option.cloneNode( true );
const value = option.value;
option.selected =
iconsSelect.querySelector(
'option[value="' + value + '"]'
) &&
iconsSelect.querySelector(
'option[value="' + value + '"]'
).selected;
if ( value === 'visa' || value === 'mastercard' ) {
const darkOption = option.cloneNode( true );
const currentVersion = iconVersions[ value ];
const darkValue = iconVersions[ value ].dark.value;
option.text = currentVersion.light.label;
darkOption.text = currentVersion.dark.label;
darkOption.value = darkValue;
darkOption.selected =
iconsSelect.querySelector(
'option[value="' + darkValue + '"]'
) &&
iconsSelect.querySelector(
'option[value="' + darkValue + '"]'
).selected;
return [ option, darkOption ];
}
return option;
} )
.flat();
iconsSelect.innerHTML = '';
selectedValidOptions.forEach( ( option ) => {
if ( Array.isArray( option ) ) {
option.forEach( ( option ) => {
iconsSelect.appendChild( option );
} );
}
iconsSelect.appendChild( option );
} );
};
const disabledCardsSelect = jQuery( disabledCardsSelectSelector );
disabledCardsSelect.on( 'change', replace );
replace();
};
const hideElements = ( selectorGroup ) => {
selectorGroup.forEach( ( selector ) =>
setVisibleByClass( selector, false, 'hide' )
);
};
const showElements = ( selectorGroup ) => {
selectorGroup.forEach( ( selector ) =>
setVisibleByClass( selector, true, 'hide' )
);
};
const toggleInputsBySelectedLocations = (
stylingPerSelector,
locationsSelector,
groupToShowOnChecked,
groupToHideOnChecked,
inputType
) => {
const payLaterMessagingEnabled = document.querySelector(
payLaterMessagingEnabledSelector
);
const stylingPerElement = document.querySelector( stylingPerSelector );
if ( ! stylingPerElement ) {
return;
}
const stylingPerElementWrapper = stylingPerElement.closest( 'tr' );
const toggleElementsBySelectedLocations = () => {
const selectedLocations = getSelectedLocations( locationsSelector );
setVisibleByClass(
stylingPerElementWrapper,
selectedLocations.length > 0,
'hide'
);
if ( selectedLocations.length === 0 ) {
hideElements( groupToHideOnChecked );
const emptySmartButtonLocationMessage = document.querySelector(
'.ppcp-empty-smart-button-location'
);
if ( ! emptySmartButtonLocationMessage ) {
jQuery(
PayPalCommerceSettings.empty_smart_button_location_message
).insertAfter(
jQuery( smartButtonLocationsSelector ).find(
'.description'
)
);
}
}
if ( ! stylingPerElement.checked ) {
return;
}
if (
inputType === 'messages' &&
! payLaterMessagingEnabled.checked
) {
return;
}
const inputSelectors = inputSelectorsByLocations(
selectedLocations,
inputType
);
groupToShowOnChecked.forEach( ( element ) => {
setVisibleByClass(
element,
inputSelectors.includes( element ),
'hide'
);
} );
if ( inputType === 'messages' ) {
togglePayLaterMessageFields();
}
};
groupToggle( stylingPerSelector, groupToShowOnChecked );
toggleElementsBySelectedLocations();
if ( stylingPerElement.checked ) {
hideElements( groupToHideOnChecked );
}
stylingPerElement.addEventListener( 'change', ( event ) => {
toggleElementsBySelectedLocations();
if ( event.target.checked ) {
hideElements( groupToHideOnChecked );
return;
}
const selectedLocations = getSelectedLocations( locationsSelector );
if ( selectedLocations.length > 0 ) {
showElements( groupToHideOnChecked );
}
if ( inputType === 'messages' ) {
togglePayLaterMessageFields();
}
} );
// We need to use jQuery here as the select might be a select2 element, which doesn't use native events.
jQuery( locationsSelector ).on( 'change', function () {
const emptySmartButtonLocationMessage = jQuery(
'.ppcp-empty-smart-button-location'
);
emptySmartButtonLocationMessage?.remove();
toggleElementsBySelectedLocations();
stylingPerElement.dispatchEvent( new Event( 'change' ) );
} );
};
const getSelectedLocations = ( selector ) => {
const checkedLocations = document.querySelectorAll(
selector + ' :checked'
);
return [ ...checkedLocations ].map( ( option ) => option.value );
};
const inputSelectorsByLocations = ( locations, inputType = 'messages' ) => {
let inputSelectros = [];
locations.forEach( ( location ) => {
inputSelectros =
inputType === 'messages'
? inputSelectros.concat(
payLaterMessagingInputSelectorByLocation( location )
)
: inputSelectros.concat(
butttonInputSelectorByLocation( location )
);
} );
return inputSelectros;
};
const payLaterMessagingInputSelectorByLocation = ( location ) => {
const inputSelectors = [
'#field-pay_later_' + location + '_message_layout',
'#field-pay_later_' + location + '_message_logo',
'#field-pay_later_' + location + '_message_position',
'#field-pay_later_' + location + '_message_color',
'#field-pay_later_' + location + '_message_flex_color',
'#field-pay_later_' + location + '_message_flex_ratio',
'#field-pay_later_' + location + '_message_preview',
];
if ( location !== 'general' ) {
inputSelectors.push(
'#field-pay_later_' + location + '_messaging_heading'
);
}
return inputSelectors;
};
const butttonInputSelectorByLocation = ( location ) => {
const locationPrefix = location === 'checkout' ? '' : '_' + location;
const inputSelectors = [
'#field-button' + locationPrefix + '_layout',
'#field-button' + locationPrefix + '_tagline',
'#field-button' + locationPrefix + '_label',
'#field-button' + locationPrefix + '_color',
'#field-button' + locationPrefix + '_shape',
'#field-button' + locationPrefix + '_height',
'#field-button' + locationPrefix + '_preview',
];
if ( location !== 'general' ) {
inputSelectors.push( '#field-button_' + location + '_heading' );
}
return inputSelectors.filter( ( selector ) =>
document.querySelector( selector )
);
};
const allPayLaterMessaginginputSelectors = () => {
const stylingInputSelectors = inputSelectorsByLocations(
payLaterMessagingAllLocations
);
return stylingInputSelectors.concat(
payLaterMessagingLocationsSelector,
'#field-pay_later_enable_styling_per_messaging_location'
);
};
const toggleMessagingEnabled = () => {
const payLaterMessagingEnabled = document.querySelector(
payLaterMessagingEnabledSelector
);
const stylingPerMessagingElement = document.querySelector(
'#ppcp-pay_later_enable_styling_per_messaging_location'
);
groupToggle(
payLaterMessagingEnabledSelector,
allPayLaterMessaginginputSelectors()
);
if ( ! payLaterMessagingEnabled ) {
return;
}
payLaterMessagingEnabled.addEventListener( 'change', ( event ) => {
if ( ! event.target.checked ) {
return;
}
stylingPerMessagingElement.dispatchEvent( new Event( 'change' ) );
} );
};
const referenceTransactionsCheck = () => {
if (
typeof PayPalCommerceGatewaySettings !== 'undefined' &&
PayPalCommerceGatewaySettings.reference_transaction_enabled !== '1'
) {
document
.getElementById( 'ppcp-vault_enabled' )
?.setAttribute( 'disabled', 'disabled' );
const description = document
.getElementById( 'field-vault_enabled' )
?.getElementsByClassName( 'description' )[ 0 ];
if ( description ) {
description.innerHTML =
PayPalCommerceGatewaySettings.vaulting_must_enable_advanced_wallet_message;
}
}
};
/**
* Hide the subscription settings when smart buttons are disabled for checkout,
* since the basic redirect gateway is disabled for subscriptions.
*/
const initSettingsHidingForPlaceOrderGateway = () => {
const selectors = [
'#field-paypal_saved_payments',
'#field-subscriptions_mode',
'#field-vault_enabled',
];
const updateSettingsVisibility = () => {
const selectedLocations = getSelectedLocations(
smartButtonLocationsSelect
);
const hasCheckoutSmartButtons =
selectedLocations.includes( 'checkout' ) ||
selectedLocations.includes( 'checkout-block-express' );
selectors.forEach( ( selector ) => {
setVisibleByClass( selector, hasCheckoutSmartButtons, 'hide' );
} );
};
updateSettingsVisibility();
jQuery( smartButtonLocationsSelect ).on(
'change',
updateSettingsVisibility
);
};
( () => {
removeDisabledCardIcons(
'select[name="ppcp[disable_cards][]"]',
'select[name="ppcp[card_icons][]"]'
);
groupToggle( '#ppcp-pay_later_button_enabled', [
'#field-pay_later_button_locations',
] );
toggleInputsBySelectedLocations(
'#ppcp-pay_later_enable_styling_per_messaging_location',
payLaterMessagingLocationsSelect,
inputSelectorsByLocations( payLaterMessagingSelectableLocations ),
inputSelectorsByLocations( [ 'general' ] ),
'messages'
);
toggleInputsBySelectedLocations(
'#ppcp-smart_button_enable_styling_per_location',
smartButtonLocationsSelect,
inputSelectorsByLocations(
smartButtonSelectableLocations,
'buttons'
),
inputSelectorsByLocations( [ 'general' ], 'buttons' ),
'buttons'
);
toggleMessagingEnabled();
initSettingsHidingForPlaceOrderGateway();
groupToggle( '#ppcp-vault_enabled', [
'#field-subscription_behavior_when_vault_fails',
] );
groupToggleSelect( '#ppcp-intent', [
{
value: 'authorize',
selector: '#field-capture_for_virtual_only',
},
{
value: 'authorize',
selector: '#field-capture_on_status_change',
},
] );
togglePayLaterMessageFields();
referenceTransactionsCheck();
} )();
} );