@chargebee/chargebee-apps-libs 0.0.2

package/ui/web/assets/js/modules/iparams-inputs.js

@@ -0,0 +1,495 @@
+import { state, editInputsBtn, saveInputsBtn, cancelInputsBtn, toggleViewBtn, iparamsInputsForm } from './constants.js';
+import { showStatus } from './ui-utils.js';
+import { fetchIparams, fetchIparamsInputs, saveIparamsInputs as saveInputsAPI } from './api.js';
+import { mergeInputsWithDefaults, updateMultiselectDisplay, getIparamSections, getIparamInputId } from './form-utils.js';
+
+/** Creates a dropdown container with arrow */
+function createDropdownContainer(selectElement) {
+	const container = document.createElement('div');
+	container.className = 'select-dropdown-container';
+	const arrow = document.createElement('span');
+	arrow.className = 'select-dropdown-arrow';
+	container.appendChild(selectElement);
+	container.appendChild(arrow);
+	return container;
+}
+
+/** Creates a form field for a single parameter */
+function createParamField(section, param, sectionInputs) {
+	const formField = document.createElement('div');
+	formField.className = 'iparam-field';
+	const inputId = getIparamInputId(section.name, param.name);
+	const paramValue = sectionInputs?.[param.name];
+
+	const label = document.createElement('label');
+	label.textContent = param.display_name || param.name;
+	if (param.required) label.innerHTML += ' <span class="required">*</span>';
+	label.setAttribute('for', inputId);
+
+	const description = document.createElement('p');
+	description.className = 'iparam-description';
+	description.textContent = param.description;
+
+	let input;
+
+	switch (param.type) {
+		case 'BOOLEAN': {
+			const booleanSelect = document.createElement('select');
+			booleanSelect.id = inputId;
+			booleanSelect.name = param.name;
+			[['', '-- Select --'], ['true', 'True'], ['false', 'False']].forEach(([val, text]) => {
+				const opt = document.createElement('option');
+				opt.value = val;
+				opt.textContent = text;
+				booleanSelect.appendChild(opt);
+			});
+			booleanSelect.value = paramValue !== undefined
+				? (paramValue === true || paramValue === 'true' ? 'true' : 'false')
+				: '';
+			input = createDropdownContainer(booleanSelect);
+			break;
+		}
+		case 'NUMBER':
+			input = document.createElement('input');
+			input.type = 'number';
+			input.id = inputId;
+			input.name = param.name;
+			input.value = paramValue !== undefined ? paramValue : '';
+			break;
+		case 'DROPDOWN': {
+			const dropdownSelect = document.createElement('select');
+			dropdownSelect.id = inputId;
+			dropdownSelect.name = param.name;
+			const emptyOpt = document.createElement('option');
+			emptyOpt.value = '';
+			emptyOpt.textContent = '-- Select option --';
+			dropdownSelect.appendChild(emptyOpt);
+			if (param.options) {
+				param.options.forEach(option => {
+					const opt = document.createElement('option');
+					opt.value = option;
+					opt.textContent = option;
+					if (paramValue === option) opt.selected = true;
+					dropdownSelect.appendChild(opt);
+				});
+			}
+			if (paramValue === undefined || paramValue === '') {
+				dropdownSelect.value = '';
+			}
+			input = createDropdownContainer(dropdownSelect);
+			break;
+		}
+		case 'MULTISELECT_DROPDOWN': {
+			const dropdownContainer = document.createElement('div');
+			dropdownContainer.className = 'multiselect-dropdown-container';
+			dropdownContainer.id = inputId;
+
+			const dropdownButton = document.createElement('div');
+			dropdownButton.className = 'multiselect-dropdown-button iparam-input';
+			dropdownButton.setAttribute('role', 'button');
+			dropdownButton.tabIndex = state.isInputsEditing ? 0 : -1;
+			if (!state.isInputsEditing) {
+				dropdownButton.style.pointerEvents = 'none';
+				dropdownButton.classList.add('readonly');
+			}
+
+			const selectedValues = Array.isArray(paramValue) ? paramValue : [];
+			dropdownButton.textContent = selectedValues.length > 0 ? selectedValues.join(', ') : '-- Select options --';
+			if (selectedValues.length === 0) dropdownButton.classList.add('placeholder');
+
+			const arrow = document.createElement('span');
+			arrow.className = 'select-dropdown-arrow';
+			dropdownButton.appendChild(arrow);
+
+			const dropdownPanel = document.createElement('div');
+			dropdownPanel.className = 'multiselect-dropdown-panel';
+			dropdownPanel.style.display = 'none';
+
+			if (param.options) {
+				param.options.forEach(option => {
+					const wrapper = document.createElement('div');
+					wrapper.className = 'checkbox-option';
+
+					const checkbox = document.createElement('input');
+					checkbox.type = 'checkbox';
+					checkbox.id = `${inputId}-${option}`;
+					checkbox.name = inputId;
+					checkbox.value = option;
+					checkbox.checked = selectedValues.includes(option);
+					checkbox.disabled = !state.isInputsEditing;
+					checkbox.className = 'iparam-input';
+					checkbox.addEventListener('change', () => updateMultiselectDisplay(dropdownButton, dropdownPanel, param.name));
+
+					const optionLabel = document.createElement('label');
+					optionLabel.htmlFor = `${inputId}-${option}`;
+					optionLabel.textContent = option;
+
+					wrapper.appendChild(checkbox);
+					wrapper.appendChild(optionLabel);
+					dropdownPanel.appendChild(wrapper);
+				});
+			}
+
+			dropdownButton.addEventListener('click', function(e) {
+				if (!state.isInputsEditing) return;
+				e.stopPropagation();
+				e.preventDefault();
+				const isOpen = dropdownPanel.style.display === 'block';
+				dropdownPanel.style.display = isOpen ? 'none' : 'block';
+				dropdownButton.classList.toggle('open', !isOpen);
+			});
+
+			dropdownPanel.addEventListener('click', e => e.stopPropagation());
+			dropdownContainer.appendChild(dropdownButton);
+			dropdownContainer.appendChild(dropdownPanel);
+
+			if (!window.multiselectClickHandler) {
+				window.multiselectClickHandler = function(e) {
+					document.querySelectorAll('.multiselect-dropdown-panel').forEach(panel => {
+						const container = panel.closest('.multiselect-dropdown-container');
+						if (container && !container.contains(e.target)) {
+							panel.style.display = 'none';
+							const button = container.querySelector('.multiselect-dropdown-button');
+							if (button) button.classList.remove('open');
+						}
+					});
+				};
+				document.addEventListener('click', window.multiselectClickHandler);
+			}
+			input = dropdownContainer;
+			break;
+		}
+		case 'DATE':
+			input = document.createElement('input');
+			input.type = 'date';
+			input.id = inputId;
+			input.name = param.name;
+			if (paramValue) {
+				let dateStr = '';
+				if (typeof paramValue === 'string') {
+					if (/^\d{4}-\d{2}-\d{2}$/.test(paramValue)) {
+						dateStr = paramValue;
+					} else if (paramValue.includes('T')) {
+						dateStr = paramValue.split('T')[0];
+					}
+				}
+				if (!dateStr) {
+					const date = new Date(paramValue);
+					if (!isNaN(date.getTime())) {
+						dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+					}
+				}
+				if (dateStr && /^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
+					input.value = dateStr;
+				}
+			}
+			break;
+		case 'SECRET':
+		case 'TEXT':
+		case 'URL':
+		default:
+			input = document.createElement('input');
+			input.type = param.type === 'URL' ? 'url' : 'text';
+			input.id = inputId;
+			input.name = param.name;
+			input.value = paramValue !== undefined ? paramValue : '';
+			break;
+	}
+
+	if (input.tagName === 'INPUT' || input.tagName === 'SELECT' || input.tagName === 'TEXTAREA') {
+		input.className = 'iparam-input';
+		input.disabled = !state.isInputsEditing;
+	} else if (input.tagName === 'DIV' && input.classList.contains('select-dropdown-container')) {
+		const selectElement = input.querySelector('select');
+		if (selectElement) {
+			selectElement.className = 'iparam-input';
+			selectElement.disabled = !state.isInputsEditing;
+		}
+	}
+
+	formField.appendChild(label);
+	formField.appendChild(description);
+	formField.appendChild(input);
+	return formField;
+}
+
+/** Updates the form view with current inputs */
+export function updateInputsForm(inputs) {
+	if (!iparamsInputsForm) return;
+	iparamsInputsForm.innerHTML = '';
+	const sections = getIparamSections();
+	if (sections.length === 0) {
+		iparamsInputsForm.innerHTML = '<p style="color: #6b7280; padding: 20px; text-align: center;">No parameters defined. Define parameters in the Iparams tab first.</p>';
+		return;
+	}
+
+	sections.forEach(section => {
+		const sectionBlock = document.createElement('div');
+		sectionBlock.className = 'iparam-section';
+
+		const sectionHeader = document.createElement('div');
+		sectionHeader.className = 'iparam-section-header';
+
+		const sectionTitle = document.createElement('h3');
+		sectionTitle.className = 'iparam-section-title';
+		sectionTitle.textContent = section.display_name || section.name;
+
+		const sectionDescription = document.createElement('p');
+		sectionDescription.className = 'iparam-section-description';
+		sectionDescription.textContent = section.description;
+
+		sectionHeader.appendChild(sectionTitle);
+		sectionHeader.appendChild(sectionDescription);
+		sectionBlock.appendChild(sectionHeader);
+
+		const sectionInputs = inputs?.[section.name] ?? {};
+		section.parameters.forEach(param => {
+			sectionBlock.appendChild(createParamField(section, param, sectionInputs));
+		});
+
+		iparamsInputsForm.appendChild(sectionBlock);
+	});
+}
+
+/** Reads a single parameter value from the form */
+function readParamValueFromForm(section, param) {
+	const input = document.getElementById(getIparamInputId(section.name, param.name));
+	if (!input) return undefined;
+
+	switch (param.type) {
+		case 'BOOLEAN': {
+			const booleanSelect = input.tagName === 'SELECT' ? input : input.querySelector('select');
+			return booleanSelect && booleanSelect.value && booleanSelect.value !== ''
+				? booleanSelect.value === 'true'
+				: undefined;
+		}
+		case 'NUMBER':
+			return input.value && input.value.trim() !== '' ? Number(input.value) : undefined;
+		case 'MULTISELECT_DROPDOWN': {
+			const dropdownPanel = input.querySelector('.multiselect-dropdown-panel');
+			if (dropdownPanel) {
+				const selected = Array.from(dropdownPanel.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
+				return selected.length > 0 ? selected : undefined;
+			}
+			return undefined;
+		}
+		case 'DATE':
+		case 'SECRET':
+		case 'TEXT':
+		case 'URL':
+			return input.value && input.value.trim() !== '' ? input.value.trim() : undefined;
+		case 'DROPDOWN': {
+			const dropdownSelect = input.tagName === 'SELECT' ? input : input.querySelector('select');
+			return dropdownSelect && dropdownSelect.value && dropdownSelect.value.trim() !== ''
+				? dropdownSelect.value.trim()
+				: undefined;
+		}
+		default:
+			return input.value && input.value.trim() !== '' ? input.value.trim() : undefined;
+	}
+}
+
+/** Gets inputs from form view - merges defaults for fields that don't have values */
+export function getInputsFromForm() {
+	if (!iparamsInputsForm) return mergeInputsWithDefaults({}, state.iparamDefns);
+	const rawInputs = {};
+
+	getIparamSections().forEach(section => {
+		const sectionInputs = {};
+		section.parameters.forEach(param => {
+			const value = readParamValueFromForm(section, param);
+			if (value !== undefined && value !== null && value !== '' && (!Array.isArray(value) || value.length > 0)) {
+				sectionInputs[param.name] = value;
+			}
+		});
+		if (Object.keys(sectionInputs).length > 0) {
+			rawInputs[section.name] = sectionInputs;
+		}
+	});
+
+	return mergeInputsWithDefaults(rawInputs, state.iparamDefns);
+}
+
+/** Reloads inputs from server and updates views, preserving editing state */
+async function reloadInputsAndUpdateViews() {
+	const wasEditing = state.isInputsEditing;
+	try {
+		const iparamDefns = await fetchIparams();
+		state.iparamDefns = iparamDefns;
+		const inputs = await fetchIparamsInputs();
+		const mergedInputs = mergeInputsWithDefaults(inputs, iparamDefns);
+		const inputsJson = JSON.stringify(mergedInputs, null, 2);
+		state.iparamsInputsEditor.setValue(inputsJson);
+		state.originalInputsData = inputsJson;
+		updateInputsForm(mergedInputs);
+		state.iparamsInputsEditor.resize();
+		if (wasEditing) {
+			setInputsReadonly(false);
+		} else {
+			setInputsReadonly(true);
+		}
+	} catch (error) {
+		state.iparamsInputsEditor.setValue('{}');
+		state.originalInputsData = '{}';
+		updateInputsForm({});
+		showStatus(`Error loading iparams inputs: ${error.message}`);
+		setInputsReadonly(true);
+	}
+}
+
+/** Toggles between form and JSON view - reloads from server discarding unsaved changes */
+export async function toggleInputsView() {
+	state.isFormView = !state.isFormView;
+	const editorElement = document.getElementById('iparamsInputsEditor');
+	if (state.isFormView) {
+		if (editorElement) editorElement.style.display = 'none';
+		if (iparamsInputsForm) iparamsInputsForm.style.display = 'block';
+		if (toggleViewBtn) toggleViewBtn.textContent = 'Switch to JSON';
+	} else {
+		if (iparamsInputsForm) iparamsInputsForm.style.display = 'none';
+		if (editorElement) editorElement.style.display = 'block';
+		if (toggleViewBtn) toggleViewBtn.textContent = 'Switch to Form';
+	}
+	await reloadInputsAndUpdateViews();
+}
+
+/** Enables editing mode for inputs editor */
+export function enableInputsEditing() {
+	state.isInputsEditing = true;
+	state.iparamsInputsEditor.setReadOnly(false);
+	editInputsBtn.style.display = 'none';
+	saveInputsBtn.style.display = 'inline-block';
+	cancelInputsBtn.style.display = 'inline-block';
+	if (iparamsInputsForm) {
+		iparamsInputsForm.querySelectorAll('.iparam-input').forEach(input => input.disabled = false);
+		iparamsInputsForm.querySelectorAll('.multiselect-dropdown-button').forEach(button => {
+			button.tabIndex = 0;
+			button.style.pointerEvents = 'auto';
+			button.classList.remove('readonly');
+		});
+	}
+}
+
+/** Cancels editing and restores original inputs */
+export function cancelInputsEditing() {
+	if (state.originalInputsData !== null) {
+		state.iparamsInputsEditor.setValue(state.originalInputsData);
+	}
+	setInputsReadonly(true);
+}
+
+/** Sets inputs editor to readonly mode */
+export function setInputsReadonly(readonly) {
+	state.isInputsEditing = !readonly;
+	state.iparamsInputsEditor.setReadOnly(readonly);
+	const editorElement = document.getElementById('iparamsInputsEditor');
+	editorElement.classList.toggle('readonly', readonly);
+	editInputsBtn.style.display = readonly ? 'inline-block' : 'none';
+	saveInputsBtn.style.display = readonly ? 'none' : 'inline-block';
+	cancelInputsBtn.style.display = readonly ? 'none' : 'inline-block';
+	if (iparamsInputsForm) {
+		iparamsInputsForm.querySelectorAll('.iparam-input').forEach(input => input.disabled = readonly);
+		iparamsInputsForm.querySelectorAll('.multiselect-dropdown-button').forEach(button => {
+			if (readonly) {
+				button.tabIndex = -1;
+				button.style.pointerEvents = 'none';
+				button.classList.add('readonly');
+			} else {
+				button.tabIndex = 0;
+				button.style.pointerEvents = 'auto';
+				button.classList.remove('readonly');
+			}
+		});
+		if (readonly) {
+			iparamsInputsForm.querySelectorAll('.multiselect-dropdown-panel').forEach(panel => panel.style.display = 'none');
+			iparamsInputsForm.querySelectorAll('.multiselect-dropdown-button').forEach(button => button.classList.remove('open'));
+		}
+	}
+}
+
+/** Loads iparams inputs from the server */
+export async function loadIparamsInputs() {
+	try {
+		const iparamDefns = await fetchIparams();
+		state.iparamDefns = iparamDefns;
+		const inputs = await fetchIparamsInputs();
+		const mergedInputs = mergeInputsWithDefaults(inputs, iparamDefns);
+		const inputsJson = JSON.stringify(mergedInputs, null, 2);
+		state.iparamsInputsEditor.setValue(inputsJson);
+		state.originalInputsData = inputsJson;
+		updateInputsForm(mergedInputs);
+		state.iparamsInputsEditor.resize();
+	} catch (error) {
+		state.iparamsInputsEditor.setValue('{}');
+		state.originalInputsData = '{}';
+		updateInputsForm({});
+		showStatus(`Error loading iparams inputs: ${error.message}`);
+	}
+	setInputsReadonly(true);
+}
+
+/** Saves iparams inputs to the server */
+export async function saveIparamsInputs() {
+	try {
+		let inputs;
+		const isCurrentlyFormView = iparamsInputsForm && iparamsInputsForm.style.display !== 'none';
+		if (isCurrentlyFormView) {
+			inputs = getInputsFromForm();
+		} else {
+			if (state.iparamsInputsEditor) {
+				try {
+					inputs = JSON.parse(state.iparamsInputsEditor.getValue());
+					const cleanedInputs = {};
+					for (const [sectionName, sectionValues] of Object.entries(inputs)) {
+						if (!sectionValues || typeof sectionValues !== 'object' || Array.isArray(sectionValues)) continue;
+						const cleanedSection = {};
+						for (const [key, value] of Object.entries(sectionValues)) {
+							if (value !== undefined && value !== null && value !== '' && !(Array.isArray(value) && value.length === 0)) {
+								cleanedSection[key] = value;
+							}
+						}
+						if (Object.keys(cleanedSection).length > 0) {
+							cleanedInputs[sectionName] = cleanedSection;
+						}
+					}
+					inputs = cleanedInputs;
+				} catch (parseError) {
+					showStatus('Invalid JSON format. Please check your JSON syntax.');
+					return;
+				}
+			} else {
+				inputs = {};
+			}
+		}
+		if (typeof inputs !== 'object' || Array.isArray(inputs)) {
+			showStatus('Inputs must be an object keyed by section name.');
+			return;
+		}
+		showStatus('Saving iparams inputs...');
+		saveInputsBtn.disabled = true;
+		const data = await saveInputsAPI(inputs);
+		if (data.valid === false) {
+			if (data.message) {
+				showStatus(data.message);
+			} else {
+				const missing = data.missing || [];
+				if (missing.length > 0) {
+					const paramText = missing.length > 1 ? 'parameters' : 'parameter';
+					showStatus(`Missing required ${paramText}: ${missing.join(', ')}.`);
+				} else {
+					showStatus('Validation failed. Please check your inputs.');
+				}
+			}
+			saveInputsBtn.disabled = false;
+			return;
+		}
+		await new Promise(resolve => setTimeout(resolve, 100));
+		await loadIparamsInputs();
+		setInputsReadonly(true);
+		showStatus('Iparams inputs saved successfully!');
+	} catch (error) {
+		showStatus(`Error saving inputs: ${error.message}`);
+	} finally {
+		saveInputsBtn.disabled = false;
+	}
+}

package/ui/web/assets/js/modules/iparams.js

@@ -0,0 +1,82 @@
+import { state, editIparamsBtn, saveIparamsBtn, cancelIparamsBtn, EMPTY_IPARAM_DEFNS } from './constants.js';
+import { showStatus } from './ui-utils.js';
+import { fetchIparams, saveIparams as saveIparamsAPI } from './api.js';
+
+/** Loads iparams from the server */
+export async function loadIparams() {
+	try {
+		const iparamDefns = await fetchIparams();
+		state.iparamDefns = iparamDefns;
+		const iparamsJson = JSON.stringify(iparamDefns, null, 2);
+		state.iparamsEditor.setValue(iparamsJson);
+		state.originalIparamsData = iparamsJson;
+		state.iparamsEditor.resize();
+	} catch (error) {
+		if (error.rawContent !== null && error.rawContent !== undefined) {
+			state.iparamDefns = null;
+			const rawJson = JSON.stringify(error.rawContent, null, 2);
+			state.iparamsEditor.setValue(rawJson);
+			state.originalIparamsData = rawJson;
+		} else {
+			state.iparamDefns = EMPTY_IPARAM_DEFNS;
+			const emptyJson = JSON.stringify(EMPTY_IPARAM_DEFNS, null, 2);
+			state.iparamsEditor.setValue(emptyJson);
+			state.originalIparamsData = emptyJson;
+		}
+		showStatus(`Error loading iparams: ${error.message}`);
+	}
+	setIparamsReadonly(true);
+}
+
+/** Enables editing mode for iparams editor */
+export function enableIparamsEditing() {
+	state.isIparamsEditing = true;
+	state.iparamsEditor.setReadOnly(false);
+	editIparamsBtn.style.display = 'none';
+	saveIparamsBtn.style.display = 'inline-block';
+	cancelIparamsBtn.style.display = 'inline-block';
+}
+
+/** Cancels editing and restores original iparams */
+export function cancelIparamsEditing() {
+	if (state.originalIparamsData !== null) {
+		state.iparamsEditor.setValue(state.originalIparamsData);
+	}
+	setIparamsReadonly(true);
+}
+
+/** Sets iparams editor to readonly mode */
+export function setIparamsReadonly(readonly) {
+	state.isIparamsEditing = !readonly;
+	state.iparamsEditor.setReadOnly(readonly);
+	const editorElement = document.getElementById('iparamsEditor');
+	editorElement.classList.toggle('readonly', readonly);
+	editIparamsBtn.style.display = readonly ? 'inline-block' : 'none';
+	saveIparamsBtn.style.display = readonly ? 'none' : 'inline-block';
+	cancelIparamsBtn.style.display = readonly ? 'none' : 'inline-block';
+}
+
+/** Saves iparams to the server */
+export async function saveIparams() {
+	try {
+		const jsonData = state.iparamsEditor.getValue();
+		let iparamDefns;
+		try {
+			iparamDefns = JSON.parse(jsonData);
+		} catch (parseError) {
+			showStatus('Invalid JSON format. Please check your JSON syntax.');
+			return;
+		}
+		showStatus('Saving iparams...');
+		saveIparamsBtn.disabled = true;
+		await saveIparamsAPI(iparamDefns);
+		state.iparamDefns = iparamDefns;
+		state.originalIparamsData = jsonData;
+		setIparamsReadonly(true);
+		showStatus('Iparams saved successfully!');
+	} catch (error) {
+		showStatus(`Error saving iparams: ${error.message}`);
+	} finally {
+		saveIparamsBtn.disabled = false;
+	}
+}

package/ui/web/assets/js/modules/ui-utils.js

@@ -0,0 +1,87 @@
+import { statusText } from './constants.js';
+
+/** Displays a status message to the user */
+export function showStatus(message) {
+	statusText.textContent = message;
+}
+
+/** Sets up tab navigation */
+export function setupTabNavigation() {
+	document.querySelectorAll('.tab-btn').forEach(btn => {
+		btn.addEventListener('click', function() {
+			switchTab(this.getAttribute('data-tab'));
+		});
+	});
+}
+
+/** Switches between tabs */
+export function switchTab(tabName) {
+	document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+	document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
+	document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+	document.getElementById(`${tabName}-tab`).classList.add('active');
+	
+	if (tabName === 'iparams') {
+		showStatus('Define or update parameter');
+		setTimeout(async () => {
+			const module = await import('./iparams.js');
+			module.loadIparams();
+		}, 100);
+	} else if (tabName === 'iparams-inputs') {
+		showStatus('Provide values for parameters');
+		setTimeout(async () => {
+			const module = await import('./iparams-inputs.js');
+			module.loadIparamsInputs();
+		}, 100);
+	} else if (tabName === 'events') {
+		showStatus('Select an event type and click "Test Data" to test your function');
+	}
+}
+
+/** Shows popup modal for missing required parameters */
+export function showMissingParamsPopup(missingParams, message) {
+	const modal = document.getElementById('errorModal');
+	const missingParamsList = document.getElementById('missingParamsList');
+	if (!modal || !missingParamsList) return;
+	missingParamsList.innerHTML = '';
+	if (missingParams && missingParams.length > 0) {
+		missingParams.forEach(param => {
+			const li = document.createElement('li');
+			li.textContent = param;
+			missingParamsList.appendChild(li);
+		});
+	} else {
+		const li = document.createElement('li');
+		li.textContent = message || 'Unknown parameter';
+		missingParamsList.appendChild(li);
+	}
+	modal.style.display = 'block';
+}
+
+/** Closes the error modal */
+export function closeErrorModal() {
+	const modal = document.getElementById('errorModal');
+	if (modal) modal.style.display = 'none';
+}
+
+/** Sets up modal event listeners */
+export function setupModalListeners() {
+	const closeModalBtn = document.getElementById('closeModal');
+	const closeModalBtn2 = document.getElementById('closeModalBtn');
+	const goToIparamsBtn = document.getElementById('goToIparamsBtn');
+	const modal = document.getElementById('errorModal');
+	if (closeModalBtn) closeModalBtn.addEventListener('click', closeErrorModal);
+	if (closeModalBtn2) closeModalBtn2.addEventListener('click', closeErrorModal);
+	if (goToIparamsBtn) {
+		goToIparamsBtn.addEventListener('click', function() {
+			closeErrorModal();
+			switchTab('iparams-inputs');
+		});
+	}
+	if (modal) {
+		window.addEventListener('click', function(event) {
+			if (event.target === modal) closeErrorModal();
+		});
+	}
+}
+