@chargebee/chargebee-apps-libs 0.0.1

package/ui/web/assets/js/main.js

@@ -0,0 +1,61 @@
+// Main entry point - imports and initializes all modules
+import { initializeCodeMirror, initializeIparamsEditors } from './modules/editors.js';
+import { setupTabNavigation, setupModalListeners, switchTab } from './modules/ui-utils.js';
+import { 
+	handleEventTypeChange, 
+	loadAvailableEventTypes,
+	resetToOriginalData,
+	testEvent
+} from './modules/events.js';
+import {
+	enableIparamsEditing,
+	cancelIparamsEditing,
+	saveIparams
+} from './modules/iparams.js';
+import {
+	enableInputsEditing,
+	cancelInputsEditing,
+	toggleInputsView,
+	saveIparamsInputs
+} from './modules/iparams-inputs.js';
+import {
+	eventTypeSelect,
+	resetBtn,
+	testDataBtn,
+	saveIparamsBtn,
+	saveInputsBtn,
+	editIparamsBtn,
+	editInputsBtn,
+	cancelIparamsBtn,
+	cancelInputsBtn,
+	toggleViewBtn
+} from './modules/constants.js';
+
+/**
+ * Sets up event listeners for user interactions
+ */
+function setupEventListeners() {
+	eventTypeSelect.addEventListener('change', handleEventTypeChange);
+	resetBtn.addEventListener('click', resetToOriginalData);
+	testDataBtn.addEventListener('click', testEvent);
+	saveIparamsBtn.addEventListener('click', saveIparams);
+	saveInputsBtn.addEventListener('click', saveIparamsInputs);
+	editIparamsBtn.addEventListener('click', enableIparamsEditing);
+	editInputsBtn.addEventListener('click', enableInputsEditing);
+	cancelIparamsBtn.addEventListener('click', cancelIparamsEditing);
+	cancelInputsBtn.addEventListener('click', cancelInputsEditing);
+	toggleViewBtn.addEventListener('click', toggleInputsView);
+}
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+	initializeCodeMirror();
+	initializeIparamsEditors();
+	setupEventListeners();
+	setupTabNavigation();
+	setupModalListeners();
+	
+	// Load available event types and select the first one by default
+	loadAvailableEventTypes();
+});
+

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

@@ -0,0 +1,97 @@
+/**
+ * API utility functions for making fetch requests
+ */
+
+import { EMPTY_IPARAM_DEFNS } from './constants.js';
+
+/** Fetches available event types from manifest */
+export async function fetchEventTypes() {
+	const response = await fetch('/api/manifest');
+	if (!response.ok) throw new Error('Failed to load event types');
+	return await response.json();
+}
+
+/** Fetches test data for a specific event type */
+export async function fetchTestData(eventType) {
+	const response = await fetch(`/api/test-data/${eventType}`);
+	if (!response.ok) {
+		if (response.status === 404) return null;
+		const errorData = await response.json();
+		throw new Error(errorData.message || 'Failed to load sample data');
+	}
+	return await response.json();
+}
+
+/** Invokes the handler with event data */
+export async function invokeHandler(payload) {
+	const response = await fetch('/api/invoke', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(payload)
+	});
+	const responseText = await response.text();
+	if (!response.ok) {
+		try {
+			return { error: JSON.parse(responseText), status: response.status };
+		} catch {
+			return { error: { message: `Server returned status ${response.status}` }, status: response.status };
+		}
+	}
+	try {
+		return { data: JSON.parse(responseText), status: response.status };
+	} catch {
+		return { data: { message: 'Success' }, status: response.status };
+	}
+}
+
+/** Fetches iparams */
+export async function fetchIparams() {
+	const response = await fetch('/api/iparams');
+	const data = await response.json();
+	if (!response.ok) {
+		const error = new Error(data.message || data.error || 'Failed to load iparams.json');
+		error.rawContent = data.rawContent;
+		throw error;
+	}
+	return data.iparams || EMPTY_IPARAM_DEFNS;
+}
+
+/** Saves iparams */
+export async function saveIparams(iparams) {
+	const response = await fetch('/api/iparams', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ iparams })
+	});
+	if (!response.ok) {
+		const errorData = await response.json();
+		throw new Error(errorData.message || errorData.error || 'Unknown error');
+	}
+	return await response.json();
+}
+
+/** Fetches iparams inputs */
+export async function fetchIparamsInputs() {
+	const response = await fetch('/api/iparams/inputs');
+	if (!response.ok) {
+		const errorData = await response.json();
+		throw new Error(errorData.message || errorData.error || 'Failed to load iparams.local.json');
+	}
+	const data = await response.json();
+	return data.inputs || {};
+}
+
+/** Saves iparams inputs (returns body with success or valid: false + missing/message on validation error) */
+export async function saveIparamsInputs(inputs) {
+	const response = await fetch('/api/iparams/inputs', {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ inputs })
+	});
+	if (!response.ok) {
+		const errorData = await response.json();
+		throw new Error(errorData.message || errorData.error || 'Unknown error');
+	}
+	return await response.json();
+}
+

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

@@ -0,0 +1,33 @@
+// Global state variables - using object to allow mutation
+export const EMPTY_IPARAM_DEFNS = {};
+
+export const state = {
+	editor: null,
+	iparamsEditor: null,
+	iparamsInputsEditor: null,
+	currentEventType: '',
+	originalEventData: null,
+	originalIparamsData: null,
+	originalInputsData: null,
+	isIparamsEditing: false,
+	isInputsEditing: false,
+	isFormView: true, // true for form view, false for JSON view
+	iparamDefns: EMPTY_IPARAM_DEFNS // Store iparam definition for form generation
+};
+
+// DOM elements
+export const eventTypeSelect = document.getElementById('eventType');
+export const jsonEditor = document.getElementById('jsonEditor');
+export const resetBtn = document.getElementById('resetBtn');
+export const testDataBtn = document.getElementById('testDataBtn');
+export const statusBlock = document.getElementById('statusBlock');
+export const statusText = document.getElementById('statusText');
+export const saveIparamsBtn = document.getElementById('saveIparamsBtn');
+export const saveInputsBtn = document.getElementById('saveInputsBtn');
+export const editIparamsBtn = document.getElementById('editIparamsBtn');
+export const editInputsBtn = document.getElementById('editInputsBtn');
+export const cancelIparamsBtn = document.getElementById('cancelIparamsBtn');
+export const cancelInputsBtn = document.getElementById('cancelInputsBtn');
+export const toggleViewBtn = document.getElementById('toggleViewBtn');
+export const iparamsInputsForm = document.getElementById('iparamsInputsForm');
+

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

@@ -0,0 +1,41 @@
+import { state } from './constants.js';
+
+const editorOptions = {
+	enableBasicAutocompletion: true,
+	enableLiveAutocompletion: true,
+	enableSnippets: true,
+	fontSize: "13px",
+	showPrintMargin: false,
+	showGutter: true,
+	highlightActiveLine: true,
+	wrap: true,
+	tabSize: 2,
+	useSoftTabs: true,
+	showInvisibles: false
+};
+
+/** Initializes the Ace code editor with JSON syntax highlighting */
+export function initializeCodeMirror() {
+	state.editor = ace.edit("jsonEditor");
+	state.editor.setTheme("ace/theme/github");
+	state.editor.session.setMode("ace/mode/json");
+	state.editor.setOptions(editorOptions);
+	state.editor.setValue('{\n  \n}');
+	const editorEl = document.getElementById('jsonEditor');
+	state.editor.on('focus', () => editorEl.classList.add('ace-focused'));
+	state.editor.on('blur', () => editorEl.classList.remove('ace-focused'));
+}
+
+/** Initializes the Ace code editors for iparams and inputs */
+export function initializeIparamsEditors() {
+	state.iparamsEditor = ace.edit("iparamsEditor");
+	state.iparamsEditor.setTheme("ace/theme/github");
+	state.iparamsEditor.session.setMode("ace/mode/json");
+	state.iparamsEditor.setOptions({ ...editorOptions, readOnly: true });
+	
+	state.iparamsInputsEditor = ace.edit("iparamsInputsEditor");
+	state.iparamsInputsEditor.setTheme("ace/theme/github");
+	state.iparamsInputsEditor.session.setMode("ace/mode/json");
+	state.iparamsInputsEditor.setOptions({ ...editorOptions, readOnly: true });
+}
+

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

@@ -0,0 +1,195 @@
+import { state, eventTypeSelect, resetBtn, testDataBtn } from './constants.js';
+import { showStatus, showMissingParamsPopup } from './ui-utils.js';
+import { fetchEventTypes, fetchTestData, invokeHandler } from './api.js';
+
+/** Handles changes to the event type selection dropdown */
+export function handleEventTypeChange() {
+	state.currentEventType = eventTypeSelect.value;
+	if (state.currentEventType) {
+		resetBtn.disabled = false;
+		testDataBtn.disabled = false;
+		loadSampleData();
+	} else {
+		resetBtn.disabled = true;
+		testDataBtn.disabled = true;
+		state.editor.setValue('{\n  \n}');
+		state.originalEventData = null;
+		showStatus('Select an event type to get started');
+	}
+}
+
+/** Loads sample data for the currently selected event type */
+export async function loadSampleData() {
+	if (!state.currentEventType || typeof state.currentEventType !== 'string') return;
+	try {
+		const data = await fetchTestData(state.currentEventType);
+		if (data) {
+			state.originalEventData = data;
+			state.editor.setValue(JSON.stringify(data, null, 2));
+			showStatus(`Sample data loaded for ${state.currentEventType}!`);
+		} else {
+			state.editor.setValue(`{\n  // No sample data available for this event\n  // Please create a test_data/${state.currentEventType}.json file\n}`);
+			showStatus(`No test data found for ${state.currentEventType}. Create test_data/${state.currentEventType}.json`);
+		}
+	} catch (error) {
+		showStatus(`Error loading sample data for ${state.currentEventType}: ${error.message}`);
+	}
+}
+
+/** Resets the editor content to the original sample data */
+export function resetToOriginalData() {
+	if (!state.currentEventType || !state.originalEventData) {
+		showStatus('No original data to reset to. Please select an event type first.');
+		return;
+	}
+	state.editor.setValue(JSON.stringify(state.originalEventData, null, 2));
+	showStatus('Data reset to original sample data!');
+}
+
+/** Tests the current event by sending it to the handler function */
+export async function testEvent() {
+	if (!state.currentEventType) return;
+	try {
+		const jsonData = state.editor.getValue();
+		let eventData;
+		try {
+			eventData = JSON.parse(jsonData);
+		} catch (parseError) {
+			showStatus('Invalid JSON format. Please check your JSON syntax.');
+			return;
+		}
+		const payload = { event_type: state.currentEventType, ...eventData };
+		showStatus('Testing event...');
+		testDataBtn.disabled = true;
+		const result = await invokeHandler(payload);
+		
+		if (result.status === 200) {
+			const eventAnalysis = await fetchEventTypes();
+			const currentEvent = eventAnalysis.events?.find(event => event.event_type === state.currentEventType);
+			const handlerName = currentEvent?.handler?.name || 'unknown';
+			showStatus(`Event handler '${handlerName}' executed successfully! Check the output in the terminal.`);
+		} else {
+			const errorData = result.error;
+			if (result.status === 400) {
+				if (errorData.showPopup && errorData.missingParams) {
+					showMissingParamsPopup(errorData.missingParams, errorData.message);
+					showStatus(`Error: ${errorData.message}`);
+				} else if (errorData.message?.includes('Handler function') && errorData.message.includes('not found in handler.js')) {
+					const handlerMatch = errorData.message.match(/Handler function '([^']+)'/);
+					const handlerName = handlerMatch ? handlerMatch[1] : 'unknown';
+					showStatus(`Error: Handler function '${handlerName}' not found in handler.js. Please create this function in your handler.js file.`);
+				} else if (errorData.message?.includes('No handler configured')) {
+					showStatus(`Error: No handler configured for event type '${state.currentEventType}' in manifest.json.`);
+				} else {
+					showStatus(`Error: ${errorData.message || 'Bad request'}`);
+				}
+			} else if (result.status === 404) {
+				if (errorData.message?.includes('handler.js not found')) {
+					showStatus('Error: handler.js file not found. Please create a handler.js file in your app directory.');
+				} else if (errorData.message?.includes('manifest.json not found')) {
+					showStatus('Error: manifest.json file not found. Please create a manifest.json file in your app directory.');
+				} else {
+					showStatus(`Error: ${errorData.message || 'Resource not found'}`);
+				}
+			} else {
+				showStatus(`Error: ${errorData.message || 'Unknown error'}`);
+			}
+		}
+	} catch (error) {
+		if (error.name === 'TypeError' && error.message.includes('fetch')) {
+			showStatus('Error: Cannot connect to server. Please check if the server is running.');
+		} else if (error.name === 'SyntaxError') {
+			showStatus('Error: Invalid response from server. Please try again.');
+		} else {
+			showStatus(`Error: ${error.message}`);
+		}
+	} finally {
+		testDataBtn.disabled = false;
+	}
+}
+
+/** Loads and populates the dropdown with available event types from the server */
+export async function loadAvailableEventTypes() {
+	try {
+		const data = await fetchEventTypes();
+		const events = data.events || [];
+		eventTypeSelect.innerHTML = '<option value="">Choose an event type...</option>';
+		events.forEach(cbEvent => {
+			const option = document.createElement('option');
+			option.value = cbEvent.event_type;
+			option.textContent = cbEvent.event_type;
+			eventTypeSelect.appendChild(option);
+		});
+		
+		if (events.length > 0) {
+			const incompleteEvents = events.filter(event => event.status === 'incomplete');
+			if (incompleteEvents.length > 0) {
+				const missingItems = incompleteEvents.map(event => {
+					const issues = [];
+					if (!event.handler.exists) {
+						issues.push(event.handler.name ? `handler function '${event.handler.name}'` : 'handler mapping');
+					}
+					if (!event.has_test_data) issues.push('test data');
+					return `${event.event_type} (missing: ${issues.join(', ')})`;
+				});
+				showStatus(`Events configured: ${events.length}. Missing components: ${missingItems.join(', ')}`);
+			} else {
+				showStatus(`All ${events.length} events are properly configured with handlers and test data.`);
+			}
+			const firstEventType = events[0].event_type;
+			eventTypeSelect.value = firstEventType;
+			state.currentEventType = firstEventType;
+			resetBtn.disabled = false;
+			testDataBtn.disabled = false;
+			saveToLocalStorage();
+			loadSampleData();
+		} else {
+			showStatus('No events configured in manifest.json. Please add events to your manifest file.');
+		}
+	} catch (error) {
+		showStatus('Error loading event types. Please check your connection.');
+	}
+}
+
+/** Saves the current editor state to localStorage for persistence */
+export function saveToLocalStorage() {
+	if (state.currentEventType) {
+		localStorage.setItem('serverless', JSON.stringify({
+			eventType: state.currentEventType,
+			jsonData: state.editor.getValue()
+		}));
+	}
+}
+
+/** Loads saved editor state from localStorage */
+export function loadFromLocalStorage() {
+	const saved = localStorage.getItem('serverless');
+	if (saved) {
+		try {
+			const data = JSON.parse(saved);
+			eventTypeSelect.value = data.eventType;
+			state.currentEventType = data.eventType;
+			state.editor.setValue(data.jsonData);
+			resetBtn.disabled = false;
+			testDataBtn.disabled = false;
+			loadSampleData();
+		} catch (error) {
+			// Ignore localStorage errors
+		}
+	}
+}
+
+// Keyboard shortcuts
+document.addEventListener('keydown', function(e) {
+	if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && !testDataBtn.disabled) {
+		e.preventDefault();
+		testEvent();
+	}
+	if ((e.ctrlKey || e.metaKey) && e.key === 'r' && !resetBtn.disabled) {
+		e.preventDefault();
+		resetToOriginalData();
+	}
+});
+
+window.addEventListener('load', loadFromLocalStorage);
+

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

@@ -0,0 +1,70 @@
+import { state } from './constants.js';
+
+/**
+ * Returns sections from the stored iparam definition.
+ * @returns {Array} Section definitions
+ */
+export function getIparamSections() {
+	return state.iparamDefns?.installation_parameters?.sections ?? [];
+}
+
+/**
+ * Builds a unique DOM id for a parameter input within a section.
+ * @param {string} sectionName - Section name
+ * @param {string} paramName - Parameter name
+ * @returns {string} Unique element id
+ */
+export function getIparamInputId(sectionName, paramName) {
+	return `iparam-${sectionName}-${paramName}`;
+}
+
+/**
+ * Merges sectioned inputs with defaults from iparam definitions.
+ * @param {Object} inputs - Provided input values keyed by section
+ * @param {Object} iparamDefns - Iparams definition object
+ * @returns {Object} Merged inputs with defaults applied
+ */
+export function mergeInputsWithDefaults(inputs, iparamDefns) {
+	const merged = {};
+	const sections = iparamDefns?.installation_parameters?.sections ?? [];
+
+	sections.forEach(section => {
+		const sectionInputs = inputs?.[section.name] ?? {};
+		const mergedSection = {};
+
+		section.parameters.forEach(param => {
+			const value = sectionInputs[param.name];
+			const hasValue = value !== undefined && value !== null && value !== '';
+			if (hasValue && !(Array.isArray(value) && value.length === 0)) {
+				mergedSection[param.name] = value;
+			}
+			if (mergedSection[param.name] === undefined && param.default !== undefined && param.default !== null) {
+				mergedSection[param.name] = param.default;
+			}
+		});
+
+		if (Object.keys(mergedSection).length > 0) {
+			merged[section.name] = mergedSection;
+		}
+	});
+
+	return merged;
+}
+
+/** Updates the multiselect dropdown button display */
+export function updateMultiselectDisplay(button, panel, paramName) {
+	const selected = Array.from(panel.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
+	const isOpen = button.classList.contains('open');
+	button.innerHTML = '';
+	if (selected.length > 0) {
+		button.textContent = selected.join(', ');
+		button.classList.remove('placeholder');
+	} else {
+		button.textContent = '-- Select options --';
+		button.classList.add('placeholder');
+	}
+	const arrow = document.createElement('span');
+	arrow.className = 'select-dropdown-arrow';
+	button.appendChild(arrow);
+	if (isOpen) button.classList.add('open');
+}