@knovator/pagecreator-admin 0.5.12 → 0.7.0

package/index.cjs

@@ -10,8 +10,8 @@ var reactHookForm = require('react-hook-form');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var CSSTransition = require('react-transition-group/CSSTransition');
 var reactDropzone = require('react-dropzone');
-var reactTabs = require('react-tabs');
 var reactTinyPopover = require('react-tiny-popover');
+var reactTabs = require('react-tabs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1646,6 +1646,18 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __awaiter(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) {
@@ -1674,6 +1686,11 @@ var CALLBACK_CODES;
   CALLBACK_CODES["IMAGE_REMOVE"] = "IMAGE_REMOVE";
   CALLBACK_CODES["INTERNAL"] = "INTERNAL";
 })(CALLBACK_CODES || (CALLBACK_CODES = {}));
+const CONSTANTS = {
+  EMPTY_REGEX: / /g,
+  SLUG_REGEX: /^[\da-z-]*$/,
+  SLUG_REPLACE_REGEX: /[^\da-z-]/gi
+};
 const DEFAULT_PERMISSIONS = {
   list: true,
   add: true,
@@ -1755,7 +1772,15 @@ const TRANSLATION_PAIRS_ITEM = {
   'item.uploadFile': 'Upload File',
   'item.dragDrop': 'or drag and drop',
   'item.allowedFormat': 'PNG, JPG, SVG up to 2 MB',
-  'item.srcset': 'Srcset'
+  'item.srcset': 'Srcset',
+  'item.screenSizeRequired': 'ScreenSize is required',
+  'item.widthRequired': 'Width is required',
+  'item.heightRequired': 'Height is required',
+  'item.minScreenSize': 'ScreenSize should be greater than 0',
+  'item.minWidth': 'Width should be greater than 0',
+  'item.minHeight': 'Height should be greater than 0',
+  'item.titleRequired': 'Title is required',
+  'item.deleteTitle': 'Are you sure you want to delete this item?'
 };
 const TRANSLATION_PAIRS_PAGE = {
   'page.name': 'Name',
@@ -1764,6 +1789,9 @@ const TRANSLATION_PAIRS_PAGE = {
   'page.code': 'Code',
   'page.codePlaceholder': 'Enter code',
   'page.codeRequired': 'Code is required',
+  'page.slug': 'Slug',
+  'page.slugPlaceholder': 'Enter Slug',
+  'page.slugRequired': 'Slug is required',
   'page.addPageTitle': 'Add Page',
   'page.updatePageTitle': 'Update Page',
   'page.searchPages': 'Search Pages...',
@@ -1783,7 +1811,6 @@ const Provider = ({
   onSuccess: _onSuccess = () => {},
   onLogout: _onLogout = () => {},
   switchClass: _switchClass = 'khb_switch',
-  itemsRoutesPrefix: _itemsRoutesPrefix = 'items',
   widgetRoutesPrefix: _widgetRoutesPrefix = 'widgets',
   pageRoutesPrefix: _pageRoutesPrefix = 'pages'
 }) => {
@@ -1795,7 +1822,6 @@ const Provider = ({
       onSuccess: _onSuccess,
       onLogout: _onLogout,
       switchClass: _switchClass,
-      itemsRoutesPrefix: _itemsRoutesPrefix,
       widgetRoutesPrefix: _widgetRoutesPrefix,
       pageRoutesPrefix: _pageRoutesPrefix
     }
@@ -2494,7 +2520,11 @@ const capitalizeFirstLetter = (string = '') => {
 };
 const changeToCode = (string = '') => {
   var _a, _b;
-  return (_b = (_a = string.replace(/[^\s\w]/gi, '')) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === null || _b === void 0 ? void 0 : _b.replace(/ /g, '_');
+  return (_b = (_a = string.replace(/[^\s\w]/gi, '')) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === null || _b === void 0 ? void 0 : _b.replace(CONSTANTS.EMPTY_REGEX, '_');
+};
+const changeToSlug = (string = '') => {
+  var _a;
+  return (_a = string === null || string === void 0 ? void 0 : string.toLowerCase()) === null || _a === void 0 ? void 0 : _a.replace(CONSTANTS.EMPTY_REGEX, '-');
 };
 const isObject$3 = data => {
   var _a;
@@ -2596,6 +2626,13 @@ const usePagination = ({
 };
 
 const apiList = {
+  GET_ONE: ({
+    prefix,
+    id
+  }) => ({
+    url: `${prefix}/${id}`,
+    method: 'GET'
+  }),
   LIST: ({
     prefix
   }) => ({
@@ -3339,6 +3376,45 @@ const CustomReactSelect = ({
   }, error));
 };
 
+var call$7 = functionCall;
+var hasOwn$1 = hasOwnProperty_1;
+var isPrototypeOf$2 = objectIsPrototypeOf;
+var regExpFlags = regexpFlags$1;
+
+var RegExpPrototype$1 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$1(R, 'flags') && isPrototypeOf$2(RegExpPrototype$1, R)
+    ? call$7(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn$2 = defineBuiltIn$7;
+var anObject$5 = anObject$e;
+var $toString = toString$6;
+var fails$3 = fails$n;
+var getRegExpFlags = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var nativeToString = RegExpPrototype[TO_STRING];
+
+var NOT_GENERIC = fails$3(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name != TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn$2(RegExp.prototype, TO_STRING, function toString() {
+    var R = anObject$5(this);
+    var pattern = $toString(R.source);
+    var flags = $toString(getRegExpFlags(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}
+
 const Close = ({
   srText,
   className
@@ -3380,27 +3456,19 @@ const Plus = ({
 const SrcSetInput = ({
   size,
   className,
-  index,
-  register,
-  errors,
-  name,
-  inputKey,
+  rest,
+  error,
   placeholder,
   disabled: _disabled = false
 }) => {
-  var _a, _b;
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", Object.assign({
     className: classNames__default["default"]('khb_input', `khb_input-${size}`, className),
     type: 'number',
     placeholder: placeholder,
-    name: `srcset[${index}].${inputKey}`,
     disabled: _disabled
-  }, register(`srcset[${index}].${inputKey}`, {
-    required: `${name} Size is required`,
-    validate: value => Number(value) <= 0 ? `${inputKey} should be greater than 0` : true
-  }))), Array.isArray(errors) && errors[index] && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, rest || {})), error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_input-error"
-  }, (_b = (_a = errors[index]) === null || _a === void 0 ? void 0 : _a[inputKey]) === null || _b === void 0 ? void 0 : _b['message']));
+  }, error));
 };
 const SrcSet = ({
   label,
@@ -3412,7 +3480,9 @@ const SrcSet = ({
   wrapperClassName,
   control,
   errors,
-  disabled: _disabled2 = false
+  name,
+  disabled: _disabled2 = false,
+  t
 }) => {
   const {
     fields,
@@ -3420,7 +3490,7 @@ const SrcSet = ({
     remove
   } = reactHookForm.useFieldArray({
     control,
-    name: 'srcset'
+    name: name
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]('khb_input-wrapper', wrapperClassName)
@@ -3430,49 +3500,55 @@ const SrcSet = ({
     className: "khb_input-label-required"
   }, "*") : null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_input-srcset-items"
-  }, fields === null || fields === void 0 ? void 0 : fields.map((item, index) => /*#__PURE__*/React__default["default"].createElement("div", {
-    key: index,
-    className: "khb_input-srcset"
-  }, /*#__PURE__*/React__default["default"].createElement(SrcSetInput, {
-    errors: errors,
-    index: index,
-    className: className,
-    inputKey: "screenSize",
-    name: "Screen Size",
-    size: _size,
-    placeholder: "Screen Size",
-    register: register,
-    disabled: _disabled2
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "p-2"
-  }, "="), /*#__PURE__*/React__default["default"].createElement(SrcSetInput, {
-    errors: errors,
-    index: index,
-    register: register,
-    className: className,
-    inputKey: "width",
-    name: "Width",
-    size: _size,
-    placeholder: "Width",
-    disabled: _disabled2
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "p-2"
-  }, "x"), /*#__PURE__*/React__default["default"].createElement(SrcSetInput, {
-    errors: errors,
-    index: index,
-    register: register,
-    className: className,
-    inputKey: "height",
-    name: "Height",
-    size: _size,
-    placeholder: "Height",
-    disabled: _disabled2
+  }, fields === null || fields === void 0 ? void 0 : fields.map((item, index) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: index,
+      className: "khb_input-srcset"
+    }, /*#__PURE__*/React__default["default"].createElement(SrcSetInput, {
+      error: (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors[index]) === null || _a === void 0 ? void 0 : _a['screenSize']) === null || _b === void 0 ? void 0 : _b.message) === null || _c === void 0 ? void 0 : _c.toString(),
+      index: index,
+      className: className,
+      size: _size,
+      placeholder: "Screen Size",
+      rest: register(`${name}.${index}.screenSize`, {
+        required: t('item.screenSizeRequired'),
+        validate: value => Number(value) <= 0 ? t('item.minScreenSize') : true
+      }),
+      disabled: _disabled2
+    }), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "p-2"
+    }, "="), /*#__PURE__*/React__default["default"].createElement(SrcSetInput, {
+      error: (_f = (_e = (_d = errors === null || errors === void 0 ? void 0 : errors[index]) === null || _d === void 0 ? void 0 : _d['width']) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
+      index: index,
+      rest: register(`${name}.${index}.width`, {
+        required: t('item.widthRequired'),
+        validate: value => Number(value) <= 0 ? t('item.minWidth') : true
+      }),
+      className: className,
+      size: _size,
+      placeholder: "Width",
+      disabled: _disabled2
+    }), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "p-2"
+    }, "x"), /*#__PURE__*/React__default["default"].createElement(SrcSetInput, {
+      error: (_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors[index]) === null || _g === void 0 ? void 0 : _g['height']) === null || _h === void 0 ? void 0 : _h.message) === null || _j === void 0 ? void 0 : _j.toString(),
+      index: index,
+      rest: register(`${name}.${index}.height`, {
+        required: t('item.heightRequired'),
+        validate: value => Number(value) <= 0 ? t('item.minHeight') : true
+      }),
+      className: className,
+      size: _size,
+      placeholder: "Height",
+      disabled: _disabled2
+    }), /*#__PURE__*/React__default["default"].createElement("button", {
+      type: "button",
+      className: "khb_btn khb_btn-danger khb_btn-xs",
+      onClick: () => remove(index),
+      disabled: _disabled2
+    }, /*#__PURE__*/React__default["default"].createElement(Close, null)));
   }), /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: "khb_btn khb_btn-danger khb_btn-xs",
-    onClick: () => remove(index),
-    disabled: _disabled2
-  }, /*#__PURE__*/React__default["default"].createElement(Close, null)))), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     disabled: _disabled2,
     onClick: () => append({
@@ -3482,7 +3558,7 @@ const SrcSet = ({
     }),
     className: "khb_btn khb_btn-primary khb_btn-xs"
   }, /*#__PURE__*/React__default["default"].createElement(Plus, {
-    className: "w-7 h-7"
+    className: "khb_srcset-remove"
   }))), error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_input-error "
   }, error));
@@ -3521,45 +3597,6 @@ const PageSearch = () => {
   });
 };
 
-var call$7 = functionCall;
-var hasOwn$1 = hasOwnProperty_1;
-var isPrototypeOf$2 = objectIsPrototypeOf;
-var regExpFlags = regexpFlags$1;
-
-var RegExpPrototype$1 = RegExp.prototype;
-
-var regexpGetFlags = function (R) {
-  var flags = R.flags;
-  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$1(R, 'flags') && isPrototypeOf$2(RegExpPrototype$1, R)
-    ? call$7(regExpFlags, R) : flags;
-};
-
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var defineBuiltIn$2 = defineBuiltIn$7;
-var anObject$5 = anObject$e;
-var $toString = toString$6;
-var fails$3 = fails$n;
-var getRegExpFlags = regexpGetFlags;
-
-var TO_STRING = 'toString';
-var RegExpPrototype = RegExp.prototype;
-var nativeToString = RegExpPrototype[TO_STRING];
-
-var NOT_GENERIC = fails$3(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
-// FF44- RegExp#toString has a wrong name
-var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name != TO_STRING;
-
-// `RegExp.prototype.toString` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
-if (NOT_GENERIC || INCORRECT_NAME) {
-  defineBuiltIn$2(RegExp.prototype, TO_STRING, function toString() {
-    var R = anObject$5(this);
-    var pattern = $toString(R.source);
-    var flags = $toString(getRegExpFlags(R));
-    return '/' + pattern + '/' + flags;
-  }, { unsafe: true });
-}
-
 var aCallable$6 = aCallable$8;
 var toObject = toObject$5;
 var IndexedObject = indexedObject;
@@ -4035,6 +4072,16 @@ const PageForm = ({
     event.target.value = changeToCode(event.target.value);
     return event;
   }
+  function handleSlug(event) {
+    let slugValue = changeToSlug(event.target.value);
+    if (!slugValue || !CONSTANTS.SLUG_REGEX.test(slugValue)) {
+      slugValue = '';
+    } else {
+      slugValue = slugValue.replace(CONSTANTS.SLUG_REPLACE_REGEX, '');
+    }
+    event.target.value = slugValue;
+    return event;
+  }
   function loadOptions(value, callback) {
     getWidgets(widgetsData => {
       if (callback) callback(widgetsData);
@@ -4071,6 +4118,17 @@ const PageForm = ({
     validations: {
       required: t('page.codeRequired')
     }
+  }, {
+    label: `${t('page.slug')}`,
+    accessor: 'slug',
+    required: true,
+    type: 'text',
+    onInput: handleSlug,
+    editable: false,
+    placeholder: t('page.slugPlaceholder'),
+    validations: {
+      required: t('page.slugRequired')
+    }
   }, {
     label: t('page.widgets'),
     accessor: 'widgets',
@@ -4105,13 +4163,23 @@ const Button = ({
   onClick,
   className,
   children,
-  disabled
+  disabled,
+  loading
 }) => {
   return /*#__PURE__*/React__default["default"].createElement("button", {
     className: classNames__default["default"]('khb_btn', `khb_btn-${_type}`, `khb_btn-${_size}`, className),
     onClick: onClick,
-    disabled: disabled
-  }, children);
+    disabled: disabled || loading
+  }, loading && /*#__PURE__*/React__default["default"].createElement("svg", {
+    className: "khb_btn-loader",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "13",
+    viewBox: "0 0 12 13"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    // style={{ fill: kind }}
+    d: "M5.5,12a1,1,0,1,1,1,1A1,1,0,0,1,5.5,12ZM1.75,10.5A1.25,1.25,0,1,1,3,11.75,1.25,1.25,0,0,1,1.75,10.5Zm7.531.031a.75.75,0,1,1,.75.75A.75.75,0,0,1,9.281,10.531ZM0,7A1.5,1.5,0,1,1,1.5,8.5,1.5,1.5,0,0,1,0,7ZM11,7a.5.5,0,1,1,.5.5A.5.5,0,0,1,11,7ZM1.875,4.637a1.62,1.62,0,0,1,0-2.275,1.582,1.582,0,0,1,2.253,0,1.62,1.62,0,0,1,0,2.275,1.582,1.582,0,0,1-2.253,0ZM4.5,2a2,2,0,1,1,2,2A2,2,0,0,1,4.5,2ZM9.75,3.5a.25.25,0,1,1,.25.25A.25.25,0,0,1,9.75,3.5Z"
+  })), children);
 };
 
 const AddButton$1 = () => {
@@ -4414,7 +4482,7 @@ const FormActions = ({
     onClick: onSecondaryButtonClick
   }, _secondaryLabel), /*#__PURE__*/React__default["default"].createElement(Button, {
     onClick: onPrimaryButtonClick,
-    disabled: _loading
+    loading: _loading
   }, _primaryLabel));
 };
 
@@ -4578,11 +4646,6 @@ const useWidget = ({
   imageBaseUrl
 }) => {
   const [list, setList] = React.useState([]);
-  const [itemsList, setItemsList] = React.useState({
-    web: [],
-    mobile: []
-  });
-  const [itemsLoading, setItemsLoading] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
   const [totalPages, setTotalPages] = React.useState(0);
   const [totalRecords, setTotalRecords] = React.useState(0);
@@ -4598,8 +4661,7 @@ const useWidget = ({
     onError,
     onSuccess,
     onLogout,
-    widgetRoutesPrefix,
-    itemsRoutesPrefix
+    widgetRoutesPrefix
   } = useProviderState();
   const {
     changeSearch,
@@ -4657,67 +4719,6 @@ const useWidget = ({
       setLoading(false);
     }
   }), [baseUrl, currentPageRef, limitRef, offsetRef, handleError, routes, token, widgetRoutesPrefix]);
-  const getItems = React.useCallback(id => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-      setItemsLoading(true);
-      const api = getApiType({
-        routes,
-        action: 'ITEM',
-        prefix: itemsRoutesPrefix,
-        id
-      });
-      const response = yield commonApi({
-        baseUrl,
-        token,
-        method: api.method,
-        url: api.url,
-        onError: handleError(CALLBACK_CODES.GET_ALL)
-      });
-      if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
-        setItemsLoading(false);
-        const itemsResponse = dataGatter(response).reduce((acc, itemItem) => {
-          if (itemItem['itemType'] === 'Web') acc.web.push(itemItem);else acc.mobile.push(itemItem);
-          return acc;
-        }, {
-          web: [],
-          mobile: []
-        });
-        return setItemsList(itemsResponse);
-      }
-      setItemsLoading(false);
-    } catch (error) {
-      setItemsLoading(false);
-    }
-  }), [baseUrl, handleError, routes, itemsRoutesPrefix, token]);
-  const onDeleteItem = id => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-      setItemsLoading(true);
-      const api = getApiType({
-        routes,
-        action: 'DELETE',
-        prefix: itemsRoutesPrefix,
-        id
-      });
-      const response = yield commonApi({
-        baseUrl,
-        token,
-        method: api.method,
-        url: api.url,
-        onError: handleError(CALLBACK_CODES.DELETE)
-      });
-      if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
-        setItemsLoading(false);
-        onSuccess(CALLBACK_CODES.DELETE, response === null || response === void 0 ? void 0 : response.code, response === null || response === void 0 ? void 0 : response.message);
-        if (itemData) getItems(itemData['_id']);
-        return;
-      }
-      setItemsLoading(false);
-      onError(CALLBACK_CODES.DELETE, response === null || response === void 0 ? void 0 : response.code, response === null || response === void 0 ? void 0 : response.message);
-    } catch (error) {
-      setItemsLoading(false);
-      onError(CALLBACK_CODES.DELETE, INTERNAL_ERROR_CODE, error.message);
-    }
-  });
   const onCofirmDeleteWidget = () => __awaiter(void 0, void 0, void 0, function* () {
     try {
       let proceed = true;
@@ -4780,6 +4781,7 @@ const useWidget = ({
       });
       if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
         setList(oldListData => oldListData.map(item => item['_id'] === id ? response.data : item));
+        if (response.message) onSuccess(CALLBACK_CODES.PARTIAL_UPDATE, response === null || response === void 0 ? void 0 : response.code, response === null || response === void 0 ? void 0 : response.message);
       } else {
         onError(CALLBACK_CODES.PARTIAL_UPDATE, response === null || response === void 0 ? void 0 : response.code, response === null || response === void 0 ? void 0 : response.message);
       }
@@ -4890,7 +4892,39 @@ const useWidget = ({
     setFormState(undefined);
     setItemData(null);
   };
-  const onChangeFormState = (state, data) => {
+  const getAndSetWidget = id => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      setLoading(true);
+      const api = getApiType({
+        routes,
+        action: 'GET_ONE',
+        prefix: widgetRoutesPrefix,
+        id
+      });
+      const response = yield commonApi({
+        baseUrl,
+        token,
+        url: api.url,
+        method: api.method,
+        onError: handleError(CALLBACK_CODES.GET_SINGLE)
+      });
+      if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
+        setLoading(false);
+        const data = response === null || response === void 0 ? void 0 : response.data;
+        if (Array.isArray(data.items)) {
+          const items = JSON.parse(JSON.stringify(data.items));
+          data.webItems = items.filter(item => item.itemType === 'Web');
+          data.mobileItems = items.filter(item => item.itemType === 'Mobile');
+          delete data.items;
+        }
+        setItemData(data);
+      }
+    } catch (error) {
+      setLoading(false);
+      onError(CALLBACK_CODES.UPDATE, '', error.message);
+    }
+  });
+  const onChangeFormState = (state, data) => __awaiter(void 0, void 0, void 0, function* () {
     setFormState(state);
     // fetch ItemsTypes & WidgetTypes if needed
     if (state === 'ADD' || state === 'UPDATE') {
@@ -4899,52 +4933,14 @@ const useWidget = ({
     }
     // get Item data if widget is updating
     if (state === 'UPDATE' && data) {
-      if (data['itemsType'] === 'Image') {
-        getItems(data['_id']);
-      }
-      setItemData(data);
+      getAndSetWidget(data['_id']);
     } else if (state === 'ADD') {
       // reset Item data if widget is adding
-      setItemsList({
-        web: [],
-        mobile: []
-      });
       setItemData(null);
     } else if (state === 'DELETE' && data) {
       setItemData(data);
       setFormState(state);
     }
-  };
-  const onItemFormSubmit = (state, data, updateId) => __awaiter(void 0, void 0, void 0, function* () {
-    setItemsLoading(true);
-    const code = state === 'ADD' ? CALLBACK_CODES.CREATE : CALLBACK_CODES.UPDATE;
-    try {
-      const api = getApiType({
-        routes,
-        action: state === 'ADD' ? 'CREATE' : 'UPDATE',
-        prefix: itemsRoutesPrefix,
-        id: updateId
-      });
-      const response = yield commonApi({
-        baseUrl,
-        token,
-        data,
-        url: api.url,
-        method: api.method,
-        onError: handleError(code)
-      });
-      if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
-        setItemsLoading(false);
-        onSuccess(code, response === null || response === void 0 ? void 0 : response.code, response === null || response === void 0 ? void 0 : response.message);
-        if (itemData) getItems(itemData['_id']);
-      } else {
-        setItemsLoading(false);
-        onError(code, response === null || response === void 0 ? void 0 : response.code, response === null || response === void 0 ? void 0 : response.message);
-      }
-    } catch (error) {
-      setItemsLoading(false);
-      onError(code, INTERNAL_ERROR_CODE, error.message);
-    }
   });
   // Image Upload operations
   const onImageUpload = file => __awaiter(void 0, void 0, void 0, function* () {
@@ -5030,7 +5026,6 @@ const useWidget = ({
     itemData,
     onChangeFormState,
     onCloseForm,
-    onDeleteItem,
     onWidgetFormSubmit,
     onCofirmDeleteWidget,
     onPartialUpdateWidget,
@@ -5041,11 +5036,7 @@ const useWidget = ({
     changeSearch,
     collectionDataLoading,
     getCollectionData,
-    collectionData,
-    // Items
-    itemsList,
-    itemsLoading,
-    onItemFormSubmit
+    collectionData
   };
 };
 
@@ -6163,11 +6154,6 @@ const WidgetContextProvider = ({
   canDelete: _canDelete = false,
   loader: _loader = /*#__PURE__*/React__default["default"].createElement("span", null),
   onPartialUpdateWidget: _onPartialUpdateWidget = () => Promise.resolve(),
-  // Item
-  webItems: _webItems = [],
-  mobileItems: _mobileItems = [],
-  itemsLoading: _itemsLoading = false,
-  onItemFormSubmit: _onItemFormSubmit = () => {},
   reactSelectStyles: _reactSelectStyles = {},
   // other
   children
@@ -6215,12 +6201,7 @@ const WidgetContextProvider = ({
       columns: _columns,
       data: _data,
       canDelete: _canDelete,
-      loader: _loader,
-      // Item
-      webItems: _webItems,
-      mobileItems: _mobileItems,
-      itemsLoading: _itemsLoading,
-      onItemFormSubmit: _onItemFormSubmit
+      loader: _loader
     }
   }, children);
 };
@@ -6368,6 +6349,72 @@ $({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') },
   }
 });
 
+const ChevronDown = ({
+  srText,
+  className
+}) => {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, srText ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "khb_sr-only"
+  }, srText) : null, /*#__PURE__*/React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "-5 -8 24 24",
+    width: "24",
+    fill: "currentColor",
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"
+  })));
+};
+
+const ChevronUp = ({
+  srText,
+  className
+}) => {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, srText ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "khb_sr-only"
+  }, srText) : null, /*#__PURE__*/React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "-5 -7.5 24 24",
+    width: "24",
+    fill: "currentColor",
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M7.071 2.828l-4.95 4.95A1 1 0 0 1 .707 6.364L6.364.707a1 1 0 0 1 1.414 0l5.657 5.657a1 1 0 0 1-1.414 1.414l-4.95-4.95z"
+  })));
+};
+
+const Accordian = ({
+  id,
+  className,
+  children,
+  open,
+  onToggle,
+  title,
+  collapseId,
+  footerContent
+}) => {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h2", {
+    id: id
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: "khb_accordian-header",
+    "data-accordion-target": `#${collapseId}`,
+    "aria-expanded": "true",
+    "aria-controls": collapseId,
+    onClick: () => onToggle && onToggle(!open)
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, title), open ? /*#__PURE__*/React__default["default"].createElement(ChevronUp, null) : /*#__PURE__*/React__default["default"].createElement(ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+    id: collapseId,
+    className: classNames__default["default"]('khb_accordian-body', {
+      hidden: !open
+    }),
+    "aria-labelledby": id
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_accordian-content"
+  }, children), footerContent && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_accordian-footer"
+  }, footerContent)));
+};
+
 const ImageUpload = ({
   className,
   text,
@@ -6378,6 +6425,7 @@ const ImageUpload = ({
   imgId: _imgId = '',
   onImageUpload,
   onImageRemove,
+  clearError,
   baseUrl,
   disabled: _disabled = false
 }) => {
@@ -6396,7 +6444,7 @@ const ImageUpload = ({
     onDrop: (acceptedFiles, rejectedFiles) => __awaiter(void 0, void 0, void 0, function* () {
       var _a, _b, _c;
       try {
-        onError('');
+        if (typeof clearError === 'function') clearError();
         if ((acceptedFiles === null || acceptedFiles === void 0 ? void 0 : acceptedFiles.length) > 0) {
           const regex = /\.(png|jpeg|jpg|webp|svg)$/gi;
           const files = acceptedFiles.filter(file => regex.test(file.name));
@@ -6442,174 +6490,127 @@ const ImageUpload = ({
       className: "khb_img-wrapper-del"
     }, /*#__PURE__*/React__default["default"].createElement(Close, null)));
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  if (!isEmpty(img) && isString(img) && img) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "khb_img-upload-wrapper-1"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "khb_img-upload-wrapper-2"
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, showImage(img))));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, getRootProps(), {
     className: "khb_img-upload-wrapper-1"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_img-upload-wrapper-2"
-  }, !isEmpty(img) && isString(img) && img ? showImage(img) : /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, getRootProps({
-    className
-  })), /*#__PURE__*/React__default["default"].createElement("input", Object.assign({
+  }), /*#__PURE__*/React__default["default"].createElement("input", Object.assign({
     disabled: _disabled
   }, getInputProps(), {
     id: "file-upload"
-  })), text))), error && /*#__PURE__*/React__default["default"].createElement("p", {
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: "file-upload",
+    className: "khb_img-upload-wrapper-2"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, text))), error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "khb_input-error"
   }, error));
 };
 var ImageUpload$1 = /*#__PURE__*/React__default["default"].memo(ImageUpload);
 
-const ChevronDown = ({
-  srText,
-  className
-}) => {
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, srText ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "khb_sr-only"
-  }, srText) : null, /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-5 -8 24 24",
-    width: "24",
-    fill: "currentColor",
-    className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"
-  })));
-};
-
-const ChevronUp = ({
-  srText,
-  className
-}) => {
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, srText ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "khb_sr-only"
-  }, srText) : null, /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-5 -7.5 24 24",
-    width: "24",
-    fill: "currentColor",
-    className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M7.071 2.828l-4.95 4.95A1 1 0 0 1 .707 6.364L6.364.707a1 1 0 0 1 1.414 0l5.657 5.657a1 1 0 0 1-1.414 1.414l-4.95-4.95z"
-  })));
-};
-
-const Accordian = ({
-  id,
-  className,
+const ConfirmPopOver = ({
   children,
-  open,
-  onToggle,
+  onConfirm,
   title,
-  collapseId,
-  footerContent
+  confirmText: _confirmText = 'Yes',
+  cancelText: _cancelText = 'No'
 }) => {
-  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("h2", {
-    id: id
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: "khb_accordian-header",
-    "data-accordion-target": `#${collapseId}`,
-    "aria-expanded": "true",
-    "aria-controls": collapseId,
-    onClick: () => onToggle && onToggle(!open)
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, title), open ? /*#__PURE__*/React__default["default"].createElement(ChevronUp, null) : /*#__PURE__*/React__default["default"].createElement(ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement("div", {
-    id: collapseId,
-    className: classNames__default["default"]('khb_accordian-body', {
-      hidden: !open
-    }),
-    "aria-labelledby": id
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const onConfirmClick = () => {
+    setIsPopoverOpen(false);
+    onConfirm();
+  };
+  return /*#__PURE__*/React__default["default"].createElement(reactTinyPopover.Popover, {
+    containerClassName: "khb_confirm-popover",
+    isOpen: isPopoverOpen,
+    padding: 10,
+    onClickOutside: () => setIsPopoverOpen(false),
+    content: () => /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "khb_confirm-popover-content"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "khb_confirm-popover-title"
+    }, title), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "khb_confirm-popover-footer"
+    }, /*#__PURE__*/React__default["default"].createElement(Button, {
+      type: "secondary",
+      onClick: () => setIsPopoverOpen(false)
+    }, _cancelText), /*#__PURE__*/React__default["default"].createElement(Button, {
+      type: "primary",
+      onClick: onConfirmClick
+    }, _confirmText)))
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_accordian-content"
-  }, children), footerContent && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "khb_accordian-footer"
-  }, footerContent)));
+    onClick: () => setIsPopoverOpen(true)
+  }, children));
 };
 
 const ItemsAccordian = ({
-  schema,
-  onDataSubmit,
   show,
   title,
   id,
-  itemsData,
   collapseId,
   toggleShow,
+  loading,
+  name,
+  errors,
+  control,
+  register,
+  setError,
   itemType,
-  widgetId,
-  onDelete,
+  clearError,
   addText: _addText = 'Add',
-  saveText: _saveText = 'Save',
-  cancelText: _cancelText = 'Cancel',
-  deleteText: _deleteText = 'Delete',
-  editText: _editText = 'Edit'
+  deleteText: _deleteText = 'Delete'
 }) => {
-  const [data, setData] = React.useState([]);
-  const formRefs = React.useRef([]);
+  const {
+    baseUrl
+  } = useProviderState();
+  const {
+    onImageUpload,
+    onImageRemove,
+    t,
+    imageBaseUrl
+  } = useWidgetState();
   const [itemsShow, setItemsShow] = React.useState([]);
-  const [editingItemIndex, setEditingItemIndex] = React.useState();
-  React.useEffect(() => {
-    if (Array.isArray(itemsData)) {
-      setData(itemsData);
-      formRefs.current = itemsData.map(() => null);
-      setItemsShow(itemsData.map(() => false));
-    }
-  }, [itemsData]);
-  const onItemFormSubmitClick = index => {
-    var _a;
-    (_a = formRefs.current[index]) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
-      cancelable: true,
-      bubbles: true
-    }));
-  };
-  const onItemFormSubmit = (index, formData) => {
-    var _a;
-    const state = index === editingItemIndex && data[index] ? 'UPDATE' : 'ADD';
-    const finalData = Object.assign(Object.assign({}, formData), {
-      widgetId,
-      itemType,
-      sequence: index
-    });
-    if (finalData['img'] && finalData['img']['_id']) {
-      const id = finalData['img']['_id'];
-      finalData['img'] = id;
-    }
-    onDataSubmit(state, finalData, state === 'UPDATE' ? (_a = data[index]) === null || _a === void 0 ? void 0 : _a['_id'] : undefined);
-    setEditingItemIndex(undefined);
-  };
+  const {
+    fields: items,
+    append: appendItem,
+    remove: removeItem
+  } = reactHookForm.useFieldArray({
+    name,
+    control
+  });
   const onItemsToggleClick = (index, status) => {
+    var _a;
     const newItemsShow = [...itemsShow];
-    const newStatus = typeof status === 'undefined' ? !newItemsShow[index] : status;
-    newItemsShow.fill(false);
+    const newStatus = ((_a = errors === null || errors === void 0 ? void 0 : errors[name]) === null || _a === void 0 ? void 0 : _a[index]) ? true : typeof status === 'undefined' ? !newItemsShow[index] : status;
     newItemsShow[index] = newStatus;
     setItemsShow(newItemsShow);
   };
-  const onItemRemoveClick = index => {
-    const newItemsShow = [...itemsShow];
-    newItemsShow.splice(index, 1);
-    setItemsShow(newItemsShow);
-    formRefs.current.splice(index, 1);
-  };
-  const onItemAddClick = () => {
-    const newItemsShow = [...itemsShow];
-    newItemsShow.push(false);
-    setItemsShow(newItemsShow);
-    formRefs.current.push(null);
-    onItemsToggleClick(newItemsShow.length - 1);
-  };
-  const onItemEditClick = index => {
-    setEditingItemIndex(index);
-  };
-  const onItemCancelClick = index => {
-    if (!data[index]) {
-      onItemRemoveClick(index);
-    } else {
-      setEditingItemIndex(undefined);
+  React.useEffect(() => {
+    var _a, _b;
+    if (errors && ((_a = errors === null || errors === void 0 ? void 0 : errors[name]) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      (_b = errors === null || errors === void 0 ? void 0 : errors[name]) === null || _b === void 0 ? void 0 : _b.forEach((errorItem, index) => {
+        if (errorItem) onItemsToggleClick(index, true);
+      });
     }
-    onItemsToggleClick(index, false);
-  };
-  const onDeleteClick = index => {
-    var _a;
-    onDelete((_a = data[index]) === null || _a === void 0 ? void 0 : _a['_id']);
-    onItemRemoveClick(index);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors, name, errors === null || errors === void 0 ? void 0 : errors[name]]);
+  const addTab = index => {
+    appendItem({
+      title: '',
+      subtitle: '',
+      altText: '',
+      link: '',
+      img: '',
+      srcset: [],
+      itemType,
+      sequence: index
+    });
   };
   return /*#__PURE__*/React__default["default"].createElement(Accordian, {
     open: show,
@@ -6619,76 +6620,107 @@ const ItemsAccordian = ({
     id: id,
     footerContent: /*#__PURE__*/React__default["default"].createElement(Button, {
       size: "sm",
-      onClick: onItemAddClick,
-      disabled: !widgetId
+      disabled: loading,
+      onClick: () => addTab(items.length)
     }, _addText)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_item-items"
-  }, itemsShow.map((status, index) => /*#__PURE__*/React__default["default"].createElement(Accordian, {
-    key: index,
-    open: status,
-    onToggle: () => onItemsToggleClick(index),
-    title: `Item ${index + 1}`,
-    collapseId: `${id}-item-content-${index}`,
-    id: `${id}-item-${index}`,
-    footerContent: editingItemIndex === index || !data[index] ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button, {
-      size: "sm",
-      onClick: () => onItemFormSubmitClick(index)
-    }, _saveText), /*#__PURE__*/React__default["default"].createElement(Button, {
-      type: "secondary",
-      size: "sm",
-      onClick: () => onItemCancelClick(index)
-    }, _cancelText)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button, {
-      size: "sm",
-      onClick: () => onItemEditClick(index)
-    }, _editText), /*#__PURE__*/React__default["default"].createElement(Button, {
-      type: "danger",
-      size: "sm",
-      onClick: () => onDeleteClick(index)
-    }, _deleteText))
-  }, /*#__PURE__*/React__default["default"].createElement(Form, {
-    schema: schema,
-    data: data[index],
-    onSubmit: data => onItemFormSubmit(index, data),
-    ref: el => formRefs.current[index] = el,
-    enable: editingItemIndex === index || !data[index],
-    isUpdating: editingItemIndex === index
-  })))));
-};
-
-const ConfirmPopOver = ({
-  children,
-  onConfirm,
-  title,
-  confirmText: _confirmText = 'Yes',
-  cancelText: _cancelText = 'No'
-}) => {
-  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
-  const onConfirmClick = () => {
-    setIsPopoverOpen(false);
-    onConfirm();
-  };
-  return /*#__PURE__*/React__default["default"].createElement(reactTinyPopover.Popover, {
-    containerClassName: "khb_confirm-popover",
-    isOpen: isPopoverOpen,
-    padding: 10,
-    onClickOutside: () => setIsPopoverOpen(false),
-    content: () => /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "khb_confirm-popover-content"
+  }, items === null || items === void 0 ? void 0 : items.map((field, index) => {
+    var _a, _b, _c, _d, _e, _f;
+    return /*#__PURE__*/React__default["default"].createElement(Accordian, {
+      key: index,
+      open: itemsShow[index],
+      onToggle: () => onItemsToggleClick(index),
+      title: `Item ${index + 1}`,
+      collapseId: `${id}-item-content-${index}`,
+      id: `${id}-item-${index}`,
+      footerContent: /*#__PURE__*/React__default["default"].createElement(ConfirmPopOver, {
+        onConfirm: () => removeItem(index),
+        title: t('item.deleteTitle'),
+        confirmText: t('yesButtonText'),
+        cancelText: t('cancelButtonText')
+      }, /*#__PURE__*/React__default["default"].createElement(Button, {
+        type: "danger",
+        size: "sm",
+        disabled: loading
+      }, _deleteText))
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "khb_confirm-popover-title"
-    }, title), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "khb_confirm-popover-footer"
-    }, /*#__PURE__*/React__default["default"].createElement(Button, {
-      type: "secondary",
-      onClick: () => setIsPopoverOpen(false)
-    }, _cancelText), /*#__PURE__*/React__default["default"].createElement(Button, {
-      type: "primary",
-      onClick: onConfirmClick
-    }, _confirmText)))
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    onClick: () => setIsPopoverOpen(true)
-  }, children));
+      className: "khb-form-items"
+    }, /*#__PURE__*/React__default["default"].createElement(Input, {
+      rest: register(`${name}.${index}.title`, {
+        required: t('item.titleRequired')
+      }),
+      label: t('item.title'),
+      error: (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['title']) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
+      type: 'text',
+      className: "w-full p-2",
+      placeholder: t('item.titlePlaceholder'),
+      required: true
+    }), /*#__PURE__*/React__default["default"].createElement(Input, {
+      rest: register(`${name}.${index}.subtitle`),
+      label: t('item.subtitle'),
+      type: 'text',
+      className: "w-full p-2",
+      placeholder: t('item.subTitlePlaceholder')
+    }), /*#__PURE__*/React__default["default"].createElement(Input, {
+      rest: register(`${name}.${index}.altText`),
+      label: t('item.altText'),
+      type: 'text',
+      className: "w-full p-2",
+      placeholder: t('item.altTextPlaceholder')
+    }), /*#__PURE__*/React__default["default"].createElement(Input, {
+      rest: register(`${name}.${index}.link`),
+      label: t('item.link'),
+      type: 'url',
+      className: "w-full p-2",
+      placeholder: t('item.linkPlaceholder')
+    }), /*#__PURE__*/React__default["default"].createElement(Input.SrcSet, {
+      control: control,
+      register: register,
+      label: t(`item.srcset`),
+      name: `${name}.${index}.srcset`,
+      errors: (_f = (_e = errors[name]) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f['srcset'],
+      t: t
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "kms_input-wrapper"
+    }, /*#__PURE__*/React__default["default"].createElement("label", {
+      className: "kms_input-label"
+    }, t('item.image')), /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
+      control: control,
+      name: `${name}.${index}.img`,
+      render: ({
+        field
+      }) => {
+        var _a, _b, _c, _d;
+        return /*#__PURE__*/React__default["default"].createElement(ImageUpload$1, {
+          imgId: field.value,
+          clearError: () => clearError(`${name}.${index}.img`),
+          maxSize: 10485760,
+          onError: msg => setError(`${name}.${index}.img`, {
+            type: 'custom',
+            message: msg
+          }),
+          error: (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['img']) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
+          setImgId: value => {
+            field.onChange(value);
+          },
+          baseUrl: imageBaseUrl ? imageBaseUrl : baseUrl,
+          text: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "khb_img-text-wrapper"
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "khb_img-text-label"
+          }, /*#__PURE__*/React__default["default"].createElement("span", null, t('item.uploadFile'))), /*#__PURE__*/React__default["default"].createElement("p", {
+            className: "khb_img-text-1"
+          }, t('item.dragDrop'))), /*#__PURE__*/React__default["default"].createElement("p", {
+            className: "khb_img-text-2"
+          }, t('item.allowedFormat'))),
+          onImageUpload: onImageUpload,
+          onImageRemove: onImageRemove,
+          className: "khb_img-upload-wrapper-3"
+        });
+      }
+    }))));
+  })));
 };
 
 const TabItem = ({
@@ -6827,6 +6859,8 @@ const constants = {
   carouselWidgetTypeValue: 'Carousel',
   imageItemsTypeValue: 'Image',
   tabsAccessor: 'tabs',
+  webItems: 'webItems',
+  mobileItems: 'mobileItems',
   tabCollectionItemsAccessor: 'collectionItems'
 };
 const WidgetForm = ({
@@ -6843,13 +6877,13 @@ const WidgetForm = ({
     setValue,
     control,
     watch,
+    clearErrors,
     setError,
     getValues
   } = reactHookForm.useForm({
     shouldUnregister: false
   });
   const {
-    baseUrl,
     switchClass
   } = useProviderState();
   const {
@@ -6857,23 +6891,17 @@ const WidgetForm = ({
     data,
     canAdd,
     canUpdate,
-    webItems,
-    mobileItems,
     formState,
     itemsTypes,
     widgetTypes,
-    onItemFormSubmit,
+    loading,
     onWidgetFormSubmit,
-    onDeleteItem,
-    onImageRemove,
-    onImageUpload,
     getCollectionData,
     collectionData,
     collectionDataLoading,
     formatListItem,
     formatOptionLabel,
-    reactSelectStyles,
-    imageBaseUrl
+    reactSelectStyles
   } = useWidgetState();
   const callerRef = React.useRef(null);
   const [activeTab, setActiveTab] = React.useState(0);
@@ -6914,7 +6942,7 @@ const WidgetForm = ({
     let valueToSet = '';
     if (formState === 'UPDATE') {
       if (data[constants.widgetTypeAccessor] === constants.tabsWidgetTypeValue) {
-        collectionItems = data[constants.tabsAccessor][activeTab]['collectionItems'];
+        collectionItems = data[constants.tabsAccessor][activeTab] ? data[constants.tabsAccessor][activeTab]['collectionItems'] : [];
         valueToSet = `${constants.tabsAccessor}.${activeTab}.${constants.tabCollectionItemsAccessor}`;
       } else if (Array.isArray(data[constants.collectionItemsAccessor]) && data[constants.collectionItemsAccessor].length > 0) {
         collectionItems = data[constants.collectionItemsAccessor];
@@ -7014,7 +7042,19 @@ const WidgetForm = ({
     if (Array.isArray(selectedCollectionItems) && selectedCollectionItems.length > 0) {
       formData['collectionItems'] = selectedCollectionItems.map(item => item.value);
     }
-    onWidgetFormSubmit(formData);
+    let items = [...(getValues(constants.webItems) || []), ...(getValues(constants.mobileItems) || [])];
+    items = items.map(_a => {
+      var item = __rest(_a, ["_id", "__v", "widgetId"]);
+      if (item['img'] && item['img']['_id']) {
+        item['img'] = item['img']['_id'];
+      } else if (typeof item['img'] !== 'string' || !item['img']) {
+        delete item['img'];
+      }
+      return item;
+    });
+    onWidgetFormSubmit(Object.assign(Object.assign({}, formData), {
+      items
+    }));
   };
   const onCollectionIndexChange = result => {
     const {
@@ -7177,65 +7217,6 @@ const WidgetForm = ({
     customStyles: reactSelectStyles || {},
     selectKey: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
   }];
-  const itemFormSchema = [{
-    label: `${t('item.title')}`,
-    required: true,
-    accessor: 'title',
-    type: 'text',
-    placeholder: t('item.titlePlaceholder')
-  }, {
-    label: `${t('item.subtitle')}`,
-    accessor: 'subtitle',
-    type: 'text',
-    placeholder: t('item.subTitlePlaceholder')
-  }, {
-    label: `${t('item.altText')}`,
-    accessor: 'altText',
-    type: 'text',
-    placeholder: t('item.altTextPlaceholder')
-  }, {
-    label: `${t('item.link')}`,
-    required: true,
-    accessor: 'link',
-    type: 'url',
-    placeholder: t('item.linkPlaceholder')
-  }, {
-    label: `${t('item.srcset')}`,
-    accessor: 'srcset',
-    type: 'srcset'
-  }, {
-    label: t('item.image'),
-    accessor: 'img',
-    Input: ({
-      field,
-      error,
-      setError,
-      disabled
-    }) => /*#__PURE__*/React__default["default"].createElement(ImageUpload$1, {
-      imgId: field.value,
-      maxSize: 10485760,
-      onError: setError,
-      error: error,
-      setImgId: value => {
-        field.onChange(value);
-      },
-      baseUrl: imageBaseUrl ? imageBaseUrl : baseUrl,
-      disabled: disabled,
-      text: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "khb_img-text-wrapper"
-      }, /*#__PURE__*/React__default["default"].createElement("label", {
-        htmlFor: "file-upload",
-        className: "khb_img-text-label"
-      }, /*#__PURE__*/React__default["default"].createElement("span", null, t('item.uploadFile'))), /*#__PURE__*/React__default["default"].createElement("p", {
-        className: "khb_img-text-1"
-      }, t('item.dragDrop'))), /*#__PURE__*/React__default["default"].createElement("p", {
-        className: "khb_img-text-2"
-      }, t('item.allowedFormat'))),
-      onImageUpload: onImageUpload,
-      onImageRemove: onImageRemove,
-      className: "khb_img-upload-wrapper-3"
-    })
-  }];
   if (!canAdd || !canUpdate) return null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_form"
@@ -7273,38 +7254,36 @@ const WidgetForm = ({
     formatItem: formatListItem,
     listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
   }), itemsEnabled && selectedWidgetType !== 'Tabs' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ItemsAccordian, {
-    collapseId: "webItems",
+    clearError: clearErrors,
+    collapseId: constants.webItems,
     title: t('widget.webItems'),
-    id: "webItems",
-    schema: itemFormSchema,
-    show: webItemsVisible,
-    itemsData: webItems,
+    id: constants.webItems,
+    setError: setError,
+    show: webItemsVisible || !!(errors && (errors === null || errors === void 0 ? void 0 : errors[constants.webItems])),
     toggleShow: setWebItemsVisible,
-    onDataSubmit: onItemFormSubmit,
     itemType: "Web",
-    widgetId: data === null || data === void 0 ? void 0 : data._id,
-    onDelete: onDeleteItem,
+    name: constants.webItems,
+    errors: errors,
+    control: control,
+    register: register,
+    loading: loading,
     addText: t('addButtonText'),
-    cancelText: t('cancelButtonText'),
-    saveText: t('saveButtonText'),
-    editText: t('editButtonText'),
     deleteText: t('deleteButtonText')
   }), /*#__PURE__*/React__default["default"].createElement(ItemsAccordian, {
-    collapseId: "mobileItems",
+    clearError: clearErrors,
+    collapseId: constants.mobileItems,
     title: t('widget.mobileItems'),
-    id: "mobileItems",
-    schema: itemFormSchema,
-    show: mobileItemsVisible,
-    itemsData: mobileItems,
+    id: constants.mobileItems,
+    name: constants.mobileItems,
+    setError: setError,
+    loading: loading,
+    show: mobileItemsVisible || !!(errors && (errors === null || errors === void 0 ? void 0 : errors[constants.mobileItems])),
     toggleShow: setMobileItemsVisible,
-    onDataSubmit: onItemFormSubmit,
     itemType: "Mobile",
-    widgetId: data === null || data === void 0 ? void 0 : data._id,
-    onDelete: onDeleteItem,
+    errors: errors,
+    control: control,
+    register: register,
     addText: t('addButtonText'),
-    cancelText: t('cancelButtonText'),
-    saveText: t('saveButtonText'),
-    editText: t('editButtonText'),
     deleteText: t('deleteButtonText')
   })));
 };
@@ -7450,7 +7429,6 @@ const Widget = ({
     itemData,
     getWidgets,
     onCofirmDeleteWidget,
-    onDeleteItem,
     onImageRemove,
     onImageUpload,
     onPartialUpdateWidget,
@@ -7464,11 +7442,7 @@ const Widget = ({
     totalRecords,
     currentPage,
     pageSize,
-    setCurrentPage,
-    // Item
-    itemsList,
-    itemsLoading,
-    onItemFormSubmit
+    setCurrentPage
   } = useWidget({
     canList: derivedPermissions.list,
     routes,
@@ -7487,7 +7461,6 @@ const Widget = ({
     loader: loader,
     onWidgetFormSubmit: onWidgetFormSubmit,
     data: itemData,
-    onDeleteItem: onDeleteItem,
     getWidgets: getWidgets,
     onImageRemove: onImageRemove,
     onImageUpload: onImageUpload,
@@ -7505,11 +7478,6 @@ const Widget = ({
     currentPage: currentPage,
     pageSize: pageSize,
     setCurrentPage: setCurrentPage,
-    // Item
-    webItems: itemsList.web,
-    mobileItems: itemsList.mobile,
-    itemsLoading: itemsLoading,
-    onItemFormSubmit: onItemFormSubmit,
     // Permissions
     canAdd: derivedPermissions.add,
     canDelete: derivedPermissions.delete,