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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs.js +450 -368
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.js +444 -368
  4. package/dist/index.js.map +1 -1
  5. package/package.json +15 -14
package/dist/index.cjs.js CHANGED
@@ -4,26 +4,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var neetoCist = require('@bigbinary/neeto-cist');
7
- var neetoui = require('@bigbinary/neetoui');
7
+ var Modal = require('@bigbinary/neetoui/Modal');
8
8
  var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
9
9
  var Search = require('@bigbinary/neeto-molecules/Search');
10
+ var Spinner = require('@bigbinary/neetoui/Spinner');
11
+ var Typography = require('@bigbinary/neetoui/Typography');
10
12
  var reactI18next = require('react-i18next');
11
13
  var neetoTagsFrontend = require('@bigbinary/neeto-tags-frontend');
14
+ var reactQuery = require('@tanstack/react-query');
12
15
  var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
13
16
  var ramda = require('ramda');
14
- var reactQuery = require('react-query');
15
17
  var axios = require('axios');
18
+ var jsxRuntime = require('react/jsx-runtime');
16
19
  var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
17
20
  var i18next = require('i18next');
18
21
  var classnames = require('classnames');
19
22
  var utils = require('@bigbinary/neeto-commons-frontend/utils');
20
23
  var neetoIcons = require('@bigbinary/neeto-icons');
21
- var formik$1 = require('@bigbinary/neetoui/formik');
24
+ var Button = require('@bigbinary/neetoui/Button');
25
+ var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
26
+ var Form = require('@bigbinary/neetoui/formik/Form');
22
27
  var reactRouterDom = require('react-router-dom');
23
28
  var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
24
29
  var formik = require('formik');
25
30
  var Header = require('@bigbinary/neeto-molecules/Header');
26
31
  var Scrollable = require('@bigbinary/neeto-molecules/Scrollable');
32
+ var Label = require('@bigbinary/neetoui/Label');
27
33
 
28
34
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
29
35
 
@@ -46,14 +52,20 @@ function _interopNamespace(e) {
46
52
  }
47
53
 
48
54
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
49
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
55
+ var Modal__default = /*#__PURE__*/_interopDefaultLegacy(Modal);
50
56
  var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
51
57
  var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
58
+ var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
59
+ var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
52
60
  var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
53
61
  var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
54
62
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
63
+ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
64
+ var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
65
+ var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
55
66
  var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
56
67
  var Scrollable__default = /*#__PURE__*/_interopDefaultLegacy(Scrollable);
68
+ var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
57
69
 
58
70
  function _arrayWithHoles(arr) {
59
71
  if (Array.isArray(arr)) return arr;
@@ -461,20 +473,22 @@ var QUERY_KEYS = {
461
473
  TEMPLATE_TAGS: "tag-key"
462
474
  };
463
475
 
464
- 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; }
465
- 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; }
476
+ 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; }
477
+ 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; }
466
478
  var useFetchTemplates = function useFetchTemplates(_ref) {
467
479
  var searchTerm = _ref.searchTerm,
468
480
  category = _ref.category;
469
- return reactQuery.useInfiniteQuery([QUERY_KEYS.TEMPLATES_LIST, searchTerm, category], function (_ref2) {
470
- var _ref2$pageParam = _ref2.pageParam,
471
- pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
472
- return templatesApi.list({
473
- page: pageParam,
474
- searchTerm: searchTerm,
475
- category: category
476
- });
477
- }, {
481
+ return reactQuery.useInfiniteQuery({
482
+ queryKey: [QUERY_KEYS.TEMPLATES_LIST, searchTerm, category],
483
+ queryFn: function queryFn(_ref2) {
484
+ var _ref2$pageParam = _ref2.pageParam,
485
+ pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
486
+ return templatesApi.list({
487
+ page: pageParam,
488
+ searchTerm: searchTerm,
489
+ category: category
490
+ });
491
+ },
478
492
  getNextPageParam: function getNextPageParam(lastPage) {
479
493
  return lastPage.hasNextPage ? lastPage.page + 1 : undefined;
480
494
  },
@@ -492,30 +506,26 @@ var useFetchTemplates = function useFetchTemplates(_ref) {
492
506
  keepPreviousData: true
493
507
  });
494
508
  };
495
- var useCreateTemplate = function useCreateTemplate(_ref3, options) {
496
- var refetchResource = _ref3.refetchResource;
497
- return reactQuery.useMutation(templatesApi.create, _objectSpread$4(_objectSpread$4({}, options), {}, {
498
- onSuccess: function onSuccess() {
499
- refetchResource();
500
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
501
- args[_key] = arguments[_key];
502
- }
503
- options === null || options === void 0 || options.onSuccess.apply(options, args);
509
+ var useCreateTemplate = function useCreateTemplate() {
510
+ return reactQuery.useMutation({
511
+ mutationFn: templatesApi.create
512
+ });
513
+ };
514
+ var useFetchTemplate = function useFetchTemplate(_ref3, options) {
515
+ var resourceId = _ref3.resourceId;
516
+ return reactQuery.useQuery(_objectSpread$5({
517
+ queryKey: [QUERY_KEYS.TEMPLATE, resourceId],
518
+ queryFn: function queryFn() {
519
+ return templatesApi.fetch({
520
+ templateId: resourceId
521
+ });
504
522
  }
505
- }));
523
+ }, options));
506
524
  };
507
- var useFetchTemplate = function useFetchTemplate(_ref4, options) {
525
+ var useUpdateTemplate = function useUpdateTemplate(_ref4) {
508
526
  var resourceId = _ref4.resourceId;
509
- return reactQuery.useQuery([QUERY_KEYS.TEMPLATE, resourceId], function () {
510
- return templatesApi.fetch({
511
- templateId: resourceId
512
- });
513
- }, options);
514
- };
515
- var useUpdateTemplate = function useUpdateTemplate(_ref5) {
516
- var resourceId = _ref5.resourceId;
517
- return reactUtils.useMutationWithInvalidation(function (_ref6) {
518
- var template = _ref6.template;
527
+ return reactUtils.useMutationWithInvalidation(function (_ref5) {
528
+ var template = _ref5.template;
519
529
  return templatesApi.update({
520
530
  resourceId: resourceId,
521
531
  payload: {
@@ -538,43 +548,49 @@ var BlankCard = function BlankCard(_ref) {
538
548
  onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
539
549
  _ref$disabled = _ref.disabled,
540
550
  disabled = _ref$disabled === void 0 ? false : _ref$disabled;
541
- return /*#__PURE__*/React__default["default"].createElement("div", {
551
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
542
552
  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",
543
553
  "data-cy": "start-from-scratch-button",
544
554
  tabIndex: 0,
545
- onClick: !disabled ? onClick : neetoCist.noop
546
- }, /*#__PURE__*/React__default["default"].createElement("div", {
547
- className: "neeto-ui-text-primary-500 mb-4"
548
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
549
- size: 40
550
- })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
551
- className: "text-center",
552
- lineHeight: "normal",
553
- style: "h5",
554
- weight: "semibold"
555
- }, title), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
556
- className: "neeto-ui-text-gray-600 text-center",
557
- lineHeight: "leading-4",
558
- style: "body3"
559
- }, description));
555
+ onClick: !disabled ? onClick : neetoCist.noop,
556
+ children: [/*#__PURE__*/jsxRuntime.jsx("div", {
557
+ className: "neeto-ui-text-primary-500 mb-4",
558
+ children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
559
+ size: 40
560
+ })
561
+ }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
562
+ className: "text-center",
563
+ lineHeight: "normal",
564
+ style: "h5",
565
+ weight: "semibold",
566
+ children: title
567
+ }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
568
+ className: "neeto-ui-text-gray-600 text-center",
569
+ lineHeight: "leading-4",
570
+ style: "body3",
571
+ children: description
572
+ })]
573
+ });
560
574
  };
561
575
 
562
576
  var ButtonLoader = function ButtonLoader() {
563
- return /*#__PURE__*/React__default["default"].createElement("div", {
564
- role: "status"
565
- }, /*#__PURE__*/React__default["default"].createElement("svg", {
566
- "aria-hidden": "true",
567
- className: "neeto-ui-text-gray-400 inline h-4 w-4 animate-spin",
568
- fill: "none",
569
- viewBox: "0 0 100 101",
570
- xmlns: "http://www.w3.org/2000/svg"
571
- }, /*#__PURE__*/React__default["default"].createElement("path", {
572
- 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",
573
- fill: "currentColor"
574
- }), /*#__PURE__*/React__default["default"].createElement("path", {
575
- 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",
576
- fill: "#3642df"
577
- })));
577
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
578
+ role: "status",
579
+ children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
580
+ "aria-hidden": "true",
581
+ className: "neeto-ui-text-gray-400 inline h-4 w-4 animate-spin",
582
+ fill: "none",
583
+ viewBox: "0 0 100 101",
584
+ xmlns: "http://www.w3.org/2000/svg",
585
+ children: [/*#__PURE__*/jsxRuntime.jsx("path", {
586
+ 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",
587
+ fill: "currentColor"
588
+ }), /*#__PURE__*/jsxRuntime.jsx("path", {
589
+ 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",
590
+ fill: "#3642df"
591
+ })]
592
+ })
593
+ });
578
594
  };
579
595
 
580
596
  var getMenuItems = function getMenuItems(_ref) {
@@ -586,7 +602,7 @@ var getMenuItems = function getMenuItems(_ref) {
586
602
  "data-cy": "use-this-template-button",
587
603
  isDisabled: isCreating,
588
604
  label: i18next.t("neetoTemplate.templates.editTemplate"),
589
- suffix: isCreating && /*#__PURE__*/React__default["default"].createElement(ButtonLoader, null),
605
+ suffix: isCreating && /*#__PURE__*/jsxRuntime.jsx(ButtonLoader, {}),
590
606
  onClick: function onClick(event) {
591
607
  return handleCreateTemplate(event, template.id);
592
608
  }
@@ -602,55 +618,58 @@ var Card = function Card(_ref) {
602
618
  onClick = _ref.onClick,
603
619
  afterCreate = _ref.afterCreate,
604
620
  refetchResource = _ref.refetchResource;
605
- var _useCreateTemplate = useCreateTemplate({
606
- refetchResource: refetchResource
607
- }),
621
+ var _useCreateTemplate = useCreateTemplate(),
608
622
  createTemplate = _useCreateTemplate.mutate,
609
- isCreating = _useCreateTemplate.isLoading;
623
+ isCreating = _useCreateTemplate.isPending;
610
624
  var handleCreateTemplate = function handleCreateTemplate(e, templateId) {
611
625
  e.stopPropagation();
612
626
  createTemplate({
613
627
  id: templateId
614
628
  }, {
615
629
  onSuccess: function onSuccess(response) {
616
- return afterCreate(response);
630
+ afterCreate(response);
631
+ refetchResource();
617
632
  }
618
633
  });
619
634
  };
620
- return /*#__PURE__*/React__default["default"].createElement("div", {
621
- 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",
635
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
636
+ onClick: onClick,
637
+ 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",
622
638
  "data-cy": "template-card",
623
639
  tabIndex: 0,
624
- onClick: onClick
625
- }, /*#__PURE__*/React__default["default"].createElement("div", {
626
- className: "neeto-template__header"
627
- }, /*#__PURE__*/React__default["default"].createElement("img", {
628
- className: "neeto-template__image",
629
- "data-cy": "template-thumbnail-image",
630
- src: template.imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
631
- })), /*#__PURE__*/React__default["default"].createElement("div", {
632
- className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg p-2 py-1.5"
633
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
634
- className: "neeto-ui-text-gray-800 line-clamp-2",
635
- "data-cy": "template-card-title",
636
- lineHeight: "normal",
637
- style: "body2"
638
- }, template.title), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
639
- dropdownButtonProps: {
640
- className: "flex-shrink-0",
641
- size: "small"
642
- },
643
- dropdownProps: {
644
- onClick: function onClick(event) {
645
- return event.stopPropagation();
646
- }
647
- },
648
- menuItems: getMenuItems({
649
- handleCreateTemplate: handleCreateTemplate,
650
- isCreating: isCreating,
651
- template: template
652
- })
653
- })));
640
+ children: [/*#__PURE__*/jsxRuntime.jsx("div", {
641
+ className: "neeto-template__header",
642
+ children: /*#__PURE__*/jsxRuntime.jsx("img", {
643
+ className: "neeto-template__image",
644
+ "data-cy": "template-thumbnail-image",
645
+ src: template.imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
646
+ })
647
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
648
+ className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg p-2 py-1.5",
649
+ children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
650
+ className: "neeto-ui-text-gray-800 line-clamp-2",
651
+ "data-cy": "template-card-title",
652
+ lineHeight: "normal",
653
+ style: "body2",
654
+ children: template.title
655
+ }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
656
+ dropdownButtonProps: {
657
+ className: "flex-shrink-0",
658
+ size: "small"
659
+ },
660
+ dropdownProps: {
661
+ onClick: function onClick(event) {
662
+ return event.stopPropagation();
663
+ }
664
+ },
665
+ menuItems: getMenuItems({
666
+ handleCreateTemplate: handleCreateTemplate,
667
+ isCreating: isCreating,
668
+ template: template
669
+ })
670
+ })]
671
+ })]
672
+ });
654
673
  };
655
674
 
656
675
  var CategoryItem = function CategoryItem(_ref) {
@@ -658,19 +677,24 @@ var CategoryItem = function CategoryItem(_ref) {
658
677
  count = _ref.count,
659
678
  isActive = _ref.isActive,
660
679
  setCurrentCategory = _ref.setCurrentCategory;
661
- return /*#__PURE__*/React__default["default"].createElement("button", {
680
+ return /*#__PURE__*/jsxRuntime.jsxs("button", {
662
681
  "data-cy": "category-".concat(utils.joinHyphenCase(label)),
663
682
  tabIndex: 0,
664
683
  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", {
665
684
  "neeto-ui-text-gray-700 hover:neeto-ui-bg-gray-200 focus:neeto-ui-bg-gray-200 border-transparent": !isActive,
666
685
  "neeto-ui-text-gray-800 neeto-ui-bg-white neeto-ui-border-gray-300 focus:neeto-ui-border-gray-500": isActive
667
686
  }),
668
- onClick: setCurrentCategory
669
- }, /*#__PURE__*/React__default["default"].createElement("span", null, label), /*#__PURE__*/React__default["default"].createElement("span", null, count));
687
+ onClick: setCurrentCategory,
688
+ children: [/*#__PURE__*/jsxRuntime.jsx("span", {
689
+ children: label
690
+ }), /*#__PURE__*/jsxRuntime.jsx("span", {
691
+ children: count
692
+ })]
693
+ });
670
694
  };
671
695
 
672
- 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; }
673
- 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; }
696
+ 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; }
697
+ 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; }
674
698
  var List = function List(_ref) {
675
699
  var setCurrentScreen = _ref.setCurrentScreen,
676
700
  setSelectedTemplate = _ref.setSelectedTemplate,
@@ -713,7 +737,7 @@ var List = function List(_ref) {
713
737
  setSelectedTemplate(template);
714
738
  };
715
739
  if (isTemplatesLoading) {
716
- return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
740
+ return /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {});
717
741
  }
718
742
  var _data$tags = data.tags,
719
743
  tags = _data$tags === void 0 ? [] : _data$tags,
@@ -721,83 +745,96 @@ var List = function List(_ref) {
721
745
  templates = _data$templates === void 0 ? [] : _data$templates,
722
746
  _data$templatesCount = data.templatesCount,
723
747
  templatesCount = _data$templatesCount === void 0 ? 0 : _data$templatesCount;
724
- var categories = [_objectSpread$3(_objectSpread$3({}, DEFAULT_CATEGORY), {}, {
748
+ var categories = [_objectSpread$4(_objectSpread$4({}, DEFAULT_CATEGORY), {}, {
725
749
  count: templatesCount
726
750
  })].concat(_toConsumableArray(tags));
727
- return /*#__PURE__*/React__default["default"].createElement("div", {
728
- className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start"
729
- }, /*#__PURE__*/React__default["default"].createElement("div", {
730
- 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"
731
- }, /*#__PURE__*/React__default["default"].createElement("div", {
732
- className: "space-y-4"
733
- }, /*#__PURE__*/React__default["default"].createElement("div", {
734
- className: "space-y-1"
735
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
736
- "data-cy": "create-new-form-title",
737
- style: "h2",
738
- weight: "semibold"
739
- }, t("neetoTemplate.templates.createNewEntity")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
740
- lineHeight: "normal",
741
- style: "body2"
742
- }, t("neetoTemplate.templates.description"))), /*#__PURE__*/React__default["default"].createElement(Search__default["default"], {
743
- autoFocus: true,
744
- disableTrimOnBlur: true,
745
- "data-cy": "template-search-input",
746
- placeholder: t("neetoTemplate.templates.search"),
747
- onSearch: function onSearch(value) {
748
- return setSearchTerm(value);
749
- }
750
- })), /*#__PURE__*/React__default["default"].createElement("div", {
751
- className: "space-y-3"
752
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
753
- className: "uppercase",
754
- "data-cy": "template-categories-label",
755
- style: "h6"
756
- }, t("neetoTemplate.templates.categories")), /*#__PURE__*/React__default["default"].createElement("div", {
757
- className: "space-y-2"
758
- }, categories.map(function (_ref2) {
759
- var id = _ref2.id,
760
- name = _ref2.name,
761
- count = _ref2.count;
762
- return /*#__PURE__*/React__default["default"].createElement(CategoryItem, {
763
- count: count,
764
- isActive: currentCategory.id === id,
765
- key: id,
766
- label: name,
767
- setCurrentCategory: function setCurrentCategory() {
768
- return _setCurrentCategory({
769
- id: id,
770
- name: name
771
- });
772
- }
773
- });
774
- })))), /*#__PURE__*/React__default["default"].createElement("div", {
775
- className: "h-screen w-full overflow-y-auto py-8 pl-5 pr-4 md:pl-8 md:pr-20 xl:px-20",
776
- ref: rootRef
777
- }, /*#__PURE__*/React__default["default"].createElement("div", {
778
- className: "flex-grow space-y-6"
779
- }, /*#__PURE__*/React__default["default"].createElement("div", {
780
- 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"
781
- }, /*#__PURE__*/React__default["default"].createElement(BlankCard, {
782
- description: t("neetoTemplate.templates.blankCard.description"),
783
- disabled: isCreating,
784
- icon: isCreating ? neetoui.Spinner : SvgCustom,
785
- title: t("neetoTemplate.templates.blankCard.title"),
786
- onClick: onCreate
787
- }), templates.map(function (template, index) {
788
- return /*#__PURE__*/React__default["default"].createElement(Card, {
789
- afterCreate: afterCreate,
790
- refetchResource: refetchResource,
791
- template: template,
792
- key: index,
793
- onClick: function onClick() {
794
- return handleCardClick(template);
795
- }
796
- });
797
- })), hasNextPage && /*#__PURE__*/React__default["default"].createElement("div", {
798
- className: "my-10 text-center",
799
- ref: sentryRef
800
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)))));
751
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
752
+ className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start",
753
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
754
+ 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",
755
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
756
+ className: "space-y-4",
757
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
758
+ className: "space-y-1",
759
+ children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
760
+ "data-cy": "create-new-form-title",
761
+ style: "h2",
762
+ weight: "semibold",
763
+ children: t("neetoTemplate.templates.createNewEntity")
764
+ }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
765
+ lineHeight: "normal",
766
+ style: "body2",
767
+ children: t("neetoTemplate.templates.description")
768
+ })]
769
+ }), /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {
770
+ autoFocus: true,
771
+ disableTrimOnBlur: true,
772
+ "data-cy": "template-search-input",
773
+ placeholder: t("neetoTemplate.templates.search"),
774
+ onSearch: function onSearch(value) {
775
+ return setSearchTerm(value);
776
+ }
777
+ })]
778
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
779
+ className: "space-y-3",
780
+ children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
781
+ className: "uppercase",
782
+ "data-cy": "template-categories-label",
783
+ style: "h6",
784
+ children: t("neetoTemplate.templates.categories")
785
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
786
+ className: "space-y-2",
787
+ children: categories.map(function (_ref2) {
788
+ var id = _ref2.id,
789
+ name = _ref2.name,
790
+ count = _ref2.count;
791
+ return /*#__PURE__*/React.createElement(CategoryItem, {
792
+ count: count,
793
+ isActive: currentCategory.id === id,
794
+ key: id,
795
+ label: name,
796
+ setCurrentCategory: function setCurrentCategory() {
797
+ return _setCurrentCategory({
798
+ id: id,
799
+ name: name
800
+ });
801
+ }
802
+ });
803
+ })
804
+ })]
805
+ })]
806
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
807
+ className: "h-screen w-full overflow-y-auto py-8 pl-5 pr-4 md:pl-8 md:pr-20 xl:px-20",
808
+ ref: rootRef,
809
+ children: /*#__PURE__*/jsxRuntime.jsxs("div", {
810
+ className: "flex-grow space-y-6",
811
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
812
+ 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",
813
+ children: [/*#__PURE__*/jsxRuntime.jsx(BlankCard, {
814
+ description: t("neetoTemplate.templates.blankCard.description"),
815
+ disabled: isCreating,
816
+ icon: isCreating ? Spinner__default["default"] : SvgCustom,
817
+ title: t("neetoTemplate.templates.blankCard.title"),
818
+ onClick: onCreate
819
+ }), templates.map(function (template, index) {
820
+ return /*#__PURE__*/React.createElement(Card, {
821
+ afterCreate: afterCreate,
822
+ refetchResource: refetchResource,
823
+ template: template,
824
+ key: index,
825
+ onClick: function onClick() {
826
+ return handleCardClick(template);
827
+ }
828
+ });
829
+ })]
830
+ }), hasNextPage && /*#__PURE__*/jsxRuntime.jsx("div", {
831
+ className: "my-10 text-center",
832
+ ref: sentryRef,
833
+ children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
834
+ })]
835
+ })
836
+ })]
837
+ });
801
838
  };
802
839
 
803
840
  var Preview$1 = function Preview(_ref) {
@@ -807,55 +844,59 @@ var Preview$1 = function Preview(_ref) {
807
844
  refetchResource = _ref.refetchResource;
808
845
  var _useTranslation = reactI18next.useTranslation(),
809
846
  t = _useTranslation.t;
810
- var _useCreateTemplate = useCreateTemplate({
811
- refetchResource: refetchResource
812
- }),
847
+ var _useCreateTemplate = useCreateTemplate(),
813
848
  createTemplate = _useCreateTemplate.mutate,
814
- isCreating = _useCreateTemplate.isLoading;
849
+ isCreating = _useCreateTemplate.isPending;
815
850
  var handleCreateTemplate = function handleCreateTemplate() {
816
851
  createTemplate({
817
852
  id: selectedTemplate.id
818
853
  }, {
819
854
  onSuccess: function onSuccess(response) {
820
- return afterCreate(response);
855
+ afterCreate(response);
856
+ refetchResource();
821
857
  }
822
858
  });
823
859
  };
824
860
  var title = selectedTemplate.title,
825
861
  previewUrl = selectedTemplate.previewUrl;
826
- return /*#__PURE__*/React__default["default"].createElement("div", {
827
- className: "m-auto flex h-full w-full max-w-6xl flex-col space-y-6 py-6"
828
- }, /*#__PURE__*/React__default["default"].createElement("div", {
829
- className: "flex flex-col items-center justify-between gap-6 pl-4 pr-16 md:flex-row md:pr-20 xl:px-0"
830
- }, /*#__PURE__*/React__default["default"].createElement("div", {
831
- className: "flex min-w-0 flex-grow items-center gap-2"
832
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
833
- className: "flex-shrink-0",
834
- "data-cy": "preview-template-back-button",
835
- icon: neetoIcons.LeftArrow,
836
- style: "text",
837
- onClick: function onClick() {
838
- return setCurrentScreen(TEMPLATE_SCREENS.LIST);
839
- }
840
- }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
841
- className: "leading-none",
842
- "data-cy": "preview-template-title",
843
- style: "h2",
844
- weight: "semibold"
845
- }, title)), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
846
- className: "flex-shrink-0",
847
- "data-cy": "preview-use-template-button",
848
- disabled: isCreating,
849
- label: t("neetoTemplate.templates.editTemplate"),
850
- loading: isCreating,
851
- onClick: handleCreateTemplate
852
- })), /*#__PURE__*/React__default["default"].createElement("div", {
853
- className: "neeto-templates-share-preview neeto-ui-rounded-sm sticky top-10"
854
- }, /*#__PURE__*/React__default["default"].createElement("iframe", {
855
- className: "w-full flex-1 shadow-inner",
856
- "data-cy": "iframe-id",
857
- src: previewUrl
858
- })));
862
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
863
+ className: "m-auto flex h-full w-full max-w-6xl flex-col space-y-6 py-6",
864
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
865
+ className: "flex flex-col items-center justify-between gap-6 pl-4 pr-16 md:flex-row md:pr-20 xl:px-0",
866
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
867
+ className: "flex min-w-0 flex-grow items-center gap-2",
868
+ children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
869
+ className: "flex-shrink-0",
870
+ "data-cy": "preview-template-back-button",
871
+ icon: neetoIcons.LeftArrow,
872
+ style: "text",
873
+ onClick: function onClick() {
874
+ return setCurrentScreen(TEMPLATE_SCREENS.LIST);
875
+ }
876
+ }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
877
+ className: "leading-none",
878
+ "data-cy": "preview-template-title",
879
+ style: "h2",
880
+ weight: "semibold",
881
+ children: title
882
+ })]
883
+ }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
884
+ className: "flex-shrink-0",
885
+ "data-cy": "preview-use-template-button",
886
+ disabled: isCreating,
887
+ label: t("neetoTemplate.templates.editTemplate"),
888
+ loading: isCreating,
889
+ onClick: handleCreateTemplate
890
+ })]
891
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
892
+ className: "neeto-templates-share-preview neeto-ui-rounded-sm sticky top-10",
893
+ children: /*#__PURE__*/jsxRuntime.jsx("iframe", {
894
+ className: "w-full flex-1 shadow-inner",
895
+ "data-cy": "iframe-id",
896
+ src: previewUrl
897
+ })
898
+ })]
899
+ });
859
900
  };
860
901
 
861
902
  var CreateTemplateModal = function CreateTemplateModal(_ref) {
@@ -882,24 +923,25 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
882
923
  }, 300); //To accommodate the animation duration.
883
924
  };
884
925
 
885
- return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
926
+ return /*#__PURE__*/jsxRuntime.jsx(Modal__default["default"], {
886
927
  className: "neeto-template-list h-screen w-screen overflow-y-auto",
887
928
  isOpen: isOpen,
888
929
  size: "fullScreen",
889
- onClose: onModalClose
890
- }, currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/React__default["default"].createElement(List, {
891
- setCurrentScreen: setCurrentScreen,
892
- setSelectedTemplate: setSelectedTemplate,
893
- isCreating: isCreating,
894
- afterCreate: afterCreate,
895
- onCreate: onCreate,
896
- refetchResource: refetchResource
897
- }) : /*#__PURE__*/React__default["default"].createElement(Preview$1, {
898
- selectedTemplate: selectedTemplate,
899
- setCurrentScreen: setCurrentScreen,
900
- afterCreate: afterCreate,
901
- refetchResource: refetchResource
902
- }));
930
+ onClose: onModalClose,
931
+ children: currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/jsxRuntime.jsx(List, {
932
+ setCurrentScreen: setCurrentScreen,
933
+ setSelectedTemplate: setSelectedTemplate,
934
+ isCreating: isCreating,
935
+ afterCreate: afterCreate,
936
+ onCreate: onCreate,
937
+ refetchResource: refetchResource
938
+ }) : /*#__PURE__*/jsxRuntime.jsx(Preview$1, {
939
+ selectedTemplate: selectedTemplate,
940
+ setCurrentScreen: setCurrentScreen,
941
+ afterCreate: afterCreate,
942
+ refetchResource: refetchResource
943
+ })
944
+ });
903
945
  };
904
946
 
905
947
  var create = function create(payload) {
@@ -917,10 +959,12 @@ var templateTagsApi = {
917
959
  list: list
918
960
  };
919
961
 
920
- 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; }
921
- 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; }
962
+ 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; }
963
+ 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; }
922
964
  var useCreateTemplateTag = function useCreateTemplateTag(options) {
923
- return reactQuery.useMutation(templateTagsApi.create, _objectSpread$2(_objectSpread$2({}, options), {}, {
965
+ return reactQuery.useMutation(_objectSpread$3(_objectSpread$3({
966
+ mutationFn: templateTagsApi.create
967
+ }, options), {}, {
924
968
  onSuccess: function onSuccess() {
925
969
  var _options$onSuccess;
926
970
  neetoTagsFrontend.refetchTags();
@@ -929,7 +973,10 @@ var useCreateTemplateTag = function useCreateTemplateTag(options) {
929
973
  }));
930
974
  };
931
975
  var useFetchTemplateTags = function useFetchTemplateTags() {
932
- return reactQuery.useQuery([QUERY_KEYS.TEMPLATE_TAGS], templateTagsApi.list);
976
+ return reactQuery.useQuery({
977
+ queryKey: [QUERY_KEYS.TEMPLATE_TAGS],
978
+ queryFn: templateTagsApi.list
979
+ });
933
980
  };
934
981
 
935
982
  var FormikImageUploader = function FormikImageUploader(_ref) {
@@ -945,7 +992,7 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
945
992
  setFieldValue("imageSignedId", file.signedId);
946
993
  return setValue(file.url);
947
994
  };
948
- return /*#__PURE__*/React__default["default"].createElement(neetoImageUploaderFrontend.ImageUploader, {
995
+ return /*#__PURE__*/jsxRuntime.jsx(neetoImageUploaderFrontend.ImageUploader, {
949
996
  className: "h-52 w-full md:h-80",
950
997
  src: field.value,
951
998
  uploadConfig: IMAGE_UPLOAD_CONFIG,
@@ -956,20 +1003,22 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
956
1003
  var PageWrapper = function PageWrapper(_ref) {
957
1004
  var children = _ref.children,
958
1005
  className = _ref.className;
959
- return /*#__PURE__*/React__default["default"].createElement("div", {
960
- className: classnames__default["default"]("w-full flex-col", className)
961
- }, children);
1006
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1007
+ className: classnames__default["default"]("w-full flex-col", className),
1008
+ children: children
1009
+ });
962
1010
  };
963
1011
  var PageHeader = function PageHeader(_ref2) {
964
1012
  var title = _ref2.title,
965
1013
  breadcrumbs = _ref2.breadcrumbs;
966
- return /*#__PURE__*/React__default["default"].createElement("div", {
967
- className: "w-full px-6"
968
- }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], {
969
- breadcrumbs: breadcrumbs,
970
- size: "small",
971
- title: title
972
- }));
1014
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1015
+ className: "w-full px-6",
1016
+ children: /*#__PURE__*/jsxRuntime.jsx(Header__default["default"], {
1017
+ breadcrumbs: breadcrumbs,
1018
+ size: "small",
1019
+ title: title
1020
+ })
1021
+ });
973
1022
  };
974
1023
  var customPropEqualityCheck = function customPropEqualityCheck(prevProps, nextProps) {
975
1024
  return prevProps.title === nextProps.title && prevProps.breadcrumbs === nextProps.breadcrumbs;
@@ -979,13 +1028,17 @@ var PageContent = function PageContent(_ref3) {
979
1028
  var children = _ref3.children,
980
1029
  _ref3$className = _ref3.className,
981
1030
  className = _ref3$className === void 0 ? "" : _ref3$className;
982
- return /*#__PURE__*/React__default["default"].createElement(Scrollable__default["default"], {
983
- className: "w-full px-6 pb-6"
984
- }, /*#__PURE__*/React__default["default"].createElement("div", {
985
- className: classnames__default["default"](["mx-auto max-w-7xl", className])
986
- }, children));
1031
+ return /*#__PURE__*/jsxRuntime.jsx(Scrollable__default["default"], {
1032
+ className: "w-full px-6 pb-6",
1033
+ children: /*#__PURE__*/jsxRuntime.jsx("div", {
1034
+ className: classnames__default["default"](["mx-auto max-w-7xl", className]),
1035
+ children: children
1036
+ })
1037
+ });
987
1038
  };
988
1039
 
1040
+ 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; }
1041
+ 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; }
989
1042
  var Tags = function Tags(_ref) {
990
1043
  var allTags = _ref.allTags,
991
1044
  selectedTags = _ref.selectedTags,
@@ -1017,44 +1070,52 @@ var Tags = function Tags(_ref) {
1017
1070
  }
1018
1071
  });
1019
1072
  };
1020
- return /*#__PURE__*/React__default["default"].createElement("div", {
1021
- className: className
1022
- }, labelProps.label && /*#__PURE__*/React__default["default"].createElement(neetoui.Label, labelProps, labelProps.label), /*#__PURE__*/React__default["default"].createElement("div", {
1023
- className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border p-4"
1024
- }, /*#__PURE__*/React__default["default"].createElement(neetoTagsFrontend.TagsComponent, {
1025
- allTags: allTags,
1026
- selectedTags: selectedTags,
1027
- buttonProps: {
1028
- loading: isLoading,
1029
- disabled: isLoading,
1030
- iconPosition: "left"
1031
- },
1032
- onTagCreate: handleTagCreate,
1033
- onTagDelete: handleTagRemove,
1034
- onTagSelect: handleTagSelect
1035
- })));
1073
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
1074
+ className: className,
1075
+ children: [labelProps.label && /*#__PURE__*/jsxRuntime.jsx(Label__default["default"], _objectSpread$2(_objectSpread$2({}, labelProps), {}, {
1076
+ children: labelProps.label
1077
+ })), /*#__PURE__*/jsxRuntime.jsx("div", {
1078
+ className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border p-4",
1079
+ children: /*#__PURE__*/jsxRuntime.jsx(neetoTagsFrontend.TagsComponent, {
1080
+ allTags: allTags,
1081
+ selectedTags: selectedTags,
1082
+ buttonProps: {
1083
+ loading: isLoading,
1084
+ disabled: isLoading,
1085
+ iconPosition: "left"
1086
+ },
1087
+ onTagCreate: handleTagCreate,
1088
+ onTagDelete: handleTagRemove,
1089
+ onTagSelect: handleTagSelect
1090
+ })
1091
+ })]
1092
+ });
1036
1093
  };
1037
1094
 
1038
1095
  var Preview = function Preview(_ref) {
1039
1096
  var template = _ref.template,
1040
1097
  imageUrl = _ref.imageUrl;
1041
- return /*#__PURE__*/React__default["default"].createElement("div", {
1098
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
1042
1099
  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",
1043
- tabIndex: 0
1044
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1045
- className: "neeto-template__header"
1046
- }, /*#__PURE__*/React__default["default"].createElement("img", {
1047
- className: "neeto-template__image",
1048
- "data-cy": "template-image-preview",
1049
- src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
1050
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1051
- className: "neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-2 py-1.5"
1052
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
1053
- className: "neeto-ui-text-gray-800",
1054
- "data-cy": "template-title-text",
1055
- lineHeight: "normal",
1056
- style: "body2"
1057
- }, template.title)));
1100
+ tabIndex: 0,
1101
+ children: [/*#__PURE__*/jsxRuntime.jsx("div", {
1102
+ className: "neeto-template__header",
1103
+ children: /*#__PURE__*/jsxRuntime.jsx("img", {
1104
+ className: "neeto-template__image",
1105
+ "data-cy": "template-image-preview",
1106
+ src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
1107
+ })
1108
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
1109
+ className: "neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-2 py-1.5",
1110
+ children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
1111
+ className: "neeto-ui-text-gray-800",
1112
+ "data-cy": "template-title-text",
1113
+ lineHeight: "normal",
1114
+ style: "body2",
1115
+ children: template.title
1116
+ })
1117
+ })]
1118
+ });
1058
1119
  };
1059
1120
 
1060
1121
  var buildSelectOptionsBy = function buildSelectOptionsBy(labelField) {
@@ -1103,10 +1164,10 @@ var TemplateSettings = function TemplateSettings(_ref) {
1103
1164
  resourceId: resourceId
1104
1165
  }),
1105
1166
  updateTemplate = _useUpdateTemplate.mutate,
1106
- isUpdatingTemplate = _useUpdateTemplate.isLoading;
1167
+ isUpdatingTemplate = _useUpdateTemplate.isPending;
1107
1168
  var _useCreateTemplateTag = useCreateTemplateTag(),
1108
1169
  createTemplateTag = _useCreateTemplateTag.mutate,
1109
- isCreatingTags = _useCreateTemplateTag.isLoading;
1170
+ isCreatingTags = _useCreateTemplateTag.isPending;
1110
1171
  var _useFetchTemplateTags = useFetchTemplateTags(),
1111
1172
  _useFetchTemplateTags2 = _useFetchTemplateTags.data,
1112
1173
  templateTags = _useFetchTemplateTags2 === void 0 ? {} : _useFetchTemplateTags2,
@@ -1123,74 +1184,88 @@ var TemplateSettings = function TemplateSettings(_ref) {
1123
1184
  }, data), {}, {
1124
1185
  tags: tags
1125
1186
  });
1126
- return /*#__PURE__*/React__default["default"].createElement(PageWrapper, {
1127
- className: className
1128
- }, /*#__PURE__*/React__default["default"].createElement(MemoizedPageHeader, {
1129
- breadcrumbs: breadcrumbs,
1130
- title: t("neetoTemplate.templateSettings.title")
1131
- }), /*#__PURE__*/React__default["default"].createElement(PageContent, {
1132
- className: classnames__default["default"]({
1133
- "min-h-0": !isLoading,
1134
- "h-full": isLoading
1135
- })
1136
- }, isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
1137
- className: "mb-1",
1138
- "data-cy": "thank-you-action-text",
1139
- style: "h2",
1140
- weight: "semibold"
1141
- }, t("neetoTemplate.templateSettings.configureTemplates")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
1142
- className: "mb-2",
1143
- "data-cy": "thank-you-description-label",
1144
- style: "body2"
1145
- }, t("neetoTemplate.templateSettings.subText")), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
1146
- formikProps: {
1147
- enableReinitialize: true,
1148
- initialValues: resourceInitialValues,
1149
- onSubmit: handleSubmit
1150
- }
1151
- }, function (_ref2) {
1152
- var values = _ref2.values,
1153
- setFieldValue = _ref2.setFieldValue;
1154
- return /*#__PURE__*/React__default["default"].createElement("div", {
1155
- className: "grid grid-cols-2 gap-8 pt-6"
1156
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1157
- className: "space-y-4"
1158
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
1159
- className: "mb-3",
1160
- style: "h4",
1161
- weight: "semibold"
1162
- }, t("neetoTemplate.templateSettings.imageLabel")), /*#__PURE__*/React__default["default"].createElement(FormikImageUploader, {
1163
- name: "imageUrl"
1164
- }), /*#__PURE__*/React__default["default"].createElement(Tags, {
1165
- allTags: buildSelectOptionsBy("name", templateTags.tags),
1166
- className: "space-y-2",
1167
- isLoading: isCreatingTags,
1168
- selectedTags: values.tags,
1169
- labelProps: {
1170
- label: t("neetoTemplate.templateSettings.categoryLabel")
1171
- },
1172
- onCreate: createTemplateTag,
1173
- onUpdate: function onUpdate(tags) {
1174
- return setFieldValue("tags", tags);
1175
- }
1176
- }), /*#__PURE__*/React__default["default"].createElement("div", {
1177
- className: "mt-12 flex flex-row items-center justify-start"
1178
- }, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
1179
- isSubmitting: isUpdatingTemplate,
1180
- cancelButtonProps: {
1181
- to: onCancelTemplatePreview,
1182
- "data-cy": "reset-changes-button",
1183
- onClick: neetoCist.noop
1184
- }
1185
- }))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
1186
- className: "mb-3",
1187
- style: "h4",
1188
- weight: "semibold"
1189
- }, t("neetoTemplate.templateSettings.previewLabel")), /*#__PURE__*/React__default["default"].createElement(Preview, {
1190
- imageUrl: values.imageUrl,
1191
- template: data
1192
- })));
1193
- }))));
1187
+ return /*#__PURE__*/jsxRuntime.jsxs(PageWrapper, {
1188
+ className: className,
1189
+ children: [/*#__PURE__*/jsxRuntime.jsx(MemoizedPageHeader, {
1190
+ breadcrumbs: breadcrumbs,
1191
+ title: t("neetoTemplate.templateSettings.title")
1192
+ }), /*#__PURE__*/jsxRuntime.jsx(PageContent, {
1193
+ className: classnames__default["default"]({
1194
+ "min-h-0": !isLoading,
1195
+ "h-full": isLoading
1196
+ }),
1197
+ children: isLoading ? /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {}) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1198
+ children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
1199
+ className: "mb-1",
1200
+ "data-cy": "thank-you-action-text",
1201
+ style: "h2",
1202
+ weight: "semibold",
1203
+ children: t("neetoTemplate.templateSettings.configureTemplates")
1204
+ }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
1205
+ className: "mb-2",
1206
+ "data-cy": "thank-you-description-label",
1207
+ style: "body2",
1208
+ children: t("neetoTemplate.templateSettings.subText")
1209
+ }), /*#__PURE__*/jsxRuntime.jsx(Form__default["default"], {
1210
+ formikProps: {
1211
+ enableReinitialize: true,
1212
+ initialValues: resourceInitialValues,
1213
+ onSubmit: handleSubmit
1214
+ },
1215
+ children: function children(_ref2) {
1216
+ var values = _ref2.values,
1217
+ setFieldValue = _ref2.setFieldValue;
1218
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
1219
+ className: "grid grid-cols-2 gap-8 pt-6",
1220
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1221
+ className: "space-y-4",
1222
+ children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
1223
+ className: "mb-3",
1224
+ style: "h4",
1225
+ weight: "semibold",
1226
+ children: t("neetoTemplate.templateSettings.imageLabel")
1227
+ }), /*#__PURE__*/jsxRuntime.jsx(FormikImageUploader, {
1228
+ name: "imageUrl"
1229
+ }), /*#__PURE__*/jsxRuntime.jsx(Tags, {
1230
+ allTags: buildSelectOptionsBy("name", templateTags.tags),
1231
+ className: "space-y-2",
1232
+ isLoading: isCreatingTags,
1233
+ selectedTags: values.tags,
1234
+ labelProps: {
1235
+ label: t("neetoTemplate.templateSettings.categoryLabel")
1236
+ },
1237
+ onCreate: createTemplateTag,
1238
+ onUpdate: function onUpdate(tags) {
1239
+ return setFieldValue("tags", tags);
1240
+ }
1241
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
1242
+ className: "mt-12 flex flex-row items-center justify-start",
1243
+ children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
1244
+ isSubmitting: isUpdatingTemplate,
1245
+ cancelButtonProps: {
1246
+ to: onCancelTemplatePreview,
1247
+ "data-cy": "reset-changes-button",
1248
+ onClick: neetoCist.noop
1249
+ }
1250
+ })
1251
+ })]
1252
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1253
+ children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
1254
+ className: "mb-3",
1255
+ style: "h4",
1256
+ weight: "semibold",
1257
+ children: t("neetoTemplate.templateSettings.previewLabel")
1258
+ }), /*#__PURE__*/jsxRuntime.jsx(Preview, {
1259
+ imageUrl: values.imageUrl,
1260
+ template: data
1261
+ })]
1262
+ })]
1263
+ });
1264
+ }
1265
+ })]
1266
+ })
1267
+ })]
1268
+ });
1194
1269
  };
1195
1270
 
1196
1271
  function _objectWithoutPropertiesLoose(source, excluded) {
@@ -1234,9 +1309,10 @@ var TAG_TYPES = [{
1234
1309
  width: 300,
1235
1310
  sorter: true,
1236
1311
  render: function render(templatesCount) {
1237
- return templatesCount !== 0 ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
1238
- style: "body1"
1239
- }, " ", templatesCount, " ") : "-";
1312
+ return templatesCount !== 0 ? /*#__PURE__*/jsxRuntime.jsxs(Typography__default["default"], {
1313
+ style: "body1",
1314
+ children: [" ", templatesCount, " "]
1315
+ }) : "-";
1240
1316
  }
1241
1317
  }]
1242
1318
  }];
@@ -1250,12 +1326,18 @@ var TemplateTags = function TemplateTags(_ref) {
1250
1326
  otherProps = _objectWithoutProperties(_ref, _excluded);
1251
1327
  var queryClient = reactQuery.useQueryClient();
1252
1328
  var invalidateTags = function invalidateTags() {
1253
- queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE_TAGS);
1329
+ queryClient.invalidateQueries({
1330
+ queryKey: [QUERY_KEYS.TEMPLATE_TAGS]
1331
+ });
1254
1332
  };
1255
1333
  var invalidateTagsAndTemplates = function invalidateTagsAndTemplates() {
1256
1334
  invalidateTags();
1257
- queryClient.invalidateQueries(QUERY_KEYS.TEMPLATES_LIST);
1258
- queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE);
1335
+ queryClient.invalidateQueries({
1336
+ queryKey: [QUERY_KEYS.TEMPLATES_LIST]
1337
+ });
1338
+ queryClient.invalidateQueries({
1339
+ queryKey: [QUERY_KEYS.TEMPLATE]
1340
+ });
1259
1341
  };
1260
1342
  var config = _objectSpread({
1261
1343
  tagTypes: TAG_TYPES,
@@ -1285,7 +1367,7 @@ var TemplateTags = function TemplateTags(_ref) {
1285
1367
  }
1286
1368
  }
1287
1369
  }, otherProps);
1288
- return /*#__PURE__*/React__default["default"].createElement(neetoTagsFrontend.NeetoTags, {
1370
+ return /*#__PURE__*/jsxRuntime.jsx(neetoTagsFrontend.NeetoTags, {
1289
1371
  config: config
1290
1372
  });
1291
1373
  };