@bigbinary/neeto-templates-frontend 1.1.36 → 1.2.0-beta1

package/dist/index.js

@@ -1,26 +1,32 @@
 import * as React from 'react';
-import React__default, { useState, useRef, useCallback, useEffect, memo } from 'react';
+import { useState, useRef, useCallback, useEffect, createElement, memo } from 'react';
 import { noop, removeBy, renameKeys } from '@bigbinary/neeto-cist';
-import { Typography, Spinner, Button, Modal, Label } from '@bigbinary/neetoui';
+import Modal from '@bigbinary/neetoui/Modal';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Search from '@bigbinary/neeto-molecules/Search';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import Typography from '@bigbinary/neetoui/Typography';
 import { useTranslation } from 'react-i18next';
 import { refetchTags, TagsComponent, NeetoTags } from '@bigbinary/neeto-tags-frontend';
+import { useQuery, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useMutationWithInvalidation } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { prop, pluck } from 'ramda';
-import { useQuery, useInfiniteQuery, useMutation, useQueryClient } from 'react-query';
 import axios from 'axios';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import { t as t$1 } from 'i18next';
 import classnames from 'classnames';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
 import { LeftArrow } from '@bigbinary/neeto-icons';
-import { Form, ActionBlock } from '@bigbinary/neetoui/formik';
+import Button from '@bigbinary/neetoui/Button';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
+import Form from '@bigbinary/neetoui/formik/Form';
 import { useParams } from 'react-router-dom';
 import { ImageUploader } from '@bigbinary/neeto-image-uploader-frontend';
 import { useField, useFormikContext } from 'formik';
 import Header from '@bigbinary/neeto-molecules/Header';
 import Scrollable from '@bigbinary/neeto-molecules/Scrollable';
+import Label from '@bigbinary/neetoui/Label';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -428,20 +434,22 @@ var QUERY_KEYS = {
   TEMPLATE_TAGS: "tag-key"
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchTemplates = function useFetchTemplates(_ref) {
   var searchTerm = _ref.searchTerm,
     category = _ref.category;
-  return useInfiniteQuery([QUERY_KEYS.TEMPLATES_LIST, searchTerm, category], function (_ref2) {
-    var _ref2$pageParam = _ref2.pageParam,
-      pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
-    return templatesApi.list({
-      page: pageParam,
-      searchTerm: searchTerm,
-      category: category
-    });
-  }, {
+  return useInfiniteQuery({
+    queryKey: [QUERY_KEYS.TEMPLATES_LIST, searchTerm, category],
+    queryFn: function queryFn(_ref2) {
+      var _ref2$pageParam = _ref2.pageParam,
+        pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
+      return templatesApi.list({
+        page: pageParam,
+        searchTerm: searchTerm,
+        category: category
+      });
+    },
     getNextPageParam: function getNextPageParam(lastPage) {
       return lastPage.hasNextPage ? lastPage.page + 1 : undefined;
     },
@@ -461,7 +469,9 @@ var useFetchTemplates = function useFetchTemplates(_ref) {
 };
 var useCreateTemplate = function useCreateTemplate(_ref3, options) {
   var refetchResource = _ref3.refetchResource;
-  return useMutation(templatesApi.create, _objectSpread$4(_objectSpread$4({}, options), {}, {
+  return useMutation(_objectSpread$5(_objectSpread$5({
+    mutationFn: templatesApi.create
+  }, options), {}, {
     onSuccess: function onSuccess() {
       refetchResource();
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -473,11 +483,14 @@ var useCreateTemplate = function useCreateTemplate(_ref3, options) {
 };
 var useFetchTemplate = function useFetchTemplate(_ref4, options) {
   var resourceId = _ref4.resourceId;
-  return useQuery([QUERY_KEYS.TEMPLATE, resourceId], function () {
-    return templatesApi.fetch({
-      templateId: resourceId
-    });
-  }, options);
+  return useQuery(_objectSpread$5({
+    queryKey: [QUERY_KEYS.TEMPLATE, resourceId],
+    queryFn: function queryFn() {
+      return templatesApi.fetch({
+        templateId: resourceId
+      });
+    }
+  }, options));
 };
 var useUpdateTemplate = function useUpdateTemplate(_ref5) {
   var resourceId = _ref5.resourceId;
@@ -505,43 +518,49 @@ var BlankCard = function BlankCard(_ref) {
     onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: "neeto-ui-rounded-lg neeto-ui-bg-white hover:neeto-ui-bg-white neeto-ui-border-primary-500 flex cursor-pointer flex-col items-center justify-center border border-dashed p-6 outline-none transition-all duration-300 ease-in-out hover:border-solid focus:border-solid",
     "data-cy": "start-from-scratch-button",
     tabIndex: 0,
-    onClick: !disabled ? onClick : noop
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-text-primary-500 mb-4"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    size: 40
-  })), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "text-center",
-    lineHeight: "normal",
-    style: "h5",
-    weight: "semibold"
-  }, title), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-600 text-center",
-    lineHeight: "leading-4",
-    style: "body3"
-  }, description));
+    onClick: !disabled ? onClick : noop,
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-ui-text-primary-500 mb-4",
+      children: /*#__PURE__*/jsx(Icon, {
+        size: 40
+      })
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "text-center",
+      lineHeight: "normal",
+      style: "h5",
+      weight: "semibold",
+      children: title
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "neeto-ui-text-gray-600 text-center",
+      lineHeight: "leading-4",
+      style: "body3",
+      children: description
+    })]
+  });
 };
 
 var ButtonLoader = function ButtonLoader() {
-  return /*#__PURE__*/React__default.createElement("div", {
-    role: "status"
-  }, /*#__PURE__*/React__default.createElement("svg", {
-    "aria-hidden": "true",
-    className: "neeto-ui-text-gray-400 inline h-4 w-4 animate-spin",
-    fill: "none",
-    viewBox: "0 0 100 101",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M100 50.59c0 27.615-22.386 50.001-50 50.001s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zm-90.919 0c0 22.6 18.32 40.92 40.919 40.92 22.599 0 40.919-18.32 40.919-40.92 0-22.598-18.32-40.918-40.919-40.918-22.599 0-40.919 18.32-40.919 40.919z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M93.968 39.04c2.425-.636 3.894-3.128 3.04-5.486A50 50 0 0041.735 1.279c-2.474.414-3.922 2.919-3.285 5.344.637 2.426 3.12 3.849 5.6 3.484a40.916 40.916 0 0144.131 25.769c.902 2.34 3.361 3.802 5.787 3.165z",
-    fill: "#3642df"
-  })));
+  return /*#__PURE__*/jsx("div", {
+    role: "status",
+    children: /*#__PURE__*/jsxs("svg", {
+      "aria-hidden": "true",
+      className: "neeto-ui-text-gray-400 inline h-4 w-4 animate-spin",
+      fill: "none",
+      viewBox: "0 0 100 101",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [/*#__PURE__*/jsx("path", {
+        d: "M100 50.59c0 27.615-22.386 50.001-50 50.001s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zm-90.919 0c0 22.6 18.32 40.92 40.919 40.92 22.599 0 40.919-18.32 40.919-40.92 0-22.598-18.32-40.918-40.919-40.918-22.599 0-40.919 18.32-40.919 40.919z",
+        fill: "currentColor"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M93.968 39.04c2.425-.636 3.894-3.128 3.04-5.486A50 50 0 0041.735 1.279c-2.474.414-3.922 2.919-3.285 5.344.637 2.426 3.12 3.849 5.6 3.484a40.916 40.916 0 0144.131 25.769c.902 2.34 3.361 3.802 5.787 3.165z",
+        fill: "#3642df"
+      })]
+    })
+  });
 };
 
 var getMenuItems = function getMenuItems(_ref) {
@@ -553,7 +572,7 @@ var getMenuItems = function getMenuItems(_ref) {
     "data-cy": "use-this-template-button",
     isDisabled: isCreating,
     label: t$1("neetoTemplate.templates.editTemplate"),
-    suffix: isCreating && /*#__PURE__*/React__default.createElement(ButtonLoader, null),
+    suffix: isCreating && /*#__PURE__*/jsx(ButtonLoader, {}),
     onClick: function onClick(event) {
       return handleCreateTemplate(event, template.id);
     }
@@ -573,7 +592,7 @@ var Card = function Card(_ref) {
       refetchResource: refetchResource
     }),
     createTemplate = _useCreateTemplate.mutate,
-    isCreating = _useCreateTemplate.isLoading;
+    isCreating = _useCreateTemplate.isPending;
   var handleCreateTemplate = function handleCreateTemplate(e, templateId) {
     e.stopPropagation();
     createTemplate({
@@ -584,40 +603,44 @@ var Card = function Card(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-template neeto-ui-bg-white outline-none neeto-ui-shadow-sm hover:neeto-ui-border-gray-400 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex cursor-pointer flex-col overflow-hidden border transition-colors duration-300 ease-in-out",
+  return /*#__PURE__*/jsxs("div", {
+    onClick: onClick,
+    className: "neeto-template neeto-ui-bg-white neeto-ui-shadow-sm hover:neeto-ui-border-gray-400 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex cursor-pointer flex-col overflow-hidden border outline-none transition-colors duration-300 ease-in-out",
     "data-cy": "template-card",
     tabIndex: 0,
-    onClick: onClick
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-template__header"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    className: "neeto-template__image",
-    "data-cy": "template-thumbnail-image",
-    src: template.imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg p-2 py-1.5"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 line-clamp-2",
-    "data-cy": "template-card-title",
-    lineHeight: "normal",
-    style: "body2"
-  }, template.title), /*#__PURE__*/React__default.createElement(MoreDropdown, {
-    dropdownButtonProps: {
-      className: "flex-shrink-0",
-      size: "small"
-    },
-    dropdownProps: {
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      }
-    },
-    menuItems: getMenuItems({
-      handleCreateTemplate: handleCreateTemplate,
-      isCreating: isCreating,
-      template: template
-    })
-  })));
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-template__header",
+      children: /*#__PURE__*/jsx("img", {
+        className: "neeto-template__image",
+        "data-cy": "template-thumbnail-image",
+        src: template.imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg p-2 py-1.5",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-800 line-clamp-2",
+        "data-cy": "template-card-title",
+        lineHeight: "normal",
+        style: "body2",
+        children: template.title
+      }), /*#__PURE__*/jsx(MoreDropdown, {
+        dropdownButtonProps: {
+          className: "flex-shrink-0",
+          size: "small"
+        },
+        dropdownProps: {
+          onClick: function onClick(event) {
+            return event.stopPropagation();
+          }
+        },
+        menuItems: getMenuItems({
+          handleCreateTemplate: handleCreateTemplate,
+          isCreating: isCreating,
+          template: template
+        })
+      })]
+    })]
+  });
 };
 
 var CategoryItem = function CategoryItem(_ref) {
@@ -625,19 +648,24 @@ var CategoryItem = function CategoryItem(_ref) {
     count = _ref.count,
     isActive = _ref.isActive,
     setCurrentCategory = _ref.setCurrentCategory;
-  return /*#__PURE__*/React__default.createElement("button", {
+  return /*#__PURE__*/jsxs("button", {
     "data-cy": "category-".concat(joinHyphenCase(label)),
     tabIndex: 0,
     className: classnames("neeto-ui-rounded-lg outline-none flex w-full items-center justify-between gap-2 border border-solid px-3 py-2 text-sm font-medium leading-4 transition-all duration-300 ease-in-out", {
       "neeto-ui-text-gray-700 hover:neeto-ui-bg-gray-200 focus:neeto-ui-bg-gray-200 border-transparent": !isActive,
       "neeto-ui-text-gray-800 neeto-ui-bg-white neeto-ui-border-gray-300 focus:neeto-ui-border-gray-500": isActive
     }),
-    onClick: setCurrentCategory
-  }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, count));
+    onClick: setCurrentCategory,
+    children: [/*#__PURE__*/jsx("span", {
+      children: label
+    }), /*#__PURE__*/jsx("span", {
+      children: count
+    })]
+  });
 };
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var List = function List(_ref) {
   var setCurrentScreen = _ref.setCurrentScreen,
     setSelectedTemplate = _ref.setSelectedTemplate,
@@ -680,7 +708,7 @@ var List = function List(_ref) {
     setSelectedTemplate(template);
   };
   if (isTemplatesLoading) {
-    return /*#__PURE__*/React__default.createElement(PageLoader, null);
+    return /*#__PURE__*/jsx(PageLoader, {});
   }
   var _data$tags = data.tags,
     tags = _data$tags === void 0 ? [] : _data$tags,
@@ -688,83 +716,96 @@ var List = function List(_ref) {
     templates = _data$templates === void 0 ? [] : _data$templates,
     _data$templatesCount = data.templatesCount,
     templatesCount = _data$templatesCount === void 0 ? 0 : _data$templatesCount;
-  var categories = [_objectSpread$3(_objectSpread$3({}, DEFAULT_CATEGORY), {}, {
+  var categories = [_objectSpread$4(_objectSpread$4({}, DEFAULT_CATEGORY), {}, {
     count: templatesCount
   })].concat(_toConsumableArray(tags));
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sticky left-0 top-0 w-52 flex-shrink-0 space-y-8 py-6 pl-4 md:w-72 md:pl-10 lg:w-80 xl:pl-16"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-1"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "create-new-form-title",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoTemplate.templates.createNewEntity")), /*#__PURE__*/React__default.createElement(Typography, {
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoTemplate.templates.description"))), /*#__PURE__*/React__default.createElement(Search, {
-    autoFocus: true,
-    disableTrimOnBlur: true,
-    "data-cy": "template-search-input",
-    placeholder: t("neetoTemplate.templates.search"),
-    onSearch: function onSearch(value) {
-      return setSearchTerm(value);
-    }
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-3"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "uppercase",
-    "data-cy": "template-categories-label",
-    style: "h6"
-  }, t("neetoTemplate.templates.categories")), /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-2"
-  }, categories.map(function (_ref2) {
-    var id = _ref2.id,
-      name = _ref2.name,
-      count = _ref2.count;
-    return /*#__PURE__*/React__default.createElement(CategoryItem, {
-      count: count,
-      isActive: currentCategory.id === id,
-      key: id,
-      label: name,
-      setCurrentCategory: function setCurrentCategory() {
-        return _setCurrentCategory({
-          id: id,
-          name: name
-        });
-      }
-    });
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "h-screen w-full overflow-y-auto py-8 pl-5 pr-4 md:pl-8 md:pr-20 xl:px-20",
-    ref: rootRef
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex-grow space-y-6"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-5 xl:gap-6 2xl:grid-cols-4"
-  }, /*#__PURE__*/React__default.createElement(BlankCard, {
-    description: t("neetoTemplate.templates.blankCard.description"),
-    disabled: isCreating,
-    icon: isCreating ? Spinner : SvgCustom,
-    title: t("neetoTemplate.templates.blankCard.title"),
-    onClick: onCreate
-  }), templates.map(function (template, index) {
-    return /*#__PURE__*/React__default.createElement(Card, {
-      afterCreate: afterCreate,
-      refetchResource: refetchResource,
-      template: template,
-      key: index,
-      onClick: function onClick() {
-        return handleCardClick(template);
-      }
-    });
-  })), hasNextPage && /*#__PURE__*/React__default.createElement("div", {
-    className: "my-10 text-center",
-    ref: sentryRef
-  }, /*#__PURE__*/React__default.createElement(Spinner, null)))));
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "sticky left-0 top-0 w-52 flex-shrink-0 space-y-8 py-6 pl-4 md:w-72 md:pl-10 lg:w-80 xl:pl-16",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsx(Typography, {
+            "data-cy": "create-new-form-title",
+            style: "h2",
+            weight: "semibold",
+            children: t("neetoTemplate.templates.createNewEntity")
+          }), /*#__PURE__*/jsx(Typography, {
+            lineHeight: "normal",
+            style: "body2",
+            children: t("neetoTemplate.templates.description")
+          })]
+        }), /*#__PURE__*/jsx(Search, {
+          autoFocus: true,
+          disableTrimOnBlur: true,
+          "data-cy": "template-search-input",
+          placeholder: t("neetoTemplate.templates.search"),
+          onSearch: function onSearch(value) {
+            return setSearchTerm(value);
+          }
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "space-y-3",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "uppercase",
+          "data-cy": "template-categories-label",
+          style: "h6",
+          children: t("neetoTemplate.templates.categories")
+        }), /*#__PURE__*/jsx("div", {
+          className: "space-y-2",
+          children: categories.map(function (_ref2) {
+            var id = _ref2.id,
+              name = _ref2.name,
+              count = _ref2.count;
+            return /*#__PURE__*/createElement(CategoryItem, {
+              count: count,
+              isActive: currentCategory.id === id,
+              key: id,
+              label: name,
+              setCurrentCategory: function setCurrentCategory() {
+                return _setCurrentCategory({
+                  id: id,
+                  name: name
+                });
+              }
+            });
+          })
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "h-screen w-full overflow-y-auto py-8 pl-5 pr-4 md:pl-8 md:pr-20 xl:px-20",
+      ref: rootRef,
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex-grow space-y-6",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-5 xl:gap-6 2xl:grid-cols-4",
+          children: [/*#__PURE__*/jsx(BlankCard, {
+            description: t("neetoTemplate.templates.blankCard.description"),
+            disabled: isCreating,
+            icon: isCreating ? Spinner : SvgCustom,
+            title: t("neetoTemplate.templates.blankCard.title"),
+            onClick: onCreate
+          }), templates.map(function (template, index) {
+            return /*#__PURE__*/createElement(Card, {
+              afterCreate: afterCreate,
+              refetchResource: refetchResource,
+              template: template,
+              key: index,
+              onClick: function onClick() {
+                return handleCardClick(template);
+              }
+            });
+          })]
+        }), hasNextPage && /*#__PURE__*/jsx("div", {
+          className: "my-10 text-center",
+          ref: sentryRef,
+          children: /*#__PURE__*/jsx(Spinner, {})
+        })]
+      })
+    })]
+  });
 };
 
 var Preview$1 = function Preview(_ref) {
@@ -778,7 +819,7 @@ var Preview$1 = function Preview(_ref) {
       refetchResource: refetchResource
     }),
     createTemplate = _useCreateTemplate.mutate,
-    isCreating = _useCreateTemplate.isLoading;
+    isCreating = _useCreateTemplate.isPending;
   var handleCreateTemplate = function handleCreateTemplate() {
     createTemplate({
       id: selectedTemplate.id
@@ -790,39 +831,44 @@ var Preview$1 = function Preview(_ref) {
   };
   var title = selectedTemplate.title,
     previewUrl = selectedTemplate.previewUrl;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "m-auto flex h-full w-full max-w-6xl flex-col space-y-6 py-6"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col items-center justify-between gap-6 pl-4 pr-16 md:flex-row md:pr-20 xl:px-0"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex min-w-0 flex-grow items-center gap-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    className: "flex-shrink-0",
-    "data-cy": "preview-template-back-button",
-    icon: LeftArrow,
-    style: "text",
-    onClick: function onClick() {
-      return setCurrentScreen(TEMPLATE_SCREENS.LIST);
-    }
-  }), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "leading-none",
-    "data-cy": "preview-template-title",
-    style: "h2",
-    weight: "semibold"
-  }, title)), /*#__PURE__*/React__default.createElement(Button, {
-    className: "flex-shrink-0",
-    "data-cy": "preview-use-template-button",
-    disabled: isCreating,
-    label: t("neetoTemplate.templates.editTemplate"),
-    loading: isCreating,
-    onClick: handleCreateTemplate
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-templates-share-preview neeto-ui-rounded-sm sticky top-10"
-  }, /*#__PURE__*/React__default.createElement("iframe", {
-    className: "w-full flex-1 shadow-inner",
-    "data-cy": "iframe-id",
-    src: previewUrl
-  })));
+  return /*#__PURE__*/jsxs("div", {
+    className: "m-auto flex h-full w-full max-w-6xl flex-col space-y-6 py-6",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex flex-col items-center justify-between gap-6 pl-4 pr-16 md:flex-row md:pr-20 xl:px-0",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex min-w-0 flex-grow items-center gap-2",
+        children: [/*#__PURE__*/jsx(Button, {
+          className: "flex-shrink-0",
+          "data-cy": "preview-template-back-button",
+          icon: LeftArrow,
+          style: "text",
+          onClick: function onClick() {
+            return setCurrentScreen(TEMPLATE_SCREENS.LIST);
+          }
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "leading-none",
+          "data-cy": "preview-template-title",
+          style: "h2",
+          weight: "semibold",
+          children: title
+        })]
+      }), /*#__PURE__*/jsx(Button, {
+        className: "flex-shrink-0",
+        "data-cy": "preview-use-template-button",
+        disabled: isCreating,
+        label: t("neetoTemplate.templates.editTemplate"),
+        loading: isCreating,
+        onClick: handleCreateTemplate
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-templates-share-preview neeto-ui-rounded-sm sticky top-10",
+      children: /*#__PURE__*/jsx("iframe", {
+        className: "w-full flex-1 shadow-inner",
+        "data-cy": "iframe-id",
+        src: previewUrl
+      })
+    })]
+  });
 };
 
 var CreateTemplateModal = function CreateTemplateModal(_ref) {
@@ -849,24 +895,25 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
     }, 300); //To accommodate the animation duration.
   };
 
-  return /*#__PURE__*/React__default.createElement(Modal, {
+  return /*#__PURE__*/jsx(Modal, {
     className: "neeto-template-list h-screen w-screen overflow-y-auto",
     isOpen: isOpen,
     size: "fullScreen",
-    onClose: onModalClose
-  }, currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/React__default.createElement(List, {
-    setCurrentScreen: setCurrentScreen,
-    setSelectedTemplate: setSelectedTemplate,
-    isCreating: isCreating,
-    afterCreate: afterCreate,
-    onCreate: onCreate,
-    refetchResource: refetchResource
-  }) : /*#__PURE__*/React__default.createElement(Preview$1, {
-    selectedTemplate: selectedTemplate,
-    setCurrentScreen: setCurrentScreen,
-    afterCreate: afterCreate,
-    refetchResource: refetchResource
-  }));
+    onClose: onModalClose,
+    children: currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/jsx(List, {
+      setCurrentScreen: setCurrentScreen,
+      setSelectedTemplate: setSelectedTemplate,
+      isCreating: isCreating,
+      afterCreate: afterCreate,
+      onCreate: onCreate,
+      refetchResource: refetchResource
+    }) : /*#__PURE__*/jsx(Preview$1, {
+      selectedTemplate: selectedTemplate,
+      setCurrentScreen: setCurrentScreen,
+      afterCreate: afterCreate,
+      refetchResource: refetchResource
+    })
+  });
 };
 
 var create = function create(payload) {
@@ -884,10 +931,12 @@ var templateTagsApi = {
   list: list
 };
 
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateTemplateTag = function useCreateTemplateTag(options) {
-  return useMutation(templateTagsApi.create, _objectSpread$2(_objectSpread$2({}, options), {}, {
+  return useMutation(_objectSpread$3(_objectSpread$3({
+    mutationFn: templateTagsApi.create
+  }, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess;
       refetchTags();
@@ -896,7 +945,10 @@ var useCreateTemplateTag = function useCreateTemplateTag(options) {
   }));
 };
 var useFetchTemplateTags = function useFetchTemplateTags() {
-  return useQuery([QUERY_KEYS.TEMPLATE_TAGS], templateTagsApi.list);
+  return useQuery({
+    queryKey: [QUERY_KEYS.TEMPLATE_TAGS],
+    queryFn: templateTagsApi.list
+  });
 };
 
 var FormikImageUploader = function FormikImageUploader(_ref) {
@@ -912,7 +964,7 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
     setFieldValue("imageSignedId", file.signedId);
     return setValue(file.url);
   };
-  return /*#__PURE__*/React__default.createElement(ImageUploader, {
+  return /*#__PURE__*/jsx(ImageUploader, {
     className: "h-52 w-full md:h-80",
     src: field.value,
     uploadConfig: IMAGE_UPLOAD_CONFIG,
@@ -923,20 +975,22 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
 var PageWrapper = function PageWrapper(_ref) {
   var children = _ref.children,
     className = _ref.className;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("w-full flex-col", className)
-  }, children);
+  return /*#__PURE__*/jsx("div", {
+    className: classnames("w-full flex-col", className),
+    children: children
+  });
 };
 var PageHeader = function PageHeader(_ref2) {
   var title = _ref2.title,
     breadcrumbs = _ref2.breadcrumbs;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full px-6"
-  }, /*#__PURE__*/React__default.createElement(Header, {
-    breadcrumbs: breadcrumbs,
-    size: "small",
-    title: title
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full px-6",
+    children: /*#__PURE__*/jsx(Header, {
+      breadcrumbs: breadcrumbs,
+      size: "small",
+      title: title
+    })
+  });
 };
 var customPropEqualityCheck = function customPropEqualityCheck(prevProps, nextProps) {
   return prevProps.title === nextProps.title && prevProps.breadcrumbs === nextProps.breadcrumbs;
@@ -946,13 +1000,17 @@ var PageContent = function PageContent(_ref3) {
   var children = _ref3.children,
     _ref3$className = _ref3.className,
     className = _ref3$className === void 0 ? "" : _ref3$className;
-  return /*#__PURE__*/React__default.createElement(Scrollable, {
-    className: "w-full px-6 pb-6"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(["mx-auto max-w-7xl", className])
-  }, children));
+  return /*#__PURE__*/jsx(Scrollable, {
+    className: "w-full px-6 pb-6",
+    children: /*#__PURE__*/jsx("div", {
+      className: classnames(["mx-auto max-w-7xl", className]),
+      children: children
+    })
+  });
 };
 
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Tags = function Tags(_ref) {
   var allTags = _ref.allTags,
     selectedTags = _ref.selectedTags,
@@ -984,44 +1042,52 @@ var Tags = function Tags(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: className
-  }, labelProps.label && /*#__PURE__*/React__default.createElement(Label, labelProps, labelProps.label), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border p-4"
-  }, /*#__PURE__*/React__default.createElement(TagsComponent, {
-    allTags: allTags,
-    selectedTags: selectedTags,
-    buttonProps: {
-      loading: isLoading,
-      disabled: isLoading,
-      iconPosition: "left"
-    },
-    onTagCreate: handleTagCreate,
-    onTagDelete: handleTagRemove,
-    onTagSelect: handleTagSelect
-  })));
+  return /*#__PURE__*/jsxs("div", {
+    className: className,
+    children: [labelProps.label && /*#__PURE__*/jsx(Label, _objectSpread$2(_objectSpread$2({}, labelProps), {}, {
+      children: labelProps.label
+    })), /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border p-4",
+      children: /*#__PURE__*/jsx(TagsComponent, {
+        allTags: allTags,
+        selectedTags: selectedTags,
+        buttonProps: {
+          loading: isLoading,
+          disabled: isLoading,
+          iconPosition: "left"
+        },
+        onTagCreate: handleTagCreate,
+        onTagDelete: handleTagRemove,
+        onTagSelect: handleTagSelect
+      })
+    })]
+  });
 };
 
 var Preview = function Preview(_ref) {
   var template = _ref.template,
     imageUrl = _ref.imageUrl;
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: "neeto-template neeto-ui-bg-white outline-none neeto-ui-shadow-sm hover:neeto-ui-border-gray-400 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex cursor-pointer flex-col overflow-hidden border transition-colors duration-300 ease-in-out",
-    tabIndex: 0
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-template__header"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    className: "neeto-template__image",
-    "data-cy": "template-image-preview",
-    src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-2 py-1.5"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800",
-    "data-cy": "template-title-text",
-    lineHeight: "normal",
-    style: "body2"
-  }, template.title)));
+    tabIndex: 0,
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-template__header",
+      children: /*#__PURE__*/jsx("img", {
+        className: "neeto-template__image",
+        "data-cy": "template-image-preview",
+        src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-2 py-1.5",
+      children: /*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-800",
+        "data-cy": "template-title-text",
+        lineHeight: "normal",
+        style: "body2",
+        children: template.title
+      })
+    })]
+  });
 };
 
 var buildSelectOptionsBy = function buildSelectOptionsBy(labelField) {
@@ -1070,10 +1136,10 @@ var TemplateSettings = function TemplateSettings(_ref) {
       resourceId: resourceId
     }),
     updateTemplate = _useUpdateTemplate.mutate,
-    isUpdatingTemplate = _useUpdateTemplate.isLoading;
+    isUpdatingTemplate = _useUpdateTemplate.isPending;
   var _useCreateTemplateTag = useCreateTemplateTag(),
     createTemplateTag = _useCreateTemplateTag.mutate,
-    isCreatingTags = _useCreateTemplateTag.isLoading;
+    isCreatingTags = _useCreateTemplateTag.isPending;
   var _useFetchTemplateTags = useFetchTemplateTags(),
     _useFetchTemplateTags2 = _useFetchTemplateTags.data,
     templateTags = _useFetchTemplateTags2 === void 0 ? {} : _useFetchTemplateTags2,
@@ -1090,74 +1156,88 @@ var TemplateSettings = function TemplateSettings(_ref) {
   }, data), {}, {
     tags: tags
   });
-  return /*#__PURE__*/React__default.createElement(PageWrapper, {
-    className: className
-  }, /*#__PURE__*/React__default.createElement(MemoizedPageHeader, {
-    breadcrumbs: breadcrumbs,
-    title: t("neetoTemplate.templateSettings.title")
-  }), /*#__PURE__*/React__default.createElement(PageContent, {
-    className: classnames({
-      "min-h-0": !isLoading,
-      "h-full": isLoading
-    })
-  }, isLoading ? /*#__PURE__*/React__default.createElement(PageLoader, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "mb-1",
-    "data-cy": "thank-you-action-text",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoTemplate.templateSettings.configureTemplates")), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "mb-2",
-    "data-cy": "thank-you-description-label",
-    style: "body2"
-  }, t("neetoTemplate.templateSettings.subText")), /*#__PURE__*/React__default.createElement(Form, {
-    formikProps: {
-      enableReinitialize: true,
-      initialValues: resourceInitialValues,
-      onSubmit: handleSubmit
-    }
-  }, function (_ref2) {
-    var values = _ref2.values,
-      setFieldValue = _ref2.setFieldValue;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "grid grid-cols-2 gap-8 pt-6"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "space-y-4"
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      className: "mb-3",
-      style: "h4",
-      weight: "semibold"
-    }, t("neetoTemplate.templateSettings.imageLabel")), /*#__PURE__*/React__default.createElement(FormikImageUploader, {
-      name: "imageUrl"
-    }), /*#__PURE__*/React__default.createElement(Tags, {
-      allTags: buildSelectOptionsBy("name", templateTags.tags),
-      className: "space-y-2",
-      isLoading: isCreatingTags,
-      selectedTags: values.tags,
-      labelProps: {
-        label: t("neetoTemplate.templateSettings.categoryLabel")
-      },
-      onCreate: createTemplateTag,
-      onUpdate: function onUpdate(tags) {
-        return setFieldValue("tags", tags);
-      }
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "mt-12 flex flex-row items-center justify-start"
-    }, /*#__PURE__*/React__default.createElement(ActionBlock, {
-      isSubmitting: isUpdatingTemplate,
-      cancelButtonProps: {
-        to: onCancelTemplatePreview,
-        "data-cy": "reset-changes-button",
-        onClick: noop
-      }
-    }))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Typography, {
-      className: "mb-3",
-      style: "h4",
-      weight: "semibold"
-    }, t("neetoTemplate.templateSettings.previewLabel")), /*#__PURE__*/React__default.createElement(Preview, {
-      imageUrl: values.imageUrl,
-      template: data
-    })));
-  }))));
+  return /*#__PURE__*/jsxs(PageWrapper, {
+    className: className,
+    children: [/*#__PURE__*/jsx(MemoizedPageHeader, {
+      breadcrumbs: breadcrumbs,
+      title: t("neetoTemplate.templateSettings.title")
+    }), /*#__PURE__*/jsx(PageContent, {
+      className: classnames({
+        "min-h-0": !isLoading,
+        "h-full": isLoading
+      }),
+      children: isLoading ? /*#__PURE__*/jsx(PageLoader, {}) : /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "mb-1",
+          "data-cy": "thank-you-action-text",
+          style: "h2",
+          weight: "semibold",
+          children: t("neetoTemplate.templateSettings.configureTemplates")
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "mb-2",
+          "data-cy": "thank-you-description-label",
+          style: "body2",
+          children: t("neetoTemplate.templateSettings.subText")
+        }), /*#__PURE__*/jsx(Form, {
+          formikProps: {
+            enableReinitialize: true,
+            initialValues: resourceInitialValues,
+            onSubmit: handleSubmit
+          },
+          children: function children(_ref2) {
+            var values = _ref2.values,
+              setFieldValue = _ref2.setFieldValue;
+            return /*#__PURE__*/jsxs("div", {
+              className: "grid grid-cols-2 gap-8 pt-6",
+              children: [/*#__PURE__*/jsxs("div", {
+                className: "space-y-4",
+                children: [/*#__PURE__*/jsx(Typography, {
+                  className: "mb-3",
+                  style: "h4",
+                  weight: "semibold",
+                  children: t("neetoTemplate.templateSettings.imageLabel")
+                }), /*#__PURE__*/jsx(FormikImageUploader, {
+                  name: "imageUrl"
+                }), /*#__PURE__*/jsx(Tags, {
+                  allTags: buildSelectOptionsBy("name", templateTags.tags),
+                  className: "space-y-2",
+                  isLoading: isCreatingTags,
+                  selectedTags: values.tags,
+                  labelProps: {
+                    label: t("neetoTemplate.templateSettings.categoryLabel")
+                  },
+                  onCreate: createTemplateTag,
+                  onUpdate: function onUpdate(tags) {
+                    return setFieldValue("tags", tags);
+                  }
+                }), /*#__PURE__*/jsx("div", {
+                  className: "mt-12 flex flex-row items-center justify-start",
+                  children: /*#__PURE__*/jsx(ActionBlock, {
+                    isSubmitting: isUpdatingTemplate,
+                    cancelButtonProps: {
+                      to: onCancelTemplatePreview,
+                      "data-cy": "reset-changes-button",
+                      onClick: noop
+                    }
+                  })
+                })]
+              }), /*#__PURE__*/jsxs("div", {
+                children: [/*#__PURE__*/jsx(Typography, {
+                  className: "mb-3",
+                  style: "h4",
+                  weight: "semibold",
+                  children: t("neetoTemplate.templateSettings.previewLabel")
+                }), /*#__PURE__*/jsx(Preview, {
+                  imageUrl: values.imageUrl,
+                  template: data
+                })]
+              })]
+            });
+          }
+        })]
+      })
+    })]
+  });
 };
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -1201,9 +1281,10 @@ var TAG_TYPES = [{
     width: 300,
     sorter: true,
     render: function render(templatesCount) {
-      return templatesCount !== 0 ? /*#__PURE__*/React__default.createElement(Typography, {
-        style: "body1"
-      }, " ", templatesCount, " ") : "-";
+      return templatesCount !== 0 ? /*#__PURE__*/jsxs(Typography, {
+        style: "body1",
+        children: [" ", templatesCount, " "]
+      }) : "-";
     }
   }]
 }];
@@ -1217,12 +1298,18 @@ var TemplateTags = function TemplateTags(_ref) {
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var queryClient = useQueryClient();
   var invalidateTags = function invalidateTags() {
-    queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE_TAGS);
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEYS.TEMPLATE_TAGS]
+    });
   };
   var invalidateTagsAndTemplates = function invalidateTagsAndTemplates() {
     invalidateTags();
-    queryClient.invalidateQueries(QUERY_KEYS.TEMPLATES_LIST);
-    queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE);
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEYS.TEMPLATES_LIST]
+    });
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEYS.TEMPLATE]
+    });
   };
   var config = _objectSpread({
     tagTypes: TAG_TYPES,
@@ -1252,7 +1339,7 @@ var TemplateTags = function TemplateTags(_ref) {
       }
     }
   }, otherProps);
-  return /*#__PURE__*/React__default.createElement(NeetoTags, {
+  return /*#__PURE__*/jsx(NeetoTags, {
     config: config
   });
 };