@bigbinary/neeto-themes-frontend 4.2.3 → 4.2.4-beta1

package/dist/cjs/NeetoThemesBuilder.js

@@ -9,7 +9,7 @@ var reactI18next = require('react-i18next');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var Toastr = require('@bigbinary/neetoui/Toastr');
-var useGlobalThemesApi = require('../useGlobalThemesApi-B_qW7yfd.js');
+var useGlobalThemesApi = require('../useGlobalThemesApi-gt4U6XWZ.js');
 var useExpandedSection = require('../useExpandedSection-BTBI4UqP.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classnames = require('classnames');
@@ -54,6 +54,7 @@ var AddImage = require('@bigbinary/neeto-icons/AddImage');
 var CodeBlock = require('@bigbinary/neeto-icons/CodeBlock');
 var ColorPicker$1 = require('@bigbinary/neeto-icons/ColorPicker');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var Tag = require('@bigbinary/neetoui/Tag');
 var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
 var RightArrow = require('@bigbinary/neeto-icons/RightArrow');
 var Search$1 = require('@bigbinary/neeto-icons/Search');
@@ -644,6 +645,15 @@ var buildProperties = function buildProperties(values, condition, themePropertie
     return !imageKeys.has(dependsOn);
   });
 };
+var buildSystemThemeCopy = function buildSystemThemeCopy(systemTheme) {
+  if (!systemTheme) return null;
+  return _objectSpread$3(_objectSpread$3({}, ramda.omit(["id"], systemTheme)), {}, {
+    name: i18n.t("neetoThemes.common.cloneName", {
+      name: systemTheme.name
+    }),
+    properties: systemTheme.properties.map(ramda.omit(["id", "themeId"]))
+  });
+};
 
 var AlignmentBlock = function AlignmentBlock(_ref) {
   var label = _ref.label,
@@ -1401,6 +1411,7 @@ var Customize = function Customize(_ref) {
   var theme = _ref.theme,
     onCreateTheme = _ref.onCreateTheme,
     onApplyTheme = _ref.onApplyTheme,
+    onApplyThemeSuccess = _ref.onApplyThemeSuccess,
     onUpdateTheme = _ref.onUpdateTheme,
     isApplyingTheme = _ref.isApplyingTheme,
     onPropertiesChange = _ref.onPropertiesChange,
@@ -1419,6 +1430,7 @@ var Customize = function Customize(_ref) {
   var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"],
+        entityId: store["entityId"],
         entityType: store["entityType"],
         isFetchingSchema: store["isFetchingSchema"],
         helpPopoverProps: store["helpPopoverProps"],
@@ -1427,6 +1439,7 @@ var Customize = function Customize(_ref) {
       };
     }, shallow.shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    entityId = _useConfigStore.entityId,
     entityType = _useConfigStore.entityType,
     isFetchingSchema = _useConfigStore.isFetchingSchema,
     helpPopoverProps = _useConfigStore.helpPopoverProps,
@@ -1434,6 +1447,9 @@ var Customize = function Customize(_ref) {
     proFeatures = _useConfigStore.proFeatures;
   var _useParams = reactRouterDom.useParams(),
     themeId = _useParams.themeId;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    sourceThemeId = _useQueryParams.source;
+  var isCustomizingSystemTheme = !themeId && neetoCist.isPresent(sourceThemeId);
   var _useThemeStore = useExpandedSection.useThemeStore(function (store) {
       return {
         currentTheme: store["currentTheme"],
@@ -1454,12 +1470,21 @@ var Customize = function Customize(_ref) {
     _useFetchTheme$data = _useFetchTheme.data,
     themeData = _useFetchTheme$data === void 0 ? {} : _useFetchTheme$data,
     isLoadingTheme = _useFetchTheme.isLoadingTheme;
-  var isLoading = isFetchingSchema || isLoadingTheme;
+  var _useListThemes = useGlobalThemesApi.useListThemes(entityId),
+    _useListThemes$data = _useListThemes.data,
+    _useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
+    _useListThemes$data2$ = _useListThemes$data2.defaultThemes,
+    defaultThemes = _useListThemes$data2$ === void 0 ? [] : _useListThemes$data2$,
+    isLoadingSystemThemes = _useListThemes.isLoading;
+  var themeToCustomize = isCustomizingSystemTheme ? buildSystemThemeCopy(neetoCist.findBy({
+    id: sourceThemeId
+  }, defaultThemes)) : themeData;
+  var isLoading = isFetchingSchema || isLoadingTheme || isCustomizingSystemTheme && isLoadingSystemThemes;
   var isThemeGlobalTheme = themeId && (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === themeId;
   var isCurrentThemeAndGlobalThemeSame = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id);
   var _helpPopoverProps$sty = helpPopoverProps.style,
     styleHelpPopoverProps = _helpPopoverProps$sty === void 0 ? {} : _helpPopoverProps$sty;
-  var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+  var isEditingCurrentlyAppliedTheme = (themeId !== null && themeId !== void 0 ? themeId : sourceThemeId) === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
   var submitBtnRef = react.useRef(null);
   var _useCreateTheme = useGlobalThemesApi.useCreateTheme(),
     createTheme = _useCreateTheme.mutateAsync,
@@ -1467,13 +1492,57 @@ var Customize = function Customize(_ref) {
   var _useUpdateTheme = useGlobalThemesApi.useUpdateTheme(themeId),
     updateTheme = _useUpdateTheme.mutateAsync,
     isUpdating = _useUpdateTheme.isPending;
-  var isSubmitting = isCreating || isUpdating;
+  var _useApplyTheme = useGlobalThemesApi.useApplyTheme({}),
+    applyTheme = _useApplyTheme.mutateAsync,
+    isApplyingCreatedTheme = _useApplyTheme.isPending;
+  var isSubmitting = isCreating || isUpdating || isApplyingCreatedTheme;
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
   var handleGlobalThemeSwitchChange = function handleGlobalThemeSwitchChange(e, setFieldValue) {
     setFieldValue("shouldSetAsGlobalTheme", e.target.checked);
   };
-  var onSubmit = function onSubmit(values, _ref2) {
-    var resetForm = _ref2.resetForm;
+  var createAndOpenTheme = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeToSave, resetForm) {
+      var _yield$createTheme, theme;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return createTheme(themeToSave);
+          case 2:
+            _yield$createTheme = _context.sent;
+            theme = _yield$createTheme.theme;
+            resetForm({
+              values: theme
+            });
+            if (!isCustomizingSystemTheme) {
+              _context.next = 9;
+              break;
+            }
+            _context.next = 8;
+            return applyTheme({
+              themeId: theme.id,
+              entityId: entityId,
+              entityType: entityType
+            });
+          case 8:
+            onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(theme);
+          case 9:
+            onCreateTheme(theme);
+            history.replace(utils$1.buildUrl(buildPathname(useGlobalThemesApi.routes.themes.edit), {
+              themeId: theme.id
+            }));
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function createAndOpenTheme(_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onSubmit = function onSubmit(values, _ref3) {
+    var resetForm = _ref3.resetForm;
     var imageData = buildImageData(values, themePropertiesSchema);
     var themeToSave = _objectSpread({
       propertiesAttributes: values.properties,
@@ -1481,20 +1550,7 @@ var Customize = function Customize(_ref) {
       shouldSetAsGlobalTheme: values.shouldSetAsGlobalTheme,
       entityType: values.entityType
     }, imageData);
-    if (!themeId) {
-      return createTheme(themeToSave, {
-        onSuccess: function onSuccess(_ref3) {
-          var theme = _ref3.theme;
-          resetForm({
-            values: theme
-          });
-          onCreateTheme(theme);
-          history.replace(utils$1.buildUrl(buildPathname(useGlobalThemesApi.routes.themes.edit), {
-            themeId: theme.id
-          }));
-        }
-      });
-    }
+    if (!themeId) return createAndOpenTheme(themeToSave, resetForm);
     return updateTheme(themeToSave, {
       onSuccess: function onSuccess(_ref4) {
         var theme = _ref4.theme;
@@ -1520,7 +1576,7 @@ var Customize = function Customize(_ref) {
   }
   return /*#__PURE__*/jsxRuntime.jsx(Form, {
     formikProps: {
-      initialValues: _objectSpread(_objectSpread({}, buildInitialValues(themeData, themePropertiesSchema)), {}, {
+      initialValues: _objectSpread(_objectSpread({}, buildInitialValues(themeToCustomize, themePropertiesSchema)), {}, {
         shouldSetAsGlobalTheme: isThemeGlobalTheme,
         entityType: entityType
       }),
@@ -1609,11 +1665,11 @@ var Customize = function Customize(_ref) {
             type: "reset"
           }), /*#__PURE__*/jsxRuntime.jsx(Button, {
             "data-testid": "save-changes-button",
-            disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting || !isValid,
             label: t("neetoThemes.buttons.save"),
             loading: isSubmitting,
             ref: submitBtnRef,
-            type: "submit"
+            type: "submit",
+            disabled: !dirty && (themeToCustomize === null || themeToCustomize === void 0 ? void 0 : themeToCustomize.id) || isSubmitting || !isValid
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(Popover, {
           appendTo: function appendTo() {
@@ -1663,25 +1719,48 @@ var Customize = function Customize(_ref) {
   });
 };
 
-var QuickActionRow = function QuickActionRow(_ref) {
-  var Icon = _ref.icon,
+var QuickActionRow = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    Icon = _ref.icon,
     label = _ref.label,
     onClick = _ref.onClick,
-    testId = _ref.testId;
-  return /*#__PURE__*/jsxRuntime.jsxs("button", {
-    onClick: onClick,
-    className: "neeto-ui-border-gray-100 hover:neeto-ui-bg-gray-100 flex w-full cursor-pointer items-center gap-3 border-t px-3 py-2 text-start transition-colors",
-    "data-testid": testId,
-    type: "button",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
-      size: 16
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-      lineHeight: "normal",
-      style: "body2",
-      children: label
-    })]
+    testId = _ref.testId,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    disabledTooltip = _ref.disabledTooltip,
+    _ref$isProFeature = _ref.isProFeature,
+    isProFeature = _ref$isProFeature === void 0 ? false : _ref$isProFeature;
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+    content: disabledTooltip,
+    disabled: !disabled || !disabledTooltip,
+    position: "top",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-ui-border-gray-100 border-t",
+      children: /*#__PURE__*/jsxRuntime.jsxs("button", {
+        disabled: disabled,
+        onClick: onClick,
+        "data-testid": testId,
+        type: "button",
+        className: classnames("flex w-full items-center gap-3 px-3 py-2 text-start transition-colors", {
+          "hover:neeto-ui-bg-gray-100 cursor-pointer": !disabled,
+          "cursor-not-allowed opacity-50": disabled
+        }),
+        children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+          size: 16
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          lineHeight: "normal",
+          style: "body2",
+          children: label
+        }), isProFeature && /*#__PURE__*/jsxRuntime.jsx(Tag, {
+          "data-testid": "".concat(testId, "-pro-badge"),
+          label: t("neetoThemes.common.pro"),
+          size: "small",
+          style: "info"
+        })]
+      })
+    })
   });
-};
+});
 
 var Thumbnail = function Thumbnail(_ref) {
   var _theme$snakeToCamelCa, _findBy, _findBy2;
@@ -1771,7 +1850,7 @@ var Card = function Card(_ref) {
     onEditTheme = _ref.onEditTheme,
     theme = _ref.theme,
     isApplyingTheme = _ref.isApplyingTheme,
-    onCloneTheme = _ref.onCloneTheme,
+    onCustomizeSystemTheme = _ref.onCustomizeSystemTheme,
     isHighLightedTheme = _ref.isHighLightedTheme,
     isGlobalTheme = _ref.isGlobalTheme,
     onApplyTheme = _ref.onApplyTheme,
@@ -1780,22 +1859,32 @@ var Card = function Card(_ref) {
     t = _useTranslation.t;
   var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
       return {
-        themePropertiesSchema: store["themePropertiesSchema"]
+        themePropertiesSchema: store["themePropertiesSchema"],
+        enabledFeatures: store["enabledFeatures"],
+        proFeatures: store["proFeatures"]
       };
     }, shallow.shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema,
+    enabledFeatures = _useConfigStore.enabledFeatures,
+    proFeatures = _useConfigStore.proFeatures;
   var id = theme.id,
     name = theme.name;
   var imageProperties = neetoCist.filterBy({
     kind: "image"
   }, themePropertiesSchema);
+  var isCustomCSSInSchema = neetoCist.isPresent(neetoCist.findBy({
+    kind: "custom_css"
+  }, themePropertiesSchema));
+  var isCustomCSSEnabled = Boolean(enabledFeatures.customCSS);
+  var isCustomCSSProFeature = Boolean(proFeatures.customCSS);
+  var showCustomCSSAction = isCustomCSSInSchema && (isCustomCSSEnabled || isCustomCSSProFeature);
   var handleDeleteTheme = function handleDeleteTheme() {
     return onDeleteTheme(id, name);
   };
   var handleQuickEdit = function handleQuickEdit(section) {
     return function (e) {
       e.stopPropagation();
-      if (neetoCist.isPresent(onEditTheme)) onEditTheme(theme, section);else onCloneTheme(theme, section);
+      if (neetoCist.isPresent(onEditTheme)) onEditTheme(theme, section);else onCustomizeSystemTheme(theme, section);
     };
   };
   var showMoreDropdown = isFunction(onDeleteTheme);
@@ -1925,10 +2014,13 @@ var Card = function Card(_ref) {
             testId: "quick-add-".concat(neetoCist.hyphenate(key)),
             onClick: handleQuickEdit(camelKey)
           }, key);
-        }), /*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
+        }), showCustomCSSAction && /*#__PURE__*/jsxRuntime.jsx(QuickActionRow, {
+          disabled: !isCustomCSSEnabled,
           icon: CodeBlock,
+          isProFeature: isCustomCSSProFeature,
           label: t("neetoThemes.build.leftSideBar.themes.customCSS"),
           testId: "quick-custom-css",
+          disabledTooltip: t("neetoThemes.common.proFeature.customCSS.description"),
           onClick: handleQuickEdit("customcss")
         })]
       })]
@@ -1937,8 +2029,21 @@ var Card = function Card(_ref) {
 };
 var Card$1 = /*#__PURE__*/react.memo(Card);
 
+var SectionHeading = function SectionHeading(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId;
+  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+    className: "neeto-ui-text-gray-600 px-6 uppercase tracking-wide lg:px-5 xl:px-6",
+    "data-testid": testId,
+    style: "body3",
+    weight: "semibold",
+    children: label
+  });
+};
+
 var Themes = function Themes(_ref) {
   var onEditTheme = _ref.onEditTheme,
+    onCustomizeSystemTheme = _ref.onCustomizeSystemTheme,
     _ref$themes = _ref.themes,
     themes = _ref$themes === void 0 ? [] : _ref$themes,
     _ref$defaultThemes = _ref.defaultThemes,
@@ -1952,7 +2057,6 @@ var Themes = function Themes(_ref) {
     thumbnail = _ref.thumbnail,
     themeBeingApplied = _ref.themeBeingApplied,
     onApplyTheme = _ref.onApplyTheme,
-    onApplyThemeSuccess = _ref.onApplyThemeSuccess,
     _ref$isSearchVisible = _ref.isSearchVisible,
     isSearchVisible = _ref$isSearchVisible === void 0 ? false : _ref$isSearchVisible;
   var _useTranslation = reactI18next.useTranslation(),
@@ -1969,19 +2073,13 @@ var Themes = function Themes(_ref) {
     previewingTheme = _useThemeStore.previewingTheme;
   var _useConfigStore = useExpandedSection.useConfigStore(function (store) {
       return {
-        entityType: store["entityType"],
-        entityId: store["entityId"]
+        entityType: store["entityType"]
       };
     }, shallow.shallow),
-    entityType = _useConfigStore.entityType,
-    entityId = _useConfigStore.entityId;
+    entityType = _useConfigStore.entityType;
   var _useQueryParams = reactUtils.useQueryParams(),
     _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
-  var _useCloneTheme = useGlobalThemesApi.useCloneTheme(),
-    cloneTheme = _useCloneTheme.mutate;
-  var _useApplyTheme = useGlobalThemesApi.useApplyTheme({}),
-    applyClonedTheme = _useApplyTheme.mutate;
   var _useShowGlobalTheme = useGlobalThemesApi.useShowGlobalTheme(entityType),
     _useShowGlobalTheme$d = _useShowGlobalTheme.data,
     _useShowGlobalTheme$d2 = _useShowGlobalTheme$d === void 0 ? {} : _useShowGlobalTheme$d,
@@ -2019,26 +2117,7 @@ var Themes = function Themes(_ref) {
     return theme.id !== activeThemeId && matchesSearch(theme);
   });
   var showActiveThemeSection = activeTheme && matchesSearch(activeTheme);
-  var handleCloneTheme = function handleCloneTheme(data, section) {
-    cloneTheme(data.id, {
-      onSuccess: function onSuccess(_ref2) {
-        var clonedTheme = _ref2.theme;
-        // A system theme is cloned when the user customizes it. Apply the
-        // clone right away so it becomes the active theme — the editor then
-        // won't prompt "apply this theme?" on save.
-        applyClonedTheme({
-          themeId: clonedTheme.id,
-          entityId: entityId,
-          entityType: entityType
-        }, {
-          onSuccess: function onSuccess() {
-            onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(clonedTheme);
-            onEditTheme(clonedTheme, section);
-          }
-        });
-      }
-    });
-  };
+  var hasNoMatchingThemes = !showActiveThemeSection && ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes);
   if (isLoading || isCurrentThemeLoading || isLoadingGlobalTheme) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full items-center justify-center",
@@ -2049,6 +2128,7 @@ var Themes = function Themes(_ref) {
     className: "neeto-ui-border-gray-200 mb-6 border-b px-6 pb-6 lg:px-5 xl:px-6",
     children: /*#__PURE__*/jsxRuntime.jsx(Card$1, {
       onApplyTheme: onApplyTheme,
+      onCustomizeSystemTheme: onCustomizeSystemTheme,
       thumbnail: thumbnail,
       active: true,
       isApplyingTheme: (themeBeingApplied === null || themeBeingApplied === void 0 ? void 0 : themeBeingApplied.id) === activeTheme.id,
@@ -2056,14 +2136,16 @@ var Themes = function Themes(_ref) {
       isHighLightedTheme: activeTheme.id === themeToHighlight,
       isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === activeTheme.id,
       theme: activeTheme,
-      onCloneTheme: handleCloneTheme,
       onEditTheme: isActiveThemeCustom ? onEditTheme : undefined,
       onSetPreviewTheme: setPreviewTheme
     })
   });
-  var systemThemesSection = neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsx("div", {
+  var systemThemesSection = neetoCist.isNotEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "mb-6 space-y-3",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeading, {
+      label: t("neetoThemes.build.leftSideBar.themes.systemThemes"),
+      testId: "system-themes-heading"
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex flex-col gap-4 px-6 pb-10 lg:px-5 xl:px-6",
       "data-testid": "system-themes",
       children: filteredDefaultThemes.map(function (theme) {
@@ -2076,15 +2158,17 @@ var Themes = function Themes(_ref) {
           isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === theme.id,
           isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
           key: theme.id,
-          onCloneTheme: handleCloneTheme,
           onSetPreviewTheme: setPreviewTheme
         });
       })
-    })
+    })]
   });
-  var customThemesSection = neetoCist.isNotEmpty(filteredThemes) && /*#__PURE__*/jsxRuntime.jsx("div", {
+  var customThemesSection = neetoCist.isNotEmpty(filteredThemes) && /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "mb-6 space-y-3",
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeading, {
+      label: t("neetoThemes.build.leftSideBar.themes.customThemes"),
+      testId: "custom-themes-heading"
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex flex-col gap-4 px-6",
       "data-testid": "custom-themes",
       children: filteredThemes.map(function (theme) {
@@ -2101,12 +2185,11 @@ var Themes = function Themes(_ref) {
           isGlobalTheme: (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === theme.id,
           isHighLightedTheme: theme.id === themeToHighlight,
           key: theme.id,
-          onCloneTheme: handleCloneTheme,
           onDeleteTheme: !isActive && onDeleteTheme,
           onSetPreviewTheme: setPreviewTheme
         });
       })
-    })
+    })]
   });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-themes-sidebar__scroll",
@@ -2118,7 +2201,7 @@ var Themes = function Themes(_ref) {
         autoComplete: "off",
         className: "mb-4 mt-1 px-6",
         placeholder: t("neetoThemes.common.searchThemes")
-      }), ramda.isEmpty(filteredThemes) && ramda.isEmpty(filteredDefaultThemes) && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      }), hasNoMatchingThemes && /*#__PURE__*/jsxRuntime.jsx(Typography, {
         className: "text-center",
         "data-testid": "no-data-title",
         style: "body2",
@@ -2149,6 +2232,8 @@ var TitleBar = function TitleBar(_ref) {
     }, shallow.shallow),
     entityType = _useConfigStore.entityType,
     helpDocUrl = _useConfigStore.helpDocUrl;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    sourceThemeId = _useQueryParams.source;
   var isCustomizeScreen = isEditThemeRoute() || isNewThemeRoute();
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
   var isRTL = i18n.dir() === "rtl";
@@ -2175,7 +2260,7 @@ var TitleBar = function TitleBar(_ref) {
           lineHeight: "normal",
           style: "h3",
           weight: "semibold",
-          children: [isCustomizeScreen && !isCustomCssScreen && (isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
+          children: [isCustomizeScreen && !isCustomCssScreen && (isNewThemeRoute() && !neetoCist.isPresent(sourceThemeId) ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
         })]
       })
     });
@@ -2348,6 +2433,17 @@ var Sidebar = function Sidebar(_ref) {
       search: section ? "?section=".concat(section) : ""
     });
   };
+  var handleCustomizeSystemTheme = function handleCustomizeSystemTheme(theme, section) {
+    themeToEdit.current = theme;
+    var searchParams = new URLSearchParams({
+      source: theme.id
+    });
+    if (section) searchParams.set("section", section);
+    history.push({
+      pathname: buildPathname(useGlobalThemesApi.routes.themes["new"]),
+      search: "?".concat(searchParams.toString())
+    });
+  };
   var onApplyTheme = function onApplyTheme(theme) {
     if (themeBeingApplied !== null && themeBeingApplied !== void 0 && themeBeingApplied.id) return;
     setThemeBeingApplied(theme);
@@ -2442,12 +2538,12 @@ var Sidebar = function Sidebar(_ref) {
               isCurrentThemeLoading: isCurrentThemeLoading,
               isSearchVisible: isSearchVisible,
               onApplyTheme: onApplyTheme,
-              onApplyThemeSuccess: onApplyThemeSuccess,
               themeBeingApplied: themeBeingApplied,
               themeToHighlight: themeToHighlight,
               themes: themes,
               thumbnail: thumbnail,
               isLoading: isLoading || isFetchingSchema,
+              onCustomizeSystemTheme: handleCustomizeSystemTheme,
               onDeleteTheme: handleDelete,
               onEditTheme: handleEditTheme
             });
@@ -2461,6 +2557,7 @@ var Sidebar = function Sidebar(_ref) {
               fixedAspectRatio: fixedAspectRatio,
               isApplyingTheme: isApplyingTheme,
               onApplyTheme: onApplyTheme,
+              onApplyThemeSuccess: onApplyThemeSuccess,
               onCreateTheme: onCreateTheme,
               onPropertiesChange: onPropertiesChange,
               onUpdateTheme: onUpdateTheme,
@@ -2477,6 +2574,7 @@ var Sidebar = function Sidebar(_ref) {
               fixedAspectRatio: fixedAspectRatio,
               isApplyingTheme: isApplyingTheme,
               onApplyTheme: onApplyTheme,
+              onApplyThemeSuccess: onApplyThemeSuccess,
               onCreateTheme: onCreateTheme,
               onPropertiesChange: onPropertiesChange,
               onUpdateTheme: onUpdateTheme,