@knovator/pagecreator-admin 0.8.5 → 0.9.0

package/index.cjs

@@ -2693,6 +2693,12 @@ const apiList = {
     url: `${prefix}/collection-data`,
     method: 'POST'
   }),
+  LANGUAGES: ({
+    prefix
+  }) => ({
+    url: `${prefix}/languages`,
+    method: 'GET'
+  }),
   // Image Upload API
   IMAGE_UPLOAD: ({
     prefix
@@ -3709,7 +3715,8 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
   handleSubmit,
   setValue,
   control,
-  setError
+  setError,
+  languages
 }, ref) => {
   const inputRenderer = schema => {
     var _a, _b, _c, _d, _e, _f;
@@ -3781,7 +3788,23 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
         case 'url':
         case 'color':
         default:
-          input = /*#__PURE__*/React__default["default"].createElement(Input, {
+          if (Array.isArray(languages) && languages.length > 0 && schema.accessor === 'widgetTitles') {
+            input = languages.map(lang => {
+              var _a, _b;
+              return /*#__PURE__*/React__default["default"].createElement(Input, {
+                key: lang.code,
+                rest: register(`${schema.accessor}.${lang.code}`, schema.validations || {}),
+                label: schema.label + ' (' + lang.name + ')',
+                onInput: schema.onInput,
+                error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a[lang.code]) === null || _b === void 0 ? void 0 : _b.message,
+                required: schema.required,
+                type: schema.type,
+                className: "kms_w-full kms_p-2",
+                placeholder: (schema.placeholder || '') + ' (' + lang.name + ')',
+                disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable
+              });
+            });
+          } else input = /*#__PURE__*/React__default["default"].createElement(Input, {
             rest: register(schema.accessor, schema.validations || {}),
             label: schema.label,
             error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
@@ -4516,6 +4539,7 @@ const useWidget = ({
   const [loading, setLoading] = React.useState(false);
   const [totalPages, setTotalPages] = React.useState(0);
   const [totalRecords, setTotalRecords] = React.useState(0);
+  const [languages, setLanguages] = React.useState([]);
   const [itemData, setItemData] = React.useState(null);
   const [formState, setFormState] = React.useState();
   const [itemsTypes, setItemsTypes] = React.useState([]);
@@ -4528,7 +4552,8 @@ const useWidget = ({
     onError,
     onSuccess,
     onLogout,
-    widgetRoutesPrefix
+    widgetRoutesPrefix,
+    pageRoutesPrefix
   } = useProviderState();
   const {
     changeSearch,
@@ -4586,6 +4611,24 @@ const useWidget = ({
       setLoading(false);
     }
   }), [baseUrl, currentPageRef, limitRef, offsetRef, handleError, routes, token, widgetRoutesPrefix]);
+  const getLanguagesList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const api = getApiType({
+      routes,
+      action: 'LANGUAGES',
+      prefix: pageRoutesPrefix
+    });
+    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') {
+      setLanguages(response.data);
+      return response.data;
+    }
+  }), [baseUrl, handleError, pageRoutesPrefix, routes, token]);
   const onCofirmDeleteWidget = () => __awaiter(void 0, void 0, void 0, function* () {
     try {
       let proceed = true;
@@ -4878,10 +4921,14 @@ const useWidget = ({
     if (_canList) getWidgets();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_canList]);
+  React.useEffect(() => {
+    getLanguagesList();
+  }, [getLanguagesList]);
   return {
     list,
     getWidgets,
     loading,
+    languages,
     setLoading,
     // Pagination
     searchText: searchRef.current,
@@ -5986,6 +6033,7 @@ const WidgetContextProvider = ({
   t: _t = () => '',
   // Form
   list: _list = [],
+  languages: _languages = [],
   imageBaseUrl: _imageBaseUrl = '',
   searchText: _searchText = '',
   changeSearch: _changeSearch = () => {},
@@ -6034,6 +6082,7 @@ const WidgetContextProvider = ({
       t: _t,
       // Form
       list: _list,
+      languages: _languages,
       imageBaseUrl: _imageBaseUrl,
       closeForm: _closeForm,
       formState: _formState,
@@ -6434,6 +6483,7 @@ const ItemsAccordian = ({
   register,
   setError,
   itemType,
+  languages,
   clearError,
   addText: _addText = 'Add',
   deleteText: _deleteText = 'Delete'
@@ -6475,8 +6525,6 @@ const ItemsAccordian = ({
   }, [errors, name, errors === null || errors === void 0 ? void 0 : errors[name]]);
   const addTab = index => {
     appendItem({
-      title: '',
-      subtitle: '',
       altText: '',
       link: '',
       img: '',
@@ -6519,20 +6567,39 @@ const ItemsAccordian = ({
       }, _deleteText))
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "khb-form-items"
-    }, /*#__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 => {
+      var _a, _b, _c, _d, _e;
+      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(),
+        type: "text",
+        className: "w-full p-2",
+        placeholder: t('item.titlePlaceholder'),
+        required: true
+      });
+    })) : /*#__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',
+      type: "text",
       className: "w-full p-2",
       placeholder: t('item.titlePlaceholder'),
       required: true
-    }), /*#__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}.subtitles.${lang.code}`),
+      label: t('item.subtitle') + ` (${lang.name})`,
+      type: "text",
+      className: "w-full p-2",
+      placeholder: t('item.subTitlePlaceholder')
+    }))) : /*#__PURE__*/React__default["default"].createElement(Input, {
       rest: register(`${name}.${index}.subtitle`),
       label: t('item.subtitle'),
-      type: 'text',
+      type: "text",
       className: "w-full p-2",
       placeholder: t('item.subTitlePlaceholder')
     }), /*#__PURE__*/React__default["default"].createElement(Input, {
@@ -6632,10 +6699,13 @@ const Tabs = ({
   setActiveTab,
   options,
   control,
-  register,
   listCode,
+  setValue,
+  getValues,
+  languages,
   formatItem,
   deleteTitle,
+  clearErrors,
   loadOptions,
   customStyles,
   noButtonText,
@@ -6644,9 +6714,10 @@ const Tabs = ({
   itemsPlaceholder,
   formatOptionLabel,
   tabCollectionItems,
-  tabNameRequiredText,
   onCollectionItemsIndexChange
 }) => {
+  var _a;
+  const [selectedLanguage, setSelectedLanguage] = React.useState((_a = languages === null || languages === void 0 ? void 0 : languages[0]) === null || _a === void 0 ? void 0 : _a.code);
   const {
     fields: tabFields,
     append: appendField,
@@ -6656,12 +6727,27 @@ const Tabs = ({
     control
   });
   const addTab = () => {
-    appendField({
-      name: 'Tab Name',
+    appendField(Object.assign(Object.assign({}, selectedLanguage ? {
+      names: languages === null || languages === void 0 ? void 0 : languages.reduce((acc, lng) => {
+        acc[lng.code] = '';
+        return acc;
+      }, {})
+    } : {
+      name: ''
+    }), {
       collectionItems: []
-    });
+    }));
     setActiveTab(tabFields.length);
   };
+  const onTabnameChange = (index, value) => {
+    if (selectedLanguage) {
+      clearErrors(`tabs.${index}.names.${selectedLanguage}`);
+      setValue(`tabs.${index}.names.${selectedLanguage}`, value);
+    } else {
+      clearErrors(`tabs.${index}.name`);
+      setValue(`tabs.${index}.name`, value);
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "khb_tabs-container"
   }, /*#__PURE__*/React__default["default"].createElement(reactTabs.Tabs, {
@@ -6670,8 +6756,18 @@ const Tabs = ({
     className: "khb-tabs"
   }, /*#__PURE__*/React__default["default"].createElement(reactTabs.TabList, {
     className: "khb_tabs-list"
-  }, tabFields === null || tabFields === void 0 ? void 0 : tabFields.map((field, index) => {
-    var _a, _b, _c;
+  }, Array.isArray(languages) && languages.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "khb_input-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement("select", {
+    title: "Change Language",
+    value: selectedLanguage,
+    className: "khb_input khb_input-sm h-full",
+    onChange: e => setSelectedLanguage(e.target.value)
+  }, languages.map(lng => /*#__PURE__*/React__default["default"].createElement("option", {
+    value: lng.code,
+    key: lng.code
+  }, lng.name)))), tabFields === null || tabFields === void 0 ? void 0 : tabFields.map((field, index) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     return /*#__PURE__*/React__default["default"].createElement(reactTabs.Tab, {
       key: field.id,
       className: classNames__default["default"]('khb_tabs-item', {
@@ -6680,14 +6776,18 @@ const Tabs = ({
     }, /*#__PURE__*/React__default["default"].createElement(TabItem, {
       key: field.id,
       deleteTitle: deleteTitle,
-      register: register(`tabs.${index}.name`, {
-        required: tabNameRequiredText
-      }),
+      register: {
+        value: getValues(`tabs.${index}.names.${selectedLanguage}`),
+        onChange: e => onTabnameChange(index, e.target.value || '')
+      },
       onRemoveTab: () => {
         removeField(index);
         setActiveTab(index === 0 ? 0 : index - 1);
       },
-      error: (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.message,
+      error: selectedLanguage ? ((_b = (_a = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.names) ? Object.keys((_d = (_c = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _c === void 0 ? void 0 : _c[index]) === null || _d === void 0 ? void 0 : _d.names).map(key => {
+        var _a, _b, _c, _d;
+        return (_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.names) === null || _c === void 0 ? void 0 : _c[key]) === null || _d === void 0 ? void 0 : _d.message;
+      }).join(', ') : '' : (_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f.name) === null || _g === void 0 ? void 0 : _g.message,
       noButtonText: noButtonText,
       yesButtonText: yesButtonText,
       showDelete: (tabFields === null || tabFields === void 0 ? void 0 : tabFields.length) > 1
@@ -6780,6 +6880,7 @@ const WidgetForm = ({
     itemsTypes,
     widgetTypes,
     loading,
+    languages,
     onWidgetFormSubmit,
     getCollectionData,
     collectionData,
@@ -6914,6 +7015,32 @@ const WidgetForm = ({
       setTabCollectionItems(value[constants.tabsAccessor].map(tabItem => tabItem[constants.tabCollectionItemsAccessor]));
     }
   }, [getFirstItemTypeValue, itemsTypes, widgetTypes]);
+  const validateTabs = tabsData => {
+    const isLanguagesProvided = Array.isArray(languages) && languages.length > 0;
+    let isTabsValid = true;
+    if (Array.isArray(tabsData) && tabsData.length > 0) {
+      tabsData.forEach((tabItem, index) => {
+        if (isLanguagesProvided) {
+          languages.forEach(lang => {
+            if (!tabItem.names[lang.code]) {
+              setError(`tabs.${index}.names.${lang.code}`, {
+                type: 'manual',
+                message: `${t('widget.tabNameRequired')} (${lang.name})`
+              });
+              isTabsValid = false;
+            }
+          });
+        } else if (!tabItem.name) {
+          setError(`tabs.${index}.name`, {
+            type: 'manual',
+            message: t('widget.tabNameRequired')
+          });
+          isTabsValid = false;
+        }
+      });
+    }
+    return isTabsValid;
+  };
   const onFormSubmit = data => {
     var _a, _b;
     const formData = Object.assign({}, data);
@@ -6923,9 +7050,14 @@ const WidgetForm = ({
     }
     // setting tabs data if widgetType tab is selected
     const tabsData = getValues('tabs');
+    if (Array.isArray(tabsData) && tabsData.length > 0) {
+      const isTabsValid = validateTabs(tabsData);
+      if (!isTabsValid) return;
+    }
     if (Array.isArray(tabsData) && (formData[constants.widgetTypeAccessor] === constants.tabsWidgetTypeValue || formState === 'UPDATE')) {
       formData[constants.tabsAccessor] = tabsData.map(tabItem => ({
         name: tabItem.name,
+        names: tabItem.names,
         collectionItems: tabItem.collectionItems.map(item => typeof item == 'string' ? item : item.value)
       }));
     } else formData[constants.tabsAccessor] = [];
@@ -7012,7 +7144,19 @@ const WidgetForm = ({
       required: t('widget.codeRequired')
     },
     wrapperClassName: 'khb_grid-item-1of2 khb_padding-left-1 khb_align-top khb_margin-top-0'
-  }, {
+  }, Array.isArray(languages) && languages.length > 0 ? {
+    label: `${t('widget.widgetTitle')}`,
+    accessor: 'widgetTitles',
+    required: true,
+    type: customInputs && customInputs['widgetTitle'] ? undefined : 'text',
+    validations: {
+      required: t('widget.widgetTitleRequired')
+    },
+    info: t('widget.widgetTitleInfo'),
+    placeholder: t('widget.widgetTitlePlaceholder'),
+    onInput: handleCapitalize,
+    Input: customInputs && customInputs['widgetTitle'] ? customInputs['widgetTitle'] : undefined
+  } : {
     label: `${t('widget.widgetTitle')}`,
     accessor: 'widgetTitle',
     required: true,
@@ -7128,15 +7272,18 @@ const WidgetForm = ({
     handleSubmit: handleSubmit,
     setValue: setValue,
     control: control,
-    setError: setError
+    setError: setError,
+    languages: languages
   }), (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Tabs' ? /*#__PURE__*/React__default["default"].createElement(Tabs, {
+    clearErrors: clearErrors,
+    getValues: getValues,
+    setValue: setValue,
     control: control,
-    register: register,
+    languages: languages,
     deleteTitle: t('widget.tabDeleteTitle'),
     yesButtonText: t('yesButtonText'),
     noButtonText: t('cancelButtonText'),
     errors: errors,
-    tabNameRequiredText: t('widget.tabNameRequired'),
     itemsPlaceholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
     loadOptions: onChangeSearch,
     isItemsLoading: collectionDataLoading,
@@ -7154,6 +7301,7 @@ const WidgetForm = ({
     formatItem: formatListItem,
     listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
   }), itemsEnabled && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Tabs' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ItemsAccordian, {
+    languages: languages,
     clearError: clearErrors,
     collapseId: constants.webItems,
     title: t('widget.webItems'),
@@ -7170,6 +7318,7 @@ const WidgetForm = ({
     addText: t('addButtonText'),
     deleteText: t('deleteButtonText')
   }), /*#__PURE__*/React__default["default"].createElement(ItemsAccordian, {
+    languages: languages,
     clearError: clearErrors,
     collapseId: constants.mobileItems,
     title: t('widget.mobileItems'),
@@ -7344,6 +7493,7 @@ const Widget = ({
     totalRecords,
     currentPage,
     pageSize,
+    languages,
     setCurrentPage
   } = useWidget({
     canList: derivedPermissions.list,
@@ -7355,6 +7505,7 @@ const Widget = ({
   return /*#__PURE__*/React__default["default"].createElement(WidgetContextProvider, {
     loading: loading,
     list: list,
+    languages: languages,
     imageBaseUrl: imageBaseUrl,
     onChangeFormState: onChangeFormState,
     t: derivedT,

package/index.css

@@ -2038,6 +2038,7 @@ input:checked + .slider:before {
 .khb_tabs-item {
   display: flex;
   cursor: pointer;
+  flex-direction: column;
   align-self: center;
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;

package/index.js

@@ -2681,6 +2681,12 @@ const apiList = {
     url: `${prefix}/collection-data`,
     method: 'POST'
   }),
+  LANGUAGES: ({
+    prefix
+  }) => ({
+    url: `${prefix}/languages`,
+    method: 'GET'
+  }),
   // Image Upload API
   IMAGE_UPLOAD: ({
     prefix
@@ -3697,7 +3703,8 @@ const SimpleForm = /*#__PURE__*/forwardRef(({
   handleSubmit,
   setValue,
   control,
-  setError
+  setError,
+  languages
 }, ref) => {
   const inputRenderer = schema => {
     var _a, _b, _c, _d, _e, _f;
@@ -3769,7 +3776,23 @@ const SimpleForm = /*#__PURE__*/forwardRef(({
         case 'url':
         case 'color':
         default:
-          input = /*#__PURE__*/React.createElement(Input, {
+          if (Array.isArray(languages) && languages.length > 0 && schema.accessor === 'widgetTitles') {
+            input = languages.map(lang => {
+              var _a, _b;
+              return /*#__PURE__*/React.createElement(Input, {
+                key: lang.code,
+                rest: register(`${schema.accessor}.${lang.code}`, schema.validations || {}),
+                label: schema.label + ' (' + lang.name + ')',
+                onInput: schema.onInput,
+                error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a[lang.code]) === null || _b === void 0 ? void 0 : _b.message,
+                required: schema.required,
+                type: schema.type,
+                className: "kms_w-full kms_p-2",
+                placeholder: (schema.placeholder || '') + ' (' + lang.name + ')',
+                disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable
+              });
+            });
+          } else input = /*#__PURE__*/React.createElement(Input, {
             rest: register(schema.accessor, schema.validations || {}),
             label: schema.label,
             error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
@@ -4504,6 +4527,7 @@ const useWidget = ({
   const [loading, setLoading] = useState(false);
   const [totalPages, setTotalPages] = useState(0);
   const [totalRecords, setTotalRecords] = useState(0);
+  const [languages, setLanguages] = useState([]);
   const [itemData, setItemData] = useState(null);
   const [formState, setFormState] = useState();
   const [itemsTypes, setItemsTypes] = useState([]);
@@ -4516,7 +4540,8 @@ const useWidget = ({
     onError,
     onSuccess,
     onLogout,
-    widgetRoutesPrefix
+    widgetRoutesPrefix,
+    pageRoutesPrefix
   } = useProviderState();
   const {
     changeSearch,
@@ -4574,6 +4599,24 @@ const useWidget = ({
       setLoading(false);
     }
   }), [baseUrl, currentPageRef, limitRef, offsetRef, handleError, routes, token, widgetRoutesPrefix]);
+  const getLanguagesList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const api = getApiType({
+      routes,
+      action: 'LANGUAGES',
+      prefix: pageRoutesPrefix
+    });
+    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') {
+      setLanguages(response.data);
+      return response.data;
+    }
+  }), [baseUrl, handleError, pageRoutesPrefix, routes, token]);
   const onCofirmDeleteWidget = () => __awaiter(void 0, void 0, void 0, function* () {
     try {
       let proceed = true;
@@ -4866,10 +4909,14 @@ const useWidget = ({
     if (_canList) getWidgets();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_canList]);
+  useEffect(() => {
+    getLanguagesList();
+  }, [getLanguagesList]);
   return {
     list,
     getWidgets,
     loading,
+    languages,
     setLoading,
     // Pagination
     searchText: searchRef.current,
@@ -5974,6 +6021,7 @@ const WidgetContextProvider = ({
   t: _t = () => '',
   // Form
   list: _list = [],
+  languages: _languages = [],
   imageBaseUrl: _imageBaseUrl = '',
   searchText: _searchText = '',
   changeSearch: _changeSearch = () => {},
@@ -6022,6 +6070,7 @@ const WidgetContextProvider = ({
       t: _t,
       // Form
       list: _list,
+      languages: _languages,
       imageBaseUrl: _imageBaseUrl,
       closeForm: _closeForm,
       formState: _formState,
@@ -6422,6 +6471,7 @@ const ItemsAccordian = ({
   register,
   setError,
   itemType,
+  languages,
   clearError,
   addText: _addText = 'Add',
   deleteText: _deleteText = 'Delete'
@@ -6463,8 +6513,6 @@ const ItemsAccordian = ({
   }, [errors, name, errors === null || errors === void 0 ? void 0 : errors[name]]);
   const addTab = index => {
     appendItem({
-      title: '',
-      subtitle: '',
       altText: '',
       link: '',
       img: '',
@@ -6507,20 +6555,39 @@ const ItemsAccordian = ({
       }, _deleteText))
     }, /*#__PURE__*/React.createElement("div", {
       className: "khb-form-items"
-    }, /*#__PURE__*/React.createElement(Input, {
+    }, 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(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(),
+        type: "text",
+        className: "w-full p-2",
+        placeholder: t('item.titlePlaceholder'),
+        required: true
+      });
+    })) : /*#__PURE__*/React.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',
+      type: "text",
       className: "w-full p-2",
       placeholder: t('item.titlePlaceholder'),
       required: true
-    }), /*#__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}.subtitles.${lang.code}`),
+      label: t('item.subtitle') + ` (${lang.name})`,
+      type: "text",
+      className: "w-full p-2",
+      placeholder: t('item.subTitlePlaceholder')
+    }))) : /*#__PURE__*/React.createElement(Input, {
       rest: register(`${name}.${index}.subtitle`),
       label: t('item.subtitle'),
-      type: 'text',
+      type: "text",
       className: "w-full p-2",
       placeholder: t('item.subTitlePlaceholder')
     }), /*#__PURE__*/React.createElement(Input, {
@@ -6620,10 +6687,13 @@ const Tabs = ({
   setActiveTab,
   options,
   control,
-  register,
   listCode,
+  setValue,
+  getValues,
+  languages,
   formatItem,
   deleteTitle,
+  clearErrors,
   loadOptions,
   customStyles,
   noButtonText,
@@ -6632,9 +6702,10 @@ const Tabs = ({
   itemsPlaceholder,
   formatOptionLabel,
   tabCollectionItems,
-  tabNameRequiredText,
   onCollectionItemsIndexChange
 }) => {
+  var _a;
+  const [selectedLanguage, setSelectedLanguage] = useState((_a = languages === null || languages === void 0 ? void 0 : languages[0]) === null || _a === void 0 ? void 0 : _a.code);
   const {
     fields: tabFields,
     append: appendField,
@@ -6644,12 +6715,27 @@ const Tabs = ({
     control
   });
   const addTab = () => {
-    appendField({
-      name: 'Tab Name',
+    appendField(Object.assign(Object.assign({}, selectedLanguage ? {
+      names: languages === null || languages === void 0 ? void 0 : languages.reduce((acc, lng) => {
+        acc[lng.code] = '';
+        return acc;
+      }, {})
+    } : {
+      name: ''
+    }), {
       collectionItems: []
-    });
+    }));
     setActiveTab(tabFields.length);
   };
+  const onTabnameChange = (index, value) => {
+    if (selectedLanguage) {
+      clearErrors(`tabs.${index}.names.${selectedLanguage}`);
+      setValue(`tabs.${index}.names.${selectedLanguage}`, value);
+    } else {
+      clearErrors(`tabs.${index}.name`);
+      setValue(`tabs.${index}.name`, value);
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "khb_tabs-container"
   }, /*#__PURE__*/React.createElement(Tabs$1, {
@@ -6658,8 +6744,18 @@ const Tabs = ({
     className: "khb-tabs"
   }, /*#__PURE__*/React.createElement(TabList, {
     className: "khb_tabs-list"
-  }, tabFields === null || tabFields === void 0 ? void 0 : tabFields.map((field, index) => {
-    var _a, _b, _c;
+  }, Array.isArray(languages) && languages.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "khb_input-wrapper"
+  }, /*#__PURE__*/React.createElement("select", {
+    title: "Change Language",
+    value: selectedLanguage,
+    className: "khb_input khb_input-sm h-full",
+    onChange: e => setSelectedLanguage(e.target.value)
+  }, languages.map(lng => /*#__PURE__*/React.createElement("option", {
+    value: lng.code,
+    key: lng.code
+  }, lng.name)))), tabFields === null || tabFields === void 0 ? void 0 : tabFields.map((field, index) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     return /*#__PURE__*/React.createElement(Tab, {
       key: field.id,
       className: classNames('khb_tabs-item', {
@@ -6668,14 +6764,18 @@ const Tabs = ({
     }, /*#__PURE__*/React.createElement(TabItem, {
       key: field.id,
       deleteTitle: deleteTitle,
-      register: register(`tabs.${index}.name`, {
-        required: tabNameRequiredText
-      }),
+      register: {
+        value: getValues(`tabs.${index}.names.${selectedLanguage}`),
+        onChange: e => onTabnameChange(index, e.target.value || '')
+      },
       onRemoveTab: () => {
         removeField(index);
         setActiveTab(index === 0 ? 0 : index - 1);
       },
-      error: (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.message,
+      error: selectedLanguage ? ((_b = (_a = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.names) ? Object.keys((_d = (_c = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _c === void 0 ? void 0 : _c[index]) === null || _d === void 0 ? void 0 : _d.names).map(key => {
+        var _a, _b, _c, _d;
+        return (_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.names) === null || _c === void 0 ? void 0 : _c[key]) === null || _d === void 0 ? void 0 : _d.message;
+      }).join(', ') : '' : (_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors['tabs']) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f.name) === null || _g === void 0 ? void 0 : _g.message,
       noButtonText: noButtonText,
       yesButtonText: yesButtonText,
       showDelete: (tabFields === null || tabFields === void 0 ? void 0 : tabFields.length) > 1
@@ -6768,6 +6868,7 @@ const WidgetForm = ({
     itemsTypes,
     widgetTypes,
     loading,
+    languages,
     onWidgetFormSubmit,
     getCollectionData,
     collectionData,
@@ -6902,6 +7003,32 @@ const WidgetForm = ({
       setTabCollectionItems(value[constants.tabsAccessor].map(tabItem => tabItem[constants.tabCollectionItemsAccessor]));
     }
   }, [getFirstItemTypeValue, itemsTypes, widgetTypes]);
+  const validateTabs = tabsData => {
+    const isLanguagesProvided = Array.isArray(languages) && languages.length > 0;
+    let isTabsValid = true;
+    if (Array.isArray(tabsData) && tabsData.length > 0) {
+      tabsData.forEach((tabItem, index) => {
+        if (isLanguagesProvided) {
+          languages.forEach(lang => {
+            if (!tabItem.names[lang.code]) {
+              setError(`tabs.${index}.names.${lang.code}`, {
+                type: 'manual',
+                message: `${t('widget.tabNameRequired')} (${lang.name})`
+              });
+              isTabsValid = false;
+            }
+          });
+        } else if (!tabItem.name) {
+          setError(`tabs.${index}.name`, {
+            type: 'manual',
+            message: t('widget.tabNameRequired')
+          });
+          isTabsValid = false;
+        }
+      });
+    }
+    return isTabsValid;
+  };
   const onFormSubmit = data => {
     var _a, _b;
     const formData = Object.assign({}, data);
@@ -6911,9 +7038,14 @@ const WidgetForm = ({
     }
     // setting tabs data if widgetType tab is selected
     const tabsData = getValues('tabs');
+    if (Array.isArray(tabsData) && tabsData.length > 0) {
+      const isTabsValid = validateTabs(tabsData);
+      if (!isTabsValid) return;
+    }
     if (Array.isArray(tabsData) && (formData[constants.widgetTypeAccessor] === constants.tabsWidgetTypeValue || formState === 'UPDATE')) {
       formData[constants.tabsAccessor] = tabsData.map(tabItem => ({
         name: tabItem.name,
+        names: tabItem.names,
         collectionItems: tabItem.collectionItems.map(item => typeof item == 'string' ? item : item.value)
       }));
     } else formData[constants.tabsAccessor] = [];
@@ -7000,7 +7132,19 @@ const WidgetForm = ({
       required: t('widget.codeRequired')
     },
     wrapperClassName: 'khb_grid-item-1of2 khb_padding-left-1 khb_align-top khb_margin-top-0'
-  }, {
+  }, Array.isArray(languages) && languages.length > 0 ? {
+    label: `${t('widget.widgetTitle')}`,
+    accessor: 'widgetTitles',
+    required: true,
+    type: customInputs && customInputs['widgetTitle'] ? undefined : 'text',
+    validations: {
+      required: t('widget.widgetTitleRequired')
+    },
+    info: t('widget.widgetTitleInfo'),
+    placeholder: t('widget.widgetTitlePlaceholder'),
+    onInput: handleCapitalize,
+    Input: customInputs && customInputs['widgetTitle'] ? customInputs['widgetTitle'] : undefined
+  } : {
     label: `${t('widget.widgetTitle')}`,
     accessor: 'widgetTitle',
     required: true,
@@ -7116,15 +7260,18 @@ const WidgetForm = ({
     handleSubmit: handleSubmit,
     setValue: setValue,
     control: control,
-    setError: setError
+    setError: setError,
+    languages: languages
   }), (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) === 'Tabs' ? /*#__PURE__*/React.createElement(Tabs, {
+    clearErrors: clearErrors,
+    getValues: getValues,
+    setValue: setValue,
     control: control,
-    register: register,
+    languages: languages,
     deleteTitle: t('widget.tabDeleteTitle'),
     yesButtonText: t('yesButtonText'),
     noButtonText: t('cancelButtonText'),
     errors: errors,
-    tabNameRequiredText: t('widget.tabNameRequired'),
     itemsPlaceholder: `Select ${selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.label}...`,
     loadOptions: onChangeSearch,
     isItemsLoading: collectionDataLoading,
@@ -7142,6 +7289,7 @@ const WidgetForm = ({
     formatItem: formatListItem,
     listCode: selectedCollectionType === null || selectedCollectionType === void 0 ? void 0 : selectedCollectionType.value
   }), itemsEnabled && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== 'Tabs' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ItemsAccordian, {
+    languages: languages,
     clearError: clearErrors,
     collapseId: constants.webItems,
     title: t('widget.webItems'),
@@ -7158,6 +7306,7 @@ const WidgetForm = ({
     addText: t('addButtonText'),
     deleteText: t('deleteButtonText')
   }), /*#__PURE__*/React.createElement(ItemsAccordian, {
+    languages: languages,
     clearError: clearErrors,
     collapseId: constants.mobileItems,
     title: t('widget.mobileItems'),
@@ -7332,6 +7481,7 @@ const Widget = ({
     totalRecords,
     currentPage,
     pageSize,
+    languages,
     setCurrentPage
   } = useWidget({
     canList: derivedPermissions.list,
@@ -7343,6 +7493,7 @@ const Widget = ({
   return /*#__PURE__*/React.createElement(WidgetContextProvider, {
     loading: loading,
     list: list,
+    languages: languages,
     imageBaseUrl: imageBaseUrl,
     onChangeFormState: onChangeFormState,
     t: derivedT,

package/package.json

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

package/src/lib/api/list.d.ts

@@ -40,6 +40,10 @@ declare const apiList: {
         url: string;
         method: string;
     };
+    LANGUAGES: ({ prefix }: API_INPUT_TYPE) => {
+        url: string;
+        method: string;
+    };
     IMAGE_UPLOAD: ({ prefix }: API_INPUT_TYPE) => {
         url: string;
         method: string;

package/src/lib/components/Widget/Form/ItemsAccordian.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ItemsAccordianProps } from '../../../types';
-declare const ItemsAccordian: ({ show, title, id, collapseId, toggleShow, loading, name, errors, control, register, setError, itemType, clearError, addText, deleteText, }: ItemsAccordianProps) => JSX.Element;
+declare const ItemsAccordian: ({ show, title, id, collapseId, toggleShow, loading, name, errors, control, register, setError, itemType, languages, clearError, addText, deleteText, }: ItemsAccordianProps) => JSX.Element;
 export default ItemsAccordian;

package/src/lib/components/Widget/Form/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TabsProps } from '../../../../types';
-declare const Tabs: ({ errors, activeTab, setActiveTab, options, control, register, listCode, formatItem, deleteTitle, loadOptions, customStyles, noButtonText, yesButtonText, isItemsLoading, itemsPlaceholder, formatOptionLabel, tabCollectionItems, tabNameRequiredText, onCollectionItemsIndexChange, }: TabsProps) => JSX.Element;
+declare const Tabs: ({ errors, activeTab, setActiveTab, options, control, listCode, setValue, getValues, languages, formatItem, deleteTitle, clearErrors, loadOptions, customStyles, noButtonText, yesButtonText, isItemsLoading, itemsPlaceholder, formatOptionLabel, tabCollectionItems, onCollectionItemsIndexChange, }: TabsProps) => JSX.Element;
 export default Tabs;

package/src/lib/components/common/Form/SimpleForm.d.ts

@@ -1,10 +1,11 @@
 import React, { MutableRefObject } from 'react';
-import { CombineObjectType, SchemaType } from '../../../types';
+import { CombineObjectType, LanguageType, SchemaType } from '../../../types';
 interface SimpleFormProps {
     schema: SchemaType[];
     isUpdating?: boolean;
     onSubmit: (data: CombineObjectType) => void;
     enable?: boolean;
+    languages?: LanguageType[];
     ref: MutableRefObject<HTMLFormElement | null>;
     register: any;
     errors: any;
@@ -13,5 +14,5 @@ interface SimpleFormProps {
     control: any;
     setError: any;
 }
-declare const SimpleForm: React.ForwardRefExoticComponent<Pick<SimpleFormProps, "schema" | "onSubmit" | "isUpdating" | "enable" | "register" | "errors" | "handleSubmit" | "setValue" | "control" | "setError"> & React.RefAttributes<HTMLFormElement | null>>;
+declare const SimpleForm: React.ForwardRefExoticComponent<Pick<SimpleFormProps, "schema" | "onSubmit" | "isUpdating" | "enable" | "register" | "errors" | "handleSubmit" | "setValue" | "control" | "setError" | "languages"> & React.RefAttributes<HTMLFormElement | null>>;
 export default SimpleForm;

package/src/lib/context/WidgetContext.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import { WidgetContextType } from '../types';
 interface WidgetContextProviderProps extends React.PropsWithChildren, Partial<WidgetContextType> {
 }
-declare const WidgetContextProvider: ({ t, list, imageBaseUrl, searchText, changeSearch, formState, closeForm, loading, onChangeFormState, onWidgetFormSubmit, updateData, canAdd, canUpdate, onDeleteItem, getWidgets, onImageUpload, onImageRemove, itemsTypes, widgetTypes, getCollectionData, collectionDataLoading, collectionData, formatListItem, formatOptionLabel, currentPage, limits, pageSize, setCurrentPage, setPageSize, totalPages, totalRecords, canList, canPartialUpdate, columns, data, canDelete, loader, onPartialUpdateWidget, reactSelectStyles, imageMaxSize, children, }: WidgetContextProviderProps) => JSX.Element;
+declare const WidgetContextProvider: ({ t, list, languages, imageBaseUrl, searchText, changeSearch, formState, closeForm, loading, onChangeFormState, onWidgetFormSubmit, updateData, canAdd, canUpdate, onDeleteItem, getWidgets, onImageUpload, onImageRemove, itemsTypes, widgetTypes, getCollectionData, collectionDataLoading, collectionData, formatListItem, formatOptionLabel, currentPage, limits, pageSize, setCurrentPage, setPageSize, totalPages, totalRecords, canList, canPartialUpdate, columns, data, canDelete, loader, onPartialUpdateWidget, reactSelectStyles, imageMaxSize, children, }: WidgetContextProviderProps) => JSX.Element;
 export declare function useWidgetState(): WidgetContextType;
 export default WidgetContextProvider;

package/src/lib/hooks/useWidget.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Routes_Input, WidgetType, ItemsType } from '../types';
-import { FormActionTypes, ObjectType } from '../types/common';
+import { FormActionTypes, ObjectType, LanguageType } from '../types/common';
 interface UseWidgetProps {
     canList?: boolean;
     defaultLimit: number;
@@ -10,10 +10,11 @@ interface UseWidgetProps {
     }) => Promise<boolean>;
     imageBaseUrl?: string;
 }
-declare const useWidget: ({ canList, defaultLimit, routes, preConfirmDelete, imageBaseUrl }: UseWidgetProps) => {
+declare const useWidget: ({ canList, defaultLimit, routes, preConfirmDelete, imageBaseUrl, }: UseWidgetProps) => {
     list: ObjectType[];
     getWidgets: (search?: string) => Promise<void>;
     loading: boolean;
+    languages: LanguageType[];
     setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     searchText: string;
     pageSize: number;

package/src/lib/types/api.d.ts

@@ -1,4 +1,4 @@
-export type ACTION_TYPES = 'IMAGE_UPLOAD' | 'IMAGE_REMOVE' | 'CREATE' | 'LIST' | 'DELETE' | 'UPDATE' | 'ITEM' | 'PARTIAL_UPDATE' | 'WIDGET_TYPES' | 'SELECTION_TYPES' | 'COLLECTION_DATA' | 'GET_ONE';
+export type ACTION_TYPES = 'IMAGE_UPLOAD' | 'IMAGE_REMOVE' | 'CREATE' | 'LIST' | 'DELETE' | 'UPDATE' | 'ITEM' | 'PARTIAL_UPDATE' | 'WIDGET_TYPES' | 'SELECTION_TYPES' | 'COLLECTION_DATA' | 'GET_ONE' | 'LANGUAGES';
 export type API_TYPE = {
     url: string;
     method: string;

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

@@ -11,6 +11,10 @@ export interface PermissionsObj {
     partialUpdate: boolean;
     delete: boolean;
 }
+export type LanguageType = {
+    name: string;
+    code: string;
+};
 export type ObjectType = {
     [key: string]: string;
 };

package/src/lib/types/components.d.ts

@@ -1,8 +1,8 @@
 import React, { MutableRefObject } from 'react';
 import { DropResult } from 'react-beautiful-dnd';
-import { RegisterOptions } from 'react-hook-form';
+import { FieldValues, RegisterOptions, UseFormClearErrors, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
 import { Routes_Input } from './api';
-import { OptionType, FormActionTypes, PermissionsObj, ObjectType } from './common';
+import { OptionType, FormActionTypes, PermissionsObj, ObjectType, LanguageType } from './common';
 export interface DNDItemsListProps {
     onDragEnd: (result: DropResult) => void;
     items: OptionType[];
@@ -227,6 +227,7 @@ export interface ItemsAccordianProps {
     addText?: string;
     deleteText?: string;
     loading?: boolean;
+    languages?: LanguageType[];
     name: string;
     itemType: 'Web' | 'Mobile';
     errors: any;
@@ -250,14 +251,12 @@ export interface TabsProps {
     setActiveTab: (value: number) => void;
     onSubmit?: () => void;
     control: any;
-    register: any;
     options?: {
         value: string;
         label: string;
     }[];
     deleteTitle: string;
     listCode: string;
-    tabNameRequiredText: string;
     noButtonText: string;
     yesButtonText: string;
     itemsPlaceholder?: string;
@@ -270,6 +269,10 @@ export interface TabsProps {
         [key: string]: any;
     };
     customStyles?: any;
+    clearErrors: UseFormClearErrors<FieldValues>;
+    getValues: UseFormGetValues<FieldValues>;
+    setValue: UseFormSetValue<FieldValues>;
+    languages?: LanguageType[];
     loadOptions?: (value?: string, callback?: (options: OptionType[]) => void) => Promise<OptionType[]>;
 }
 export interface ImageUploadProps {

package/src/lib/types/context.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { WidgetType, ItemsType } from './api';
-import { FormActionTypes, OptionType } from './common';
+import { FormActionTypes, LanguageType, OptionType } from './common';
 export interface ProviderContextType {
     baseUrl: string;
     token: string | (() => Promise<string>);
@@ -23,6 +23,7 @@ export interface ProviderContextProviderProps extends React.PropsWithChildren, O
 export interface WidgetContextType {
     t: (key: string) => string;
     list: any[];
+    languages: LanguageType[];
     searchText?: string;
     changeSearch: (str: string) => void;
     formState: FormActionTypes | undefined;