@progress/sitefinity-nextjs-sdk/widgets/form/form.js

Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { StyleGenerator } from '../styling/style-generator.service';
import { FormSubmitAction } from './interfaces/form-submit-action';
import { StylingConfig } from '../styling/styling-config';
import { RenderWidgetService } from '../../services/render-widget-service';
import { QueryParamNames } from '../../rest-sdk/query-params-names';
import { FormClient } from './form-client';
import { classNames } from '../../editor/utils/classNames';
import { htmlAttributes, setWarning } from '../../editor/widget-framework/attributes';
import { RestClient, RestSdkTypes } from '../../rest-sdk/rest-client';
import { getFormRulesViewProps, getFormHiddenFields } from './form.view-props';
import { RestClientForContext } from '../../services/rest-client-for-context';
import { Tracer } from '@progress/sitefinity-nextjs-sdk/diagnostics/empty';
import { ErrorCodeException } from '../../rest-sdk/errors/error-code.exception';
export async function Form(props) {
    const { span, ctx } = Tracer.traceWidget(props, true);
    const entity = props.model.Properties;
    const context = props.requestContext;
    const searchParams = context.searchParams;
    const queryParams = { ...searchParams };
    const viewProps = {
        customSubmitAction: false,
        visibilityClasses: StylingConfig.VisibilityClasses,
        invalidClass: StylingConfig.InvalidClass
    };
    if (entity.SelectedItems && entity.SelectedItems.ItemIdsOrdered && entity.SelectedItems.ItemIdsOrdered.length > 0) {
        let formDto = null;
        try {
            formDto = await RestClientForContext.getItem(entity.SelectedItems, { type: RestSdkTypes.Form, culture: props.requestContext.culture, traceContext: ctx });
        }
        catch (error) {
            let errorMessage;
            if (error instanceof ErrorCodeException) {
                errorMessage = error.message;
            }
            else {
                errorMessage = error;
            }
            const attributes = htmlAttributes(props, errorMessage);
            return (props.requestContext.isEdit ? _jsx("div", { ...attributes }) : null);
        }
        if (searchParams && searchParams['sf-content-action']) {
            viewProps.skipDataSubmission = true;
            queryParams['sf-content-action'] = encodeURIComponent(searchParams['sf-content-action']);
        }
        if (!context.isLive) {
            viewProps.skipDataSubmission = true;
        }
        let formModel;
        try {
            formModel = await RestClient.getFormLayout({ id: formDto.Id, additionalQueryParams: queryParams, traceContext: ctx });
        }
        catch (err) {
            if (context.isEdit) {
                queryParams[QueryParamNames.Action] = 'edit';
                formModel = await RestClient.getFormLayout({ id: formDto.Id, queryParams: queryParams, traceContext: ctx });
                viewProps.warning = 'This form is a Draft and will not be displayed on the site until you publish the form.';
            }
            else {
                throw err;
            }
        }
        viewProps.formModel = formModel;
        viewProps.rules = getFormRulesViewProps(formDto);
        viewProps.submitUrl = `/forms/submit/${formDto.Name}/${context.culture}?${QueryParamNames.Site}=${context.layout?.SiteId}&${QueryParamNames.SiteTempFlag}=true`;
        viewProps.hiddenFields = getFormHiddenFields(viewProps.formModel).join(',');
        viewProps.attributes = entity.Attributes;
        if (entity.FormSubmitAction === FormSubmitAction.Redirect && entity.RedirectPage) {
            try {
                const redirectPage = await RestClientForContext.getItem(entity.RedirectPage, { type: RestSdkTypes.Pages, culture: props.requestContext.culture, traceContext: ctx });
                if (redirectPage) {
                    viewProps.customSubmitAction = true;
                    viewProps.redirectUrl = await redirectPage.ViewUrl;
                }
            }
            catch (error) { /* empty */ }
        }
        else if (entity.FormSubmitAction === FormSubmitAction.Message) {
            viewProps.customSubmitAction = true;
            viewProps.successMessage = entity.SuccessMessage;
        }
    }
    const formDataAttributes = htmlAttributes(props);
    if (viewProps.warning) {
        setWarning(formDataAttributes, viewProps.warning);
    }
    const defaultClass = entity.CssClass;
    const marginClass = entity.Margins && StyleGenerator.getMarginClasses(entity.Margins);
    const containerClass = classNames(defaultClass, marginClass);
    const renderForm = (_jsxs(FormClient, { viewProps: viewProps, className: containerClass, formDataAttributes: formDataAttributes, children: [(viewProps.rules) &&
                _jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", "data-sf-role": "form-rules", value: viewProps.rules }), _jsx("input", { type: "hidden", "data-sf-role": "form-rules-skip-fields", name: "sf_FormSkipFields", autoComplete: "off" }), _jsx("input", { type: "hidden", "data-sf-role": "form-rules-notification-emails", name: "sf_FormNotificationEmails", autoComplete: "off" }), _jsx("input", { type: "hidden", "data-sf-role": "form-rules-message", name: "sf_FormMessage", autoComplete: "off" }), _jsx("input", { type: "hidden", "data-sf-role": "form-rules-redirect-page", name: "sf_FormRedirectPage", autoComplete: "off" })] }), _jsx("input", { type: "hidden", "data-sf-role": "form-rules-hidden-fields", name: "sf_FormHiddenFields", value: viewProps.hiddenFields, autoComplete: "off" }), _jsx("input", { type: "hidden", "data-sf-role": "redirect-url", value: viewProps.redirectUrl }), _jsx("input", { type: "hidden", "data-sf-role": "custom-submit-action", value: viewProps.customSubmitAction.toString() }), viewProps.skipDataSubmission && _jsx("span", { "data-sf-role": "skip-data-submission" }), _jsx("div", { "data-sf-role": "fields-container", children: viewProps.formModel && viewProps.formModel.ComponentContext.Components.map((widgetModel, idx) => {
                    return RenderWidgetService.createComponent(widgetModel, context, ctx);
                }) })] }));
    return (_jsxs(_Fragment, { children: [viewProps.formModel &&
                _jsx(_Fragment, { children: renderForm }), !viewProps.formModel && context.isEdit &&
                _jsx(_Fragment, { children: _jsx("div", { ...formDataAttributes }) }), Tracer.endSpan(span)] }));
}