@knovator/pagecreator-admin 1.7.7 → 1.7.8

package/index.cjs

@@ -1775,6 +1775,16 @@ const TRANSLATION_PAIRS_WIDGET = {
   tabNameRequired: 'Tab Name is required',
   subtitle: 'Subtitle',
   subTitlePlaceholder: 'Enter Subtitle',
+  quote: 'Quote',
+  quotePlaceholder: 'Enter quote',
+  personName: 'Person Name',
+  personNamePlaceholder: 'Enter person name',
+  personRole: 'Person Role',
+  personRolePlaceholder: 'Enter person role',
+  personOrganization: 'Organization',
+  personOrganizationPlaceholder: 'Enter organization',
+  rating: 'Rating',
+  ratingPlaceholder: 'Enter rating',
   altText: 'Alt Text',
   altTextPlaceholder: 'Enter alt text',
   link: 'Link',
@@ -3849,6 +3859,7 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
   setError,
   languages
 }, ref) => {
+  const isMultilingualWidgetField = accessor => accessor === 'widgetTitles' || accessor === 'widgetSubtitles';
   const inputRenderer = schema => {
     var _a, _b, _c, _d;
     let input;
@@ -3933,7 +3944,7 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
         case 'url':
         case 'color':
         default:
-          if (Array.isArray(languages) && languages.length > 0 && schema.accessor === 'widgetTitles') {
+          if (Array.isArray(languages) && languages.length > 0 && isMultilingualWidgetField(schema.accessor)) {
             input = languages.map(lang => {
               var _a, _b;
               return /*#__PURE__*/React__default["default"].createElement(Input, {
@@ -3965,7 +3976,7 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
           break;
       }
     } else if (schema.Input) {
-      if (Array.isArray(languages) && languages.length > 0 && schema.accessor === 'widgetTitles') {
+      if (Array.isArray(languages) && languages.length > 0 && isMultilingualWidgetField(schema.accessor)) {
         input = languages.map(lang => (/*#__PURE__*/React__default["default"].createElement("div", {
           key: lang.code,
           className: classNames__default["default"]('khb_input-wrapper', schema.wrapperClassName)
@@ -6806,6 +6817,7 @@ const ItemsAccordian = ({
   itemType,
   languages,
   clearError,
+  customItemRenderer,
   addText: _addText = 'Add',
   deleteText: _deleteText = 'Delete'
 }) => {
@@ -6846,6 +6858,13 @@ const ItemsAccordian = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [errors, name, errors === null || errors === void 0 ? void 0 : errors[name]]);
   const addTab = index => {
+    if (customItemRenderer === null || customItemRenderer === void 0 ? void 0 : customItemRenderer.createItem) {
+      appendItem(customItemRenderer.createItem({
+        index,
+        itemType
+      }));
+      return;
+    }
     appendItem({
       altText: '',
       link: '',
@@ -6889,7 +6908,20 @@ const ItemsAccordian = ({
       }, _deleteText))
     }, /*#__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 => {
+    }, customItemRenderer ? customItemRenderer.render({
+      name,
+      index,
+      itemType,
+      errors,
+      control,
+      register,
+      setError,
+      clearError,
+      languages,
+      loading,
+      widgetTranslations,
+      commonTranslations
+    }) : (/*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, 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, _f, _g, _h;
       return /*#__PURE__*/React__default["default"].createElement(Input, {
         rest: register(`${name}.${index}.titles.${lang.code}`),
@@ -6992,7 +7024,7 @@ const ItemsAccordian = ({
       }, widgetTranslations.dragDrop)), /*#__PURE__*/React__default["default"].createElement("p", {
         className: "khb_img-text-2"
       }, widgetTranslations.allowedFormat))
-    }))));
+    }))))));
   })));
 };
 
@@ -7179,6 +7211,7 @@ const constants = {
   textWidgetTypeValue: 'Text',
   htmlWidgetTypeValue: 'HTML',
   linksWidgetTypeValue: 'Links',
+  testimonialWidgetTypeValue: 'Testimonial',
   pagesItemsTypeValue: 'pages',
   tabsAccessor: 'tabs',
   webItems: 'webItems',
@@ -7188,6 +7221,7 @@ const constants = {
 const WidgetForm = ({
   formRef,
   customInputs,
+  customItemRenderers,
   onPrimaryButtonClick
 }) => {
   const {
@@ -7251,6 +7285,8 @@ const WidgetForm = ({
   const [blogCategoriesLoading, setBlogCategoriesLoading] = React.useState(false);
   const pagesLoadedRef = React.useRef(false);
   const blogCategoryInitialized = React.useRef(false);
+  const selectedWidgetTypeValue = (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) || getValues(constants.widgetTypeAccessor);
+  const selectedCustomItemRenderer = selectedWidgetTypeValue ? customItemRenderers === null || customItemRenderers === void 0 ? void 0 : customItemRenderers[selectedWidgetTypeValue] : undefined;
   React.useEffect(() => {
     if (data && formState === 'UPDATE') {
       const widgetType = widgetTypes.find(type => type.value === (data === null || data === void 0 ? void 0 : data.widgetType));
@@ -7454,6 +7490,15 @@ const WidgetForm = ({
         setValue(constants.collectionNameAccessor, constants.pagesItemsTypeValue);
         const pagesOption = itemsTypes.find(item => item.value === constants.pagesItemsTypeValue);
         if (pagesOption) setSelectedCollectionType(pagesOption);
+      } else if ((widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.testimonialWidgetTypeValue) {
+        setItemsEnabled(true);
+        setSelectedCollectionType(undefined);
+        setSelectedCollectionItems([]);
+        setValue(constants.itemTypeAccessor, constants.imageItemsTypeValue);
+        setValue(constants.collectionNameAccessor, constants.imageItemsTypeValue);
+        setValue('webPerRow', 4);
+        setValue('tabletPerRow', 2);
+        setValue('mobilePerRow', 1);
       } else {
         setItemsEnabled(true);
       }
@@ -7669,6 +7714,22 @@ const WidgetForm = ({
     },
     info: widgetTranslations.widgetTitleInfo,
     Input: customInputs && customInputs['widgetTitle'] ? customInputs['widgetTitle'] : undefined
+  }, Array.isArray(languages) && languages.length > 0 ? {
+    label: widgetTranslations.subtitle,
+    accessor: 'widgetSubtitles',
+    required: false,
+    type: customInputs && customInputs['widgetSubtitles'] ? undefined : 'text',
+    placeholder: widgetTranslations.subTitlePlaceholder,
+    onInput: handleCapitalize,
+    Input: customInputs && customInputs['widgetSubtitles'] ? customInputs['widgetSubtitles'] : undefined
+  } : {
+    label: widgetTranslations.subtitle,
+    accessor: 'widgetSubtitle',
+    required: false,
+    type: customInputs && customInputs['widgetSubtitle'] ? undefined : 'text',
+    onInput: handleCapitalize,
+    placeholder: widgetTranslations.subTitlePlaceholder,
+    Input: customInputs && customInputs['widgetSubtitle'] ? customInputs['widgetSubtitle'] : undefined
   }, {
     label: widgetTranslations.widgetType,
     required: true,
@@ -7713,7 +7774,7 @@ const WidgetForm = ({
     label: widgetTranslations.itemsType,
     required: true,
     editable: false,
-    show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.textWidgetTypeValue && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.htmlWidgetTypeValue,
+    show: selectedWidgetTypeValue !== constants.textWidgetTypeValue && selectedWidgetTypeValue !== constants.htmlWidgetTypeValue && selectedWidgetTypeValue !== constants.testimonialWidgetTypeValue,
     accessor: constants.itemTypeAccessor,
     type: 'select',
     validations: {
@@ -7925,7 +7986,8 @@ const WidgetForm = ({
     register: register,
     loading: loading,
     addText: commonTranslations.add,
-    deleteText: commonTranslations.delete
+    deleteText: commonTranslations.delete,
+    customItemRenderer: selectedCustomItemRenderer
   }), /*#__PURE__*/React__default["default"].createElement(ItemsAccordian, {
     languages: languages,
     clearError: clearErrors,
@@ -7942,7 +8004,8 @@ const WidgetForm = ({
     control: control,
     register: register,
     addText: commonTranslations.add,
-    deleteText: commonTranslations.delete
+    deleteText: commonTranslations.delete,
+    customItemRenderer: selectedCustomItemRenderer
   }))));
 };
 
@@ -8065,6 +8128,79 @@ const WiddgetFormWrapper = ({
   }) : null;
 };
 
+const TestimonialItemRenderer = ({
+  name,
+  index,
+  register,
+  errors,
+  widgetTranslations
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Input, {
+    rest: register(`${name}.${index}.quote`),
+    label: widgetTranslations.quote,
+    error: (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['quote']) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
+    type: "textarea",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.quotePlaceholder
+  }), /*#__PURE__*/React__default["default"].createElement(Input, {
+    rest: register(`${name}.${index}.personName`),
+    label: widgetTranslations.personName,
+    error: (_h = (_g = (_f = (_e = errors[name]) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f['personName']) === null || _g === void 0 ? void 0 : _g.message) === null || _h === void 0 ? void 0 : _h.toString(),
+    type: "text",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.personNamePlaceholder
+  }), /*#__PURE__*/React__default["default"].createElement(Input, {
+    rest: register(`${name}.${index}.personRole`),
+    label: widgetTranslations.personRole,
+    error: (_m = (_l = (_k = (_j = errors[name]) === null || _j === void 0 ? void 0 : _j[index]) === null || _k === void 0 ? void 0 : _k['personRole']) === null || _l === void 0 ? void 0 : _l.message) === null || _m === void 0 ? void 0 : _m.toString(),
+    type: "text",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.personRolePlaceholder
+  }), /*#__PURE__*/React__default["default"].createElement(Input, {
+    rest: register(`${name}.${index}.personOrganization`),
+    label: widgetTranslations.personOrganization,
+    error: (_r = (_q = (_p = (_o = errors[name]) === null || _o === void 0 ? void 0 : _o[index]) === null || _p === void 0 ? void 0 : _p['personOrganization']) === null || _q === void 0 ? void 0 : _q.message) === null || _r === void 0 ? void 0 : _r.toString(),
+    type: "text",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.personOrganizationPlaceholder
+  }), /*#__PURE__*/React__default["default"].createElement(Input, {
+    rest: register(`${name}.${index}.rating`, {
+      min: {
+        value: 0,
+        message: 'Rating should be greater than or equal to 0'
+      },
+      max: {
+        value: 5,
+        message: 'Rating should be less than or equal to 5'
+      }
+    }),
+    label: widgetTranslations.rating,
+    error: (_v = (_u = (_t = (_s = errors[name]) === null || _s === void 0 ? void 0 : _s[index]) === null || _t === void 0 ? void 0 : _t['rating']) === null || _u === void 0 ? void 0 : _u.message) === null || _v === void 0 ? void 0 : _v.toString(),
+    type: "number",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.ratingPlaceholder
+  }));
+};
+
+const getDefaultCustomItemRenderers = () => ({
+  Testimonial: {
+    render: TestimonialItemRenderer,
+    createItem: ({
+      index,
+      itemType
+    }) => ({
+      quote: '',
+      personName: '',
+      personRole: '',
+      personOrganization: '',
+      rating: 5,
+      itemType,
+      sequence: index
+    })
+  }
+});
+
 const Widget = ({
   routes,
   loader,
@@ -8079,7 +8215,8 @@ const Widget = ({
   imageMaxSize,
   translations,
   children,
-  onPrimaryButtonClick
+  onPrimaryButtonClick,
+  customItemRenderers
 }) => {
   const {
     commonTranslations
@@ -8087,6 +8224,8 @@ const Widget = ({
   const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const widgetFormRef = React.useRef(null);
   const derivedT = Object.assign(Object.assign({}, TRANSLATION_PAIRS_WIDGET), translations || {});
+  const defaultCustomItemRenderers = getDefaultCustomItemRenderers();
+  const derivedCustomItemRenderers = Object.assign(Object.assign({}, defaultCustomItemRenderers), customItemRenderers || {});
   const {
     list,
     loading,
@@ -8171,7 +8310,8 @@ const Widget = ({
     })
   }, /*#__PURE__*/React__default["default"].createElement(WidgetForm, {
     formRef: widgetFormRef,
-    onPrimaryButtonClick: onPrimaryButtonClick
+    onPrimaryButtonClick: onPrimaryButtonClick,
+    customItemRenderers: derivedCustomItemRenderers
   }))), itemData && (/*#__PURE__*/React__default["default"].createElement(DeleteModal, {
     formState: formState,
     itemData: itemData,

package/index.js

@@ -1763,6 +1763,16 @@ const TRANSLATION_PAIRS_WIDGET = {
   tabNameRequired: 'Tab Name is required',
   subtitle: 'Subtitle',
   subTitlePlaceholder: 'Enter Subtitle',
+  quote: 'Quote',
+  quotePlaceholder: 'Enter quote',
+  personName: 'Person Name',
+  personNamePlaceholder: 'Enter person name',
+  personRole: 'Person Role',
+  personRolePlaceholder: 'Enter person role',
+  personOrganization: 'Organization',
+  personOrganizationPlaceholder: 'Enter organization',
+  rating: 'Rating',
+  ratingPlaceholder: 'Enter rating',
   altText: 'Alt Text',
   altTextPlaceholder: 'Enter alt text',
   link: 'Link',
@@ -3837,6 +3847,7 @@ const SimpleForm = /*#__PURE__*/forwardRef(({
   setError,
   languages
 }, ref) => {
+  const isMultilingualWidgetField = accessor => accessor === 'widgetTitles' || accessor === 'widgetSubtitles';
   const inputRenderer = schema => {
     var _a, _b, _c, _d;
     let input;
@@ -3921,7 +3932,7 @@ const SimpleForm = /*#__PURE__*/forwardRef(({
         case 'url':
         case 'color':
         default:
-          if (Array.isArray(languages) && languages.length > 0 && schema.accessor === 'widgetTitles') {
+          if (Array.isArray(languages) && languages.length > 0 && isMultilingualWidgetField(schema.accessor)) {
             input = languages.map(lang => {
               var _a, _b;
               return /*#__PURE__*/React.createElement(Input, {
@@ -3953,7 +3964,7 @@ const SimpleForm = /*#__PURE__*/forwardRef(({
           break;
       }
     } else if (schema.Input) {
-      if (Array.isArray(languages) && languages.length > 0 && schema.accessor === 'widgetTitles') {
+      if (Array.isArray(languages) && languages.length > 0 && isMultilingualWidgetField(schema.accessor)) {
         input = languages.map(lang => (/*#__PURE__*/React.createElement("div", {
           key: lang.code,
           className: classNames('khb_input-wrapper', schema.wrapperClassName)
@@ -6794,6 +6805,7 @@ const ItemsAccordian = ({
   itemType,
   languages,
   clearError,
+  customItemRenderer,
   addText: _addText = 'Add',
   deleteText: _deleteText = 'Delete'
 }) => {
@@ -6834,6 +6846,13 @@ const ItemsAccordian = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [errors, name, errors === null || errors === void 0 ? void 0 : errors[name]]);
   const addTab = index => {
+    if (customItemRenderer === null || customItemRenderer === void 0 ? void 0 : customItemRenderer.createItem) {
+      appendItem(customItemRenderer.createItem({
+        index,
+        itemType
+      }));
+      return;
+    }
     appendItem({
       altText: '',
       link: '',
@@ -6877,7 +6896,20 @@ const ItemsAccordian = ({
       }, _deleteText))
     }, /*#__PURE__*/React.createElement("div", {
       className: "khb-form-items"
-    }, Array.isArray(languages) && languages.length > 0 ? (/*#__PURE__*/React.createElement(React.Fragment, null, languages.map(lang => {
+    }, customItemRenderer ? customItemRenderer.render({
+      name,
+      index,
+      itemType,
+      errors,
+      control,
+      register,
+      setError,
+      clearError,
+      languages,
+      loading,
+      widgetTranslations,
+      commonTranslations
+    }) : (/*#__PURE__*/React.createElement(React.Fragment, null, Array.isArray(languages) && languages.length > 0 ? (/*#__PURE__*/React.createElement(React.Fragment, null, languages.map(lang => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
       return /*#__PURE__*/React.createElement(Input, {
         rest: register(`${name}.${index}.titles.${lang.code}`),
@@ -6980,7 +7012,7 @@ const ItemsAccordian = ({
       }, widgetTranslations.dragDrop)), /*#__PURE__*/React.createElement("p", {
         className: "khb_img-text-2"
       }, widgetTranslations.allowedFormat))
-    }))));
+    }))))));
   })));
 };
 
@@ -7167,6 +7199,7 @@ const constants = {
   textWidgetTypeValue: 'Text',
   htmlWidgetTypeValue: 'HTML',
   linksWidgetTypeValue: 'Links',
+  testimonialWidgetTypeValue: 'Testimonial',
   pagesItemsTypeValue: 'pages',
   tabsAccessor: 'tabs',
   webItems: 'webItems',
@@ -7176,6 +7209,7 @@ const constants = {
 const WidgetForm = ({
   formRef,
   customInputs,
+  customItemRenderers,
   onPrimaryButtonClick
 }) => {
   const {
@@ -7239,6 +7273,8 @@ const WidgetForm = ({
   const [blogCategoriesLoading, setBlogCategoriesLoading] = useState(false);
   const pagesLoadedRef = useRef(false);
   const blogCategoryInitialized = useRef(false);
+  const selectedWidgetTypeValue = (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) || getValues(constants.widgetTypeAccessor);
+  const selectedCustomItemRenderer = selectedWidgetTypeValue ? customItemRenderers === null || customItemRenderers === void 0 ? void 0 : customItemRenderers[selectedWidgetTypeValue] : undefined;
   useEffect(() => {
     if (data && formState === 'UPDATE') {
       const widgetType = widgetTypes.find(type => type.value === (data === null || data === void 0 ? void 0 : data.widgetType));
@@ -7442,6 +7478,15 @@ const WidgetForm = ({
         setValue(constants.collectionNameAccessor, constants.pagesItemsTypeValue);
         const pagesOption = itemsTypes.find(item => item.value === constants.pagesItemsTypeValue);
         if (pagesOption) setSelectedCollectionType(pagesOption);
+      } else if ((widgetType === null || widgetType === void 0 ? void 0 : widgetType.value) === constants.testimonialWidgetTypeValue) {
+        setItemsEnabled(true);
+        setSelectedCollectionType(undefined);
+        setSelectedCollectionItems([]);
+        setValue(constants.itemTypeAccessor, constants.imageItemsTypeValue);
+        setValue(constants.collectionNameAccessor, constants.imageItemsTypeValue);
+        setValue('webPerRow', 4);
+        setValue('tabletPerRow', 2);
+        setValue('mobilePerRow', 1);
       } else {
         setItemsEnabled(true);
       }
@@ -7657,6 +7702,22 @@ const WidgetForm = ({
     },
     info: widgetTranslations.widgetTitleInfo,
     Input: customInputs && customInputs['widgetTitle'] ? customInputs['widgetTitle'] : undefined
+  }, Array.isArray(languages) && languages.length > 0 ? {
+    label: widgetTranslations.subtitle,
+    accessor: 'widgetSubtitles',
+    required: false,
+    type: customInputs && customInputs['widgetSubtitles'] ? undefined : 'text',
+    placeholder: widgetTranslations.subTitlePlaceholder,
+    onInput: handleCapitalize,
+    Input: customInputs && customInputs['widgetSubtitles'] ? customInputs['widgetSubtitles'] : undefined
+  } : {
+    label: widgetTranslations.subtitle,
+    accessor: 'widgetSubtitle',
+    required: false,
+    type: customInputs && customInputs['widgetSubtitle'] ? undefined : 'text',
+    onInput: handleCapitalize,
+    placeholder: widgetTranslations.subTitlePlaceholder,
+    Input: customInputs && customInputs['widgetSubtitle'] ? customInputs['widgetSubtitle'] : undefined
   }, {
     label: widgetTranslations.widgetType,
     required: true,
@@ -7701,7 +7762,7 @@ const WidgetForm = ({
     label: widgetTranslations.itemsType,
     required: true,
     editable: false,
-    show: (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.textWidgetTypeValue && (selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value) !== constants.htmlWidgetTypeValue,
+    show: selectedWidgetTypeValue !== constants.textWidgetTypeValue && selectedWidgetTypeValue !== constants.htmlWidgetTypeValue && selectedWidgetTypeValue !== constants.testimonialWidgetTypeValue,
     accessor: constants.itemTypeAccessor,
     type: 'select',
     validations: {
@@ -7913,7 +7974,8 @@ const WidgetForm = ({
     register: register,
     loading: loading,
     addText: commonTranslations.add,
-    deleteText: commonTranslations.delete
+    deleteText: commonTranslations.delete,
+    customItemRenderer: selectedCustomItemRenderer
   }), /*#__PURE__*/React.createElement(ItemsAccordian, {
     languages: languages,
     clearError: clearErrors,
@@ -7930,7 +7992,8 @@ const WidgetForm = ({
     control: control,
     register: register,
     addText: commonTranslations.add,
-    deleteText: commonTranslations.delete
+    deleteText: commonTranslations.delete,
+    customItemRenderer: selectedCustomItemRenderer
   }))));
 };
 
@@ -8053,6 +8116,79 @@ const WiddgetFormWrapper = ({
   }) : null;
 };
 
+const TestimonialItemRenderer = ({
+  name,
+  index,
+  register,
+  errors,
+  widgetTranslations
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
+    rest: register(`${name}.${index}.quote`),
+    label: widgetTranslations.quote,
+    error: (_d = (_c = (_b = (_a = errors[name]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b['quote']) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
+    type: "textarea",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.quotePlaceholder
+  }), /*#__PURE__*/React.createElement(Input, {
+    rest: register(`${name}.${index}.personName`),
+    label: widgetTranslations.personName,
+    error: (_h = (_g = (_f = (_e = errors[name]) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f['personName']) === null || _g === void 0 ? void 0 : _g.message) === null || _h === void 0 ? void 0 : _h.toString(),
+    type: "text",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.personNamePlaceholder
+  }), /*#__PURE__*/React.createElement(Input, {
+    rest: register(`${name}.${index}.personRole`),
+    label: widgetTranslations.personRole,
+    error: (_m = (_l = (_k = (_j = errors[name]) === null || _j === void 0 ? void 0 : _j[index]) === null || _k === void 0 ? void 0 : _k['personRole']) === null || _l === void 0 ? void 0 : _l.message) === null || _m === void 0 ? void 0 : _m.toString(),
+    type: "text",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.personRolePlaceholder
+  }), /*#__PURE__*/React.createElement(Input, {
+    rest: register(`${name}.${index}.personOrganization`),
+    label: widgetTranslations.personOrganization,
+    error: (_r = (_q = (_p = (_o = errors[name]) === null || _o === void 0 ? void 0 : _o[index]) === null || _p === void 0 ? void 0 : _p['personOrganization']) === null || _q === void 0 ? void 0 : _q.message) === null || _r === void 0 ? void 0 : _r.toString(),
+    type: "text",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.personOrganizationPlaceholder
+  }), /*#__PURE__*/React.createElement(Input, {
+    rest: register(`${name}.${index}.rating`, {
+      min: {
+        value: 0,
+        message: 'Rating should be greater than or equal to 0'
+      },
+      max: {
+        value: 5,
+        message: 'Rating should be less than or equal to 5'
+      }
+    }),
+    label: widgetTranslations.rating,
+    error: (_v = (_u = (_t = (_s = errors[name]) === null || _s === void 0 ? void 0 : _s[index]) === null || _t === void 0 ? void 0 : _t['rating']) === null || _u === void 0 ? void 0 : _u.message) === null || _v === void 0 ? void 0 : _v.toString(),
+    type: "number",
+    className: "w-full p-2",
+    placeholder: widgetTranslations.ratingPlaceholder
+  }));
+};
+
+const getDefaultCustomItemRenderers = () => ({
+  Testimonial: {
+    render: TestimonialItemRenderer,
+    createItem: ({
+      index,
+      itemType
+    }) => ({
+      quote: '',
+      personName: '',
+      personRole: '',
+      personOrganization: '',
+      rating: 5,
+      itemType,
+      sequence: index
+    })
+  }
+});
+
 const Widget = ({
   routes,
   loader,
@@ -8067,7 +8203,8 @@ const Widget = ({
   imageMaxSize,
   translations,
   children,
-  onPrimaryButtonClick
+  onPrimaryButtonClick,
+  customItemRenderers
 }) => {
   const {
     commonTranslations
@@ -8075,6 +8212,8 @@ const Widget = ({
   const derivedPermissions = Object.assign(DEFAULT_PERMISSIONS, _permissions);
   const widgetFormRef = useRef(null);
   const derivedT = Object.assign(Object.assign({}, TRANSLATION_PAIRS_WIDGET), translations || {});
+  const defaultCustomItemRenderers = getDefaultCustomItemRenderers();
+  const derivedCustomItemRenderers = Object.assign(Object.assign({}, defaultCustomItemRenderers), customItemRenderers || {});
   const {
     list,
     loading,
@@ -8159,7 +8298,8 @@ const Widget = ({
     })
   }, /*#__PURE__*/React.createElement(WidgetForm, {
     formRef: widgetFormRef,
-    onPrimaryButtonClick: onPrimaryButtonClick
+    onPrimaryButtonClick: onPrimaryButtonClick,
+    customItemRenderers: derivedCustomItemRenderers
   }))), itemData && (/*#__PURE__*/React.createElement(DeleteModal, {
     formState: formState,
     itemData: itemData,

package/package.json

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

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, languages, clearError, addText, deleteText, }: ItemsAccordianProps) => JSX.Element;
+declare const ItemsAccordian: ({ show, title, id, collapseId, toggleShow, loading, name, errors, control, register, setError, itemType, languages, clearError, customItemRenderer, addText, deleteText, }: ItemsAccordianProps) => JSX.Element;
 export default ItemsAccordian;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormProps } from '../../../types';
-declare const WidgetForm: ({ formRef, customInputs, onPrimaryButtonClick }: FormProps) => JSX.Element | null;
+declare const WidgetForm: ({ formRef, customInputs, customItemRenderers, onPrimaryButtonClick, }: FormProps) => JSX.Element | null;
 export default WidgetForm;

package/src/lib/components/Widget/Form/customItemRenderers/TestimonialItemRenderer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ItemRendererProps } from '../../../../types';
+declare const TestimonialItemRenderer: ({ name, index, register, errors, widgetTranslations }: ItemRendererProps) => JSX.Element;
+export default TestimonialItemRenderer;

package/src/lib/components/Widget/Form/customItemRenderers/defaultCustomItemRenderers.d.ts

@@ -0,0 +1,3 @@
+import { CustomItemRendererConfig } from '../../../../types';
+export declare const getDefaultCustomItemRenderers: () => Record<string, CustomItemRendererConfig>;
+export default getDefaultCustomItemRenderers;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { WidgetProps } from '../../../types';
 declare const Widget: {
-    ({ routes, loader, explicitForm, imageBaseUrl, permissions, preConfirmDelete, formatListItem, formatOptionLabel, imageMaxSize, translations, children, onPrimaryButtonClick, }: WidgetProps): JSX.Element;
+    ({ routes, loader, explicitForm, imageBaseUrl, permissions, preConfirmDelete, formatListItem, formatOptionLabel, imageMaxSize, translations, children, onPrimaryButtonClick, customItemRenderers, }: WidgetProps): JSX.Element;
     Table: ({ extraActions, extraColumns }: import("../../../types").DerivedTableProps) => JSX.Element;
-    Form: ({ formRef, customInputs, onPrimaryButtonClick }: import("../../../types").FormProps) => JSX.Element | null;
+    Form: ({ formRef, customInputs, customItemRenderers, onPrimaryButtonClick, }: import("../../../types").FormProps) => JSX.Element | null;
     AddButton: () => JSX.Element;
     Search: () => JSX.Element;
     Pagination: () => JSX.Element;

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

@@ -86,6 +86,16 @@ declare const TRANSLATION_PAIRS_WIDGET: {
     tabNameRequired: string;
     subtitle: string;
     subTitlePlaceholder: string;
+    quote: string;
+    quotePlaceholder: string;
+    personName: string;
+    personNamePlaceholder: string;
+    personRole: string;
+    personRolePlaceholder: string;
+    personOrganization: string;
+    personOrganizationPlaceholder: string;
+    rating: string;
+    ratingPlaceholder: string;
     altText: string;
     altTextPlaceholder: string;
     link: string;

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

@@ -2,7 +2,8 @@ import React, { MutableRefObject } from 'react';
 import { DropResult } from 'react-beautiful-dnd';
 import { FieldValues, RegisterOptions, UseFormClearErrors, UseFormGetValues, UseFormSetValue, ValidationRule } from 'react-hook-form';
 import { Routes_Input } from './api';
-import { OptionType, FormActionTypes, PermissionsObj, ObjectType, LanguageType } from './common';
+import { OptionType, FormActionTypes, PermissionsObj, ObjectType, CombineObjectType, LanguageType } from './common';
+import type { CommonTranslationPairs } from './context';
 export interface DNDItemsListProps {
     onDragEnd: (result: DropResult) => void;
     items: OptionType[];
@@ -140,6 +141,7 @@ export interface FormProps {
     filterQuery?: string;
     formRef: MutableRefObject<HTMLFormElement | null>;
     customInputs?: Record<string, (props: InputRendererProps) => JSX.Element>;
+    customItemRenderers?: Record<string, CustomItemRendererConfig>;
     onPrimaryButtonClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>, data?: any) => void;
 }
 export interface InputRendererProps {
@@ -148,6 +150,27 @@ export interface InputRendererProps {
     setError: (msg: string) => void;
     disabled?: boolean;
 }
+export interface ItemRendererProps {
+    name: string;
+    index: number;
+    itemType: 'Web' | 'Mobile';
+    errors: any;
+    control: any;
+    register: any;
+    setError: any;
+    clearError: (key: string) => void;
+    languages?: LanguageType[];
+    loading?: boolean;
+    widgetTranslations: WidgetTranslationPairs;
+    commonTranslations: CommonTranslationPairs;
+}
+export interface CustomItemRendererConfig {
+    render: (props: ItemRendererProps) => JSX.Element;
+    createItem?: (props: {
+        index: number;
+        itemType: 'Web' | 'Mobile';
+    }) => CombineObjectType;
+}
 export interface WidgetTranslationPairs {
     htmlContentRequired: string | ValidationRule<boolean> | undefined;
     htmlContentPlaceholder: string | undefined;
@@ -178,6 +201,16 @@ export interface WidgetTranslationPairs {
     tabNameRequired: string;
     subtitle: string;
     subTitlePlaceholder: string;
+    quote: string;
+    quotePlaceholder: string;
+    personName: string;
+    personNamePlaceholder: string;
+    personRole: string;
+    personRolePlaceholder: string;
+    personOrganization: string;
+    personOrganizationPlaceholder: string;
+    rating: string;
+    ratingPlaceholder: string;
     altText: string;
     altTextPlaceholder: string;
     link: string;
@@ -214,6 +247,7 @@ export interface WidgetProps {
     imageBaseUrl?: string;
     imageMaxSize?: number;
     translations?: WidgetTranslationPairs;
+    customItemRenderers?: Record<string, CustomItemRendererConfig>;
     onPrimaryButtonClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>, data?: any) => void;
 }
 export interface DerivedTableProps {
@@ -313,6 +347,7 @@ export interface ItemsAccordianProps {
     register: any;
     setError: any;
     clearError: (key: string) => void;
+    customItemRenderer?: CustomItemRendererConfig;
 }
 export interface TabItemProps {
     showDelete?: boolean;