@knovator/pagecreator-admin 0.9.2 → 0.9.4

package/index.cjs

@@ -1705,14 +1705,12 @@ const TRANSLATION_PAIRS_COMMON = {
   pleaseType: 'Please type',
   toProceedOrCancel: 'to processed or close this modal to cancel.',
   confirm: 'Confirm',
-  'common:actions': 'Actions',
-  'common:cancel': 'Cancel',
+  nextContent: 'Next',
+  previousContent: 'Previous',
   page: 'Page',
   next: 'Next',
-  previous: 'Previous',
   indicatesRequired: 'Indicates fields are required',
   addButtonText: 'Add',
-  editButtonText: 'Edit',
   cancelButtonText: 'Cancel',
   yesButtonText: 'Yes',
   deleteButtonText: 'Delete',
@@ -4107,8 +4105,8 @@ const AddButton$1 = () => {
   } = usePageState();
   return /*#__PURE__*/React__default["default"].createElement(Button, {
     disabled: !canAdd,
-    onClick: () => onChangeFormState("ADD")
-  }, t("addButtonText"));
+    onClick: () => onChangeFormState('ADD')
+  }, t('addButtonText') || t('common:addButtonText'));
 };
 
 const ChevronLeft = ({
@@ -4220,11 +4218,11 @@ const PagePagination = () => {
     setCurrentPage
   } = usePageState();
   return /*#__PURE__*/React__default["default"].createElement(Pagination, {
-    ofText: t('of'),
-    pageText: t('page'),
-    showingText: t('showing'),
-    nextContent: t('nextContent'),
-    previousContent: t('previousContent'),
+    ofText: t('of') || t('common:of'),
+    pageText: t('confirm') || t('common:confirm'),
+    showingText: t('showing') || t('common:showing'),
+    nextContent: t('nextContent') || t('common:nextContent'),
+    previousContent: t('previousContent') || t('common:previousContent'),
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -4436,10 +4434,10 @@ const PageFormActions = ({
   if (!canAdd && !canUpdate) return null;
   return /*#__PURE__*/React__default["default"].createElement(FormActions, {
     loading: loading,
-    primaryLabel: formState === 'ADD' ? t('createButtonText') : t('updateButtonText'),
+    primaryLabel: formState === 'ADD' ? t('createButtonText') || t('common:createButtonText') : t('updateButtonText') || t('common:updateButtonText'),
     onPrimaryButtonClick: onSubmitClick,
     onSecondaryButtonClick: closeForm,
-    secondaryLabel: t('cancelButtonText')
+    secondaryLabel: t('cancelButtonText') || t('common:cancelButtonText')
   });
 };
 
@@ -4541,13 +4539,13 @@ const Page = ({
     itemData: itemData,
     onClose: onCloseForm,
     onConfirmDelete: onCofirmDeletePage,
-    confirmationRequired: derivedT('confirmationRequired'),
-    confirm: derivedT('confirm'),
-    lossOfData: derivedT('lossOfData'),
-    permanentlyDelete: derivedT('permanentlyDelete'),
-    pleaseType: derivedT('pleaseType'),
-    toProceedOrCancel: derivedT('toProceedOrCancel'),
-    typeHerePlaceholder: derivedT('typeHerePlaceholder')
+    confirmationRequired: derivedT('confirmationRequired') || derivedT('common:confirmationRequired'),
+    confirm: derivedT('confirm') || derivedT('common:confirm'),
+    lossOfData: derivedT('lossOfData') || derivedT('common:lossOfData'),
+    permanentlyDelete: derivedT('permanentlyDelete') || derivedT('common:permanentlyDelete'),
+    pleaseType: derivedT('pleaseType') || derivedT('common:pleaseType'),
+    toProceedOrCancel: derivedT('toProceedOrCancel') || derivedT('common:toProceedOrCancel'),
+    typeHerePlaceholder: derivedT('typeHerePlaceholder') || derivedT('common:typeHerePlaceholder')
   }));
 };
 Page.Table = PageTable;
@@ -4582,8 +4580,7 @@ const useWidget = ({
     onError,
     onSuccess,
     onLogout,
-    widgetRoutesPrefix,
-    pageRoutesPrefix
+    widgetRoutesPrefix
   } = useProviderState();
   const {
     changeSearch,
@@ -4645,7 +4642,7 @@ const useWidget = ({
     const api = getApiType({
       routes,
       action: 'LANGUAGES',
-      prefix: pageRoutesPrefix
+      prefix: widgetRoutesPrefix
     });
     const response = yield commonApi({
       baseUrl,
@@ -4658,7 +4655,7 @@ const useWidget = ({
       setLanguages(response.data);
       return response.data;
     }
-  }), [baseUrl, handleError, pageRoutesPrefix, routes, token]);
+  }), [baseUrl, handleError, widgetRoutesPrefix, routes, token]);
   const onCofirmDeleteWidget = () => __awaiter(void 0, void 0, void 0, function* () {
     try {
       let proceed = true;
@@ -6500,6 +6497,48 @@ const ConfirmPopOver = ({
   }, children));
 };
 
+const ImageInput = ({
+  label,
+  control,
+  name,
+  text,
+  error,
+  baseUrl,
+  setError,
+  clearError,
+  onImageRemove,
+  imageMaxSize,
+  onImageUpload
+}) => {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "kms_input-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "kms_input-label"
+  }, label), /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
+    control: control,
+    name: name,
+    render: ({
+      field
+    }) => /*#__PURE__*/React__default["default"].createElement(ImageUpload$1, {
+      imgId: field.value,
+      clearError: () => clearError(name),
+      maxSize: imageMaxSize,
+      onError: msg => setError(name, {
+        type: 'custom',
+        message: msg
+      }),
+      error: error,
+      setImgId: value => {
+        field.onChange(value);
+      },
+      baseUrl: baseUrl,
+      text: text,
+      onImageUpload: onImageUpload,
+      onImageRemove: onImageRemove,
+      className: "khb_img-upload-wrapper-3"
+    })
+  }));
+};
 const ItemsAccordian = ({
   show,
   title,
@@ -6577,7 +6616,7 @@ const ItemsAccordian = ({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_item-items"
   }, items === null || items === void 0 ? void 0 : items.map((field, index) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     return /*#__PURE__*/React__default["default"].createElement(Accordian, {
       key: index,
       open: itemsShow[index],
@@ -6588,8 +6627,8 @@ const ItemsAccordian = ({
       footerContent: /*#__PURE__*/React__default["default"].createElement(ConfirmPopOver, {
         onConfirm: () => removeItem(index),
         title: t('item.deleteTitle'),
-        confirmText: t('yesButtonText'),
-        cancelText: t('cancelButtonText')
+        confirmText: t('yesButtonText') || t('common:yesButtonText'),
+        cancelText: t('cancelButtonText') || t('common:cancelButtonText')
       }, /*#__PURE__*/React__default["default"].createElement(Button, {
         type: "danger",
         size: "sm",
@@ -6598,16 +6637,16 @@ const ItemsAccordian = ({
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "khb-form-items"
     }, Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, languages.map(lang => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       return /*#__PURE__*/React__default["default"].createElement(Input, {
         rest: register(`${name}.${index}.titles.${lang.code}`, {
           required: t('item.titleRequired')
         }),
         label: t('item.title') + ` (${lang.name})`,
-        error: (_e = (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['titles']) === null || _c === void 0 ? void 0 : _c[lang.code]) === null || _d === void 0 ? void 0 : _d.message) === null || _e === void 0 ? void 0 : _e.toString(),
+        error: ((_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['titles']) === null || _c === void 0 ? void 0 : _c[lang.code]) ? ((_h = (_g = (_f = (_e = (_d = errors[name]) === null || _d === void 0 ? void 0 : _d[index]) === null || _e === void 0 ? void 0 : _e['titles']) === null || _f === void 0 ? void 0 : _f[lang.code]) === null || _g === void 0 ? void 0 : _g.message) === null || _h === void 0 ? void 0 : _h.toString()) + ` (${lang.name})` : '',
         type: "text",
         className: "w-full p-2",
-        placeholder: t('item.titlePlaceholder'),
+        placeholder: t('item.titlePlaceholder') + ` (${lang.name})`,
         required: true
       });
     })) : /*#__PURE__*/React__default["default"].createElement(Input, {
@@ -6625,14 +6664,20 @@ const ItemsAccordian = ({
       label: t('item.subtitle') + ` (${lang.name})`,
       type: "text",
       className: "w-full p-2",
-      placeholder: t('item.subTitlePlaceholder')
+      placeholder: t('item.subTitlePlaceholder') + ` (${lang.name})`
     }))) : /*#__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, {
+    }), Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, languages.map(lang => /*#__PURE__*/React__default["default"].createElement(Input, {
+      rest: register(`${name}.${index}.altTexts.${lang.code}`),
+      label: t('item.altText') + ` (${lang.name})`,
+      type: 'text',
+      className: "w-full p-2",
+      placeholder: t('item.altTextPlaceholder') + ` (${lang.name})`
+    }))) : /*#__PURE__*/React__default["default"].createElement(Input, {
       rest: register(`${name}.${index}.altText`),
       label: t('item.altText'),
       type: 'text',
@@ -6651,45 +6696,51 @@ const ItemsAccordian = ({
       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, {
+    }), Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, languages.map(lang => {
+      var _a, _b, _c, _d, _e;
+      return /*#__PURE__*/React__default["default"].createElement(ImageInput, {
+        key: lang.code,
+        label: t('item.image') + ` (${lang.name})`,
+        control: control,
+        name: `${name}.${index}.imgs.${lang.code}`,
+        error: (_e = (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['imgs']) === null || _c === void 0 ? void 0 : _c[lang.code]) === null || _d === void 0 ? void 0 : _d.message) === null || _e === void 0 ? void 0 : _e.toString(),
+        baseUrl: imageBaseUrl ? imageBaseUrl : baseUrl,
+        setError: setError,
+        clearError: clearError,
+        onImageRemove: onImageRemove,
+        imageMaxSize: imageMaxSize,
+        onImageUpload: onImageUpload,
+        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')))
+      });
+    })) : /*#__PURE__*/React__default["default"].createElement(ImageInput, {
+      label: t('item.image'),
       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: imageMaxSize,
-          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"
-        });
-      }
-    }))));
+      error: (_k = (_j = (_h = (_g = errors[name]) === null || _g === void 0 ? void 0 : _g[index]) === null || _h === void 0 ? void 0 : _h['img']) === null || _j === void 0 ? void 0 : _j.message) === null || _k === void 0 ? void 0 : _k.toString(),
+      baseUrl: imageBaseUrl ? imageBaseUrl : baseUrl,
+      setError: setError,
+      clearError: clearError,
+      onImageRemove: onImageRemove,
+      imageMaxSize: imageMaxSize,
+      onImageUpload: onImageUpload,
+      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')))
+    })));
   })));
 };
 
@@ -7106,6 +7157,15 @@ const WidgetForm = ({
     let items = [...(getValues(constants.webItems) || []), ...(getValues(constants.mobileItems) || [])];
     items = items.map(_a => {
       var item = __rest(_a, ["_id", "__v", "widgetId"]);
+      if (typeof item['imgs'] === 'object' && item['imgs']) {
+        Object.keys(item['imgs']).forEach(key => {
+          if (item['imgs'][key] && item['imgs'][key]['_id']) {
+            item['imgs'][key] = item['imgs'][key]['_id'];
+          } else if (typeof item['imgs'][key] !== 'string' || !item['imgs'][key]) {
+            delete item['imgs'][key];
+          }
+        });
+      }
       if (item['img'] && item['img']['_id']) {
         item['img'] = item['img']['_id'];
       } else if (typeof item['img'] !== 'string' || !item['img']) {
@@ -7311,8 +7371,8 @@ const WidgetForm = ({
     control: control,
     languages: languages,
     deleteTitle: t('widget.tabDeleteTitle'),
-    yesButtonText: t('yesButtonText'),
-    noButtonText: t('cancelButtonText'),
+    yesButtonText: t('yesButtonText') || t('common:yesButtonText'),
+    noButtonText: t('cancelButtonText') || t('common:cancelButtonText'),
     errors: errors,
     itemsPlaceholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
     loadOptions: onChangeSearch,
@@ -7346,7 +7406,7 @@ const WidgetForm = ({
     register: register,
     loading: loading,
     addText: t('addButtonText'),
-    deleteText: t('deleteButtonText')
+    deleteText: t('deleteButtonText') || t('common:deleteButtonText')
   }), /*#__PURE__*/React__default["default"].createElement(ItemsAccordian, {
     languages: languages,
     clearError: clearErrors,
@@ -7363,7 +7423,7 @@ const WidgetForm = ({
     control: control,
     register: register,
     addText: t('addButtonText'),
-    deleteText: t('deleteButtonText')
+    deleteText: t('deleteButtonText') || t('common:deleteButtonText')
   })));
 };
 
@@ -7375,8 +7435,8 @@ const AddButton = () => {
   } = useWidgetState();
   return /*#__PURE__*/React__default["default"].createElement(Button, {
     disabled: !canAdd,
-    onClick: () => onChangeFormState("ADD")
-  }, t("addButtonText"));
+    onClick: () => onChangeFormState('ADD')
+  }, t('addButtonText') || t('common:addButtonText'));
 };
 
 const WidgetPagination = () => {
@@ -7389,11 +7449,11 @@ const WidgetPagination = () => {
     setCurrentPage
   } = useWidgetState();
   return /*#__PURE__*/React__default["default"].createElement(Pagination, {
-    ofText: t('of'),
-    pageText: t('page'),
-    showingText: t('showing'),
-    nextContent: t('nextContent'),
-    previousContent: t('previousContent'),
+    ofText: t('of') || t('common:of'),
+    pageText: t('confirm') || t('common:confirm'),
+    showingText: t('showing') || t('common:showing'),
+    nextContent: t('nextContent') || t('common:nextContent'),
+    previousContent: t('previousContent') || t('common:previousContent'),
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -7459,10 +7519,10 @@ const WidgetFormActions = ({
   if (!canAdd && !canUpdate) return null;
   return /*#__PURE__*/React__default["default"].createElement(FormActions, {
     loading: loading,
-    primaryLabel: formState === 'ADD' ? t('createButtonText') : t('updateButtonText'),
+    primaryLabel: formState === 'ADD' ? t('createButtonText') || t('common:createButtonText') : t('updateButtonText') || t('common:updateButtonText'),
     onPrimaryButtonClick: onSubmitClick,
     onSecondaryButtonClick: closeForm,
-    secondaryLabel: t('cancelButtonText')
+    secondaryLabel: t('cancelButtonText') || t('common:cancelButtonText')
   });
 };
 
@@ -7586,13 +7646,13 @@ const Widget = ({
     itemData: itemData,
     onClose: onCloseForm,
     onConfirmDelete: onCofirmDeleteWidget,
-    confirmationRequired: derivedT('confirmationRequired'),
-    confirm: derivedT('confirm'),
-    lossOfData: derivedT('lossOfData'),
-    permanentlyDelete: derivedT('permanentlyDelete'),
-    pleaseType: derivedT('pleaseType'),
-    toProceedOrCancel: derivedT('toProceedOrCancel'),
-    typeHerePlaceholder: derivedT('typeHerePlaceholder')
+    confirmationRequired: derivedT('confirmationRequired') || derivedT('common:confirmationRequired'),
+    confirm: derivedT('confirm') || derivedT('common:confirm'),
+    lossOfData: derivedT('lossOfData') || derivedT('common:lossOfData'),
+    permanentlyDelete: derivedT('permanentlyDelete') || derivedT('common:permanentlyDelete'),
+    pleaseType: derivedT('pleaseType') || derivedT('common:pleaseType'),
+    toProceedOrCancel: derivedT('toProceedOrCancel') || derivedT('common:toProceedOrCancel'),
+    typeHerePlaceholder: derivedT('typeHerePlaceholder') || derivedT('common:typeHerePlaceholder')
   }));
 };
 Widget.Table = WidgetTable;

package/index.js

@@ -1693,14 +1693,12 @@ const TRANSLATION_PAIRS_COMMON = {
   pleaseType: 'Please type',
   toProceedOrCancel: 'to processed or close this modal to cancel.',
   confirm: 'Confirm',
-  'common:actions': 'Actions',
-  'common:cancel': 'Cancel',
+  nextContent: 'Next',
+  previousContent: 'Previous',
   page: 'Page',
   next: 'Next',
-  previous: 'Previous',
   indicatesRequired: 'Indicates fields are required',
   addButtonText: 'Add',
-  editButtonText: 'Edit',
   cancelButtonText: 'Cancel',
   yesButtonText: 'Yes',
   deleteButtonText: 'Delete',
@@ -4095,8 +4093,8 @@ const AddButton$1 = () => {
   } = usePageState();
   return /*#__PURE__*/React.createElement(Button, {
     disabled: !canAdd,
-    onClick: () => onChangeFormState("ADD")
-  }, t("addButtonText"));
+    onClick: () => onChangeFormState('ADD')
+  }, t('addButtonText') || t('common:addButtonText'));
 };
 
 const ChevronLeft = ({
@@ -4208,11 +4206,11 @@ const PagePagination = () => {
     setCurrentPage
   } = usePageState();
   return /*#__PURE__*/React.createElement(Pagination, {
-    ofText: t('of'),
-    pageText: t('page'),
-    showingText: t('showing'),
-    nextContent: t('nextContent'),
-    previousContent: t('previousContent'),
+    ofText: t('of') || t('common:of'),
+    pageText: t('confirm') || t('common:confirm'),
+    showingText: t('showing') || t('common:showing'),
+    nextContent: t('nextContent') || t('common:nextContent'),
+    previousContent: t('previousContent') || t('common:previousContent'),
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -4424,10 +4422,10 @@ const PageFormActions = ({
   if (!canAdd && !canUpdate) return null;
   return /*#__PURE__*/React.createElement(FormActions, {
     loading: loading,
-    primaryLabel: formState === 'ADD' ? t('createButtonText') : t('updateButtonText'),
+    primaryLabel: formState === 'ADD' ? t('createButtonText') || t('common:createButtonText') : t('updateButtonText') || t('common:updateButtonText'),
     onPrimaryButtonClick: onSubmitClick,
     onSecondaryButtonClick: closeForm,
-    secondaryLabel: t('cancelButtonText')
+    secondaryLabel: t('cancelButtonText') || t('common:cancelButtonText')
   });
 };
 
@@ -4529,13 +4527,13 @@ const Page = ({
     itemData: itemData,
     onClose: onCloseForm,
     onConfirmDelete: onCofirmDeletePage,
-    confirmationRequired: derivedT('confirmationRequired'),
-    confirm: derivedT('confirm'),
-    lossOfData: derivedT('lossOfData'),
-    permanentlyDelete: derivedT('permanentlyDelete'),
-    pleaseType: derivedT('pleaseType'),
-    toProceedOrCancel: derivedT('toProceedOrCancel'),
-    typeHerePlaceholder: derivedT('typeHerePlaceholder')
+    confirmationRequired: derivedT('confirmationRequired') || derivedT('common:confirmationRequired'),
+    confirm: derivedT('confirm') || derivedT('common:confirm'),
+    lossOfData: derivedT('lossOfData') || derivedT('common:lossOfData'),
+    permanentlyDelete: derivedT('permanentlyDelete') || derivedT('common:permanentlyDelete'),
+    pleaseType: derivedT('pleaseType') || derivedT('common:pleaseType'),
+    toProceedOrCancel: derivedT('toProceedOrCancel') || derivedT('common:toProceedOrCancel'),
+    typeHerePlaceholder: derivedT('typeHerePlaceholder') || derivedT('common:typeHerePlaceholder')
   }));
 };
 Page.Table = PageTable;
@@ -4570,8 +4568,7 @@ const useWidget = ({
     onError,
     onSuccess,
     onLogout,
-    widgetRoutesPrefix,
-    pageRoutesPrefix
+    widgetRoutesPrefix
   } = useProviderState();
   const {
     changeSearch,
@@ -4633,7 +4630,7 @@ const useWidget = ({
     const api = getApiType({
       routes,
       action: 'LANGUAGES',
-      prefix: pageRoutesPrefix
+      prefix: widgetRoutesPrefix
     });
     const response = yield commonApi({
       baseUrl,
@@ -4646,7 +4643,7 @@ const useWidget = ({
       setLanguages(response.data);
       return response.data;
     }
-  }), [baseUrl, handleError, pageRoutesPrefix, routes, token]);
+  }), [baseUrl, handleError, widgetRoutesPrefix, routes, token]);
   const onCofirmDeleteWidget = () => __awaiter(void 0, void 0, void 0, function* () {
     try {
       let proceed = true;
@@ -6488,6 +6485,48 @@ const ConfirmPopOver = ({
   }, children));
 };
 
+const ImageInput = ({
+  label,
+  control,
+  name,
+  text,
+  error,
+  baseUrl,
+  setError,
+  clearError,
+  onImageRemove,
+  imageMaxSize,
+  onImageUpload
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kms_input-wrapper"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "kms_input-label"
+  }, label), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: name,
+    render: ({
+      field
+    }) => /*#__PURE__*/React.createElement(ImageUpload$1, {
+      imgId: field.value,
+      clearError: () => clearError(name),
+      maxSize: imageMaxSize,
+      onError: msg => setError(name, {
+        type: 'custom',
+        message: msg
+      }),
+      error: error,
+      setImgId: value => {
+        field.onChange(value);
+      },
+      baseUrl: baseUrl,
+      text: text,
+      onImageUpload: onImageUpload,
+      onImageRemove: onImageRemove,
+      className: "khb_img-upload-wrapper-3"
+    })
+  }));
+};
 const ItemsAccordian = ({
   show,
   title,
@@ -6565,7 +6604,7 @@ const ItemsAccordian = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: "khb_item-items"
   }, items === null || items === void 0 ? void 0 : items.map((field, index) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     return /*#__PURE__*/React.createElement(Accordian, {
       key: index,
       open: itemsShow[index],
@@ -6576,8 +6615,8 @@ const ItemsAccordian = ({
       footerContent: /*#__PURE__*/React.createElement(ConfirmPopOver, {
         onConfirm: () => removeItem(index),
         title: t('item.deleteTitle'),
-        confirmText: t('yesButtonText'),
-        cancelText: t('cancelButtonText')
+        confirmText: t('yesButtonText') || t('common:yesButtonText'),
+        cancelText: t('cancelButtonText') || t('common:cancelButtonText')
       }, /*#__PURE__*/React.createElement(Button, {
         type: "danger",
         size: "sm",
@@ -6586,16 +6625,16 @@ const ItemsAccordian = ({
     }, /*#__PURE__*/React.createElement("div", {
       className: "khb-form-items"
     }, Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, languages.map(lang => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       return /*#__PURE__*/React.createElement(Input, {
         rest: register(`${name}.${index}.titles.${lang.code}`, {
           required: t('item.titleRequired')
         }),
         label: t('item.title') + ` (${lang.name})`,
-        error: (_e = (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['titles']) === null || _c === void 0 ? void 0 : _c[lang.code]) === null || _d === void 0 ? void 0 : _d.message) === null || _e === void 0 ? void 0 : _e.toString(),
+        error: ((_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['titles']) === null || _c === void 0 ? void 0 : _c[lang.code]) ? ((_h = (_g = (_f = (_e = (_d = errors[name]) === null || _d === void 0 ? void 0 : _d[index]) === null || _e === void 0 ? void 0 : _e['titles']) === null || _f === void 0 ? void 0 : _f[lang.code]) === null || _g === void 0 ? void 0 : _g.message) === null || _h === void 0 ? void 0 : _h.toString()) + ` (${lang.name})` : '',
         type: "text",
         className: "w-full p-2",
-        placeholder: t('item.titlePlaceholder'),
+        placeholder: t('item.titlePlaceholder') + ` (${lang.name})`,
         required: true
       });
     })) : /*#__PURE__*/React.createElement(Input, {
@@ -6613,14 +6652,20 @@ const ItemsAccordian = ({
       label: t('item.subtitle') + ` (${lang.name})`,
       type: "text",
       className: "w-full p-2",
-      placeholder: t('item.subTitlePlaceholder')
+      placeholder: t('item.subTitlePlaceholder') + ` (${lang.name})`
     }))) : /*#__PURE__*/React.createElement(Input, {
       rest: register(`${name}.${index}.subtitle`),
       label: t('item.subtitle'),
       type: "text",
       className: "w-full p-2",
       placeholder: t('item.subTitlePlaceholder')
-    }), /*#__PURE__*/React.createElement(Input, {
+    }), Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, languages.map(lang => /*#__PURE__*/React.createElement(Input, {
+      rest: register(`${name}.${index}.altTexts.${lang.code}`),
+      label: t('item.altText') + ` (${lang.name})`,
+      type: 'text',
+      className: "w-full p-2",
+      placeholder: t('item.altTextPlaceholder') + ` (${lang.name})`
+    }))) : /*#__PURE__*/React.createElement(Input, {
       rest: register(`${name}.${index}.altText`),
       label: t('item.altText'),
       type: 'text',
@@ -6639,45 +6684,51 @@ const ItemsAccordian = ({
       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.createElement("div", {
-      className: "kms_input-wrapper"
-    }, /*#__PURE__*/React.createElement("label", {
-      className: "kms_input-label"
-    }, t('item.image')), /*#__PURE__*/React.createElement(Controller, {
+    }), Array.isArray(languages) && languages.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, languages.map(lang => {
+      var _a, _b, _c, _d, _e;
+      return /*#__PURE__*/React.createElement(ImageInput, {
+        key: lang.code,
+        label: t('item.image') + ` (${lang.name})`,
+        control: control,
+        name: `${name}.${index}.imgs.${lang.code}`,
+        error: (_e = (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['imgs']) === null || _c === void 0 ? void 0 : _c[lang.code]) === null || _d === void 0 ? void 0 : _d.message) === null || _e === void 0 ? void 0 : _e.toString(),
+        baseUrl: imageBaseUrl ? imageBaseUrl : baseUrl,
+        setError: setError,
+        clearError: clearError,
+        onImageRemove: onImageRemove,
+        imageMaxSize: imageMaxSize,
+        onImageUpload: onImageUpload,
+        text: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+          className: "khb_img-text-wrapper"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "khb_img-text-label"
+        }, /*#__PURE__*/React.createElement("span", null, t('item.uploadFile'))), /*#__PURE__*/React.createElement("p", {
+          className: "khb_img-text-1"
+        }, t('item.dragDrop'))), /*#__PURE__*/React.createElement("p", {
+          className: "khb_img-text-2"
+        }, t('item.allowedFormat')))
+      });
+    })) : /*#__PURE__*/React.createElement(ImageInput, {
+      label: t('item.image'),
       control: control,
       name: `${name}.${index}.img`,
-      render: ({
-        field
-      }) => {
-        var _a, _b, _c, _d;
-        return /*#__PURE__*/React.createElement(ImageUpload$1, {
-          imgId: field.value,
-          clearError: () => clearError(`${name}.${index}.img`),
-          maxSize: imageMaxSize,
-          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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-            className: "khb_img-text-wrapper"
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "khb_img-text-label"
-          }, /*#__PURE__*/React.createElement("span", null, t('item.uploadFile'))), /*#__PURE__*/React.createElement("p", {
-            className: "khb_img-text-1"
-          }, t('item.dragDrop'))), /*#__PURE__*/React.createElement("p", {
-            className: "khb_img-text-2"
-          }, t('item.allowedFormat'))),
-          onImageUpload: onImageUpload,
-          onImageRemove: onImageRemove,
-          className: "khb_img-upload-wrapper-3"
-        });
-      }
-    }))));
+      error: (_k = (_j = (_h = (_g = errors[name]) === null || _g === void 0 ? void 0 : _g[index]) === null || _h === void 0 ? void 0 : _h['img']) === null || _j === void 0 ? void 0 : _j.message) === null || _k === void 0 ? void 0 : _k.toString(),
+      baseUrl: imageBaseUrl ? imageBaseUrl : baseUrl,
+      setError: setError,
+      clearError: clearError,
+      onImageRemove: onImageRemove,
+      imageMaxSize: imageMaxSize,
+      onImageUpload: onImageUpload,
+      text: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "khb_img-text-wrapper"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "khb_img-text-label"
+      }, /*#__PURE__*/React.createElement("span", null, t('item.uploadFile'))), /*#__PURE__*/React.createElement("p", {
+        className: "khb_img-text-1"
+      }, t('item.dragDrop'))), /*#__PURE__*/React.createElement("p", {
+        className: "khb_img-text-2"
+      }, t('item.allowedFormat')))
+    })));
   })));
 };
 
@@ -7094,6 +7145,15 @@ const WidgetForm = ({
     let items = [...(getValues(constants.webItems) || []), ...(getValues(constants.mobileItems) || [])];
     items = items.map(_a => {
       var item = __rest(_a, ["_id", "__v", "widgetId"]);
+      if (typeof item['imgs'] === 'object' && item['imgs']) {
+        Object.keys(item['imgs']).forEach(key => {
+          if (item['imgs'][key] && item['imgs'][key]['_id']) {
+            item['imgs'][key] = item['imgs'][key]['_id'];
+          } else if (typeof item['imgs'][key] !== 'string' || !item['imgs'][key]) {
+            delete item['imgs'][key];
+          }
+        });
+      }
       if (item['img'] && item['img']['_id']) {
         item['img'] = item['img']['_id'];
       } else if (typeof item['img'] !== 'string' || !item['img']) {
@@ -7299,8 +7359,8 @@ const WidgetForm = ({
     control: control,
     languages: languages,
     deleteTitle: t('widget.tabDeleteTitle'),
-    yesButtonText: t('yesButtonText'),
-    noButtonText: t('cancelButtonText'),
+    yesButtonText: t('yesButtonText') || t('common:yesButtonText'),
+    noButtonText: t('cancelButtonText') || t('common:cancelButtonText'),
     errors: errors,
     itemsPlaceholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
     loadOptions: onChangeSearch,
@@ -7334,7 +7394,7 @@ const WidgetForm = ({
     register: register,
     loading: loading,
     addText: t('addButtonText'),
-    deleteText: t('deleteButtonText')
+    deleteText: t('deleteButtonText') || t('common:deleteButtonText')
   }), /*#__PURE__*/React.createElement(ItemsAccordian, {
     languages: languages,
     clearError: clearErrors,
@@ -7351,7 +7411,7 @@ const WidgetForm = ({
     control: control,
     register: register,
     addText: t('addButtonText'),
-    deleteText: t('deleteButtonText')
+    deleteText: t('deleteButtonText') || t('common:deleteButtonText')
   })));
 };
 
@@ -7363,8 +7423,8 @@ const AddButton = () => {
   } = useWidgetState();
   return /*#__PURE__*/React.createElement(Button, {
     disabled: !canAdd,
-    onClick: () => onChangeFormState("ADD")
-  }, t("addButtonText"));
+    onClick: () => onChangeFormState('ADD')
+  }, t('addButtonText') || t('common:addButtonText'));
 };
 
 const WidgetPagination = () => {
@@ -7377,11 +7437,11 @@ const WidgetPagination = () => {
     setCurrentPage
   } = useWidgetState();
   return /*#__PURE__*/React.createElement(Pagination, {
-    ofText: t('of'),
-    pageText: t('page'),
-    showingText: t('showing'),
-    nextContent: t('nextContent'),
-    previousContent: t('previousContent'),
+    ofText: t('of') || t('common:of'),
+    pageText: t('confirm') || t('common:confirm'),
+    showingText: t('showing') || t('common:showing'),
+    nextContent: t('nextContent') || t('common:nextContent'),
+    previousContent: t('previousContent') || t('common:previousContent'),
     totalPages: totalPages,
     totalRecords: totalRecords,
     currentPage: currentPage,
@@ -7447,10 +7507,10 @@ const WidgetFormActions = ({
   if (!canAdd && !canUpdate) return null;
   return /*#__PURE__*/React.createElement(FormActions, {
     loading: loading,
-    primaryLabel: formState === 'ADD' ? t('createButtonText') : t('updateButtonText'),
+    primaryLabel: formState === 'ADD' ? t('createButtonText') || t('common:createButtonText') : t('updateButtonText') || t('common:updateButtonText'),
     onPrimaryButtonClick: onSubmitClick,
     onSecondaryButtonClick: closeForm,
-    secondaryLabel: t('cancelButtonText')
+    secondaryLabel: t('cancelButtonText') || t('common:cancelButtonText')
   });
 };
 
@@ -7574,13 +7634,13 @@ const Widget = ({
     itemData: itemData,
     onClose: onCloseForm,
     onConfirmDelete: onCofirmDeleteWidget,
-    confirmationRequired: derivedT('confirmationRequired'),
-    confirm: derivedT('confirm'),
-    lossOfData: derivedT('lossOfData'),
-    permanentlyDelete: derivedT('permanentlyDelete'),
-    pleaseType: derivedT('pleaseType'),
-    toProceedOrCancel: derivedT('toProceedOrCancel'),
-    typeHerePlaceholder: derivedT('typeHerePlaceholder')
+    confirmationRequired: derivedT('confirmationRequired') || derivedT('common:confirmationRequired'),
+    confirm: derivedT('confirm') || derivedT('common:confirm'),
+    lossOfData: derivedT('lossOfData') || derivedT('common:lossOfData'),
+    permanentlyDelete: derivedT('permanentlyDelete') || derivedT('common:permanentlyDelete'),
+    pleaseType: derivedT('pleaseType') || derivedT('common:pleaseType'),
+    toProceedOrCancel: derivedT('toProceedOrCancel') || derivedT('common:toProceedOrCancel'),
+    typeHerePlaceholder: derivedT('typeHerePlaceholder') || derivedT('common:typeHerePlaceholder')
   }));
 };
 Widget.Table = WidgetTable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator-admin",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",

package/src/lib/constants/common.d.ts

@@ -34,14 +34,12 @@ declare const TRANSLATION_PAIRS_COMMON: {
     pleaseType: string;
     toProceedOrCancel: string;
     confirm: string;
-    'common:actions': string;
-    'common:cancel': string;
+    nextContent: string;
+    previousContent: string;
     page: string;
     next: string;
-    previous: string;
     indicatesRequired: string;
     addButtonText: string;
-    editButtonText: string;
     cancelButtonText: string;
     yesButtonText: string;
     deleteButtonText: string;