@bigbinary/neeto-themes-frontend 3.0.4 → 3.1.1

package/dist/cjs/NeetoThemesBuilder.js

@@ -6,31 +6,34 @@ var i18next = require('i18next');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Spinner = require('@bigbinary/neetoui/Spinner');
+var utils = require('../index-BvWiXoC1.js');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
-var utils = require('../index-D6l2IgrM.js');
-var useThemeUtils = require('../useThemeUtils-P5tn1h2B.js');
+var useThemeUtils = require('../useThemeUtils-DrdkjWvi.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classnames = require('classnames');
+var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
 var Collapse = require('@bigbinary/neeto-icons/Collapse');
 var Alert = require('@bigbinary/neetoui/Alert');
 var Button = require('@bigbinary/neetoui/Button');
 var reactI18next = require('react-i18next');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var reactRouterDom = require('react-router-dom');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var Close = require('@bigbinary/neeto-icons/Close');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var Popover = require('@bigbinary/neetoui/Popover');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Switch = require('@bigbinary/neetoui/Switch');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var Form = require('@bigbinary/neetoui/formik/Form');
+var BlockNavigation = require('@bigbinary/neetoui/formik/BlockNavigation');
+var ramda = require('ramda');
 var yup = require('yup');
 var Editor = require('@monaco-editor/react');
 var formik = require('formik');
 var Down = require('@bigbinary/neeto-icons/Down');
 var jsxRuntime = require('react/jsx-runtime');
-var ramda = require('ramda');
-var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
 var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
 var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
 var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
@@ -144,6 +147,8 @@ var themesApi = {
   applyGlobalTheme: applyGlobalTheme
 };
 
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useListThemes = function useListThemes(entityId) {
   var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
       return {
@@ -159,19 +164,32 @@ var useListThemes = function useListThemes(entityId) {
     }
   });
 };
+var useFetchTheme = function useFetchTheme(themeId, options) {
+  return reactQuery.useQuery(_objectSpread$6({
+    queryKey: [useThemeUtils.QUERY_KEYS.THEME_DETAILS, themeId],
+    queryFn: function queryFn() {
+      return themesApi.show(themeId);
+    }
+  }, options));
+};
 var useCreateTheme = function useCreateTheme() {
   return reactUtils.useMutationWithInvalidation(themesApi.create, {
     keysToInvalidate: [[useThemeUtils.QUERY_KEYS.THEMES_LIST], [useThemeUtils.QUERY_KEYS.THEME_ENTITY_DETAILS], [useThemeUtils.QUERY_KEYS.GLOBAL_THEME_DETAILS]]
   });
 };
 var useUpdateTheme = function useUpdateTheme(themeId) {
+  var queryClient = reactQuery.useQueryClient();
   return reactUtils.useMutationWithInvalidation(function (payload) {
     return themesApi.update({
       id: themeId,
       payload: payload
     });
   }, {
-    keysToInvalidate: [[useThemeUtils.QUERY_KEYS.THEMES_LIST], [useThemeUtils.QUERY_KEYS.THEME_ENTITY_DETAILS], [useThemeUtils.QUERY_KEYS.THEME_DETAILS, themeId], [useThemeUtils.QUERY_KEYS.GLOBAL_THEME_DETAILS]]
+    keysToInvalidate: [[useThemeUtils.QUERY_KEYS.THEMES_LIST], [useThemeUtils.QUERY_KEYS.THEME_ENTITY_DETAILS], [useThemeUtils.QUERY_KEYS.THEME_DETAILS, themeId], [useThemeUtils.QUERY_KEYS.GLOBAL_THEME_DETAILS]],
+    onSuccess: function onSuccess(_ref) {
+      var theme = _ref.theme;
+      queryClient.setQueryData([useThemeUtils.QUERY_KEYS.THEME_DETAILS, themeId], theme);
+    }
   });
 };
 var useDeleteTheme = function useDeleteTheme() {
@@ -184,8 +202,8 @@ var useCloneTheme = function useCloneTheme() {
     keysToInvalidate: [useThemeUtils.QUERY_KEYS.THEMES_LIST]
   });
 };
-var useApplyTheme = function useApplyTheme(_ref) {
-  var onSuccess = _ref.onSuccess;
+var useApplyTheme = function useApplyTheme(_ref2) {
+  var onSuccess = _ref2.onSuccess;
   return reactUtils.useMutationWithInvalidation(themesApi.apply, {
     keysToInvalidate: [[useThemeUtils.QUERY_KEYS.THEMES_LIST], [useThemeUtils.QUERY_KEYS.THEME_ENTITY_DETAILS]],
     onSuccess: onSuccess
@@ -197,6 +215,14 @@ var useApplyGlobalTheme = function useApplyGlobalTheme() {
   });
 };
 
+var routes = {
+  themes: {
+    index: "/themes",
+    edit: "/themes/:themeId/edit",
+    "new": "/themes/new"
+  }
+};
+
 var show = function show(entityType) {
   return axios.get("".concat(utils.BASE_URL, "/api/v1/global_theme"), {
     params: {
@@ -361,9 +387,34 @@ var Card$2 = function Card(_ref) {
   });
 };
 
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var isScreenCustomCSS = function isScreenCustomCSS(screen) {
   return screen === DESIGN_SCREENS.CustomCSS;
 };
+var buildPathname = function buildPathname(route) {
+  var pathname = "";
+  var _iterator = _createForOfIteratorHelper(location.pathname.split("/")),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var segment = _step.value;
+      if (ramda.isEmpty(segment)) {
+        continue;
+      }
+      if (segment === "themes") {
+        break;
+      }
+      pathname += "/".concat(segment);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return "".concat(pathname).concat(route);
+};
 
 var CustomCSS = function CustomCSS(_ref) {
   var onEditCSSClick = _ref.onEditCSSClick,
@@ -1143,17 +1194,17 @@ var ThemeMeta = reactUtils.withT(function (_ref) {
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Customize = function Customize(_ref) {
-  var themeId = _ref.themeId,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     onCreateTheme = _ref.onCreateTheme,
     onApplyTheme = _ref.onApplyTheme,
+    onUpdateTheme = _ref.onUpdateTheme,
     isApplyingTheme = _ref.isApplyingTheme,
     onPropertiesChange = _ref.onPropertiesChange,
-    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess,
     onEditCSSClick = _ref.onEditCSSClick,
     currentScreen = _ref.currentScreen;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
   var _useState = react.useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     popoverInstance = _useState2[0],
@@ -1166,15 +1217,29 @@ var Customize = function Customize(_ref) {
     }, shallow.shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType;
-  var _useThemeUtils = useThemeUtils.useThemeUtils(),
-    currentTheme = _useThemeUtils.currentTheme,
-    setThemeState = _useThemeUtils.setThemeState;
+  var _useParams = reactRouterDom.useParams(),
+    themeId = _useParams.themeId;
+  var _useThemeStore = useThemeUtils.useThemeStore(function (store) {
+      return {
+        currentTheme: store["currentTheme"],
+        setThemeState: store["setThemeState"]
+      };
+    }, shallow.shallow),
+    currentTheme = _useThemeStore.currentTheme,
+    setThemeState = _useThemeStore.setThemeState;
   var _useShowGlobalTheme = useShowGlobalTheme(entityType),
     _useShowGlobalTheme$d = _useShowGlobalTheme.data,
     _useShowGlobalTheme$d2 = _useShowGlobalTheme$d === void 0 ? {} : _useShowGlobalTheme$d,
     _useShowGlobalTheme$d3 = _useShowGlobalTheme$d2.globalTheme,
     globalTheme = _useShowGlobalTheme$d3 === void 0 ? {} : _useShowGlobalTheme$d3;
-  var isThemeGlobalTheme = (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === themeId;
+  var _useFetchTheme = useFetchTheme(themeId, {
+      enabled: utils.isEditThemeRoute() && ramda.isNotNil(themeId),
+      initialData: theme !== null && theme !== void 0 ? theme : undefined
+    }),
+    _useFetchTheme$data = _useFetchTheme.data,
+    themeData = _useFetchTheme$data === void 0 ? {} : _useFetchTheme$data,
+    isLoading = _useFetchTheme.isLoading;
+  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 isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
   var submitBtnRef = react.useRef(null);
@@ -1206,25 +1271,35 @@ var Customize = function Customize(_ref) {
             values: theme
           });
           onCreateTheme(theme);
+          history.replace(utils$1.buildUrl(buildPathname(routes.themes.edit), {
+            themeId: theme.id
+          }));
         }
       });
     }
     return updateTheme(themeToSave, {
       onSuccess: function onSuccess(_ref4) {
         var theme = _ref4.theme;
-        onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 ? void 0 : onUpdateThemeSuccess(theme);
-        setThemeState({
-          previewingTheme: theme
-        });
+        onUpdateTheme(theme);
         resetForm({
           values: theme
         });
       }
     });
   };
+  react.useEffect(function () {
+    if (ramda.isNotNil(themeId) && !isLoading) {
+      setThemeState({
+        previewingTheme: themeData
+      });
+    }
+  }, [themeData, isLoading]);
+  if (isLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx(PageLoader, {});
+  }
   return /*#__PURE__*/jsxRuntime.jsx(Form, {
     formikProps: {
-      initialValues: _objectSpread$1(_objectSpread$1({}, buildInitialValues(theme, themePropertiesSchema)), {}, {
+      initialValues: _objectSpread$1(_objectSpread$1({}, buildInitialValues(themeData, themePropertiesSchema)), {}, {
         shouldSetAsGlobalTheme: isThemeGlobalTheme,
         entityType: entityType
       }),
@@ -1240,7 +1315,7 @@ var Customize = function Customize(_ref) {
         className: "neeto-themes-sidebar__scroll",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "neeto-themes-sidebar__scroll-content flex flex-grow flex-col px-4 pb-4 lg:px-5",
-          children: [/*#__PURE__*/jsxRuntime.jsx(ThemeMeta, {
+          children: [!isSubmitting && /*#__PURE__*/jsxRuntime.jsx(BlockNavigation, {}), /*#__PURE__*/jsxRuntime.jsx(ThemeMeta, {
             className: classnames({
               hidden: isCustomCssScreen
             })
@@ -1300,7 +1375,7 @@ var Customize = function Customize(_ref) {
             type: "reset"
           }), /*#__PURE__*/jsxRuntime.jsx(Button, {
             "data-cy": "save-changes-button",
-            disabled: !dirty && (theme === null || theme === void 0 ? void 0 : theme.id) || isSubmitting,
+            disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting,
             label: t("neetoThemes.buttons.save"),
             loading: isSubmitting,
             ref: submitBtnRef,
@@ -1342,7 +1417,7 @@ var Customize = function Customize(_ref) {
               label: t("neetoThemes.buttons.applyThisTheme"),
               loading: isApplyingTheme,
               onClick: function onClick() {
-                return onApplyTheme(theme);
+                return onApplyTheme(themeData);
               }
             })]
           }),
@@ -1823,11 +1898,16 @@ var Themes = function Themes(_ref) {
 var TitleBar = function TitleBar(_ref) {
   var currentScreen = _ref.currentScreen,
     handleBackPress = _ref.handleBackPress,
-    handleCreateNewTheme = _ref.handleCreateNewTheme,
-    isNewTheme = _ref.isNewTheme,
-    themeToEdit = _ref.themeToEdit;
+    handleCreateNewTheme = _ref.handleCreateNewTheme;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useThemeStore = useThemeUtils.useThemeStore(function (store) {
+      return {
+        previewingTheme: store["previewingTheme"]
+      };
+    }, shallow.shallow),
+    previewingTheme = _useThemeStore.previewingTheme;
+  var themeId = previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id;
   var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
       return {
         entityType: store["entityType"],
@@ -1836,68 +1916,69 @@ var TitleBar = function TitleBar(_ref) {
     }, shallow.shallow),
     entityType = _useConfigStore.entityType,
     helpDocUrl = _useConfigStore.helpDocUrl;
+  var isCustomizeScreen = utils.isEditThemeRoute() || utils.isNewThemeRoute();
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
-  if (currentScreen === DESIGN_SCREENS.THEMES) {
+  if (isCustomizeScreen) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
+      className: "neeto-themes-sidebar__header px-4",
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center justify-between space-x-2",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex space-x-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-            "data-cy": "themes-header",
-            lineHeight: "normal",
-            style: "h3",
-            weight: "semibold",
-            children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
-          }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
-            helpLinkProps: helpDocUrl && {
-              href: helpDocUrl
-            },
-            title: t("neetoThemes.build.leftSideBar.helpPopover.title"),
-            description: t("neetoThemes.build.leftSideBar.helpPopover.description", {
-              entityType: entityType
-            })
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "self-end",
-          children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-            "data-cy": "customize-themes-add-theme-button",
-            icon: Plus,
-            iconPosition: "left",
-            style: "text",
-            tooltipProps: {
-              content: t("neetoThemes.buttons.addNewTheme"),
-              position: "top"
-            },
-            onClick: handleCreateNewTheme
-          })
+        className: "flex items-center justify-start space-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+          "data-cy": "customize-themes-back-button",
+          icon: LeftArrow,
+          iconPosition: "left",
+          style: "text",
+          tooltipProps: {
+            content: isCustomCssScreen ? t("neetoThemes.buttons.backToEdit") : t("neetoThemes.buttons.backToThemes"),
+            position: "top"
+          },
+          onClick: function onClick() {
+            return handleBackPress(themeId);
+          }
+        }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
+          "data-cy": "themes-header",
+          lineHeight: "normal",
+          style: "h3",
+          weight: "semibold",
+          children: [isCustomizeScreen && (utils.isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
         })]
       })
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "neeto-themes-sidebar__header px-4",
+    className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex items-center justify-start space-x-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
-        "data-cy": "customize-themes-back-button",
-        icon: LeftArrow,
-        iconPosition: "left",
-        style: "text",
-        tooltipProps: {
-          content: isCustomCssScreen ? t("neetoThemes.buttons.backToEdit") : t("neetoThemes.buttons.backToThemes"),
-          position: "top"
-        },
-        onClick: function onClick() {
-          return handleBackPress(themeToEdit);
-        }
-      }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
-        "data-cy": "themes-header",
-        lineHeight: "normal",
-        style: "h3",
-        weight: "semibold",
-        children: [currentScreen === DESIGN_SCREENS.Customize && (isNewTheme ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
+      className: "flex items-center justify-between space-x-2",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex space-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          "data-cy": "themes-header",
+          lineHeight: "normal",
+          style: "h3",
+          weight: "semibold",
+          children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
+        }), /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
+          helpLinkProps: helpDocUrl && {
+            href: helpDocUrl
+          },
+          title: t("neetoThemes.build.leftSideBar.helpPopover.title"),
+          description: t("neetoThemes.build.leftSideBar.helpPopover.description", {
+            entityType: entityType
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "self-end",
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          "data-cy": "customize-themes-add-theme-button",
+          icon: Plus,
+          iconPosition: "left",
+          style: "text",
+          tooltipProps: {
+            content: t("neetoThemes.buttons.addNewTheme"),
+            position: "top"
+          },
+          onClick: handleCreateNewTheme
+        })
       })]
     })
   });
@@ -1905,7 +1986,7 @@ var TitleBar = function TitleBar(_ref) {
 
 var MemoizedAlert = /*#__PURE__*/react.memo(Alert);
 var Sidebar = function Sidebar(_ref) {
-  var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3, _themeToDelete$curren4;
+  var _themeToDelete$curren2, _themeToDelete$curren3, _themeToDelete$curren4;
   var thumbnail = _ref.thumbnail,
     onPropertiesChange = _ref.onPropertiesChange,
     onApplyThemeSuccess = _ref.onApplyThemeSuccess,
@@ -1934,6 +2015,7 @@ var Sidebar = function Sidebar(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     isThemesSidebarCollapsed = _useState10[0],
     setIsThemesSidebarCollapsed = _useState10[1];
+  var history = reactRouterDom.useHistory();
   react.useEffect(function () {
     setIsThemesSidebarCollapsed(!isLargerScreen);
   }, [isLargerScreen]);
@@ -1995,9 +2077,14 @@ var Sidebar = function Sidebar(_ref) {
   var themeToDelete = react.useRef(null);
   var themeToEdit = react.useRef(null);
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
+  var handleCreateNewTheme = function handleCreateNewTheme() {
+    history.push(utils$1.buildUrl(buildPathname(routes.themes["new"])));
+  };
   var handleEditTheme = function handleEditTheme(theme) {
     themeToEdit.current = theme;
-    setCurrentScreen(DESIGN_SCREENS.Customize);
+    history.push(utils$1.buildUrl(buildPathname(routes.themes.edit), {
+      themeId: theme.id
+    }));
   };
   var onApplyTheme = function onApplyTheme(theme) {
     if (isApplyingTheme) return;
@@ -2008,23 +2095,26 @@ var Sidebar = function Sidebar(_ref) {
       entityType: entityType
     });
   };
-  var handleBackPress = function handleBackPress(theme) {
-    setTheme(currentTheme);
-    highlightTheme(neetoCist.isPresent(theme) ? theme : currentTheme);
-    setThemeState({
-      previewingTheme: currentTheme
-    });
-    setCurrentScreen(isCustomCssScreen ? DESIGN_SCREENS.Customize : DESIGN_SCREENS.THEMES);
+  var navigateToThemesScreen = function navigateToThemesScreen(themeId) {
+    highlightTheme(neetoCist.isPresent(themeId) ? themeId : currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
+    history.push(utils$1.buildUrl(buildPathname(routes.themes.index)));
     themeToEdit.current = null;
   };
-  var highlightTheme = function highlightTheme(themeToHighlight) {
+  var handleBackPress = function handleBackPress(themeId) {
+    if (isCustomCssScreen) {
+      setCurrentScreen(DESIGN_SCREENS.Customize);
+      return;
+    }
+    navigateToThemesScreen(themeId);
+  };
+  var highlightTheme = function highlightTheme(themeIdToHighlight) {
     setTimeout(function () {
-      utils.scrollElementIntoView(themeToHighlight.id);
+      utils.scrollElementIntoView(themeIdToHighlight);
     }, 1500);
     setTimeout(function () {
       setThemeToHighlight(null);
     }, 4000);
-    setThemeToHighlight(themeToHighlight.id);
+    setThemeToHighlight(themeIdToHighlight);
   };
   var onCreateTheme = function onCreateTheme(createdTheme) {
     themeToEdit.current = createdTheme;
@@ -2033,6 +2123,10 @@ var Sidebar = function Sidebar(_ref) {
       previewingTheme: createdTheme
     });
   };
+  var onUpdateTheme = function onUpdateTheme(updatedTheme) {
+    themeToEdit.current = updatedTheme;
+    onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 ? void 0 : onUpdateThemeSuccess(updatedTheme);
+  };
   var handleDelete = function handleDelete(themeId, name, appliedCount) {
     setIsDeleteAlertOpen(true);
     themeToDelete.current = {
@@ -2069,37 +2163,59 @@ var Sidebar = function Sidebar(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx(TitleBar, {
         currentScreen: currentScreen,
         handleBackPress: handleBackPress,
-        handleCreateNewTheme: function handleCreateNewTheme() {
-          return handleEditTheme({});
-        },
-        isNewTheme: !((_themeToEdit$current = themeToEdit.current) !== null && _themeToEdit$current !== void 0 && _themeToEdit$current.id),
-        themeToEdit: themeToEdit.current
-      }), currentScreen === DESIGN_SCREENS.THEMES ? /*#__PURE__*/jsxRuntime.jsx(Themes, {
-        currentTheme: currentTheme,
-        defaultThemes: defaultThemes,
-        didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
-        highlightTheme: highlightTheme,
-        isApplyingTheme: isApplyingTheme,
-        isCurrentThemeLoading: isCurrentThemeLoading,
-        onApplyGlobalThemeSuccess: onApplyGlobalThemeSuccess,
-        onApplyTheme: onApplyTheme,
-        themeBeingApplied: themeBeingApplied,
-        themeToHighlight: themeToHighlight,
-        themes: themes,
-        thumbnail: thumbnail,
-        isLoading: isLoading || isFetchingSchema,
-        onDeleteTheme: handleDelete,
-        onEditTheme: handleEditTheme
-      }) : /*#__PURE__*/jsxRuntime.jsx(Customize, {
-        currentScreen: currentScreen,
-        isApplyingTheme: isApplyingTheme,
-        onApplyTheme: onApplyTheme,
-        onCreateTheme: onCreateTheme,
-        onPropertiesChange: onPropertiesChange,
-        onUpdateThemeSuccess: onUpdateThemeSuccess,
-        theme: themeToEdit.current,
-        themeId: (_themeToEdit$current2 = themeToEdit.current) === null || _themeToEdit$current2 === void 0 ? void 0 : _themeToEdit$current2.id,
-        onEditCSSClick: setCurrentScreen
+        handleCreateNewTheme: handleCreateNewTheme
+      }), /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Switch, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+          exact: true,
+          path: buildPathname(routes.themes.index),
+          render: function render() {
+            return /*#__PURE__*/jsxRuntime.jsx(Themes, {
+              currentTheme: currentTheme,
+              defaultThemes: defaultThemes,
+              didScrollActiveThemeIntoView: didScrollActiveThemeIntoView,
+              highlightTheme: highlightTheme,
+              isApplyingTheme: isApplyingTheme,
+              isCurrentThemeLoading: isCurrentThemeLoading,
+              onApplyGlobalThemeSuccess: onApplyGlobalThemeSuccess,
+              onApplyTheme: onApplyTheme,
+              themeBeingApplied: themeBeingApplied,
+              themeToHighlight: themeToHighlight,
+              themes: themes,
+              thumbnail: thumbnail,
+              isLoading: isLoading || isFetchingSchema,
+              onDeleteTheme: handleDelete,
+              onEditTheme: handleEditTheme
+            });
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+          path: buildPathname(routes.themes["new"]),
+          render: function render() {
+            return /*#__PURE__*/jsxRuntime.jsx(Customize, {
+              currentScreen: currentScreen,
+              isApplyingTheme: isApplyingTheme,
+              onApplyTheme: onApplyTheme,
+              onCreateTheme: onCreateTheme,
+              onPropertiesChange: onPropertiesChange,
+              onUpdateTheme: onUpdateTheme,
+              theme: themeToEdit.current,
+              onEditCSSClick: setCurrentScreen
+            });
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+          path: buildPathname(routes.themes.edit),
+          render: function render() {
+            return /*#__PURE__*/jsxRuntime.jsx(Customize, {
+              currentScreen: currentScreen,
+              isApplyingTheme: isApplyingTheme,
+              onApplyTheme: onApplyTheme,
+              onCreateTheme: onCreateTheme,
+              onPropertiesChange: onPropertiesChange,
+              onUpdateTheme: onUpdateTheme,
+              theme: themeToEdit.current,
+              onEditCSSClick: setCurrentScreen
+            });
+          }
+        })]
       }), /*#__PURE__*/jsxRuntime.jsx(MemoizedAlert, {
         isOpen: isDeleteAlertOpen,
         isSubmitting: isDeleting,
@@ -2173,7 +2289,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     });
   }, []);
   react.useEffect(function () {
-    if (neetoCist.isNotPresent(currentTheme)) return;
+    if (neetoCist.isNotPresent(currentTheme) || utils.isEditThemeRoute()) {
+      return;
+    }
     setThemeState({
       previewingTheme: currentTheme
     });