@bigbinary/neeto-form-frontend 4.4.7 → 4.4.8

package/dist/ExternalForm.js

@@ -0,0 +1,647 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { memo, useRef, useEffect, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import classnames from 'classnames';
+import { Formik, Form } from 'formik';
+import i18next from 'i18next';
+import { isPresent, noop, removeBy } from '@bigbinary/neeto-cist';
+import useHotkeys from '@bigbinary/neeto-hotkeys';
+import Warning from '@bigbinary/neeto-icons/Warning';
+import Typography from '@bigbinary/neetoui/Typography';
+import Button$1 from '@bigbinary/neetoui/Button';
+import Spinner$2 from '@bigbinary/neetoui/Spinner';
+import NeetoUICallout from '@bigbinary/neetoui/Callout';
+import NoData from '@bigbinary/neetoui/NoData';
+import { not, path, equals, isEmpty } from 'ramda';
+import { I18nextProvider, useTranslation } from 'react-i18next';
+import { d as usePublicForm, g as useCreateSubmission, h as useUpdateSubmission, f as useSubmission, i as QUERY_KEYS } from './constants-Cj0XxE8a.js';
+import Close from '@bigbinary/neeto-icons/Close';
+import { a as isBlank, g as getComponentDisplayName, p as parseServerError } from './index-DhtQJpD_.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import Check from '@bigbinary/neeto-icons/Check';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { C as CALLOUT_POSITIONS, b as CALLOUT_STYLES, L as LAST_ELEMENTS_THRESHOLD, a as QUESTION_KIND } from './yup-CSYHMEsr.js';
+import { c as clientI18nInstance, d as getWithExpiry, e as clearEmailVerificationDetails, F as FormikWrap, g as getFieldComponent, b as buildAutoCompleteAttribute, r as renderButtonsInOrder, m as mergeRefs, a as generateInitValues, f as generateFormResponse, h as clearLocalStorageValues } from './utils-CI844li1.js';
+import { getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@bigbinary/neeto-commons-frontend/constants';
+import 'axios';
+import '@babel/runtime/helpers/typeof';
+import '@bigbinary/neeto-editor/utils';
+import 'dompurify';
+import '@bigbinary/neeto-icons/Plus';
+import 'yup';
+import 'libphonenumber-js';
+import '@bigbinary/neeto-editor/EditorContent';
+import '@bigbinary/neetoui/MultiEmailInput';
+import '@bigbinary/neeto-molecules/PhoneNumber';
+import '@babel/runtime/helpers/toArray';
+import '@bigbinary/neetoui/Select';
+import '@bigbinary/neetoui/Input';
+import '@bigbinary/neeto-icons/Refresh';
+import '@bigbinary/neeto-commons-frontend/initializers';
+import 'react-google-recaptcha';
+import '@bigbinary/neetoui/Checkbox';
+import '@bigbinary/neetoui/DatePicker';
+import '@bigbinary/neetoui/Toastr';
+import '@bigbinary/neeto-icons/CheckCircle';
+import '@bigbinary/neeto-molecules/FileUpload';
+import '@bigbinary/neetoui/Label';
+import '@bigbinary/neetoui/Radio';
+import '@bigbinary/neeto-icons/Image';
+import '@bigbinary/neeto-editor/Editor';
+import '@bigbinary/neeto-icons/Info';
+import '@bigbinary/neetoui/Textarea';
+import '@bigbinary/neetoui/Tag';
+
+var Spinner$1 = function Spinner(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size;
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-form-engine-spinner",
+    children: /*#__PURE__*/jsx("svg", {
+      fill: "none",
+      height: size,
+      viewBox: "0 0 25 24",
+      width: size,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /*#__PURE__*/jsx("path", {
+        d: "M12.5 5.00098V8.75M17.4401 7.04867L14.9888 9.5M19.5008 11.9994H15.5M17.4401 16.9372L14.9888 14.4859M12.5023 18.9979V15M7.5516 16.9372L10.4888 14M5.50391 11.9994H9.5M7.5516 7.04867L10.0029 9.5",
+        stroke: "#87929D",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      })
+    })
+  });
+};
+var Spinner = /*#__PURE__*/memo(Spinner$1);
+
+var _excluded = ["label", "loading", "success", "className"];
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Button = function Button(_ref) {
+  var label = _ref.label,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$success = _ref.success,
+    success = _ref$success === void 0 ? false : _ref$success,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs("button", _objectSpread$2(_objectSpread$2({
+    className: classnames("neeto-form-engine-button", className)
+  }, otherProps), {}, {
+    children: [loading && /*#__PURE__*/jsx(ButtonLoader, {}), success && /*#__PURE__*/jsx(Success$2, {}), label]
+  }));
+};
+var ButtonLoader = function ButtonLoader() {
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-form-engine-button__loader",
+    children: /*#__PURE__*/jsx(Spinner, {})
+  });
+};
+var Success$2 = function Success() {
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-form-engine-button__success",
+    children: /*#__PURE__*/jsx(Check, {})
+  });
+};
+
+var Callout = function Callout(_ref) {
+  var _ref$style = _ref.style,
+    style = _ref$style === void 0 ? CALLOUT_STYLES.ERROR : _ref$style,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? CALLOUT_POSITIONS.ABSOLUTE : _ref$position,
+    _ref$callout = _ref.callout,
+    callout = _ref$callout === void 0 ? {} : _ref$callout,
+    children = _ref.children,
+    className = _ref.className,
+    onClose = _ref.onClose;
+  var isVisible = callout.isVisible,
+    title = callout.title,
+    message = callout.message,
+    primaryButton = callout.primaryButton,
+    secondaryButton = callout.secondaryButton;
+  if (!isVisible) return null;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames("neeto-form-engine-callout", _defineProperty({
+      "neeto-form-engine-callout--error": style === CALLOUT_STYLES.ERROR,
+      "neeto-form-engine-callout--info": style === CALLOUT_STYLES.INFO,
+      "neeto-form-engine-callout--static": position === CALLOUT_POSITIONS.STATIC,
+      "neeto-form-engine-callout--absolute": position === CALLOUT_POSITIONS.ABSOLUTE
+    }, className, className)),
+    children: [isPresent(onClose) && /*#__PURE__*/jsx("button", {
+      className: "neeto-form-engine-callout__close",
+      onClick: onClose,
+      children: /*#__PURE__*/jsx(Close, {
+        size: 16
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-form-engine-callout__content",
+      children: [not(isBlank(title)) && /*#__PURE__*/jsx("h5", {
+        children: title
+      }), /*#__PURE__*/jsx("p", {
+        children: message
+      })]
+    }), primaryButton && /*#__PURE__*/jsx(Button, {
+      label: primaryButton.label,
+      size: "small",
+      onClick: primaryButton.onClick
+    }), secondaryButton && /*#__PURE__*/jsx(Button, {
+      label: secondaryButton.label,
+      size: "small",
+      onClick: secondaryButton.onClick
+    }), children]
+  });
+};
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var withI18nInstance = function withI18nInstance(Component, i18n) {
+  var I18nWrapper = function I18nWrapper(props) {
+    return /*#__PURE__*/jsx(I18nextProvider, {
+      i18n: i18n,
+      children: /*#__PURE__*/jsx(Component, _objectSpread$1({}, props))
+    });
+  };
+  I18nWrapper.displayName = "I18nWrapper(".concat(getComponentDisplayName(Component), ")");
+  return I18nWrapper;
+};
+
+var useIsMounted = function useIsMounted() {
+  var isMounted = useRef(true);
+  useEffect(function () {
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  return function () {
+    return isMounted.current;
+  };
+};
+
+var Success$1 = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-nano-external-form-thank-you flex h-full w-full flex-col items-center justify-center space-y-3 py-20",
+    children: [/*#__PURE__*/jsx(Typography, {
+      style: "h1",
+      children: "\uD83C\uDF89"
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "text-center",
+      style: "h2",
+      children: t("neetoForm.successPage.title1")
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "text-center",
+      style: "body2",
+      children: t("neetoForm.successPage.title2")
+    })]
+  });
+});
+var Success = /*#__PURE__*/memo(Success$1);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var ExternalForm = function ExternalForm(_ref) {
+  var _path, _formikInnerRef$curre;
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$preview = _ref.preview,
+    preview = _ref$preview === void 0 ? false : _ref$preview,
+    formId = _ref.formId,
+    submissionId = _ref.submissionId,
+    customSubmitHandler = _ref.customSubmitHandler,
+    onBeforeSubmit = _ref.onBeforeSubmit,
+    onSubmitSuccess = _ref.onSubmitSuccess,
+    _ref$showTitle = _ref.showTitle,
+    showTitle = _ref$showTitle === void 0 ? true : _ref$showTitle,
+    formTitle = _ref.formTitle,
+    submitButtonProps = _ref.submitButtonProps,
+    cancelButtonProps = _ref.cancelButtonProps,
+    resetButtonProps = _ref.resetButtonProps,
+    _ref$displayThankYou = _ref.displayThankYou,
+    displayThankYou = _ref$displayThankYou === void 0 ? true : _ref$displayThankYou,
+    _ref$showEmptyState = _ref.showEmptyState,
+    showEmptyState = _ref$showEmptyState === void 0 ? true : _ref$showEmptyState,
+    className = _ref.className,
+    _ref$preserveValues = _ref.preserveValues,
+    preserveValues = _ref$preserveValues === void 0 ? false : _ref$preserveValues,
+    _ref$clearValuesOnRes = _ref.clearValuesOnReset,
+    clearValuesOnReset = _ref$clearValuesOnRes === void 0 ? false : _ref$clearValuesOnRes,
+    _ref$clearValuesOnSub = _ref.clearValuesOnSubmit,
+    clearValuesOnSubmit = _ref$clearValuesOnSub === void 0 ? false : _ref$clearValuesOnSub,
+    _ref$initialValues = _ref.initialValues,
+    initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
+    onChange = _ref.onChange,
+    formDomProps = _ref.formDomProps,
+    _ref$editorProps = _ref.editorProps,
+    editorProps = _ref$editorProps === void 0 ? {} : _ref$editorProps,
+    customValidator = _ref.customValidator,
+    _ref$autoCompleteKind = _ref.autoCompleteKinds,
+    autoCompleteKinds = _ref$autoCompleteKind === void 0 ? [] : _ref$autoCompleteKind,
+    _ref$enablePreFilling = _ref.enablePreFilling,
+    enablePreFilling = _ref$enablePreFilling === void 0 ? false : _ref$enablePreFilling,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? i18next.resolvedLanguage : _ref$language,
+    _ref$remainingSlotsCo = _ref.remainingSlotsCount,
+    remainingSlotsCount = _ref$remainingSlotsCo === void 0 ? null : _ref$remainingSlotsCo;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSubmitted = _useState2[0],
+    setIsSubmitted = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showSuccess = _useState4[0],
+    setShowSuccess = _useState4[1];
+  var _useState5 = useState(getWithExpiry("".concat(formId, "/values"))),
+    _useState6 = _slicedToArray(_useState5, 2),
+    localValues = _useState6[0],
+    setLocalValues = _useState6[1];
+  var isMounted = useIsMounted();
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
+  var formRef = useRef();
+  var formikInnerRef = useRef();
+  var editorRef = useRef();
+  var captchaRef = useRef(null);
+  var queryClient = useQueryClient();
+  var _usePublicForm = usePublicForm({
+      formId: formId,
+      language: language,
+      preview: preview,
+      enabled: !preview
+    }),
+    _usePublicForm$data = _usePublicForm.data,
+    form = _usePublicForm$data === void 0 ? {
+      title: "",
+      questions: [],
+      isQuestionsLoading: true
+    } : _usePublicForm$data,
+    isLoading = _usePublicForm.isLoading;
+  var title = form.title,
+    _form$questions = form.questions,
+    questions = _form$questions === void 0 ? [] : _form$questions;
+  var formUuid = (_path = path([0, "formId"], questions)) !== null && _path !== void 0 ? _path : formId;
+  useEffect(function () {
+    if (equals(language, clientI18nInstance.resolvedLanguage)) return;
+    clientI18nInstance.changeLanguage(language);
+  }, [language]);
+  useEffect(function () {
+    if (!preserveValues) clearEmailVerificationDetails(formUuid);
+  }, []);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  useEffect(function () {
+    setLocalValues(getWithExpiry("".concat(formId, "/values")));
+  }, [formId]);
+  var _useCreateSubmission = useCreateSubmission({
+      enabled: !submissionId
+    }),
+    createSubmission = _useCreateSubmission.mutateAsync;
+  var _useUpdateSubmission = useUpdateSubmission({
+      enabled: !!submissionId
+    }),
+    updateSubmission = _useUpdateSubmission.mutateAsync;
+  var _useSubmission = useSubmission({
+      formId: formId,
+      submissionId: submissionId,
+      placeholderData: submissionId ? {
+        responses: [],
+        isLoading: true
+      } : {},
+      enabled: !!submissionId
+    }),
+    submission = _useSubmission.data;
+  var clearLocalFormValues = function clearLocalFormValues() {
+    return clearLocalStorageValues("".concat(formId, "/values"));
+  };
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values, _ref2) {
+      var setSubmitting, responses, newResponses, data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setSubmitting = _ref2.setSubmitting;
+            setError(null);
+            responses = generateFormResponse(values, questions);
+            _context.prev = 3;
+            if (!preview) {
+              _context.next = 9;
+              break;
+            }
+            _context.next = 7;
+            return new Promise(function (resolve) {
+              return setTimeout(function () {
+                resolve();
+                setIsSubmitted(true);
+                setTimeout(function () {
+                  return setShowSuccess(true);
+                }, 1000);
+              }, 1500);
+            });
+          case 7:
+            _context.next = 34;
+            break;
+          case 9:
+            if (!onBeforeSubmit) {
+              _context.next = 14;
+              break;
+            }
+            _context.next = 12;
+            return onBeforeSubmit(responses, values);
+          case 12:
+            newResponses = _context.sent;
+            if (newResponses) {
+              responses = newResponses;
+            }
+          case 14:
+            if (!customSubmitHandler) {
+              _context.next = 21;
+              break;
+            }
+            _context.next = 17;
+            return customSubmitHandler({
+              responses: responses,
+              values: values
+            }, clearLocalFormValues);
+          case 17:
+            data = _context.sent;
+            queryClient.invalidateQueries({
+              queryKey: [QUERY_KEYS.SUBMISSION, formId, submissionId]
+            });
+            _context.next = 30;
+            break;
+          case 21:
+            if (!submissionId) {
+              _context.next = 27;
+              break;
+            }
+            _context.next = 24;
+            return updateSubmission({
+              formId: formId,
+              values: {
+                neetoFormResponse: {
+                  submissionId: submissionId,
+                  responses: responses
+                }
+              }
+            });
+          case 24:
+            data = _context.sent;
+            _context.next = 30;
+            break;
+          case 27:
+            _context.next = 29;
+            return createSubmission({
+              formId: formId,
+              values: {
+                neetoFormResponse: {
+                  responses: responses
+                }
+              }
+            });
+          case 29:
+            data = _context.sent;
+          case 30:
+            clearValuesOnSubmit && clearLocalFormValues();
+            setTimeout(function () {
+              return clearEmailVerificationDetails(formUuid);
+            }, 1000);
+            onSubmitSuccess === null || onSubmitSuccess === void 0 || onSubmitSuccess({
+              values: values,
+              responses: responses,
+              data: data
+            }, clearLocalFormValues);
+            if (isMounted()) {
+              setIsSubmitted(true);
+              setTimeout(function () {
+                return setShowSuccess(true);
+              }, 1000);
+            }
+          case 34:
+            _context.next = 39;
+            break;
+          case 36:
+            _context.prev = 36;
+            _context.t0 = _context["catch"](3);
+            setError(parseServerError(_context.t0));
+          case 39:
+            _context.prev = 39;
+            if (isMounted()) {
+              setSubmitting(false);
+            }
+            return _context.finish(39);
+          case 42:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3, 36, 39, 42]]);
+    }));
+    return function onSubmit(_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var _onReset = function onReset(e, handleReset) {
+    var _editorRef$current, _captchaRef$current, _formDomProps$onReset;
+    if (clearValuesOnReset) {
+      clearLocalStorageValues("".concat(formId, "/values"));
+      setLocalValues(generateInitValues({
+        questions: questions
+      }));
+      submissionId && queryClient.setQueryData([QUERY_KEYS.SUBMISSION, formId, submissionId], {
+        responses: []
+      });
+    }
+    editorRef === null || editorRef === void 0 || (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.editor) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.commands) === null || _editorRef$current === void 0 || _editorRef$current.setContent("");
+    (_captchaRef$current = captchaRef.current) === null || _captchaRef$current === void 0 || _captchaRef$current.reset();
+    handleReset(e);
+    formDomProps === null || formDomProps === void 0 || (_formDomProps$onReset = formDomProps.onReset) === null || _formDomProps$onReset === void 0 || _formDomProps$onReset.call(formDomProps, e);
+    clearEmailVerificationDetails(formUuid);
+  };
+  var handleScrollToError = function handleScrollToError(errors) {
+    if (!formRef.current) return;
+    var errorKeys = Object.keys(errors);
+    if (isEmpty(errorKeys)) return;
+    var _iterator = _createForOfIteratorHelper(formRef.current),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var formElement = _step.value;
+        if (errorKeys.includes(formElement.name)) {
+          formElement.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+  var _queryClient$getQuery = queryClient.getQueryState([QUERY_KEYS.QUESTIONS, formId, language]),
+    dataUpdateCount = _queryClient$getQuery.dataUpdateCount;
+  var keyPressRef = useHotkeys("command+enter", ((_formikInnerRef$curre = formikInnerRef.current) === null || _formikInnerRef$curre === void 0 ? void 0 : _formikInnerRef$curre.handleSubmit) || noop, {
+    mode: "scoped"
+  });
+  if (isLoading || form.isQuestionsLoading || !!submissionId && submission !== null && submission !== void 0 && submission.isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "loader flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
+  }
+  var displayTitle = formTitle || title;
+  var renderedQuestions = preview ? questions : removeBy({
+    isHidden: true
+  }, questions);
+  if (displayThankYou && showSuccess) {
+    return /*#__PURE__*/jsx(Success, {});
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames("neeto-form-nano-external-form", {
+      "neeto-form-nano-external-form--size-large": size === "large",
+      "neeto-form-nano-external-form--size-medium": size === "medium"
+    }),
+    children: [showTitle && displayTitle && /*#__PURE__*/jsx("div", {
+      className: "neeto-form-nano-external-form-header py-6",
+      children: /*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-800 neeto-form-nano-external-form-title",
+        style: "h4",
+        weight: "semibold",
+        children: displayTitle
+      })
+    }), /*#__PURE__*/jsx(Formik, {
+      onSubmit: onSubmit,
+      enableReinitialize: true,
+      innerRef: formikInnerRef,
+      initialValues: generateInitValues({
+        questions: questions,
+        initialValues: submission === null || submission === void 0 ? void 0 : submission.responses,
+        localValues: preserveValues ? localValues : initialValues,
+        fieldCodes: enablePreFilling ? getQueryParams({
+          toCamelCase: false
+        }) : {},
+        remainingSlotsCount: remainingSlotsCount
+      }),
+      children: function children(_ref4) {
+        var isSubmitting = _ref4.isSubmitting,
+          errors = _ref4.errors,
+          setFieldError = _ref4.setFieldError,
+          handleReset = _ref4.handleReset;
+        return /*#__PURE__*/jsxs(FormikWrap, {
+          dataUpdateCount: dataUpdateCount,
+          formId: formId,
+          preserveValues: preserveValues,
+          onError: handleScrollToError,
+          onValuesChange: onChange,
+          children: [/*#__PURE__*/jsxs(Form, _objectSpread(_objectSpread({
+            noValidate: true,
+            ref: mergeRefs(formRef, keyPressRef),
+            className: classnames("neeto-form-engine-form relative", _defineProperty({
+              "space-y-6": size === "large",
+              "space-y-4": size === "medium"
+            }, className, className)),
+            onChange: function onChange(event) {
+              if (isEmpty(errors)) return;
+              setFieldError(event.target.name, "");
+            }
+          }, formDomProps), {}, {
+            onReset: function onReset(e) {
+              return _onReset(e, handleReset);
+            },
+            children: [(submission === null || submission === void 0 ? void 0 : submission.isLoading) && /*#__PURE__*/jsx("div", {
+              className: "neeto-ui-bg-gray-100 absolute bottom-0 start-0 end-0 top-0 flex items-center justify-center opacity-75",
+              children: /*#__PURE__*/jsx(Spinner$2, {})
+            }), renderedQuestions.map(function (question, index) {
+              var _question$id;
+              var FieldComponent = getFieldComponent(question);
+              var isLastFewElements = index >= renderedQuestions.length - LAST_ELEMENTS_THRESHOLD;
+              return /*#__PURE__*/jsxs("div", {
+                className: "w-full flex flex-col gap-2",
+                children: [/*#__PURE__*/jsx(FieldComponent, _objectSpread(_objectSpread({}, _objectSpread({
+                  captchaRef: captchaRef,
+                  editorProps: editorProps,
+                  editorRef: editorRef,
+                  isLastFewElements: isLastFewElements,
+                  preview: preview,
+                  question: question
+                }, question.kind === QUESTION_KIND.SPOT.value && typeof remainingSlotsCount === "number" && {
+                  remainingSlotsCount: remainingSlotsCount
+                })), {}, {
+                  customValidator: customValidator === null || customValidator === void 0 ? void 0 : customValidator(question),
+                  autoComplete: buildAutoCompleteAttribute(question.kind, autoCompleteKinds, formDomProps)
+                })), question.isHidden && /*#__PURE__*/jsx(NeetoUICallout, {
+                  "data-testid": "hidden-question-callout",
+                  icon: Warning,
+                  style: "warning",
+                  children: /*#__PURE__*/jsx(Typography, {
+                    style: "body2",
+                    children: t("neetoForm.callouts.hiddenQuestion")
+                  })
+                }), preview && question.isResponseVisibleOnlyToHost && /*#__PURE__*/jsx(NeetoUICallout, {
+                  "data-testid": "response-visible-only-to-host-callout",
+                  icon: Warning,
+                  style: "warning",
+                  children: /*#__PURE__*/jsx(Typography, {
+                    style: "body2",
+                    children: t("neetoForm.callouts.responseVisibleOnlyToHost")
+                  })
+                })]
+              }, (_question$id = question.id) !== null && _question$id !== void 0 ? _question$id : question.nodeId);
+            }), showEmptyState && isEmpty(renderedQuestions) && /*#__PURE__*/jsx("div", {
+              className: "flex w-full grow items-center justify-center py-8",
+              children: /*#__PURE__*/jsx(NoData, {
+                className: "min-h-80",
+                title: t("neetoForm.questions.common.noData")
+              })
+            }), !isEmpty(renderedQuestions) && /*#__PURE__*/jsxs("div", {
+              className: "neeto-form-nano-form-footer mt-8 flex items-center justify-between",
+              children: [cancelButtonProps && /*#__PURE__*/jsx(Button$1, _objectSpread({
+                label: t("neetoForm.common.cancel"),
+                style: "secondary"
+              }, cancelButtonProps)), /*#__PURE__*/jsx("div", {
+                className: "flex gap-x-2",
+                children: renderButtonsInOrder([/*#__PURE__*/jsx(Button$1, _objectSpread({
+                  disabled: isSubmitting || isSubmitted,
+                  label: t("neetoForm.common.submit"),
+                  loading: isSubmitting,
+                  type: "submit"
+                }, submitButtonProps), "submit"), /*#__PURE__*/jsx(Button$1, _objectSpread({
+                  label: t("neetoForm.common.reset"),
+                  style: "secondary",
+                  type: "reset"
+                }, resetButtonProps), "reset")], isPresent(cancelButtonProps))
+              })]
+            })]
+          })), !customSubmitHandler && /*#__PURE__*/jsx(Callout, {
+            callout: {
+              isVisible: isPresent(error),
+              title: t("neetoForm.callouts.submitError"),
+              message: error
+            },
+            onClose: function onClose() {
+              return setError(null);
+            }
+          })]
+        });
+      }
+    })]
+  });
+};
+var index = withI18nInstance(ExternalForm, clientI18nInstance);
+
+export { index as default };
+//# sourceMappingURL=ExternalForm.js.map