@bigbinary/neeto-themes-frontend 3.0.3 → 3.1.0

package/app/javascript/src/translations/en.json

@@ -55,6 +55,10 @@
         "headerTabs": {
           "themes": "Themes"
         },
+        "helpPopover": {
+          "title": "Themes",
+          "description": "Personalize your {{entityType}} to match your brand."
+        },
         "themes": {
           "systemThemes": "System themes",
           "customThemes": "Custom themes",

package/dist/NeetoThemesBuilder.js

@@ -4,31 +4,34 @@ import { t as t$1 } from 'i18next';
 import { hyphenate, findBy, findIndexBy, isPresent, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { useMutationWithInvalidation, withT, useBreakpoints, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
-import { useQuery } from '@tanstack/react-query';
+import { B as BASE_URL, b as scrollElementIntoView, c as setCustomCSS, g as getDominantColorFromUrl, i as isEditThemeRoute, d as isFunction, e as isNewThemeRoute } from './index-BzuiCZa9.js';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
-import { B as BASE_URL, b as scrollElementIntoView, c as setCustomCSS, g as getDominantColorFromUrl, i as isFunction } from './index-CvV1tFYS.js';
-import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils } from './useThemeUtils-BCO-i9ZG.js';
+import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils } from './useThemeUtils-3j-X4pSD.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classnames from 'classnames';
+import { joinHyphenCase, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import Collapse from '@bigbinary/neeto-icons/Collapse';
 import Alert from '@bigbinary/neetoui/Alert';
 import Button from '@bigbinary/neetoui/Button';
 import { useTranslation, Trans } from 'react-i18next';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useHistory, useParams, Switch as Switch$1, Route } from 'react-router-dom';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import Close from '@bigbinary/neeto-icons/Close';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Popover from '@bigbinary/neetoui/Popover';
 import Typography from '@bigbinary/neetoui/Typography';
 import Switch from '@bigbinary/neetoui/Switch';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
 import Form from '@bigbinary/neetoui/formik/Form';
+import BlockNavigation from '@bigbinary/neetoui/formik/BlockNavigation';
+import { isEmpty, negate, isNotNil } from 'ramda';
 import * as yup from 'yup';
 import Editor from '@monaco-editor/react';
 import { useFormikContext, Field } from 'formik';
 import Down from '@bigbinary/neeto-icons/Down';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { negate, isEmpty } from 'ramda';
-import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
 import CenterAlign from '@bigbinary/neeto-icons/CenterAlign';
 import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
 import ColorPicker from '@bigbinary/neetoui/ColorPicker';
@@ -123,6 +126,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 = useConfigStore(function (store) {
       return {
@@ -138,19 +143,32 @@ var useListThemes = function useListThemes(entityId) {
     }
   });
 };
+var useFetchTheme = function useFetchTheme(themeId, options) {
+  return useQuery(_objectSpread$6({
+    queryKey: [QUERY_KEYS.THEME_DETAILS, themeId],
+    queryFn: function queryFn() {
+      return themesApi.show(themeId);
+    }
+  }, options));
+};
 var useCreateTheme = function useCreateTheme() {
   return useMutationWithInvalidation(themesApi.create, {
     keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.GLOBAL_THEME_DETAILS]]
   });
 };
 var useUpdateTheme = function useUpdateTheme(themeId) {
+  var queryClient = useQueryClient();
   return useMutationWithInvalidation(function (payload) {
     return themesApi.update({
       id: themeId,
       payload: payload
     });
   }, {
-    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.THEME_DETAILS, themeId], [QUERY_KEYS.GLOBAL_THEME_DETAILS]]
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.THEME_DETAILS, themeId], [QUERY_KEYS.GLOBAL_THEME_DETAILS]],
+    onSuccess: function onSuccess(_ref) {
+      var theme = _ref.theme;
+      queryClient.setQueryData([QUERY_KEYS.THEME_DETAILS, themeId], theme);
+    }
   });
 };
 var useDeleteTheme = function useDeleteTheme() {
@@ -163,8 +181,8 @@ var useCloneTheme = function useCloneTheme() {
     keysToInvalidate: [QUERY_KEYS.THEMES_LIST]
   });
 };
-var useApplyTheme = function useApplyTheme(_ref) {
-  var onSuccess = _ref.onSuccess;
+var useApplyTheme = function useApplyTheme(_ref2) {
+  var onSuccess = _ref2.onSuccess;
   return useMutationWithInvalidation(themesApi.apply, {
     keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]],
     onSuccess: onSuccess
@@ -176,6 +194,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(BASE_URL, "/api/v1/global_theme"), {
     params: {
@@ -340,9 +366,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 (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,
@@ -1122,17 +1173,17 @@ var ThemeMeta = 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 = useTranslation(),
     t = _useTranslation.t;
+  var history = useHistory();
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     popoverInstance = _useState2[0],
@@ -1145,15 +1196,29 @@ var Customize = function Customize(_ref) {
     }, shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType;
-  var _useThemeUtils = useThemeUtils(),
-    currentTheme = _useThemeUtils.currentTheme,
-    setThemeState = _useThemeUtils.setThemeState;
+  var _useParams = useParams(),
+    themeId = _useParams.themeId;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        currentTheme: store["currentTheme"],
+        setThemeState: store["setThemeState"]
+      };
+    }, 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: isEditThemeRoute() && 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 = useRef(null);
@@ -1185,25 +1250,35 @@ var Customize = function Customize(_ref) {
             values: theme
           });
           onCreateTheme(theme);
+          history.replace(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
         });
       }
     });
   };
+  useEffect(function () {
+    if (isNotNil(themeId) && !isLoading) {
+      setThemeState({
+        previewingTheme: themeData
+      });
+    }
+  }, [themeData, isLoading]);
+  if (isLoading) {
+    return /*#__PURE__*/jsx(PageLoader, {});
+  }
   return /*#__PURE__*/jsx(Form, {
     formikProps: {
-      initialValues: _objectSpread$1(_objectSpread$1({}, buildInitialValues(theme, themePropertiesSchema)), {}, {
+      initialValues: _objectSpread$1(_objectSpread$1({}, buildInitialValues(themeData, themePropertiesSchema)), {}, {
         shouldSetAsGlobalTheme: isThemeGlobalTheme,
         entityType: entityType
       }),
@@ -1219,7 +1294,7 @@ var Customize = function Customize(_ref) {
         className: "neeto-themes-sidebar__scroll",
         children: [/*#__PURE__*/jsxs("div", {
           className: "neeto-themes-sidebar__scroll-content flex flex-grow flex-col px-4 pb-4 lg:px-5",
-          children: [/*#__PURE__*/jsx(ThemeMeta, {
+          children: [!isSubmitting && /*#__PURE__*/jsx(BlockNavigation, {}), /*#__PURE__*/jsx(ThemeMeta, {
             className: classnames({
               hidden: isCustomCssScreen
             })
@@ -1279,7 +1354,7 @@ var Customize = function Customize(_ref) {
             type: "reset"
           }), /*#__PURE__*/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,
@@ -1321,7 +1396,7 @@ var Customize = function Customize(_ref) {
               label: t("neetoThemes.buttons.applyThisTheme"),
               loading: isApplyingTheme,
               onClick: function onClick() {
-                return onApplyTheme(theme);
+                return onApplyTheme(themeData);
               }
             })]
           }),
@@ -1802,62 +1877,87 @@ 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 = useTranslation(),
     t = _useTranslation.t;
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        previewingTheme: store["previewingTheme"]
+      };
+    }, shallow),
+    previewingTheme = _useThemeStore.previewingTheme;
+  var themeId = previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        entityType: store["entityType"],
+        helpDocUrl: store["helpDocUrl"]
+      };
+    }, shallow),
+    entityType = _useConfigStore.entityType,
+    helpDocUrl = _useConfigStore.helpDocUrl;
+  var isCustomizeScreen = isEditThemeRoute() || isNewThemeRoute();
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
-  if (currentScreen === DESIGN_SCREENS.THEMES) {
+  if (isCustomizeScreen) {
     return /*#__PURE__*/jsx("div", {
-      className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
+      className: "neeto-themes-sidebar__header px-4",
       children: /*#__PURE__*/jsxs("div", {
-        className: "flex items-center justify-between space-x-2",
-        children: [/*#__PURE__*/jsx(Typography, {
+        className: "flex items-center justify-start space-x-2",
+        children: [/*#__PURE__*/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__*/jsxs(Typography, {
           "data-cy": "themes-header",
           lineHeight: "normal",
           style: "h3",
           weight: "semibold",
-          children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
-        }), /*#__PURE__*/jsx("div", {
-          className: "self-end",
-          children: /*#__PURE__*/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
-          })
+          children: [isCustomizeScreen && (isNewThemeRoute() ? t("neetoThemes.build.leftSideBar.themes.createTheme.title") : t("neetoThemes.build.leftSideBar.themes.editTheme.title")), isCustomCssScreen && t("neetoThemes.build.leftSideBar.themes.customCSS")]
         })]
       })
     });
   }
   return /*#__PURE__*/jsx("div", {
-    className: "neeto-themes-sidebar__header px-4",
+    className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
     children: /*#__PURE__*/jsxs("div", {
-      className: "flex items-center justify-start space-x-2",
-      children: [/*#__PURE__*/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__*/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__*/jsxs("div", {
+        className: "flex space-x-2",
+        children: [/*#__PURE__*/jsx(Typography, {
+          "data-cy": "themes-header",
+          lineHeight: "normal",
+          style: "h3",
+          weight: "semibold",
+          children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
+        }), /*#__PURE__*/jsx(HelpPopover, {
+          helpLinkProps: helpDocUrl && {
+            href: helpDocUrl
+          },
+          title: t("neetoThemes.build.leftSideBar.helpPopover.title"),
+          description: t("neetoThemes.build.leftSideBar.helpPopover.description", {
+            entityType: entityType
+          })
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: "self-end",
+        children: /*#__PURE__*/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
+        })
       })]
     })
   });
@@ -1865,7 +1965,7 @@ var TitleBar = function TitleBar(_ref) {
 
 var MemoizedAlert = /*#__PURE__*/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,
@@ -1894,6 +1994,7 @@ var Sidebar = function Sidebar(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     isThemesSidebarCollapsed = _useState10[0],
     setIsThemesSidebarCollapsed = _useState10[1];
+  var history = useHistory();
   useEffect(function () {
     setIsThemesSidebarCollapsed(!isLargerScreen);
   }, [isLargerScreen]);
@@ -1955,9 +2056,14 @@ var Sidebar = function Sidebar(_ref) {
   var themeToDelete = useRef(null);
   var themeToEdit = useRef(null);
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
+  var handleCreateNewTheme = function handleCreateNewTheme() {
+    history.push(buildUrl(buildPathname(routes.themes["new"])));
+  };
   var handleEditTheme = function handleEditTheme(theme) {
     themeToEdit.current = theme;
-    setCurrentScreen(DESIGN_SCREENS.Customize);
+    history.push(buildUrl(buildPathname(routes.themes.edit), {
+      themeId: theme.id
+    }));
   };
   var onApplyTheme = function onApplyTheme(theme) {
     if (isApplyingTheme) return;
@@ -1968,23 +2074,30 @@ var Sidebar = function Sidebar(_ref) {
       entityType: entityType
     });
   };
-  var handleBackPress = function handleBackPress(theme) {
+  var navigateToThemesScreen = function navigateToThemesScreen(themeId) {
     setTheme(currentTheme);
-    highlightTheme(isPresent(theme) ? theme : currentTheme);
+    highlightTheme(isPresent(themeId) ? themeId : currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
     setThemeState({
       previewingTheme: currentTheme
     });
-    setCurrentScreen(isCustomCssScreen ? DESIGN_SCREENS.Customize : DESIGN_SCREENS.THEMES);
+    history.push(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 () {
-      scrollElementIntoView(themeToHighlight.id);
+      scrollElementIntoView(themeIdToHighlight);
     }, 1500);
     setTimeout(function () {
       setThemeToHighlight(null);
     }, 4000);
-    setThemeToHighlight(themeToHighlight.id);
+    setThemeToHighlight(themeIdToHighlight);
   };
   var onCreateTheme = function onCreateTheme(createdTheme) {
     themeToEdit.current = createdTheme;
@@ -1993,6 +2106,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 = {
@@ -2029,37 +2146,59 @@ var Sidebar = function Sidebar(_ref) {
       children: [/*#__PURE__*/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__*/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__*/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__*/jsxs(Switch$1, {
+        children: [/*#__PURE__*/jsx(Route, {
+          exact: true,
+          path: buildPathname(routes.themes.index),
+          render: function render() {
+            return /*#__PURE__*/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__*/jsx(Route, {
+          path: buildPathname(routes.themes["new"]),
+          render: function render() {
+            return /*#__PURE__*/jsx(Customize, {
+              currentScreen: currentScreen,
+              isApplyingTheme: isApplyingTheme,
+              onApplyTheme: onApplyTheme,
+              onCreateTheme: onCreateTheme,
+              onPropertiesChange: onPropertiesChange,
+              onUpdateTheme: onUpdateTheme,
+              theme: themeToEdit.current,
+              onEditCSSClick: setCurrentScreen
+            });
+          }
+        }), /*#__PURE__*/jsx(Route, {
+          path: buildPathname(routes.themes.edit),
+          render: function render() {
+            return /*#__PURE__*/jsx(Customize, {
+              currentScreen: currentScreen,
+              isApplyingTheme: isApplyingTheme,
+              onApplyTheme: onApplyTheme,
+              onCreateTheme: onCreateTheme,
+              onPropertiesChange: onPropertiesChange,
+              onUpdateTheme: onUpdateTheme,
+              theme: themeToEdit.current,
+              onEditCSSClick: setCurrentScreen
+            });
+          }
+        })]
       }), /*#__PURE__*/jsx(MemoizedAlert, {
         isOpen: isDeleteAlertOpen,
         isSubmitting: isDeleting,
@@ -2092,6 +2231,8 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     entityId = _ref.entityId,
     thumbnail = _ref.thumbnail,
     onPropertiesChange = _ref.onPropertiesChange,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? null : _ref$helpDocUrl,
     _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
     isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes,
     _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
@@ -2126,11 +2267,14 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     setConfigState({
       entityType: entityType,
       entityId: entityId,
-      isTemplateThemesEnabled: isTemplateThemesEnabled
+      isTemplateThemesEnabled: isTemplateThemesEnabled,
+      helpDocUrl: helpDocUrl
     });
   }, []);
   useEffect(function () {
-    if (isNotPresent(currentTheme)) return;
+    if (isNotPresent(currentTheme) || isEditThemeRoute()) {
+      return;
+    }
     setThemeState({
       previewingTheme: currentTheme
     });