@bigbinary/neeto-form-frontend 1.0.4 → 1.0.5

package/dist/index.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import React__default, { useLayoutEffect, useEffect, useMemo as useMemo$1, useContext, useReducer, useRef, useState, createContext, useCallback as useCallback$1, createElement, Fragment, forwardRef, Component } from 'react';
 import ReactDOM, { unstable_batchedUpdates as unstable_batchedUpdates$1, createPortal } from 'react-dom';
-import { Toastr, Typography, Dropdown as Dropdown$1, Button as Button$1, Label, Alert, Input as Input$4, PageLoader, Spinner as Spinner$1, Modal } from '@bigbinary/neetoui';
-import { useField, useFormikContext, FieldArray, Form as Form$1, Field, Formik } from 'formik';
+import { Toastr, Typography, Dropdown as Dropdown$1, Button as Button$1, Label, Alert, PageLoader, Spinner as Spinner$1 } from '@bigbinary/neetoui';
+import { useField, useFormikContext, FieldArray, Form as Form$1, Formik, Field } from 'formik';
 import require$$1$1 from 'http';
 import require$$2 from 'https';
 import require$$0$3 from 'url';
@@ -14,14 +14,13 @@ import require$$0$1 from 'os';
 import require$$8 from 'zlib';
 import require$$1$2 from 'path';
 import require$$6 from 'fs';
-import { Container, Header, Scrollable } from '@bigbinary/neetoui/layouts';
-import { reject, omit, insert, compose as compose$1, isEmpty, trim as trim$2, either, isNil, values as values$1, equals, not, times } from 'ramda';
-import { useParams } from 'react-router-dom';
+import { reject, omit, insert, isEmpty, compose as compose$1, trim as trim$2, either, isNil, values as values$1, equals, not, times } from 'ramda';
 import { Input as Input$2, Textarea as Textarea$1, Checkbox, ActionBlock } from '@bigbinary/neetoui/formik';
 import classnames from 'classnames';
 import { Up, Down, MenuHorizontal, Delete, Plus, Email as Email$1, Phone as Phone$1, Input as Input$3, NeetoInvisible, MultipleChoice as MultipleChoice$1, ListDot, Dropdown as Dropdown$2, Rating as Rating$2, Smiley, Calendar, Check, Close } from '@bigbinary/neeto-icons';
 import { Editor as Editor$1, EditorContent } from '@bigbinary/neeto-editor';
-import { useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import * as yup from 'yup';
+import { object, array, string } from 'yup';
 import { isPresent } from '@bigbinary/neeto-commons-frontend/pure';
 import dayjs$1 from 'dayjs';
 import require$$4$1 from 'dayjs/plugin/localeData';
@@ -32,8 +31,6 @@ import generatePicker from 'antd/es/date-picker/generatePicker';
 import require$$6$1 from 'dayjs/plugin/weekYear';
 import require$$7 from 'dayjs/plugin/advancedFormat';
 import require$$8$1 from 'dayjs/plugin/customParseFormat';
-import * as yup from 'yup';
-import { object, array, string } from 'yup';
 import { dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 
 function _setPrototypeOf$1(o, p) {
@@ -20256,22 +20253,6 @@ const useForm = _ref => {
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
-const useUpdateForm = options => useMutation(_ref2 => {
-  let id = _ref2.id,
-    values = _ref2.values;
-  return neetoFormApi.updateForm(id, values);
-}, _objectSpread$f(_objectSpread$f({}, options), {}, {
-  onSuccess: (data, _ref3) => {
-    let id = _ref3.id;
-    queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id], form => _objectSpread$f(_objectSpread$f({}, form), {}, {
-      title: data.title
-    }));
-    queryClient.setQueryData([QUERY_KEYS.QUESTIONS, `preview/${id}`], form => _objectSpread$f(_objectSpread$f({}, form), {}, {
-      title: data.title
-    }));
-    options.onSuccess && options.onSuccess(data);
-  }
-}));
 const useUpdateQuestions = options => useMutation(_ref4 => {
   let id = _ref4.id,
     values = _ref4.values;
@@ -35559,60 +35540,142 @@ const Form = _ref => {
   })));
 };
 
-const FormTitleInput = _ref => {
-  let formTitle = _ref.formTitle,
-    onChange = _ref.onChange;
+const requiredLabel = function () {
+  let errorMessage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : instance.t("common.fieldReq", {
+    field: instance.t("questions.common.questionFields.field.label")
+  });
+  return string().required(errorMessage);
+};
+const formValidationSchema = object().shape({
+  questions: array().of(object().shape({
+    label: requiredLabel().when("kind", {
+      is: "textarea",
+      then: requiredLabel(instance.t("common.paragraphCantBeEmpty"))
+    }),
+    kind: string().required(),
+    options_attributes: array().when("kind", (kind, schema) => ["radio", "checkbox", "dropdown"].includes(kind) ? schema.of(object().shape({
+      label: requiredLabel(instance.t("common.fieldReq", {
+        field: instance.t("questions.common.questionFields.field.option")
+      }))
+    })) : schema.notRequired()),
+    highest_rating_label: string().nullable(),
+    average_rating_label: string().nullable(),
+    lowest_rating_label: string().nullable(),
+    terms_link: string().nullable().url(instance.t("common.invalidURL")),
+    privacy_policy_link: string().nullable().url(instance.t("common.invalidURL"))
+  })).required()
+});
+
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const BuildForm = _ref => {
+  let id = _ref.id,
+    onUpdate = _ref.onUpdate,
+    buildRequestArgs = _ref.buildRequestArgs,
+    _ref$showAddQuestionD = _ref.showAddQuestionDivider,
+    showAddQuestionDivider = _ref$showAddQuestionD === void 0 ? true : _ref$showAddQuestionD,
+    _ref$nonRemovableFiel = _ref.nonRemovableFields,
+    nonRemovableFields = _ref$nonRemovableFiel === void 0 ? [] : _ref$nonRemovableFiel,
+    _ref$requiredFields = _ref.requiredFields,
+    requiredFields = _ref$requiredFields === void 0 ? [] : _ref$requiredFields,
+    formDomProps = _ref.formDomProps,
+    _ref$showActionBlock = _ref.showActionBlock,
+    showActionBlock = _ref$showActionBlock === void 0 ? true : _ref$showActionBlock,
+    submitButtonProps = _ref.submitButtonProps,
+    cancelButtonProps = _ref.cancelButtonProps;
   const _useState = useState(false),
     _useState2 = _slicedToArray$4(_useState, 2),
-    isInputActive = _useState2[0],
-    setIsInputActive = _useState2[1];
-  const inputRef = useRef();
-  const _useState3 = useState(formTitle),
-    _useState4 = _slicedToArray$4(_useState3, 2),
-    title = _useState4[0],
-    setTitle = _useState4[1];
-  const debouncedTitle = useDebounce(title, 500);
-  useEffect(() => {
-    setTitle(formTitle);
-  }, [formTitle]);
-  useEffect(() => {
-    if (debouncedTitle !== formTitle) {
-      onChange(debouncedTitle);
+    shouldValidateForm = _useState2[0],
+    setShouldValidateForm = _useState2[1];
+  const queryClient = useQueryClient();
+  const _useUpdateQuestions = useUpdateQuestions({
+      formId: id,
+      onError: error => Toastr.error(error),
+      onSuccess: _ref2 => {
+        let _ref2$notice = _ref2.notice,
+          notice = _ref2$notice === void 0 ? "Questions have been updated successfully!" : _ref2$notice;
+        return Toastr.success(notice);
+      }
+    }),
+    updateQuestions = _useUpdateQuestions.mutateAsync;
+  const _useForm = useForm({
+      formId: id,
+      onSuccess: data => onUpdate?.(data),
+      placeholderData: {
+        isQuestionsLoading: true,
+        questions: [{
+          label: "",
+          kind: "text",
+          node_id: "1"
+        }, {
+          label: "",
+          kind: "email",
+          node_id: "2"
+        }]
+      }
+    }),
+    _useForm$data = _useForm.data,
+    _useForm$data2 = _useForm$data === void 0 ? {
+      title: "",
+      questions: []
+    } : _useForm$data,
+    questions = _useForm$data2.questions,
+    isQuestionsLoading = _useForm$data2.isQuestionsLoading,
+    isLoading = _useForm.isLoading;
+  const handleSubmit = payload => updateQuestions({
+    id,
+    values: _objectSpread$8({
+      neeto_form_question: payload
+    }, buildRequestArgs)
+  });
+  const onValueChange = questions => {
+    const _queryClient$getQuery = queryClient.getQueryState([QUERY_KEYS.QUESTIONS, id]),
+      dataUpdateCount = _queryClient$getQuery.dataUpdateCount;
+    if (dataUpdateCount > 0) {
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, `preview/${id}`], form => _objectSpread$8(_objectSpread$8({}, form), {}, {
+        questions
+      }));
     }
-  }, [debouncedTitle]);
-  const handleChange = event => {
-    setTitle(event.target.value);
   };
-  useEffect(() => {
-    if (isInputActive) inputRef.current.focus();
-  }, [isInputActive]);
-  return isInputActive ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mr-10 flex w-full max-w-md items-center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "inline-grid"
-  }, /*#__PURE__*/React__default.createElement(Input$4, {
-    className: "max-w-lg flex-grow-0",
-    value: title || "",
-    onChange: handleChange,
-    onBlur: () => setIsInputActive(false),
-    onKeyDown: event => event.key === "Enter" && setIsInputActive(false),
-    placeholder: "Form Name",
-    id: "formTitle",
-    size: "large",
-    ref: inputRef
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "truncate text-sm invisible h-0 max-w-md px-2"
-  }, title))) : /*#__PURE__*/React__default.createElement("div", {
-    className: "mr-10 w-full max-w-md"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "inline-grid"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "truncate max-w-lg p-2",
-    onClick: () => {
-      setIsInputActive(true);
+  if (isLoading) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex w-full h-full items-center justify-center py-6"
+    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement(Formik, {
+    onSubmit: handleSubmit,
+    initialValues: {
+      questions
     },
-    "data-cy": "add-form-title"
-  }, title)));
+    validationSchema: formValidationSchema,
+    validateOnBlur: shouldValidateForm,
+    validateOnChange: shouldValidateForm,
+    enableReinitialize: true
+  }, _ref3 => {
+    let errors = _ref3.errors,
+      setFieldError = _ref3.setFieldError;
+    return /*#__PURE__*/React__default.createElement(Form, _extends$5({}, formDomProps, {
+      questionKinds: QUESTION_KINDS,
+      nonRemovableFields: nonRemovableFields,
+      requiredFields: requiredFields,
+      formId: id,
+      setShouldValidate: setShouldValidateForm,
+      showAddQuestionDivider: showAddQuestionDivider,
+      onValueChange: onValueChange,
+      showActionBlock: showActionBlock,
+      submitButtonProps: submitButtonProps,
+      cancelButtonProps: cancelButtonProps,
+      onChange: event => {
+        if (!isEmpty(errors)) {
+          setFieldError(event.target.name);
+        }
+      }
+    }));
+  }), isQuestionsLoading && /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center neeto-ui-bg-gray-100 opacity-75"
+  }, /*#__PURE__*/React__default.createElement(PageLoader, null)));
 };
 
 const isBlank = compose$1(isEmpty, trim$2);
@@ -37916,9 +37979,9 @@ function _unsupportedIterableToArray$9(o, minLen) { if (!o) return; if (typeof o
 
 function _arrayLikeToArray$9(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty$5(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty$5(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$5(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var DEFAULT_OPTIONS = {
@@ -37942,7 +38005,7 @@ var DEFAULT_OPTIONS = {
 function formatNumber$1(input, format, options, metadata) {
   // Apply default options.
   if (options) {
-    options = _objectSpread$8(_objectSpread$8({}, DEFAULT_OPTIONS), options);
+    options = _objectSpread$7(_objectSpread$7({}, DEFAULT_OPTIONS), options);
   } else {
     options = DEFAULT_OPTIONS;
   }
@@ -38087,9 +38150,9 @@ function formatIDD(nationalNumber, carrierCode, countryCallingCode, fromCountry,
   }
 }
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -38187,7 +38250,7 @@ var PhoneNumber = /*#__PURE__*/function () {
   }, {
     key: "format",
     value: function format(_format, options) {
-      return formatNumber$1(this, _format, options ? _objectSpread$7(_objectSpread$7({}, options), {}, {
+      return formatNumber$1(this, _format, options ? _objectSpread$6(_objectSpread$6({}, options), {}, {
         v2: true
       }) : {
         v2: true
@@ -38965,22 +39028,22 @@ function parsePhoneNumber$1(formattedPhoneNumber, defaultCountry, defaultCalling
   };
 }
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function parsePhoneNumber(text, options, metadata) {
-  return parse$1(text, _objectSpread$6(_objectSpread$6({}, options), {}, {
+  return parse$1(text, _objectSpread$5(_objectSpread$5({}, options), {}, {
     v2: true
   }), metadata);
 }
 
 function _typeof$1(obj) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$1(obj); }
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -39024,7 +39087,7 @@ function normalizeArguments(args) {
     }
 
     if (arg_2) {
-      options = _objectSpread$5({
+      options = _objectSpread$4({
         defaultCountry: arg_2
       }, options);
     }
@@ -39052,15 +39115,15 @@ var isObject = function isObject(_) {
   return _typeof$1(_) === 'object';
 };
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function parsePhoneNumberFromString$2(text, options, metadata) {
   // Validate `defaultCountry`.
   if (options && options.defaultCountry && !isSupportedCountry(options.defaultCountry, metadata)) {
-    options = _objectSpread$4(_objectSpread$4({}, options), {}, {
+    options = _objectSpread$3(_objectSpread$3({}, options), {}, {
       defaultCountry: undefined
     });
   } // Parse phone number.
@@ -39764,9 +39827,9 @@ function _unsupportedIterableToArray$5(o, minLen) { if (!o) return; if (typeof o
 
 function _arrayLikeToArray$5(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -39877,7 +39940,7 @@ var PhoneNumberMatcher$1 = /*#__PURE__*/function () {
 
     _classCallCheck$7(this, PhoneNumberMatcher);
 
-    options = _objectSpread$3(_objectSpread$3({}, options), {}, {
+    options = _objectSpread$2(_objectSpread$2({}, options), {}, {
       defaultCallingCode: options.defaultCallingCode,
       defaultCountry: options.defaultCountry && isSupportedCountry(options.defaultCountry, metadata) ? options.defaultCountry : undefined,
       leniency: options.leniency || options.extended ? 'POSSIBLE' : 'VALID',
@@ -42754,8 +42817,8 @@ function PhoneNumberSearch(text, options) {
 PhoneNumberSearch.prototype = Object.create(PhoneNumberSearch$1.prototype, {});
 PhoneNumberSearch.prototype.constructor = PhoneNumberSearch;
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const getLabel = (label, isRequired) => isRequired ? `${label}*` : label;
 const generateInitValues = function (questions) {
   let initialValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -42763,7 +42826,7 @@ const generateInitValues = function (questions) {
   const initValues = {};
   let valuesMap = {};
   if (initialValues) {
-    valuesMap = initialValues.reduce((acc, answer) => _objectSpread$2(_objectSpread$2({}, acc), {}, {
+    valuesMap = initialValues.reduce((acc, answer) => _objectSpread$1(_objectSpread$1({}, acc), {}, {
       [answer.question_id]: {
         value: answer.value,
         optionIds: answer.option_ids
@@ -49694,8 +49757,8 @@ const Success = () => {
   }, t("successPage.title2")));
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const ExternalForm = _ref => {
   let _ref$preview = _ref.preview,
     preview = _ref$preview === void 0 ? false : _ref$preview,
@@ -49807,7 +49870,7 @@ const ExternalForm = _ref => {
           } else {
             data = await createSubmission({
               formId,
-              values: _objectSpread$1({
+              values: _objectSpread({
                 neeto_form_response: {
                   responses
                 }
@@ -49955,214 +50018,6 @@ const ExternalForm = _ref => {
     }));
   }));
 };
-const ExternalFormWithId = props => {
-  const _useParams = useParams(),
-    id = _useParams.id;
-  return /*#__PURE__*/React__default.createElement(ExternalForm, _extends$5({}, props, {
-    formId: id,
-    className: "p-4"
-  }));
-};
-
-const Preview = _ref => {
-  let isOpen = _ref.isOpen,
-    onClose = _ref.onClose;
-  return /*#__PURE__*/React__default.createElement(Modal, {
-    isOpen: isOpen,
-    onClose: onClose,
-    size: "large"
-  }, /*#__PURE__*/React__default.createElement(Modal.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h5",
-    weight: "bold"
-  }, "Preview")), /*#__PURE__*/React__default.createElement(Modal.Body, null, /*#__PURE__*/React__default.createElement(ExternalFormWithId, {
-    preview: true,
-    className: "p-4"
-  })), /*#__PURE__*/React__default.createElement(Modal.Footer, null));
-};
-
-const requiredLabel = function () {
-  let errorMessage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : instance.t("common.fieldReq", {
-    field: instance.t("questions.common.questionFields.field.label")
-  });
-  return string().required(errorMessage);
-};
-const formValidationSchema = object().shape({
-  questions: array().of(object().shape({
-    label: requiredLabel().when("kind", {
-      is: "textarea",
-      then: requiredLabel(instance.t("common.paragraphCantBeEmpty"))
-    }),
-    kind: string().required(),
-    options_attributes: array().when("kind", (kind, schema) => ["radio", "checkbox", "dropdown"].includes(kind) ? schema.of(object().shape({
-      label: requiredLabel(instance.t("common.fieldReq", {
-        field: instance.t("questions.common.questionFields.field.option")
-      }))
-    })) : schema.notRequired()),
-    highest_rating_label: string().nullable(),
-    average_rating_label: string().nullable(),
-    lowest_rating_label: string().nullable(),
-    terms_link: string().nullable().url(instance.t("common.invalidURL")),
-    privacy_policy_link: string().nullable().url(instance.t("common.invalidURL"))
-  })).required()
-});
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const BuildForm = _ref => {
-  let isEmbedded = _ref.isEmbedded,
-    id = _ref.id,
-    onUpdate = _ref.onUpdate,
-    buildRequestArgs = _ref.buildRequestArgs,
-    _ref$showAddQuestionD = _ref.showAddQuestionDivider,
-    showAddQuestionDivider = _ref$showAddQuestionD === void 0 ? true : _ref$showAddQuestionD,
-    _ref$nonRemovableFiel = _ref.nonRemovableFields,
-    nonRemovableFields = _ref$nonRemovableFiel === void 0 ? [] : _ref$nonRemovableFiel,
-    _ref$requiredFields = _ref.requiredFields,
-    requiredFields = _ref$requiredFields === void 0 ? [] : _ref$requiredFields,
-    formDomProps = _ref.formDomProps,
-    _ref$showActionBlock = _ref.showActionBlock,
-    showActionBlock = _ref$showActionBlock === void 0 ? true : _ref$showActionBlock,
-    submitButtonProps = _ref.submitButtonProps,
-    cancelButtonProps = _ref.cancelButtonProps;
-  const _useState = useState(false),
-    _useState2 = _slicedToArray$4(_useState, 2),
-    isPreviewModalOpen = _useState2[0],
-    setIsPreviewModalOpen = _useState2[1];
-  const _useState3 = useState(false),
-    _useState4 = _slicedToArray$4(_useState3, 2),
-    shouldValidateForm = _useState4[0],
-    setShouldValidateForm = _useState4[1];
-  const queryClient = useQueryClient();
-  const _useUpdateQuestions = useUpdateQuestions({
-      formId: id,
-      onError: error => Toastr.error(error),
-      onSuccess: _ref2 => {
-        let _ref2$notice = _ref2.notice,
-          notice = _ref2$notice === void 0 ? "Questions have been updated successfully!" : _ref2$notice;
-        return Toastr.success(notice);
-      }
-    }),
-    updateQuestions = _useUpdateQuestions.mutateAsync;
-  const _useForm = useForm({
-      formId: id,
-      onSuccess: data => onUpdate?.(data),
-      placeholderData: {
-        isQuestionsLoading: true,
-        questions: [{
-          label: "",
-          kind: "text",
-          node_id: "1"
-        }, {
-          label: "",
-          kind: "email",
-          node_id: "2"
-        }]
-      }
-    }),
-    _useForm$data = _useForm.data,
-    _useForm$data2 = _useForm$data === void 0 ? {
-      title: "",
-      questions: []
-    } : _useForm$data,
-    title = _useForm$data2.title,
-    questions = _useForm$data2.questions,
-    isQuestionsLoading = _useForm$data2.isQuestionsLoading,
-    isLoading = _useForm.isLoading;
-  const _useUpdateForm = useUpdateForm({
-      onError: Toastr.error
-    }),
-    updateFormTitle = _useUpdateForm.mutate;
-  const updateForm = values => {
-    updateFormTitle({
-      id,
-      values
-    });
-  };
-  const handleSubmit = payload => updateQuestions({
-    id,
-    values: _objectSpread({
-      neeto_form_question: payload
-    }, buildRequestArgs)
-  });
-  const onValueChange = questions => {
-    const _queryClient$getQuery = queryClient.getQueryState([QUERY_KEYS.QUESTIONS, id]),
-      dataUpdateCount = _queryClient$getQuery.dataUpdateCount;
-    if (dataUpdateCount > 0) {
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, `preview/${id}`], form => _objectSpread(_objectSpread({}, form), {}, {
-        questions
-      }));
-    }
-  };
-  const renderForm = () => /*#__PURE__*/React__default.createElement("div", {
-    className: "relative"
-  }, /*#__PURE__*/React__default.createElement(Formik, {
-    onSubmit: handleSubmit,
-    initialValues: {
-      questions
-    },
-    validationSchema: formValidationSchema,
-    validateOnBlur: shouldValidateForm,
-    validateOnChange: shouldValidateForm,
-    enableReinitialize: true
-  }, _ref3 => {
-    let errors = _ref3.errors,
-      setFieldError = _ref3.setFieldError;
-    return /*#__PURE__*/React__default.createElement(Form, _extends$5({}, formDomProps, {
-      questionKinds: QUESTION_KINDS,
-      nonRemovableFields: nonRemovableFields,
-      requiredFields: requiredFields,
-      formId: id,
-      setShouldValidate: setShouldValidateForm,
-      showAddQuestionDivider: showAddQuestionDivider,
-      onValueChange: onValueChange,
-      showActionBlock: showActionBlock,
-      submitButtonProps: submitButtonProps,
-      cancelButtonProps: cancelButtonProps,
-      onChange: event => {
-        if (!isEmpty(errors)) {
-          setFieldError(event.target.name);
-        }
-      }
-    }));
-  }), isQuestionsLoading && /*#__PURE__*/React__default.createElement("div", {
-    className: "absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center neeto-ui-bg-gray-100 opacity-75"
-  }, /*#__PURE__*/React__default.createElement(PageLoader, null)));
-  if (isLoading) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex w-full h-full items-center justify-center py-6"
-    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
-  }
-  return !isEmbedded ? /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(Preview, {
-    isOpen: isPreviewModalOpen,
-    onClose: () => setIsPreviewModalOpen(false)
-  }), /*#__PURE__*/React__default.createElement(Header, {
-    title: /*#__PURE__*/React__default.createElement(FormTitleInput, {
-      formTitle: title,
-      onChange: updatedTitle => updateForm({
-        title: updatedTitle
-      })
-    }),
-    breadcrumbs: [{
-      text: "Forms",
-      link: "/form"
-    }],
-    actionBlock: /*#__PURE__*/React__default.createElement("div", {
-      className: "flex space-x-2"
-    }, /*#__PURE__*/React__default.createElement(Button$1, {
-      size: "small",
-      label: "Preview",
-      style: "secondary",
-      onClick: () => setIsPreviewModalOpen(true)
-    }), /*#__PURE__*/React__default.createElement(Button$1, {
-      size: "small",
-      label: "View Results",
-      style: "primary",
-      to: `/form/${id}/results`
-    }))
-  }), /*#__PURE__*/React__default.createElement(Scrollable, {
-    className: "w-full py-4"
-  }, renderForm())) : renderForm();
-};
 
 const Submission = _ref => {
   let _ref$formId = _ref.formId,

package/index.d.ts

@@ -2,7 +2,6 @@ import { ButtonProps, TypographyProps } from "@bigbinary/neetoui";
 import React, { FormHTMLAttributes, HTMLAttributes } from "react";
 
 interface BuildFormProps {
-  isEmbedded?: boolean;
   id: string;
   onUpdate?: (data: any) => void;
   buildRequestArgs?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-form-frontend",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Neeto Form Engine Frontend",
   "author": "BigBinary",
   "license": "MIT",