@sitecore-jss/sitecore-jss/dist/esm/form/form.js

This module is provided as a part of Sitecore JavaScript Rendering SDK. It contains the core JSS APIs (layout service) and utilities.

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { form } from '@sitecore-cloudsdk/events/browser';
import { getEdgeProxyFormsUrl } from '../graphql';
import debug from '../debug';
/**
 * Fetches the form markup from the Sitecore Edge service and renders it in the component's template.
 * @param {string} contextId - The unique identifier of the current context
 * @param {string} formId - The unique identifier of the form
 * @param {string} [edgeUrl] - The URL of the Sitecore Edge Platform
 */
export const loadForm = (contextId, formId, edgeUrl) => __awaiter(void 0, void 0, void 0, function* () {
    if (!contextId) {
        debug.form('Form was not able to render since context id was not provided');
        return '';
    }
    const url = getEdgeProxyFormsUrl(contextId, formId, edgeUrl);
    try {
        debug.form(`Fetching form data from ${url}`);
        const rsp = yield fetch(url, {
            method: 'GET',
            cache: 'no-cache',
        });
        if (rsp.status !== 200) {
            throw new Error('Failed to fetch form data');
        }
        const content = yield rsp.text();
        debug.form(`Form data fetch response: ${content}`);
        return content;
    }
    catch (error) {
        debug.form(`Form '${formId}' was not able to render`, error);
        throw error;
    }
});
/**
 * When you set the innerHTML property of an element, the browser does not execute any <script> tags included in the HTML string
 * This method ensures that any <script> elements within the loaded HTML are executed.
 * It re-creates the script elements and appends the to the component's template, then removes old script elements to avoid duplication.
 * @param {HTMLElement} rootElement - The root element to execute script elements within
 */
export const executeScriptElements = (rootElement) => {
    const scriptElements = rootElement.querySelectorAll('script');
    if (!scriptElements) {
        return;
    }
    Array.from(scriptElements).forEach((scriptElement) => {
        var _a;
        const clonedElement = document.createElement('script');
        Array.from(scriptElement.attributes).forEach((attribute) => {
            clonedElement.setAttribute(attribute.name, attribute.value);
        });
        clonedElement.text = scriptElement.text;
        (_a = scriptElement === null || scriptElement === void 0 ? void 0 : scriptElement.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(clonedElement, scriptElement);
    });
};
/**
 * Subscribes to the Form event and then sends data to CloudSDK.
 * This listener captures interactions such as form views or submissions
 * @param {HTMLElement} formElement - The form element to subscribe to events on
 * @param {string} [componentId] - The unique identifier of the component
 */
export const subscribeToFormSubmitEvent = (formElement, componentId) => {
    formElement.addEventListener('form:engage', ((e) => {
        const { formId, name } = e.detail;
        if (formId && name) {
            debug.form('Sending form event', formId, name);
            form(formId, name, (componentId === null || componentId === void 0 ? void 0 : componentId.replace(/-/g, '')) || '');
        }
    }));
};