@progress/sitefinity-nextjs-sdk
Version:
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.
115 lines (114 loc) • 7.65 kB
JavaScript
'use client';
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 { RestClientForContext } from '../../services/rest-client-for-context';
import { useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { getQueryParams } from '../common/query-params';
import { getFormRulesViewProps, getFormHiddenFields } from './form.view-props';
import { ErrorCodeException } from '../../rest-sdk/errors/error-code.exception';
import { SF_WEBSERVICE_API_KEY_HEADER } from '../common/utils';
export function FormCSR(props) {
const entity = props.model.Properties;
const searchParams = useSearchParams();
const queryParams = useMemo(() => {
return getQueryParams(searchParams);
}, [searchParams]);
const context = useMemo(() => {
return {
...props.requestContext,
searchParams: queryParams
};
}, [props.requestContext, queryParams]);
const [viewProps, setViewProps] = useState({
customSubmitAction: false,
visibilityClasses: StylingConfig.VisibilityClasses,
invalidClass: StylingConfig.InvalidClass,
skipDataSubmission: !context.isLive || (queryParams && !!queryParams['sf-content-action']),
attributes: entity.Attributes
});
const [error, setError] = useState('');
const additionalHeaders = {};
if (props.requestContext.webserviceApiKey) {
additionalHeaders[SF_WEBSERVICE_API_KEY_HEADER] = props.requestContext.webserviceApiKey;
}
const getFormModel = (formDto) => {
const currentQueryParams = { ...queryParams };
if (queryParams && queryParams['sf-content-action']) {
currentQueryParams['sf-content-action'] = encodeURIComponent(queryParams['sf-content-action']);
}
return RestClient.getFormLayout({ id: formDto.Id, queryParams: currentQueryParams, additionalHeaders }).then(formModel => {
return formModel;
}).catch(err => {
if (context.isEdit) {
return RestClient.getFormLayout({ id: formDto.Id, queryParams: Object.assign({}, currentQueryParams, { [QueryParamNames.Action]: 'edit' }), additionalHeaders }).then(formModel => {
setViewProps(currentProps => Object.assign({}, currentProps, {
warning: 'This form is a Draft and will not be displayed on the site until you publish the form.'
}));
return formModel;
});
}
else {
throw err;
}
});
};
useEffect(() => {
if (entity.SelectedItems && entity.SelectedItems.ItemIdsOrdered && entity.SelectedItems.ItemIdsOrdered.length > 0) {
RestClientForContext.getItem(entity.SelectedItems, { type: RestSdkTypes.Form, additionalHeaders }).then(formDto => {
return getFormModel(formDto).then(formModel => {
setViewProps(currentProps => Object.assign({}, currentProps, {
formModel: formModel,
rules: getFormRulesViewProps(formDto),
submitUrl: `/forms/submit/${formDto.Name}/${context.culture}?${QueryParamNames.Site}=${context.layout?.SiteId}&${QueryParamNames.SiteTempFlag}=true`,
hiddenFields: getFormHiddenFields(formModel).join(',')
}));
if (entity.FormSubmitAction === FormSubmitAction.Redirect && entity.RedirectPage) {
return RestClientForContext.getItem(entity.RedirectPage, { type: RestSdkTypes.Pages, additionalHeaders }).then(redirectPage => {
if (redirectPage) {
setViewProps(currentProps => Object.assign({}, currentProps, {
customSubmitAction: true,
redirectUrl: redirectPage.ViewUrl
}));
}
});
}
else if (entity.FormSubmitAction === FormSubmitAction.Message) {
setViewProps(currentProps => Object.assign({}, currentProps, {
customSubmitAction: true,
successMessage: entity.SuccessMessage
}));
}
});
}).catch(error => {
let errorMessage = JSON.stringify(error);
if (error instanceof ErrorCodeException) {
errorMessage = error.message;
}
setError(errorMessage);
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
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);
return (_jsxs(_Fragment, { children: [error && _jsx("div", { ...htmlAttributes(props, error) }), viewProps.formModel &&
_jsx(_Fragment, { children: _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-hidden-fields", name: "sf_FormHiddenFields", value: viewProps.hiddenFields, autoComplete: "off" }), _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": "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);
}) })] }) }), !viewProps.formModel && context.isEdit &&
_jsx(_Fragment, { children: _jsx("div", { ...formDataAttributes }) })] }));
}