@bigbinary/neeto-templates-frontend 2.0.1 → 2.1.0

package/dist/TemplateTags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateTags.js","sources":["../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js","../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js","../app/javascript/src/components/TemplateTags/constants.jsx","../app/javascript/src/components/TemplateTags/index.jsx"],"sourcesContent":["export default function _objectWithoutPropertiesLoose(source, excluded) {\n  if (source == null) return {};\n  var target = {};\n  var sourceKeys = Object.keys(source);\n  var key, i;\n  for (i = 0; i < sourceKeys.length; i++) {\n    key = sourceKeys[i];\n    if (excluded.indexOf(key) >= 0) continue;\n    target[key] = source[key];\n  }\n  return target;\n}","import objectWithoutPropertiesLoose from \"./objectWithoutPropertiesLoose.js\";\nexport default function _objectWithoutProperties(source, excluded) {\n  if (source == null) return {};\n  var target = objectWithoutPropertiesLoose(source, excluded);\n  var key, i;\n  if (Object.getOwnPropertySymbols) {\n    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n    for (i = 0; i < sourceSymbolKeys.length; i++) {\n      key = sourceSymbolKeys[i];\n      if (excluded.indexOf(key) >= 0) continue;\n      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n      target[key] = source[key];\n    }\n  }\n  return target;\n}","import React from \"react\";\n\nimport { t } from \"i18next\";\nimport { Typography } from \"neetoui\";\n\nimport { NEETO_TEMPLATES_URL } from \"src/constants\";\n\nexport const TAG_TYPES = [\n  {\n    id: 1,\n    label: t(\"neetoTemplate.templatesTags.template\"),\n    url: `${NEETO_TEMPLATES_URL}/tags/template_tags`,\n    columns: [\n      {\n        title: t(\"neetoTemplate.templatesTags.numberOfActiveTemplates\"),\n        key: \"templates_count\",\n        dataIndex: \"templatesCount\",\n        align: \"center\",\n        width: 300,\n        sorter: true,\n        render: templatesCount =>\n          templatesCount !== 0 ? (\n            <Typography style=\"body1\"> {templatesCount} </Typography>\n          ) : (\n            \"-\"\n          ),\n      },\n    ],\n  },\n];\n","import React from \"react\";\n\nimport { NeetoTags } from \"@bigbinary/neeto-tags-frontend\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { noop } from \"neetocist\";\n\nimport { QUERY_KEYS } from \"src/constants/query\";\n\nimport { TAG_TYPES } from \"./constants\";\n\nconst TemplateTags = ({ breadcrumbs, tagsPath, ...otherProps }) => {\n  const queryClient = useQueryClient();\n\n  const invalidateTags = () => {\n    queryClient.invalidateQueries({\n      queryKey: [QUERY_KEYS.TEMPLATE_TAGS],\n    });\n  };\n\n  const invalidateTagsAndTemplates = () => {\n    invalidateTags();\n    queryClient.invalidateQueries({\n      queryKey: [QUERY_KEYS.TEMPLATES_LIST],\n    });\n\n    queryClient.invalidateQueries({\n      queryKey: [QUERY_KEYS.TEMPLATE],\n    });\n  };\n\n  const config = {\n    tagTypes: TAG_TYPES,\n    tagsMergable: true,\n    breadcrumbs,\n    displayMenu: false,\n    tagsPath,\n    onTagRowClick: noop,\n    createTags: { onSuccess: { callback: invalidateTags } },\n    updateTags: { onSuccess: { callback: invalidateTagsAndTemplates } },\n    deleteTags: { onSuccess: { callback: invalidateTagsAndTemplates } },\n    mergeTags: { onSuccess: { callback: invalidateTagsAndTemplates } },\n    ...otherProps,\n  };\n\n  return <NeetoTags {...{ config }} />;\n};\n\nexport default TemplateTags;\n"],"names":["objectWithoutPropertiesLoose","TAG_TYPES","id","label","t","url","concat","NEETO_TEMPLATES_URL","columns","title","key","dataIndex","align","width","sorter","render","templatesCount","_jsxs","Typography","style","children","TemplateTags","_ref","breadcrumbs","tagsPath","otherProps","_objectWithoutProperties","_excluded","queryClient","useQueryClient","invalidateTags","invalidateQueries","queryKey","QUERY_KEYS","TEMPLATE_TAGS","invalidateTagsAndTemplates","TEMPLATES_LIST","TEMPLATE","config","_objectSpread","tagTypes","tagsMergable","displayMenu","onTagRowClick","noop","createTags","onSuccess","callback","updateTags","deleteTags","mergeTags","_jsx","NeetoTags"],"mappings":"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"}

package/dist/cjs/CreateTemplateModal.js

@@ -0,0 +1,664 @@
+'use strict';
+
+var useTemplatesApi = require('../useTemplatesApi-f81c070d.js');
+var React = require('react');
+var neetoCist = require('@bigbinary/neeto-cist');
+var Modal = require('@bigbinary/neetoui/Modal');
+var query = require('../query-96f06430.js');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var Search = require('@bigbinary/neeto-molecules/Search');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var Typography = require('@bigbinary/neetoui/Typography');
+var reactI18next = require('react-i18next');
+var jsxRuntime = require('react/jsx-runtime');
+var classnames = require('classnames');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var ResponsiveDevicePicker = require('@bigbinary/neeto-molecules/ResponsiveDevicePicker');
+var Button = require('@bigbinary/neetoui/Button');
+require('@bigbinary/neeto-tags-frontend');
+require('@tanstack/react-query');
+require('ramda');
+require('axios');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Modal__default = /*#__PURE__*/_interopDefaultLegacy(Modal);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ResponsiveDevicePicker__default = /*#__PURE__*/_interopDefaultLegacy(ResponsiveDevicePicker);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+
+var TEMPLATE_SCREENS = {
+  LIST: "List",
+  PREVIEW: "Preview"
+};
+var DEFAULT_CATEGORY = {
+  id: "all",
+  name: "All"
+};
+var INFINITE_SCROLL_DELAY = 500;
+var RESPONSIVE_DEVICES = {
+  DESKTOP: "desktop",
+  TABLET: "tablet",
+  MOBILE: "mobile"
+};
+
+function createObserverCache() {
+  var cachesByRoot = new Map();
+
+  function getObserver(_ref) {
+    var root = _ref.root,
+        rootMargin = _ref.rootMargin,
+        threshold = _ref.threshold;
+    var cacheByRoot = cachesByRoot.get(root);
+
+    if (!cacheByRoot) {
+      cacheByRoot = new Map();
+      cachesByRoot.set(root, cacheByRoot);
+    }
+
+    var cacheKey = JSON.stringify({
+      rootMargin: rootMargin,
+      threshold: threshold
+    });
+    var cachedObserver = cacheByRoot.get(cacheKey);
+
+    if (!cachedObserver) {
+      var entryCallbacks = new Map();
+      var observer = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          var callback = entryCallbacks.get(entry.target);
+          callback == null ? void 0 : callback(entry);
+        });
+      }, {
+        root: root,
+        rootMargin: rootMargin,
+        threshold: threshold
+      });
+      cachedObserver = {
+        observer: observer,
+        entryCallbacks: entryCallbacks
+      };
+      cacheByRoot.set(cacheKey, cachedObserver);
+    }
+
+    return {
+      observe: function observe(node, callback) {
+        var _cachedObserver, _cachedObserver2;
+
+        (_cachedObserver = cachedObserver) == null ? void 0 : _cachedObserver.entryCallbacks.set(node, callback);
+        (_cachedObserver2 = cachedObserver) == null ? void 0 : _cachedObserver2.observer.observe(node);
+      },
+      unobserve: function unobserve(node) {
+        var _cachedObserver3, _cachedObserver4;
+
+        (_cachedObserver3 = cachedObserver) == null ? void 0 : _cachedObserver3.entryCallbacks["delete"](node);
+        (_cachedObserver4 = cachedObserver) == null ? void 0 : _cachedObserver4.observer.unobserve(node);
+      }
+    };
+  }
+
+  return {
+    getObserver: getObserver
+  };
+}
+
+var DEFAULT_ROOT_MARGIN = '0px';
+var DEFAULT_THRESHOLD = [0];
+var observerCache = /*#__PURE__*/createObserverCache(); // For more info:
+// https://developers.google.com/web/updates/2016/04/intersectionobserver
+// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+
+function useIntersectionObserver(args) {
+  var _args$rootMargin, _args$threshold;
+
+  var rootMargin = (_args$rootMargin = args == null ? void 0 : args.rootMargin) != null ? _args$rootMargin : DEFAULT_ROOT_MARGIN;
+  var threshold = (_args$threshold = args == null ? void 0 : args.threshold) != null ? _args$threshold : DEFAULT_THRESHOLD;
+  var nodeRef = React.useRef(null);
+  var rootRef = React.useRef(null);
+  var observerRef = React.useRef(null);
+
+  var _useState = React.useState(),
+      entry = _useState[0],
+      setEntry = _useState[1];
+
+  var observe = React.useCallback(function () {
+    var node = nodeRef.current;
+
+    if (!node) {
+      setEntry(undefined);
+      return;
+    }
+
+    var observer = observerCache.getObserver({
+      root: rootRef.current,
+      rootMargin: rootMargin,
+      threshold: threshold
+    });
+    observer.observe(node, function (observedEntry) {
+      setEntry(observedEntry);
+    });
+    observerRef.current = observer;
+  }, [rootMargin, threshold]);
+  var unobserve = React.useCallback(function () {
+    var currentObserver = observerRef.current;
+    var node = nodeRef.current;
+
+    if (node) {
+      currentObserver == null ? void 0 : currentObserver.unobserve(node);
+    }
+
+    observerRef.current = null;
+  }, []); // React will call the ref callback with the DOM element when the component mounts,
+  // and call it with null when it unmounts.
+  // So, we don't need an useEffect etc to unobserve nodes.
+  // When nodeRef.current is null, it will be unobserved and observe function
+  // won't do anything.
+
+  var refCallback = React.useCallback(function (node) {
+    unobserve();
+    nodeRef.current = node;
+    observe();
+  }, [observe, unobserve]);
+  var rootRefCallback = React.useCallback(function (rootNode) {
+    unobserve();
+    rootRef.current = rootNode;
+    observe();
+  }, [observe, unobserve]);
+  return [refCallback, {
+    entry: entry,
+    rootRef: rootRefCallback
+  }];
+}
+
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+
+function useTrackVisibility(args) {
+  var _result$entry;
+
+  var _useIntersectionObser = useIntersectionObserver(args),
+      ref = _useIntersectionObser[0],
+      result = _useIntersectionObser[1];
+
+  var isVisible = Boolean((_result$entry = result.entry) == null ? void 0 : _result$entry.isIntersecting);
+
+  var _useState = React.useState(isVisible),
+      wasEverVisible = _useState[0],
+      setWasEverVisible = _useState[1];
+
+  if (isVisible && !wasEverVisible) {
+    setWasEverVisible(true);
+  }
+
+  return [ref, _extends$1({}, result, {
+    isVisible: isVisible,
+    wasEverVisible: wasEverVisible
+  })];
+}
+
+var DEFAULT_DELAY_IN_MS = 100;
+
+function useInfiniteScroll(_ref) {
+  var loading = _ref.loading,
+      hasNextPage = _ref.hasNextPage,
+      onLoadMore = _ref.onLoadMore,
+      rootMargin = _ref.rootMargin,
+      disabled = _ref.disabled,
+      _ref$delayInMs = _ref.delayInMs,
+      delayInMs = _ref$delayInMs === void 0 ? DEFAULT_DELAY_IN_MS : _ref$delayInMs;
+
+  var _useTrackVisibility = useTrackVisibility({
+    rootMargin: rootMargin
+  }),
+      ref = _useTrackVisibility[0],
+      _useTrackVisibility$ = _useTrackVisibility[1],
+      rootRef = _useTrackVisibility$.rootRef,
+      isVisible = _useTrackVisibility$.isVisible;
+
+  var shouldLoadMore = !disabled && !loading && isVisible && hasNextPage; // eslint-disable-next-line consistent-return
+
+  React.useEffect(function () {
+    if (shouldLoadMore) {
+      // When we trigger 'onLoadMore' and new items are added to the list,
+      // right before they become rendered on the screen, 'loading' becomes false
+      // and 'isVisible' can be true for a brief time, based on the scroll position.
+      // So, it triggers 'onLoadMore' just after the first one is finished.
+      // We use a small delay here to prevent this kind of situations.
+      // It can be configured by hook args.
+      var timer = setTimeout(function () {
+        onLoadMore();
+      }, delayInMs);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+  }, [onLoadMore, shouldLoadMore, delayInMs]);
+  return [ref, {
+    rootRef: rootRef
+  }];
+}
+
+var _rect, _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const SvgCustom = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 46,
+  height: 46,
+  fill: "none"
+}, props), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 40,
+  height: 40,
+  x: 3,
+  y: 2,
+  fill: "#008068",
+  rx: 2
+})), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#fff",
+  fillRule: "evenodd",
+  d: "M23.75 16a.75.75 0 0 0-1.5 0v5.25H17a.75.75 0 0 0 0 1.5h5.25V28a.75.75 0 0 0 1.5 0v-5.25H29a.75.75 0 0 0 0-1.5h-5.25V16Z",
+  clipRule: "evenodd"
+})));
+
+var BlankCard = function BlankCard(_ref) {
+  var Icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return /*#__PURE__*/jsxRuntime.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 : neetoCist.noop,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-text-primary-500 mb-4",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        size: 40
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "text-center",
+      lineHeight: "normal",
+      style: "h5",
+      weight: "semibold",
+      children: title
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-gray-600 text-center",
+      lineHeight: "leading-4",
+      style: "body3",
+      children: description
+    })]
+  });
+};
+
+var Card = function Card(_ref) {
+  var template = _ref.template,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    onClick: onClick,
+    className: "neeto-template neeto-template-thumbnail neeto-ui-bg-white neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 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,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-template__header relative overflow-hidden",
+      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+      className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-3 py-1.5",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-template-thumbnail__title line-clamp-2",
+        "data-cy": "template-card-title",
+        lineHeight: "normal",
+        style: "h5",
+        children: template.title
+      })
+    })]
+  });
+};
+
+var CategoryItem = function CategoryItem(_ref) {
+  var label = _ref.label,
+    count = _ref.count,
+    isActive = _ref.isActive,
+    setCurrentCategory = _ref.setCurrentCategory;
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    "data-cy": "category-".concat(utils.joinHyphenCase(label)),
+    tabIndex: 0,
+    className: classnames__default["default"]("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,
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      children: count
+    })]
+  });
+};
+
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { query._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(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,
+    onCreate = _ref.onCreate,
+    isCreating = _ref.isCreating,
+    afterCreate = _ref.afterCreate,
+    refetchResource = _ref.refetchResource;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(DEFAULT_CATEGORY),
+    _useState2 = useTemplatesApi._slicedToArray(_useState, 2),
+    currentCategory = _useState2[0],
+    _setCurrentCategory = _useState2[1];
+  var _useState3 = React.useState(""),
+    _useState4 = useTemplatesApi._slicedToArray(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var _useFetchTemplates = useTemplatesApi.useFetchTemplates({
+      searchTerm: searchTerm,
+      category: currentCategory
+    }),
+    _useFetchTemplates$ha = _useFetchTemplates.hasNextPage,
+    hasNextPage = _useFetchTemplates$ha === void 0 ? false : _useFetchTemplates$ha,
+    fetchNextPage = _useFetchTemplates.fetchNextPage,
+    isTemplatesLoading = _useFetchTemplates.isLoading,
+    _useFetchTemplates$da = _useFetchTemplates.data,
+    data = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da;
+  var _useInfiniteScroll = useInfiniteScroll({
+      loading: isTemplatesLoading,
+      hasNextPage: hasNextPage,
+      onLoadMore: fetchNextPage,
+      rootMargin: "0px 0px 700px 0px",
+      delayInMs: INFINITE_SCROLL_DELAY
+    }),
+    _useInfiniteScroll2 = useTemplatesApi._slicedToArray(_useInfiniteScroll, 2),
+    sentryRef = _useInfiniteScroll2[0],
+    rootRef = _useInfiniteScroll2[1].rootRef;
+  var handleCardClick = function handleCardClick(template) {
+    setCurrentScreen(TEMPLATE_SCREENS.PREVIEW);
+    setSelectedTemplate(template);
+  };
+  if (isTemplatesLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {});
+  }
+  var _data$tags = data.tags,
+    tags = _data$tags === void 0 ? [] : _data$tags,
+    _data$templates = data.templates,
+    templates = _data$templates === void 0 ? [] : _data$templates,
+    _data$templatesCount = data.templatesCount,
+    templatesCount = _data$templatesCount === void 0 ? 0 : _data$templatesCount;
+  var categories = [_objectSpread(_objectSpread({}, DEFAULT_CATEGORY), {}, {
+    count: templatesCount
+  })].concat(useTemplatesApi._toConsumableArray(tags));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start",
+    children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            "data-cy": "create-new-form-title",
+            style: "h2",
+            weight: "semibold",
+            children: t("neetoTemplate.templates.createNewEntity")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            lineHeight: "normal",
+            style: "body2",
+            children: t("neetoTemplate.templates.description")
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {
+          autoFocus: true,
+          disableTrimOnBlur: true,
+          "data-cy": "template-search-input",
+          placeholder: t("neetoTemplate.templates.search"),
+          onSearch: function onSearch(value) {
+            return setSearchTerm(value);
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "uppercase",
+          "data-cy": "template-categories-label",
+          style: "h6",
+          children: t("neetoTemplate.templates.categories")
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-2",
+          children: categories.map(function (_ref2) {
+            var id = _ref2.id,
+              name = _ref2.name,
+              count = _ref2.count;
+            return /*#__PURE__*/React.createElement(CategoryItem, {
+              count: count,
+              isActive: currentCategory.id === id,
+              key: id,
+              label: name,
+              setCurrentCategory: function setCurrentCategory() {
+                return _setCurrentCategory({
+                  id: id,
+                  name: name
+                });
+              }
+            });
+          })
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+        className: "flex-grow space-y-6",
+        children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(BlankCard, {
+            description: t("neetoTemplate.templates.blankCard.description"),
+            disabled: isCreating,
+            icon: isCreating ? Spinner__default["default"] : SvgCustom,
+            title: t("neetoTemplate.templates.blankCard.title"),
+            onClick: onCreate
+          }), templates.map(function (template, index) {
+            return /*#__PURE__*/React.createElement(Card, {
+              afterCreate: afterCreate,
+              refetchResource: refetchResource,
+              template: template,
+              key: index,
+              onClick: function onClick() {
+                return handleCardClick(template);
+              }
+            });
+          })]
+        }), hasNextPage && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "my-10 text-center",
+          ref: sentryRef,
+          children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+        })]
+      })
+    })]
+  });
+};
+
+var Preview = function Preview(_ref) {
+  var selectedTemplate = _ref.selectedTemplate,
+    setCurrentScreen = _ref.setCurrentScreen,
+    afterCreate = _ref.afterCreate,
+    refetchResource = _ref.refetchResource;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useBreakpoints = reactUtils.useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var _useCreateTemplate = useTemplatesApi.useCreateTemplate(),
+    createTemplate = _useCreateTemplate.mutate,
+    isCreating = _useCreateTemplate.isPending;
+  var _useState = React.useState(RESPONSIVE_DEVICES.DESKTOP),
+    _useState2 = useTemplatesApi._slicedToArray(_useState, 2),
+    selectedDevice = _useState2[0],
+    setSelectedDevice = _useState2[1];
+  var handleCreateTemplate = function handleCreateTemplate() {
+    createTemplate({
+      id: selectedTemplate.id
+    }, {
+      onSuccess: function onSuccess(response) {
+        afterCreate(response);
+        refetchResource();
+      }
+    });
+  };
+  var title = selectedTemplate.title,
+    previewUrl = selectedTemplate.previewUrl;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-templates-full-page-preview flex h-full w-full flex-col",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-templates-full-page-preview__header neeto-ui-border-gray-200 border-b px-4",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "mx-auto flex w-full max-w-6xl items-center justify-between py-[9px]",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-1/3",
+          children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            className: "truncate leading-tight",
+            "data-cy": "preview-template-title",
+            style: "h3",
+            weight: "semibold",
+            children: title
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "hidden flex-shrink-0 lg:flex",
+          children: /*#__PURE__*/jsxRuntime.jsx(ResponsiveDevicePicker__default["default"], {
+            selectedDevice: selectedDevice,
+            onDeviceChange: setSelectedDevice
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex w-1/3 items-center justify-end gap-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            className: "flex-shrink-0",
+            "data-cy": "preview-template-back-button",
+            style: "secondary",
+            label: isSize("mobile") ? t("neetoTemplate.templates.back") : t("neetoTemplate.templates.backToTemplates"),
+            onClick: function onClick() {
+              return setCurrentScreen(TEMPLATE_SCREENS.LIST);
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            className: "flex-shrink-0",
+            "data-cy": "preview-use-template-button",
+            disabled: isCreating,
+            label: t("neetoTemplate.templates.editTemplate"),
+            loading: isCreating,
+            onClick: handleCreateTemplate
+          })]
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-bg-gray-200 neeto-templates-full-page-preview__holder-wrapper min-h-0 flex-grow",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"]("neeto-templates-full-page-preview__holder m-auto", {
+          "neeto-templates-full-page-preview__holder--desktop": selectedDevice === RESPONSIVE_DEVICES.DESKTOP,
+          "neeto-templates-full-page-preview__holder--tablet": selectedDevice === RESPONSIVE_DEVICES.TABLET,
+          "neeto-templates-full-page-preview__holder--mobile": selectedDevice === RESPONSIVE_DEVICES.MOBILE
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-templates-full-page-preview__device-border h-full w-full",
+          children: /*#__PURE__*/jsxRuntime.jsx("iframe", {
+            className: "neeto-templates-full-page-preview__iframe h-full w-full border-none",
+            "data-cy": "iframe-id",
+            src: previewUrl
+          })
+        })
+      })
+    })]
+  });
+};
+
+var CreateTemplateModal = function CreateTemplateModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    isCreating = _ref.isCreating,
+    refetchResource = _ref.refetchResource,
+    _ref$onCreate = _ref.onCreate,
+    onCreate = _ref$onCreate === void 0 ? neetoCist.noop : _ref$onCreate,
+    _ref$afterCreate = _ref.afterCreate,
+    afterCreate = _ref$afterCreate === void 0 ? neetoCist.noop : _ref$afterCreate;
+  var _useState = React.useState(TEMPLATE_SCREENS.LIST),
+    _useState2 = useTemplatesApi._slicedToArray(_useState, 2),
+    currentScreen = _useState2[0],
+    setCurrentScreen = _useState2[1];
+  var _useState3 = React.useState({}),
+    _useState4 = useTemplatesApi._slicedToArray(_useState3, 2),
+    selectedTemplate = _useState4[0],
+    setSelectedTemplate = _useState4[1];
+  var onModalClose = function onModalClose() {
+    onClose();
+    setTimeout(function () {
+      setCurrentScreen(TEMPLATE_SCREENS.LIST);
+    }, 300); //To accommodate the animation duration.
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(Modal__default["default"], {
+    isOpen: isOpen,
+    className: "neeto-template-list h-screen w-screen overflow-y-auto",
+    closeButton: currentScreen === TEMPLATE_SCREENS.LIST,
+    size: "fullScreen",
+    onClose: onModalClose,
+    children: currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/jsxRuntime.jsx(List, {
+      afterCreate: afterCreate,
+      isCreating: isCreating,
+      onCreate: onCreate,
+      refetchResource: refetchResource,
+      setCurrentScreen: setCurrentScreen,
+      setSelectedTemplate: setSelectedTemplate
+    }) : /*#__PURE__*/jsxRuntime.jsx(Preview, {
+      afterCreate: afterCreate,
+      refetchResource: refetchResource,
+      selectedTemplate: selectedTemplate,
+      setCurrentScreen: setCurrentScreen
+    })
+  });
+};
+
+module.exports = CreateTemplateModal;
+//# sourceMappingURL=CreateTemplateModal.js.map