@bigbinary/neeto-themes-frontend 3.0.2 → 3.0.4

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",
@@ -63,7 +67,7 @@
             "delete": "Delete",
             "setAsGlobalTheme": {
               "label": "Set as global theme",
-              "helpText": "Enabling this will set this theme as the default theme, automatically applying it to all your future {{entityType}}s.",
+              "helpText": "Enabling this will set this theme as the default theme, automatically applying it to all your future {{entityType}}s. This theme will also be applied to the {{entityType}}s that uses the previous global theme.",
               "tooltipContent": "This theme is currently set as the global theme. Select another theme to change it."
             }
           },

package/dist/NeetoThemesBuilder.js

@@ -140,7 +140,7 @@ var useListThemes = function useListThemes(entityId) {
 };
 var useCreateTheme = function useCreateTheme() {
   return useMutationWithInvalidation(themesApi.create, {
-    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.GLOBAL_THEME_DETAILS]]
+    keysToInvalidate: [[QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS], [QUERY_KEYS.GLOBAL_THEME_DETAILS]]
   });
 };
 var useUpdateTheme = function useUpdateTheme(themeId) {
@@ -172,7 +172,7 @@ var useApplyTheme = function useApplyTheme(_ref) {
 };
 var useApplyGlobalTheme = function useApplyGlobalTheme() {
   return useMutationWithInvalidation(themesApi.applyGlobalTheme, {
-    keysToInvalidate: [[QUERY_KEYS.GLOBAL_THEME_DETAILS]]
+    keysToInvalidate: [[QUERY_KEYS.GLOBAL_THEME_DETAILS], [QUERY_KEYS.THEMES_LIST], [QUERY_KEYS.THEME_ENTITY_DETAILS]]
   });
 };
 
@@ -1154,6 +1154,7 @@ var Customize = function Customize(_ref) {
     _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 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);
   var _useCreateTheme = useCreateTheme(),
@@ -1288,7 +1289,6 @@ var Customize = function Customize(_ref) {
           appendTo: function appendTo() {
             return document.body;
           },
-          disabled: isEditingCurrentlyAppliedTheme,
           position: "top",
           reference: submitBtnRef,
           trigger: "click",
@@ -1325,6 +1325,7 @@ var Customize = function Customize(_ref) {
               }
             })]
           }),
+          disabled: isEditingCurrentlyAppliedTheme || isCurrentThemeAndGlobalThemeSame && values.shouldSetAsGlobalTheme,
           onMount: setPopoverInstance
         })]
       });
@@ -1640,6 +1641,7 @@ var Themes = function Themes(_ref) {
     thumbnail = _ref.thumbnail,
     themeBeingApplied = _ref.themeBeingApplied,
     onApplyTheme = _ref.onApplyTheme,
+    onApplyGlobalThemeSuccess = _ref.onApplyGlobalThemeSuccess,
     isApplyingTheme = _ref.isApplyingTheme;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -1708,6 +1710,10 @@ var Themes = function Themes(_ref) {
     applyGlobalTheme({
       themeId: themeId,
       payload: payload
+    }, {
+      onSuccess: function onSuccess() {
+        onApplyGlobalThemeSuccess === null || onApplyGlobalThemeSuccess === void 0 ? void 0 : onApplyGlobalThemeSuccess();
+      }
     });
   };
   if (isLoading || isCurrentThemeLoading || isLoadingGlobalTheme) {
@@ -1801,18 +1807,37 @@ var TitleBar = function TitleBar(_ref) {
     themeToEdit = _ref.themeToEdit;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        entityType: store["entityType"],
+        helpDocUrl: store["helpDocUrl"]
+      };
+    }, shallow),
+    entityType = _useConfigStore.entityType,
+    helpDocUrl = _useConfigStore.helpDocUrl;
   var isCustomCssScreen = isScreenCustomCSS(currentScreen);
   if (currentScreen === DESIGN_SCREENS.THEMES) {
     return /*#__PURE__*/jsx("div", {
       className: "neeto-themes-sidebar__header px-6 lg:px-5 xl:px-6",
       children: /*#__PURE__*/jsxs("div", {
         className: "flex items-center justify-between space-x-2",
-        children: [/*#__PURE__*/jsx(Typography, {
-          "data-cy": "themes-header",
-          lineHeight: "normal",
-          style: "h3",
-          weight: "semibold",
-          children: t("neetoThemes.build.leftSideBar.headerTabs.themes")
+        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, {
@@ -1863,7 +1888,8 @@ var Sidebar = function Sidebar(_ref) {
   var thumbnail = _ref.thumbnail,
     onPropertiesChange = _ref.onPropertiesChange,
     onApplyThemeSuccess = _ref.onApplyThemeSuccess,
-    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
+    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess,
+    onApplyGlobalThemeSuccess = _ref.onApplyGlobalThemeSuccess;
   var _useState = useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray(_useState, 2),
     currentScreen = _useState2[0],
@@ -2034,6 +2060,7 @@ var Sidebar = function Sidebar(_ref) {
         highlightTheme: highlightTheme,
         isApplyingTheme: isApplyingTheme,
         isCurrentThemeLoading: isCurrentThemeLoading,
+        onApplyGlobalThemeSuccess: onApplyGlobalThemeSuccess,
         onApplyTheme: onApplyTheme,
         themeBeingApplied: themeBeingApplied,
         themeToHighlight: themeToHighlight,
@@ -2084,12 +2111,16 @@ 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,
     onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? noop : _ref$onApplyThemeSucc,
     _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
-    onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? noop : _ref$onUpdateThemeSuc;
+    onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? noop : _ref$onUpdateThemeSuc,
+    _ref$onApplyGlobalThe = _ref.onApplyGlobalThemeSuccess,
+    onApplyGlobalThemeSuccess = _ref$onApplyGlobalThe === void 0 ? noop : _ref$onApplyGlobalThe;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -2116,7 +2147,8 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     setConfigState({
       entityType: entityType,
       entityId: entityId,
-      isTemplateThemesEnabled: isTemplateThemesEnabled
+      isTemplateThemesEnabled: isTemplateThemesEnabled,
+      helpDocUrl: helpDocUrl
     });
   }, []);
   useEffect(function () {
@@ -2125,7 +2157,7 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
       previewingTheme: currentTheme
     });
     setTheme(currentTheme);
-  }, [isLoading, entityId]);
+  }, [isLoading, entityId, currentTheme]);
   useEffect(function () {
     if (isNotPresent(currentTheme)) return;
     setThemeState({
@@ -2136,6 +2168,7 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-themes__wrapper",
     children: [/*#__PURE__*/jsx(Sidebar, {
+      onApplyGlobalThemeSuccess: onApplyGlobalThemeSuccess,
       onApplyThemeSuccess: onApplyThemeSuccess,
       onPropertiesChange: onPropertiesChange,
       onUpdateThemeSuccess: onUpdateThemeSuccess,