@bigbinary/neeto-templates-frontend 1.1.18 → 1.2.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useState, useRef, useCallback, useEffect, memo } from 'react';
-import { noop, removeBy, renameKeys } from 'neetocist';
+import { noop, removeBy, renameKeys } from '@bigbinary/neeto-cist';
 import { Typography, Spinner, Button, Modal, Label } from '@bigbinary/neetoui';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Search from '@bigbinary/neeto-molecules/Search';
@@ -26,31 +26,31 @@ function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
     try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
     } finally {
       try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
 
@@ -91,14 +91,14 @@ var MENU_ITEMS = {
   PREVIEW: "preview"
 };
 
-function _typeof(obj) {
+function _typeof(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
 function _toPrimitive(input, hint) {
@@ -2481,8 +2481,8 @@ var QUERY_KEYS = {
   TEMPLATE_TAGS: "template-tags"
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 useFetchTemplates = function useFetchTemplates(_ref) {
   var searchTerm = _ref.searchTerm,
     category = _ref.category;
@@ -2520,7 +2520,7 @@ var useCreateTemplate = function useCreateTemplate(_ref3, options) {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-      options === null || options === void 0 ? void 0 : options.onSuccess.apply(options, args);
+      options === null || options === void 0 || options.onSuccess.apply(options, args);
     }
   }));
 };
@@ -2690,8 +2690,8 @@ var CategoryItem = function CategoryItem(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, count));
 };
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 List = function List(_ref) {
   var setCurrentScreen = _ref.setCurrentScreen,
     setSelectedTemplate = _ref.setSelectedTemplate,
@@ -2748,7 +2748,7 @@ var List = function List(_ref) {
   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-80 flex-shrink-0 space-y-8 py-6 pl-16"
+    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", {
@@ -2763,6 +2763,7 @@ var List = function List(_ref) {
   }, 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);
@@ -2792,12 +2793,12 @@ var List = function List(_ref) {
       }
     });
   })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "overflow-y-auto px-16 py-6",
+    className: "h-screen 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-2 gap-6 md:grid-cols-3 2xl:grid-cols-4"
+    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,
@@ -2806,10 +2807,10 @@ var List = function List(_ref) {
     onClick: onCreate
   }), templates.map(function (template, index) {
     return /*#__PURE__*/React__default.createElement(Card, {
-      key: index,
-      template: template,
       afterCreate: afterCreate,
       refetchResource: refetchResource,
+      template: template,
+      key: index,
       onClick: function onClick() {
         return handleCardClick(template);
       }
@@ -2846,10 +2847,11 @@ var Preview$1 = function Preview(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "m-auto flex h-full w-full max-w-5xl flex-col space-y-6 py-6"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between gap-6"
+    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",
@@ -2862,6 +2864,7 @@ var Preview$1 = function Preview(_ref) {
     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"),
@@ -2935,8 +2938,8 @@ var templateTagsApi = {
   list: list
 };
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateTemplateTag = function useCreateTemplateTag(options) {
   var queryClient = useQueryClient();
   return useMutation(templateTagsApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
@@ -2944,7 +2947,7 @@ var useCreateTemplateTag = function useCreateTemplateTag(options) {
       var _options$onSuccess;
       refetchTags();
       queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE_TAGS);
-      options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options);
+      options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 || _options$onSuccess.call(options);
     }
   }));
 };
@@ -2966,7 +2969,7 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
     return setValue(file.url);
   };
   return /*#__PURE__*/React__default.createElement(ImageUploader, {
-    className: "h-80 w-full",
+    className: "h-52 w-full md:h-80",
     src: field.value,
     uploadConfig: IMAGE_UPLOAD_CONFIG,
     onUploadComplete: handleImageUpload
@@ -3065,17 +3068,20 @@ var Preview = function Preview(_ref) {
     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)));
 };
 
-var buildSelectOptionsBy = function buildSelectOptionsBy(labelField, options) {
+var buildSelectOptionsBy = function buildSelectOptionsBy(labelField) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var valueField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "id";
   return options.map(function (option) {
     return {
@@ -3098,8 +3104,8 @@ var buildTemplateUpdatePayload = function buildTemplateUpdatePayload(values) {
   };
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 TemplateSettings = function TemplateSettings(_ref) {
   var _ref$onCancelTemplate = _ref.onCancelTemplatePreview,
     onCancelTemplatePreview = _ref$onCancelTemplate === void 0 ? "" : _ref$onCancelTemplate,
@@ -3146,7 +3152,10 @@ var TemplateSettings = function TemplateSettings(_ref) {
     breadcrumbs: breadcrumbs,
     title: t("neetoTemplate.templateSettings.title")
   }), /*#__PURE__*/React__default.createElement(PageContent, {
-    className: "h-full"
+    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",
@@ -3191,7 +3200,7 @@ var TemplateSettings = function TemplateSettings(_ref) {
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "mt-12 flex flex-row items-center justify-start"
     }, /*#__PURE__*/React__default.createElement(Button, {
-      className: "mr-3",
+      className: "mr-3 flex-shrink-0",
       "data-cy": "save-changes-button",
       disabled: !dirty,
       loading: isUpdatingTemplate,