@bigbinary/neeto-templates-frontend 2.0.1 → 2.1.0

package/dist/CreateTemplateModal.js

@@ -0,0 +1,633 @@
+import { _ as _slicedToArray, u as useFetchTemplates, a as _toConsumableArray, b as useCreateTemplate } from './useTemplatesApi-81e0a50f.js';
+import * as React from 'react';
+import { useState, useRef, useCallback, useEffect, createElement } from 'react';
+import { noop } from '@bigbinary/neeto-cist';
+import Modal from '@bigbinary/neetoui/Modal';
+import { _ as _defineProperty } from './query-ddc455b2.js';
+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 { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
+import { useBreakpoints } from '@bigbinary/neeto-commons-frontend/react-utils';
+import ResponsiveDevicePicker from '@bigbinary/neeto-molecules/ResponsiveDevicePicker';
+import Button from '@bigbinary/neetoui/Button';
+import '@bigbinary/neeto-tags-frontend';
+import '@tanstack/react-query';
+import 'ramda';
+import 'axios';
+
+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 = useRef(null);
+  var rootRef = useRef(null);
+  var observerRef = useRef(null);
+
+  var _useState = useState(),
+      entry = _useState[0],
+      setEntry = _useState[1];
+
+  var observe = 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 = 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 = useCallback(function (node) {
+    unobserve();
+    nodeRef.current = node;
+    observe();
+  }, [observe, unobserve]);
+  var rootRefCallback = 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 = 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
+
+  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.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 46,
+  height: 46,
+  fill: "none"
+}, props), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
+  width: 40,
+  height: 40,
+  x: 3,
+  y: 2,
+  fill: "#008068",
+  rx: 2
+})), _path || (_path = /*#__PURE__*/React.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 ? noop : _ref$onClick,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  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,
+    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 Card = function Card(_ref) {
+  var template = _ref.template,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/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__*/jsx("div", {
+      className: "neeto-template__header relative overflow-hidden",
+      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__*/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__*/jsx(Typography, {
+        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__*/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,
+    children: [/*#__PURE__*/jsx("span", {
+      children: label
+    }), /*#__PURE__*/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) { _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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(DEFAULT_CATEGORY),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentCategory = _useState2[0],
+    _setCurrentCategory = _useState2[1];
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var _useFetchTemplates = 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 = _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__*/jsx(PageLoader, {});
+  }
+  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(_toConsumableArray(tags));
+  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 = function Preview(_ref) {
+  var selectedTemplate = _ref.selectedTemplate,
+    setCurrentScreen = _ref.setCurrentScreen,
+    afterCreate = _ref.afterCreate,
+    refetchResource = _ref.refetchResource;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var _useCreateTemplate = useCreateTemplate(),
+    createTemplate = _useCreateTemplate.mutate,
+    isCreating = _useCreateTemplate.isPending;
+  var _useState = useState(RESPONSIVE_DEVICES.DESKTOP),
+    _useState2 = _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__*/jsxs("div", {
+    className: "neeto-templates-full-page-preview flex h-full w-full flex-col",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-templates-full-page-preview__header neeto-ui-border-gray-200 border-b px-4",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "mx-auto flex w-full max-w-6xl items-center justify-between py-[9px]",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "w-1/3",
+          children: /*#__PURE__*/jsx(Typography, {
+            className: "truncate leading-tight",
+            "data-cy": "preview-template-title",
+            style: "h3",
+            weight: "semibold",
+            children: title
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: "hidden flex-shrink-0 lg:flex",
+          children: /*#__PURE__*/jsx(ResponsiveDevicePicker, {
+            selectedDevice: selectedDevice,
+            onDeviceChange: setSelectedDevice
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex w-1/3 items-center justify-end gap-2",
+          children: [/*#__PURE__*/jsx(Button, {
+            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__*/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-ui-bg-gray-200 neeto-templates-full-page-preview__holder-wrapper min-h-0 flex-grow",
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames("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__*/jsx("div", {
+          className: "neeto-templates-full-page-preview__device-border h-full w-full",
+          children: /*#__PURE__*/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 ? noop : _ref$onCreate,
+    _ref$afterCreate = _ref.afterCreate,
+    afterCreate = _ref$afterCreate === void 0 ? noop : _ref$afterCreate;
+  var _useState = useState(TEMPLATE_SCREENS.LIST),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentScreen = _useState2[0],
+    setCurrentScreen = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _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__*/jsx(Modal, {
+    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__*/jsx(List, {
+      afterCreate: afterCreate,
+      isCreating: isCreating,
+      onCreate: onCreate,
+      refetchResource: refetchResource,
+      setCurrentScreen: setCurrentScreen,
+      setSelectedTemplate: setSelectedTemplate
+    }) : /*#__PURE__*/jsx(Preview, {
+      afterCreate: afterCreate,
+      refetchResource: refetchResource,
+      selectedTemplate: selectedTemplate,
+      setCurrentScreen: setCurrentScreen
+    })
+  });
+};
+
+export { CreateTemplateModal as default };
+//# sourceMappingURL=CreateTemplateModal.js.map