@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.js CHANGED
@@ -1,26 +1,32 @@
1
1
  import * as React from 'react';
2
- import React__default, { useState, useRef, useCallback, useEffect, memo } from 'react';
2
+ import { useState, useRef, useCallback, useEffect, createElement, memo } from 'react';
3
3
  import { noop, removeBy, renameKeys } from '@bigbinary/neeto-cist';
4
- import { Typography, Spinner, Button, Modal, Label } from '@bigbinary/neetoui';
4
+ import Modal from '@bigbinary/neetoui/Modal';
5
5
  import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
6
6
  import Search from '@bigbinary/neeto-molecules/Search';
7
+ import Spinner from '@bigbinary/neetoui/Spinner';
8
+ import Typography from '@bigbinary/neetoui/Typography';
7
9
  import { useTranslation } from 'react-i18next';
8
10
  import { refetchTags, TagsComponent, NeetoTags } from '@bigbinary/neeto-tags-frontend';
11
+ import { useQuery, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
9
12
  import { useMutationWithInvalidation } from '@bigbinary/neeto-commons-frontend/react-utils';
10
13
  import { prop, pluck } from 'ramda';
11
- import { useQuery, useInfiniteQuery, useMutation, useQueryClient } from 'react-query';
12
14
  import axios from 'axios';
15
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
13
16
  import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
14
17
  import { t as t$1 } from 'i18next';
15
18
  import classnames from 'classnames';
16
19
  import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
17
20
  import { LeftArrow } from '@bigbinary/neeto-icons';
18
- import { Form, ActionBlock } from '@bigbinary/neetoui/formik';
21
+ import Button from '@bigbinary/neetoui/Button';
22
+ import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
23
+ import Form from '@bigbinary/neetoui/formik/Form';
19
24
  import { useParams } from 'react-router-dom';
20
25
  import { ImageUploader } from '@bigbinary/neeto-image-uploader-frontend';
21
26
  import { useField, useFormikContext } from 'formik';
22
27
  import Header from '@bigbinary/neeto-molecules/Header';
23
28
  import Scrollable from '@bigbinary/neeto-molecules/Scrollable';
29
+ import Label from '@bigbinary/neetoui/Label';
24
30
 
25
31
  function _arrayWithHoles(arr) {
26
32
  if (Array.isArray(arr)) return arr;
@@ -428,20 +434,22 @@ var QUERY_KEYS = {
428
434
  TEMPLATE_TAGS: "tag-key"
429
435
  };
430
436
 
431
- 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; }
432
- 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; }
437
+ 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; }
438
+ 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; }
433
439
  var useFetchTemplates = function useFetchTemplates(_ref) {
434
440
  var searchTerm = _ref.searchTerm,
435
441
  category = _ref.category;
436
- return useInfiniteQuery([QUERY_KEYS.TEMPLATES_LIST, searchTerm, category], function (_ref2) {
437
- var _ref2$pageParam = _ref2.pageParam,
438
- pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
439
- return templatesApi.list({
440
- page: pageParam,
441
- searchTerm: searchTerm,
442
- category: category
443
- });
444
- }, {
442
+ return useInfiniteQuery({
443
+ queryKey: [QUERY_KEYS.TEMPLATES_LIST, searchTerm, category],
444
+ queryFn: function queryFn(_ref2) {
445
+ var _ref2$pageParam = _ref2.pageParam,
446
+ pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
447
+ return templatesApi.list({
448
+ page: pageParam,
449
+ searchTerm: searchTerm,
450
+ category: category
451
+ });
452
+ },
445
453
  getNextPageParam: function getNextPageParam(lastPage) {
446
454
  return lastPage.hasNextPage ? lastPage.page + 1 : undefined;
447
455
  },
@@ -459,30 +467,26 @@ var useFetchTemplates = function useFetchTemplates(_ref) {
459
467
  keepPreviousData: true
460
468
  });
461
469
  };
462
- var useCreateTemplate = function useCreateTemplate(_ref3, options) {
463
- var refetchResource = _ref3.refetchResource;
464
- return useMutation(templatesApi.create, _objectSpread$4(_objectSpread$4({}, options), {}, {
465
- onSuccess: function onSuccess() {
466
- refetchResource();
467
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
468
- args[_key] = arguments[_key];
469
- }
470
- options === null || options === void 0 || options.onSuccess.apply(options, args);
470
+ var useCreateTemplate = function useCreateTemplate() {
471
+ return useMutation({
472
+ mutationFn: templatesApi.create
473
+ });
474
+ };
475
+ var useFetchTemplate = function useFetchTemplate(_ref3, options) {
476
+ var resourceId = _ref3.resourceId;
477
+ return useQuery(_objectSpread$5({
478
+ queryKey: [QUERY_KEYS.TEMPLATE, resourceId],
479
+ queryFn: function queryFn() {
480
+ return templatesApi.fetch({
481
+ templateId: resourceId
482
+ });
471
483
  }
472
- }));
484
+ }, options));
473
485
  };
474
- var useFetchTemplate = function useFetchTemplate(_ref4, options) {
486
+ var useUpdateTemplate = function useUpdateTemplate(_ref4) {
475
487
  var resourceId = _ref4.resourceId;
476
- return useQuery([QUERY_KEYS.TEMPLATE, resourceId], function () {
477
- return templatesApi.fetch({
478
- templateId: resourceId
479
- });
480
- }, options);
481
- };
482
- var useUpdateTemplate = function useUpdateTemplate(_ref5) {
483
- var resourceId = _ref5.resourceId;
484
- return useMutationWithInvalidation(function (_ref6) {
485
- var template = _ref6.template;
488
+ return useMutationWithInvalidation(function (_ref5) {
489
+ var template = _ref5.template;
486
490
  return templatesApi.update({
487
491
  resourceId: resourceId,
488
492
  payload: {
@@ -505,43 +509,49 @@ var BlankCard = function BlankCard(_ref) {
505
509
  onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
506
510
  _ref$disabled = _ref.disabled,
507
511
  disabled = _ref$disabled === void 0 ? false : _ref$disabled;
508
- return /*#__PURE__*/React__default.createElement("div", {
512
+ return /*#__PURE__*/jsxs("div", {
509
513
  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",
510
514
  "data-cy": "start-from-scratch-button",
511
515
  tabIndex: 0,
512
- onClick: !disabled ? onClick : noop
513
- }, /*#__PURE__*/React__default.createElement("div", {
514
- className: "neeto-ui-text-primary-500 mb-4"
515
- }, /*#__PURE__*/React__default.createElement(Icon, {
516
- size: 40
517
- })), /*#__PURE__*/React__default.createElement(Typography, {
518
- className: "text-center",
519
- lineHeight: "normal",
520
- style: "h5",
521
- weight: "semibold"
522
- }, title), /*#__PURE__*/React__default.createElement(Typography, {
523
- className: "neeto-ui-text-gray-600 text-center",
524
- lineHeight: "leading-4",
525
- style: "body3"
526
- }, description));
516
+ onClick: !disabled ? onClick : noop,
517
+ children: [/*#__PURE__*/jsx("div", {
518
+ className: "neeto-ui-text-primary-500 mb-4",
519
+ children: /*#__PURE__*/jsx(Icon, {
520
+ size: 40
521
+ })
522
+ }), /*#__PURE__*/jsx(Typography, {
523
+ className: "text-center",
524
+ lineHeight: "normal",
525
+ style: "h5",
526
+ weight: "semibold",
527
+ children: title
528
+ }), /*#__PURE__*/jsx(Typography, {
529
+ className: "neeto-ui-text-gray-600 text-center",
530
+ lineHeight: "leading-4",
531
+ style: "body3",
532
+ children: description
533
+ })]
534
+ });
527
535
  };
528
536
 
529
537
  var ButtonLoader = function ButtonLoader() {
530
- return /*#__PURE__*/React__default.createElement("div", {
531
- role: "status"
532
- }, /*#__PURE__*/React__default.createElement("svg", {
533
- "aria-hidden": "true",
534
- className: "neeto-ui-text-gray-400 inline h-4 w-4 animate-spin",
535
- fill: "none",
536
- viewBox: "0 0 100 101",
537
- xmlns: "http://www.w3.org/2000/svg"
538
- }, /*#__PURE__*/React__default.createElement("path", {
539
- 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",
540
- fill: "currentColor"
541
- }), /*#__PURE__*/React__default.createElement("path", {
542
- 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",
543
- fill: "#3642df"
544
- })));
538
+ return /*#__PURE__*/jsx("div", {
539
+ role: "status",
540
+ children: /*#__PURE__*/jsxs("svg", {
541
+ "aria-hidden": "true",
542
+ className: "neeto-ui-text-gray-400 inline h-4 w-4 animate-spin",
543
+ fill: "none",
544
+ viewBox: "0 0 100 101",
545
+ xmlns: "http://www.w3.org/2000/svg",
546
+ children: [/*#__PURE__*/jsx("path", {
547
+ 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",
548
+ fill: "currentColor"
549
+ }), /*#__PURE__*/jsx("path", {
550
+ 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",
551
+ fill: "#3642df"
552
+ })]
553
+ })
554
+ });
545
555
  };
546
556
 
547
557
  var getMenuItems = function getMenuItems(_ref) {
@@ -553,7 +563,7 @@ var getMenuItems = function getMenuItems(_ref) {
553
563
  "data-cy": "use-this-template-button",
554
564
  isDisabled: isCreating,
555
565
  label: t$1("neetoTemplate.templates.editTemplate"),
556
- suffix: isCreating && /*#__PURE__*/React__default.createElement(ButtonLoader, null),
566
+ suffix: isCreating && /*#__PURE__*/jsx(ButtonLoader, {}),
557
567
  onClick: function onClick(event) {
558
568
  return handleCreateTemplate(event, template.id);
559
569
  }
@@ -569,55 +579,58 @@ var Card = function Card(_ref) {
569
579
  onClick = _ref.onClick,
570
580
  afterCreate = _ref.afterCreate,
571
581
  refetchResource = _ref.refetchResource;
572
- var _useCreateTemplate = useCreateTemplate({
573
- refetchResource: refetchResource
574
- }),
582
+ var _useCreateTemplate = useCreateTemplate(),
575
583
  createTemplate = _useCreateTemplate.mutate,
576
- isCreating = _useCreateTemplate.isLoading;
584
+ isCreating = _useCreateTemplate.isPending;
577
585
  var handleCreateTemplate = function handleCreateTemplate(e, templateId) {
578
586
  e.stopPropagation();
579
587
  createTemplate({
580
588
  id: templateId
581
589
  }, {
582
590
  onSuccess: function onSuccess(response) {
583
- return afterCreate(response);
591
+ afterCreate(response);
592
+ refetchResource();
584
593
  }
585
594
  });
586
595
  };
587
- return /*#__PURE__*/React__default.createElement("div", {
588
- 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",
596
+ return /*#__PURE__*/jsxs("div", {
597
+ onClick: onClick,
598
+ 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",
589
599
  "data-cy": "template-card",
590
600
  tabIndex: 0,
591
- onClick: onClick
592
- }, /*#__PURE__*/React__default.createElement("div", {
593
- className: "neeto-template__header"
594
- }, /*#__PURE__*/React__default.createElement("img", {
595
- className: "neeto-template__image",
596
- "data-cy": "template-thumbnail-image",
597
- src: template.imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
598
- })), /*#__PURE__*/React__default.createElement("div", {
599
- className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg p-2 py-1.5"
600
- }, /*#__PURE__*/React__default.createElement(Typography, {
601
- className: "neeto-ui-text-gray-800 line-clamp-2",
602
- "data-cy": "template-card-title",
603
- lineHeight: "normal",
604
- style: "body2"
605
- }, template.title), /*#__PURE__*/React__default.createElement(MoreDropdown, {
606
- dropdownButtonProps: {
607
- className: "flex-shrink-0",
608
- size: "small"
609
- },
610
- dropdownProps: {
611
- onClick: function onClick(event) {
612
- return event.stopPropagation();
613
- }
614
- },
615
- menuItems: getMenuItems({
616
- handleCreateTemplate: handleCreateTemplate,
617
- isCreating: isCreating,
618
- template: template
619
- })
620
- })));
601
+ children: [/*#__PURE__*/jsx("div", {
602
+ className: "neeto-template__header",
603
+ children: /*#__PURE__*/jsx("img", {
604
+ className: "neeto-template__image",
605
+ "data-cy": "template-thumbnail-image",
606
+ src: template.imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
607
+ })
608
+ }), /*#__PURE__*/jsxs("div", {
609
+ className: "neeto-template__description neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg p-2 py-1.5",
610
+ children: [/*#__PURE__*/jsx(Typography, {
611
+ className: "neeto-ui-text-gray-800 line-clamp-2",
612
+ "data-cy": "template-card-title",
613
+ lineHeight: "normal",
614
+ style: "body2",
615
+ children: template.title
616
+ }), /*#__PURE__*/jsx(MoreDropdown, {
617
+ dropdownButtonProps: {
618
+ className: "flex-shrink-0",
619
+ size: "small"
620
+ },
621
+ dropdownProps: {
622
+ onClick: function onClick(event) {
623
+ return event.stopPropagation();
624
+ }
625
+ },
626
+ menuItems: getMenuItems({
627
+ handleCreateTemplate: handleCreateTemplate,
628
+ isCreating: isCreating,
629
+ template: template
630
+ })
631
+ })]
632
+ })]
633
+ });
621
634
  };
622
635
 
623
636
  var CategoryItem = function CategoryItem(_ref) {
@@ -625,19 +638,24 @@ var CategoryItem = function CategoryItem(_ref) {
625
638
  count = _ref.count,
626
639
  isActive = _ref.isActive,
627
640
  setCurrentCategory = _ref.setCurrentCategory;
628
- return /*#__PURE__*/React__default.createElement("button", {
641
+ return /*#__PURE__*/jsxs("button", {
629
642
  "data-cy": "category-".concat(joinHyphenCase(label)),
630
643
  tabIndex: 0,
631
644
  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", {
632
645
  "neeto-ui-text-gray-700 hover:neeto-ui-bg-gray-200 focus:neeto-ui-bg-gray-200 border-transparent": !isActive,
633
646
  "neeto-ui-text-gray-800 neeto-ui-bg-white neeto-ui-border-gray-300 focus:neeto-ui-border-gray-500": isActive
634
647
  }),
635
- onClick: setCurrentCategory
636
- }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, count));
648
+ onClick: setCurrentCategory,
649
+ children: [/*#__PURE__*/jsx("span", {
650
+ children: label
651
+ }), /*#__PURE__*/jsx("span", {
652
+ children: count
653
+ })]
654
+ });
637
655
  };
638
656
 
639
- 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; }
640
- 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; }
657
+ 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; }
658
+ 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; }
641
659
  var List = function List(_ref) {
642
660
  var setCurrentScreen = _ref.setCurrentScreen,
643
661
  setSelectedTemplate = _ref.setSelectedTemplate,
@@ -680,7 +698,7 @@ var List = function List(_ref) {
680
698
  setSelectedTemplate(template);
681
699
  };
682
700
  if (isTemplatesLoading) {
683
- return /*#__PURE__*/React__default.createElement(PageLoader, null);
701
+ return /*#__PURE__*/jsx(PageLoader, {});
684
702
  }
685
703
  var _data$tags = data.tags,
686
704
  tags = _data$tags === void 0 ? [] : _data$tags,
@@ -688,83 +706,96 @@ var List = function List(_ref) {
688
706
  templates = _data$templates === void 0 ? [] : _data$templates,
689
707
  _data$templatesCount = data.templatesCount,
690
708
  templatesCount = _data$templatesCount === void 0 ? 0 : _data$templatesCount;
691
- var categories = [_objectSpread$3(_objectSpread$3({}, DEFAULT_CATEGORY), {}, {
709
+ var categories = [_objectSpread$4(_objectSpread$4({}, DEFAULT_CATEGORY), {}, {
692
710
  count: templatesCount
693
711
  })].concat(_toConsumableArray(tags));
694
- return /*#__PURE__*/React__default.createElement("div", {
695
- className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start"
696
- }, /*#__PURE__*/React__default.createElement("div", {
697
- 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"
698
- }, /*#__PURE__*/React__default.createElement("div", {
699
- className: "space-y-4"
700
- }, /*#__PURE__*/React__default.createElement("div", {
701
- className: "space-y-1"
702
- }, /*#__PURE__*/React__default.createElement(Typography, {
703
- "data-cy": "create-new-form-title",
704
- style: "h2",
705
- weight: "semibold"
706
- }, t("neetoTemplate.templates.createNewEntity")), /*#__PURE__*/React__default.createElement(Typography, {
707
- lineHeight: "normal",
708
- style: "body2"
709
- }, t("neetoTemplate.templates.description"))), /*#__PURE__*/React__default.createElement(Search, {
710
- autoFocus: true,
711
- disableTrimOnBlur: true,
712
- "data-cy": "template-search-input",
713
- placeholder: t("neetoTemplate.templates.search"),
714
- onSearch: function onSearch(value) {
715
- return setSearchTerm(value);
716
- }
717
- })), /*#__PURE__*/React__default.createElement("div", {
718
- className: "space-y-3"
719
- }, /*#__PURE__*/React__default.createElement(Typography, {
720
- className: "uppercase",
721
- "data-cy": "template-categories-label",
722
- style: "h6"
723
- }, t("neetoTemplate.templates.categories")), /*#__PURE__*/React__default.createElement("div", {
724
- className: "space-y-2"
725
- }, categories.map(function (_ref2) {
726
- var id = _ref2.id,
727
- name = _ref2.name,
728
- count = _ref2.count;
729
- return /*#__PURE__*/React__default.createElement(CategoryItem, {
730
- count: count,
731
- isActive: currentCategory.id === id,
732
- key: id,
733
- label: name,
734
- setCurrentCategory: function setCurrentCategory() {
735
- return _setCurrentCategory({
736
- id: id,
737
- name: name
738
- });
739
- }
740
- });
741
- })))), /*#__PURE__*/React__default.createElement("div", {
742
- className: "h-screen w-full overflow-y-auto py-8 pl-5 pr-4 md:pl-8 md:pr-20 xl:px-20",
743
- ref: rootRef
744
- }, /*#__PURE__*/React__default.createElement("div", {
745
- className: "flex-grow space-y-6"
746
- }, /*#__PURE__*/React__default.createElement("div", {
747
- 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"
748
- }, /*#__PURE__*/React__default.createElement(BlankCard, {
749
- description: t("neetoTemplate.templates.blankCard.description"),
750
- disabled: isCreating,
751
- icon: isCreating ? Spinner : SvgCustom,
752
- title: t("neetoTemplate.templates.blankCard.title"),
753
- onClick: onCreate
754
- }), templates.map(function (template, index) {
755
- return /*#__PURE__*/React__default.createElement(Card, {
756
- afterCreate: afterCreate,
757
- refetchResource: refetchResource,
758
- template: template,
759
- key: index,
760
- onClick: function onClick() {
761
- return handleCardClick(template);
762
- }
763
- });
764
- })), hasNextPage && /*#__PURE__*/React__default.createElement("div", {
765
- className: "my-10 text-center",
766
- ref: sentryRef
767
- }, /*#__PURE__*/React__default.createElement(Spinner, null)))));
712
+ return /*#__PURE__*/jsxs("div", {
713
+ className: "neeto-ui-bg-gray-100 relative flex min-h-full items-start",
714
+ children: [/*#__PURE__*/jsxs("div", {
715
+ 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",
716
+ children: [/*#__PURE__*/jsxs("div", {
717
+ className: "space-y-4",
718
+ children: [/*#__PURE__*/jsxs("div", {
719
+ className: "space-y-1",
720
+ children: [/*#__PURE__*/jsx(Typography, {
721
+ "data-cy": "create-new-form-title",
722
+ style: "h2",
723
+ weight: "semibold",
724
+ children: t("neetoTemplate.templates.createNewEntity")
725
+ }), /*#__PURE__*/jsx(Typography, {
726
+ lineHeight: "normal",
727
+ style: "body2",
728
+ children: t("neetoTemplate.templates.description")
729
+ })]
730
+ }), /*#__PURE__*/jsx(Search, {
731
+ autoFocus: true,
732
+ disableTrimOnBlur: true,
733
+ "data-cy": "template-search-input",
734
+ placeholder: t("neetoTemplate.templates.search"),
735
+ onSearch: function onSearch(value) {
736
+ return setSearchTerm(value);
737
+ }
738
+ })]
739
+ }), /*#__PURE__*/jsxs("div", {
740
+ className: "space-y-3",
741
+ children: [/*#__PURE__*/jsx(Typography, {
742
+ className: "uppercase",
743
+ "data-cy": "template-categories-label",
744
+ style: "h6",
745
+ children: t("neetoTemplate.templates.categories")
746
+ }), /*#__PURE__*/jsx("div", {
747
+ className: "space-y-2",
748
+ children: categories.map(function (_ref2) {
749
+ var id = _ref2.id,
750
+ name = _ref2.name,
751
+ count = _ref2.count;
752
+ return /*#__PURE__*/createElement(CategoryItem, {
753
+ count: count,
754
+ isActive: currentCategory.id === id,
755
+ key: id,
756
+ label: name,
757
+ setCurrentCategory: function setCurrentCategory() {
758
+ return _setCurrentCategory({
759
+ id: id,
760
+ name: name
761
+ });
762
+ }
763
+ });
764
+ })
765
+ })]
766
+ })]
767
+ }), /*#__PURE__*/jsx("div", {
768
+ className: "h-screen w-full overflow-y-auto py-8 pl-5 pr-4 md:pl-8 md:pr-20 xl:px-20",
769
+ ref: rootRef,
770
+ children: /*#__PURE__*/jsxs("div", {
771
+ className: "flex-grow space-y-6",
772
+ children: [/*#__PURE__*/jsxs("div", {
773
+ 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",
774
+ children: [/*#__PURE__*/jsx(BlankCard, {
775
+ description: t("neetoTemplate.templates.blankCard.description"),
776
+ disabled: isCreating,
777
+ icon: isCreating ? Spinner : SvgCustom,
778
+ title: t("neetoTemplate.templates.blankCard.title"),
779
+ onClick: onCreate
780
+ }), templates.map(function (template, index) {
781
+ return /*#__PURE__*/createElement(Card, {
782
+ afterCreate: afterCreate,
783
+ refetchResource: refetchResource,
784
+ template: template,
785
+ key: index,
786
+ onClick: function onClick() {
787
+ return handleCardClick(template);
788
+ }
789
+ });
790
+ })]
791
+ }), hasNextPage && /*#__PURE__*/jsx("div", {
792
+ className: "my-10 text-center",
793
+ ref: sentryRef,
794
+ children: /*#__PURE__*/jsx(Spinner, {})
795
+ })]
796
+ })
797
+ })]
798
+ });
768
799
  };
769
800
 
770
801
  var Preview$1 = function Preview(_ref) {
@@ -774,55 +805,59 @@ var Preview$1 = function Preview(_ref) {
774
805
  refetchResource = _ref.refetchResource;
775
806
  var _useTranslation = useTranslation(),
776
807
  t = _useTranslation.t;
777
- var _useCreateTemplate = useCreateTemplate({
778
- refetchResource: refetchResource
779
- }),
808
+ var _useCreateTemplate = useCreateTemplate(),
780
809
  createTemplate = _useCreateTemplate.mutate,
781
- isCreating = _useCreateTemplate.isLoading;
810
+ isCreating = _useCreateTemplate.isPending;
782
811
  var handleCreateTemplate = function handleCreateTemplate() {
783
812
  createTemplate({
784
813
  id: selectedTemplate.id
785
814
  }, {
786
815
  onSuccess: function onSuccess(response) {
787
- return afterCreate(response);
816
+ afterCreate(response);
817
+ refetchResource();
788
818
  }
789
819
  });
790
820
  };
791
821
  var title = selectedTemplate.title,
792
822
  previewUrl = selectedTemplate.previewUrl;
793
- return /*#__PURE__*/React__default.createElement("div", {
794
- className: "m-auto flex h-full w-full max-w-6xl flex-col space-y-6 py-6"
795
- }, /*#__PURE__*/React__default.createElement("div", {
796
- className: "flex flex-col items-center justify-between gap-6 pl-4 pr-16 md:flex-row md:pr-20 xl:px-0"
797
- }, /*#__PURE__*/React__default.createElement("div", {
798
- className: "flex min-w-0 flex-grow items-center gap-2"
799
- }, /*#__PURE__*/React__default.createElement(Button, {
800
- className: "flex-shrink-0",
801
- "data-cy": "preview-template-back-button",
802
- icon: LeftArrow,
803
- style: "text",
804
- onClick: function onClick() {
805
- return setCurrentScreen(TEMPLATE_SCREENS.LIST);
806
- }
807
- }), /*#__PURE__*/React__default.createElement(Typography, {
808
- className: "leading-none",
809
- "data-cy": "preview-template-title",
810
- style: "h2",
811
- weight: "semibold"
812
- }, title)), /*#__PURE__*/React__default.createElement(Button, {
813
- className: "flex-shrink-0",
814
- "data-cy": "preview-use-template-button",
815
- disabled: isCreating,
816
- label: t("neetoTemplate.templates.editTemplate"),
817
- loading: isCreating,
818
- onClick: handleCreateTemplate
819
- })), /*#__PURE__*/React__default.createElement("div", {
820
- className: "neeto-templates-share-preview neeto-ui-rounded-sm sticky top-10"
821
- }, /*#__PURE__*/React__default.createElement("iframe", {
822
- className: "w-full flex-1 shadow-inner",
823
- "data-cy": "iframe-id",
824
- src: previewUrl
825
- })));
823
+ return /*#__PURE__*/jsxs("div", {
824
+ className: "m-auto flex h-full w-full max-w-6xl flex-col space-y-6 py-6",
825
+ children: [/*#__PURE__*/jsxs("div", {
826
+ className: "flex flex-col items-center justify-between gap-6 pl-4 pr-16 md:flex-row md:pr-20 xl:px-0",
827
+ children: [/*#__PURE__*/jsxs("div", {
828
+ className: "flex min-w-0 flex-grow items-center gap-2",
829
+ children: [/*#__PURE__*/jsx(Button, {
830
+ className: "flex-shrink-0",
831
+ "data-cy": "preview-template-back-button",
832
+ icon: LeftArrow,
833
+ style: "text",
834
+ onClick: function onClick() {
835
+ return setCurrentScreen(TEMPLATE_SCREENS.LIST);
836
+ }
837
+ }), /*#__PURE__*/jsx(Typography, {
838
+ className: "leading-none",
839
+ "data-cy": "preview-template-title",
840
+ style: "h2",
841
+ weight: "semibold",
842
+ children: title
843
+ })]
844
+ }), /*#__PURE__*/jsx(Button, {
845
+ className: "flex-shrink-0",
846
+ "data-cy": "preview-use-template-button",
847
+ disabled: isCreating,
848
+ label: t("neetoTemplate.templates.editTemplate"),
849
+ loading: isCreating,
850
+ onClick: handleCreateTemplate
851
+ })]
852
+ }), /*#__PURE__*/jsx("div", {
853
+ className: "neeto-templates-share-preview neeto-ui-rounded-sm sticky top-10",
854
+ children: /*#__PURE__*/jsx("iframe", {
855
+ className: "w-full flex-1 shadow-inner",
856
+ "data-cy": "iframe-id",
857
+ src: previewUrl
858
+ })
859
+ })]
860
+ });
826
861
  };
827
862
 
828
863
  var CreateTemplateModal = function CreateTemplateModal(_ref) {
@@ -849,24 +884,25 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
849
884
  }, 300); //To accommodate the animation duration.
850
885
  };
851
886
 
852
- return /*#__PURE__*/React__default.createElement(Modal, {
887
+ return /*#__PURE__*/jsx(Modal, {
853
888
  className: "neeto-template-list h-screen w-screen overflow-y-auto",
854
889
  isOpen: isOpen,
855
890
  size: "fullScreen",
856
- onClose: onModalClose
857
- }, currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/React__default.createElement(List, {
858
- setCurrentScreen: setCurrentScreen,
859
- setSelectedTemplate: setSelectedTemplate,
860
- isCreating: isCreating,
861
- afterCreate: afterCreate,
862
- onCreate: onCreate,
863
- refetchResource: refetchResource
864
- }) : /*#__PURE__*/React__default.createElement(Preview$1, {
865
- selectedTemplate: selectedTemplate,
866
- setCurrentScreen: setCurrentScreen,
867
- afterCreate: afterCreate,
868
- refetchResource: refetchResource
869
- }));
891
+ onClose: onModalClose,
892
+ children: currentScreen === TEMPLATE_SCREENS.LIST ? /*#__PURE__*/jsx(List, {
893
+ setCurrentScreen: setCurrentScreen,
894
+ setSelectedTemplate: setSelectedTemplate,
895
+ isCreating: isCreating,
896
+ afterCreate: afterCreate,
897
+ onCreate: onCreate,
898
+ refetchResource: refetchResource
899
+ }) : /*#__PURE__*/jsx(Preview$1, {
900
+ selectedTemplate: selectedTemplate,
901
+ setCurrentScreen: setCurrentScreen,
902
+ afterCreate: afterCreate,
903
+ refetchResource: refetchResource
904
+ })
905
+ });
870
906
  };
871
907
 
872
908
  var create = function create(payload) {
@@ -884,10 +920,12 @@ var templateTagsApi = {
884
920
  list: list
885
921
  };
886
922
 
887
- 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; }
888
- 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; }
923
+ 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; }
924
+ 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; }
889
925
  var useCreateTemplateTag = function useCreateTemplateTag(options) {
890
- return useMutation(templateTagsApi.create, _objectSpread$2(_objectSpread$2({}, options), {}, {
926
+ return useMutation(_objectSpread$3(_objectSpread$3({
927
+ mutationFn: templateTagsApi.create
928
+ }, options), {}, {
891
929
  onSuccess: function onSuccess() {
892
930
  var _options$onSuccess;
893
931
  refetchTags();
@@ -896,7 +934,10 @@ var useCreateTemplateTag = function useCreateTemplateTag(options) {
896
934
  }));
897
935
  };
898
936
  var useFetchTemplateTags = function useFetchTemplateTags() {
899
- return useQuery([QUERY_KEYS.TEMPLATE_TAGS], templateTagsApi.list);
937
+ return useQuery({
938
+ queryKey: [QUERY_KEYS.TEMPLATE_TAGS],
939
+ queryFn: templateTagsApi.list
940
+ });
900
941
  };
901
942
 
902
943
  var FormikImageUploader = function FormikImageUploader(_ref) {
@@ -912,7 +953,7 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
912
953
  setFieldValue("imageSignedId", file.signedId);
913
954
  return setValue(file.url);
914
955
  };
915
- return /*#__PURE__*/React__default.createElement(ImageUploader, {
956
+ return /*#__PURE__*/jsx(ImageUploader, {
916
957
  className: "h-52 w-full md:h-80",
917
958
  src: field.value,
918
959
  uploadConfig: IMAGE_UPLOAD_CONFIG,
@@ -923,20 +964,22 @@ var FormikImageUploader = function FormikImageUploader(_ref) {
923
964
  var PageWrapper = function PageWrapper(_ref) {
924
965
  var children = _ref.children,
925
966
  className = _ref.className;
926
- return /*#__PURE__*/React__default.createElement("div", {
927
- className: classnames("w-full flex-col", className)
928
- }, children);
967
+ return /*#__PURE__*/jsx("div", {
968
+ className: classnames("w-full flex-col", className),
969
+ children: children
970
+ });
929
971
  };
930
972
  var PageHeader = function PageHeader(_ref2) {
931
973
  var title = _ref2.title,
932
974
  breadcrumbs = _ref2.breadcrumbs;
933
- return /*#__PURE__*/React__default.createElement("div", {
934
- className: "w-full px-6"
935
- }, /*#__PURE__*/React__default.createElement(Header, {
936
- breadcrumbs: breadcrumbs,
937
- size: "small",
938
- title: title
939
- }));
975
+ return /*#__PURE__*/jsx("div", {
976
+ className: "w-full px-6",
977
+ children: /*#__PURE__*/jsx(Header, {
978
+ breadcrumbs: breadcrumbs,
979
+ size: "small",
980
+ title: title
981
+ })
982
+ });
940
983
  };
941
984
  var customPropEqualityCheck = function customPropEqualityCheck(prevProps, nextProps) {
942
985
  return prevProps.title === nextProps.title && prevProps.breadcrumbs === nextProps.breadcrumbs;
@@ -946,13 +989,17 @@ var PageContent = function PageContent(_ref3) {
946
989
  var children = _ref3.children,
947
990
  _ref3$className = _ref3.className,
948
991
  className = _ref3$className === void 0 ? "" : _ref3$className;
949
- return /*#__PURE__*/React__default.createElement(Scrollable, {
950
- className: "w-full px-6 pb-6"
951
- }, /*#__PURE__*/React__default.createElement("div", {
952
- className: classnames(["mx-auto max-w-7xl", className])
953
- }, children));
992
+ return /*#__PURE__*/jsx(Scrollable, {
993
+ className: "w-full px-6 pb-6",
994
+ children: /*#__PURE__*/jsx("div", {
995
+ className: classnames(["mx-auto max-w-7xl", className]),
996
+ children: children
997
+ })
998
+ });
954
999
  };
955
1000
 
1001
+ 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; }
1002
+ 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; }
956
1003
  var Tags = function Tags(_ref) {
957
1004
  var allTags = _ref.allTags,
958
1005
  selectedTags = _ref.selectedTags,
@@ -984,44 +1031,52 @@ var Tags = function Tags(_ref) {
984
1031
  }
985
1032
  });
986
1033
  };
987
- return /*#__PURE__*/React__default.createElement("div", {
988
- className: className
989
- }, labelProps.label && /*#__PURE__*/React__default.createElement(Label, labelProps, labelProps.label), /*#__PURE__*/React__default.createElement("div", {
990
- className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border p-4"
991
- }, /*#__PURE__*/React__default.createElement(TagsComponent, {
992
- allTags: allTags,
993
- selectedTags: selectedTags,
994
- buttonProps: {
995
- loading: isLoading,
996
- disabled: isLoading,
997
- iconPosition: "left"
998
- },
999
- onTagCreate: handleTagCreate,
1000
- onTagDelete: handleTagRemove,
1001
- onTagSelect: handleTagSelect
1002
- })));
1034
+ return /*#__PURE__*/jsxs("div", {
1035
+ className: className,
1036
+ children: [labelProps.label && /*#__PURE__*/jsx(Label, _objectSpread$2(_objectSpread$2({}, labelProps), {}, {
1037
+ children: labelProps.label
1038
+ })), /*#__PURE__*/jsx("div", {
1039
+ className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border p-4",
1040
+ children: /*#__PURE__*/jsx(TagsComponent, {
1041
+ allTags: allTags,
1042
+ selectedTags: selectedTags,
1043
+ buttonProps: {
1044
+ loading: isLoading,
1045
+ disabled: isLoading,
1046
+ iconPosition: "left"
1047
+ },
1048
+ onTagCreate: handleTagCreate,
1049
+ onTagDelete: handleTagRemove,
1050
+ onTagSelect: handleTagSelect
1051
+ })
1052
+ })]
1053
+ });
1003
1054
  };
1004
1055
 
1005
1056
  var Preview = function Preview(_ref) {
1006
1057
  var template = _ref.template,
1007
1058
  imageUrl = _ref.imageUrl;
1008
- return /*#__PURE__*/React__default.createElement("div", {
1059
+ return /*#__PURE__*/jsxs("div", {
1009
1060
  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",
1010
- tabIndex: 0
1011
- }, /*#__PURE__*/React__default.createElement("div", {
1012
- className: "neeto-template__header"
1013
- }, /*#__PURE__*/React__default.createElement("img", {
1014
- className: "neeto-template__image",
1015
- "data-cy": "template-image-preview",
1016
- src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
1017
- })), /*#__PURE__*/React__default.createElement("div", {
1018
- className: "neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-2 py-1.5"
1019
- }, /*#__PURE__*/React__default.createElement(Typography, {
1020
- className: "neeto-ui-text-gray-800",
1021
- "data-cy": "template-title-text",
1022
- lineHeight: "normal",
1023
- style: "body2"
1024
- }, template.title)));
1061
+ tabIndex: 0,
1062
+ children: [/*#__PURE__*/jsx("div", {
1063
+ className: "neeto-template__header",
1064
+ children: /*#__PURE__*/jsx("img", {
1065
+ className: "neeto-template__image",
1066
+ "data-cy": "template-image-preview",
1067
+ src: imageUrl || "https://d2v7kzglnr2dnh.cloudfront.net/images/neetoForm/default-form-template.svg"
1068
+ })
1069
+ }), /*#__PURE__*/jsx("div", {
1070
+ className: "neeto-ui-bg-white flex items-center justify-between gap-2 rounded-b-lg px-2 py-1.5",
1071
+ children: /*#__PURE__*/jsx(Typography, {
1072
+ className: "neeto-ui-text-gray-800",
1073
+ "data-cy": "template-title-text",
1074
+ lineHeight: "normal",
1075
+ style: "body2",
1076
+ children: template.title
1077
+ })
1078
+ })]
1079
+ });
1025
1080
  };
1026
1081
 
1027
1082
  var buildSelectOptionsBy = function buildSelectOptionsBy(labelField) {
@@ -1070,10 +1125,10 @@ var TemplateSettings = function TemplateSettings(_ref) {
1070
1125
  resourceId: resourceId
1071
1126
  }),
1072
1127
  updateTemplate = _useUpdateTemplate.mutate,
1073
- isUpdatingTemplate = _useUpdateTemplate.isLoading;
1128
+ isUpdatingTemplate = _useUpdateTemplate.isPending;
1074
1129
  var _useCreateTemplateTag = useCreateTemplateTag(),
1075
1130
  createTemplateTag = _useCreateTemplateTag.mutate,
1076
- isCreatingTags = _useCreateTemplateTag.isLoading;
1131
+ isCreatingTags = _useCreateTemplateTag.isPending;
1077
1132
  var _useFetchTemplateTags = useFetchTemplateTags(),
1078
1133
  _useFetchTemplateTags2 = _useFetchTemplateTags.data,
1079
1134
  templateTags = _useFetchTemplateTags2 === void 0 ? {} : _useFetchTemplateTags2,
@@ -1090,74 +1145,88 @@ var TemplateSettings = function TemplateSettings(_ref) {
1090
1145
  }, data), {}, {
1091
1146
  tags: tags
1092
1147
  });
1093
- return /*#__PURE__*/React__default.createElement(PageWrapper, {
1094
- className: className
1095
- }, /*#__PURE__*/React__default.createElement(MemoizedPageHeader, {
1096
- breadcrumbs: breadcrumbs,
1097
- title: t("neetoTemplate.templateSettings.title")
1098
- }), /*#__PURE__*/React__default.createElement(PageContent, {
1099
- className: classnames({
1100
- "min-h-0": !isLoading,
1101
- "h-full": isLoading
1102
- })
1103
- }, isLoading ? /*#__PURE__*/React__default.createElement(PageLoader, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
1104
- className: "mb-1",
1105
- "data-cy": "thank-you-action-text",
1106
- style: "h2",
1107
- weight: "semibold"
1108
- }, t("neetoTemplate.templateSettings.configureTemplates")), /*#__PURE__*/React__default.createElement(Typography, {
1109
- className: "mb-2",
1110
- "data-cy": "thank-you-description-label",
1111
- style: "body2"
1112
- }, t("neetoTemplate.templateSettings.subText")), /*#__PURE__*/React__default.createElement(Form, {
1113
- formikProps: {
1114
- enableReinitialize: true,
1115
- initialValues: resourceInitialValues,
1116
- onSubmit: handleSubmit
1117
- }
1118
- }, function (_ref2) {
1119
- var values = _ref2.values,
1120
- setFieldValue = _ref2.setFieldValue;
1121
- return /*#__PURE__*/React__default.createElement("div", {
1122
- className: "grid grid-cols-2 gap-8 pt-6"
1123
- }, /*#__PURE__*/React__default.createElement("div", {
1124
- className: "space-y-4"
1125
- }, /*#__PURE__*/React__default.createElement(Typography, {
1126
- className: "mb-3",
1127
- style: "h4",
1128
- weight: "semibold"
1129
- }, t("neetoTemplate.templateSettings.imageLabel")), /*#__PURE__*/React__default.createElement(FormikImageUploader, {
1130
- name: "imageUrl"
1131
- }), /*#__PURE__*/React__default.createElement(Tags, {
1132
- allTags: buildSelectOptionsBy("name", templateTags.tags),
1133
- className: "space-y-2",
1134
- isLoading: isCreatingTags,
1135
- selectedTags: values.tags,
1136
- labelProps: {
1137
- label: t("neetoTemplate.templateSettings.categoryLabel")
1138
- },
1139
- onCreate: createTemplateTag,
1140
- onUpdate: function onUpdate(tags) {
1141
- return setFieldValue("tags", tags);
1142
- }
1143
- }), /*#__PURE__*/React__default.createElement("div", {
1144
- className: "mt-12 flex flex-row items-center justify-start"
1145
- }, /*#__PURE__*/React__default.createElement(ActionBlock, {
1146
- isSubmitting: isUpdatingTemplate,
1147
- cancelButtonProps: {
1148
- to: onCancelTemplatePreview,
1149
- "data-cy": "reset-changes-button",
1150
- onClick: noop
1151
- }
1152
- }))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Typography, {
1153
- className: "mb-3",
1154
- style: "h4",
1155
- weight: "semibold"
1156
- }, t("neetoTemplate.templateSettings.previewLabel")), /*#__PURE__*/React__default.createElement(Preview, {
1157
- imageUrl: values.imageUrl,
1158
- template: data
1159
- })));
1160
- }))));
1148
+ return /*#__PURE__*/jsxs(PageWrapper, {
1149
+ className: className,
1150
+ children: [/*#__PURE__*/jsx(MemoizedPageHeader, {
1151
+ breadcrumbs: breadcrumbs,
1152
+ title: t("neetoTemplate.templateSettings.title")
1153
+ }), /*#__PURE__*/jsx(PageContent, {
1154
+ className: classnames({
1155
+ "min-h-0": !isLoading,
1156
+ "h-full": isLoading
1157
+ }),
1158
+ children: isLoading ? /*#__PURE__*/jsx(PageLoader, {}) : /*#__PURE__*/jsxs(Fragment, {
1159
+ children: [/*#__PURE__*/jsx(Typography, {
1160
+ className: "mb-1",
1161
+ "data-cy": "thank-you-action-text",
1162
+ style: "h2",
1163
+ weight: "semibold",
1164
+ children: t("neetoTemplate.templateSettings.configureTemplates")
1165
+ }), /*#__PURE__*/jsx(Typography, {
1166
+ className: "mb-2",
1167
+ "data-cy": "thank-you-description-label",
1168
+ style: "body2",
1169
+ children: t("neetoTemplate.templateSettings.subText")
1170
+ }), /*#__PURE__*/jsx(Form, {
1171
+ formikProps: {
1172
+ enableReinitialize: true,
1173
+ initialValues: resourceInitialValues,
1174
+ onSubmit: handleSubmit
1175
+ },
1176
+ children: function children(_ref2) {
1177
+ var values = _ref2.values,
1178
+ setFieldValue = _ref2.setFieldValue;
1179
+ return /*#__PURE__*/jsxs("div", {
1180
+ className: "grid grid-cols-2 gap-8 pt-6",
1181
+ children: [/*#__PURE__*/jsxs("div", {
1182
+ className: "space-y-4",
1183
+ children: [/*#__PURE__*/jsx(Typography, {
1184
+ className: "mb-3",
1185
+ style: "h4",
1186
+ weight: "semibold",
1187
+ children: t("neetoTemplate.templateSettings.imageLabel")
1188
+ }), /*#__PURE__*/jsx(FormikImageUploader, {
1189
+ name: "imageUrl"
1190
+ }), /*#__PURE__*/jsx(Tags, {
1191
+ allTags: buildSelectOptionsBy("name", templateTags.tags),
1192
+ className: "space-y-2",
1193
+ isLoading: isCreatingTags,
1194
+ selectedTags: values.tags,
1195
+ labelProps: {
1196
+ label: t("neetoTemplate.templateSettings.categoryLabel")
1197
+ },
1198
+ onCreate: createTemplateTag,
1199
+ onUpdate: function onUpdate(tags) {
1200
+ return setFieldValue("tags", tags);
1201
+ }
1202
+ }), /*#__PURE__*/jsx("div", {
1203
+ className: "mt-12 flex flex-row items-center justify-start",
1204
+ children: /*#__PURE__*/jsx(ActionBlock, {
1205
+ isSubmitting: isUpdatingTemplate,
1206
+ cancelButtonProps: {
1207
+ to: onCancelTemplatePreview,
1208
+ "data-cy": "reset-changes-button",
1209
+ onClick: noop
1210
+ }
1211
+ })
1212
+ })]
1213
+ }), /*#__PURE__*/jsxs("div", {
1214
+ children: [/*#__PURE__*/jsx(Typography, {
1215
+ className: "mb-3",
1216
+ style: "h4",
1217
+ weight: "semibold",
1218
+ children: t("neetoTemplate.templateSettings.previewLabel")
1219
+ }), /*#__PURE__*/jsx(Preview, {
1220
+ imageUrl: values.imageUrl,
1221
+ template: data
1222
+ })]
1223
+ })]
1224
+ });
1225
+ }
1226
+ })]
1227
+ })
1228
+ })]
1229
+ });
1161
1230
  };
1162
1231
 
1163
1232
  function _objectWithoutPropertiesLoose(source, excluded) {
@@ -1201,9 +1270,10 @@ var TAG_TYPES = [{
1201
1270
  width: 300,
1202
1271
  sorter: true,
1203
1272
  render: function render(templatesCount) {
1204
- return templatesCount !== 0 ? /*#__PURE__*/React__default.createElement(Typography, {
1205
- style: "body1"
1206
- }, " ", templatesCount, " ") : "-";
1273
+ return templatesCount !== 0 ? /*#__PURE__*/jsxs(Typography, {
1274
+ style: "body1",
1275
+ children: [" ", templatesCount, " "]
1276
+ }) : "-";
1207
1277
  }
1208
1278
  }]
1209
1279
  }];
@@ -1217,12 +1287,18 @@ var TemplateTags = function TemplateTags(_ref) {
1217
1287
  otherProps = _objectWithoutProperties(_ref, _excluded);
1218
1288
  var queryClient = useQueryClient();
1219
1289
  var invalidateTags = function invalidateTags() {
1220
- queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE_TAGS);
1290
+ queryClient.invalidateQueries({
1291
+ queryKey: [QUERY_KEYS.TEMPLATE_TAGS]
1292
+ });
1221
1293
  };
1222
1294
  var invalidateTagsAndTemplates = function invalidateTagsAndTemplates() {
1223
1295
  invalidateTags();
1224
- queryClient.invalidateQueries(QUERY_KEYS.TEMPLATES_LIST);
1225
- queryClient.invalidateQueries(QUERY_KEYS.TEMPLATE);
1296
+ queryClient.invalidateQueries({
1297
+ queryKey: [QUERY_KEYS.TEMPLATES_LIST]
1298
+ });
1299
+ queryClient.invalidateQueries({
1300
+ queryKey: [QUERY_KEYS.TEMPLATE]
1301
+ });
1226
1302
  };
1227
1303
  var config = _objectSpread({
1228
1304
  tagTypes: TAG_TYPES,
@@ -1252,7 +1328,7 @@ var TemplateTags = function TemplateTags(_ref) {
1252
1328
  }
1253
1329
  }
1254
1330
  }, otherProps);
1255
- return /*#__PURE__*/React__default.createElement(NeetoTags, {
1331
+ return /*#__PURE__*/jsx(NeetoTags, {
1256
1332
  config: config
1257
1333
  });
1258
1334
  };