@bigbinary/neeto-themes-frontend 3.0.1 → 3.0.3

package/dist/cjs/NeetoThemesBuilder.js

@@ -161,7 +161,7 @@ var useListThemes = function useListThemes(entityId) {
 };
 var useCreateTheme = function useCreateTheme() {
   return reactUtils.useMutationWithInvalidation(themesApi.create, {
-    keysToInvalidate: [[useThemeUtils.QUERY_KEYS.THEMES_LIST], [useThemeUtils.QUERY_KEYS.GLOBAL_THEME_DETAILS]]
+    keysToInvalidate: [[useThemeUtils.QUERY_KEYS.THEMES_LIST], [useThemeUtils.QUERY_KEYS.THEME_ENTITY_DETAILS], [useThemeUtils.QUERY_KEYS.GLOBAL_THEME_DETAILS]]
   });
 };
 var useUpdateTheme = function useUpdateTheme(themeId) {
@@ -193,7 +193,7 @@ var useApplyTheme = function useApplyTheme(_ref) {
 };
 var useApplyGlobalTheme = function useApplyGlobalTheme() {
   return reactUtils.useMutationWithInvalidation(themesApi.applyGlobalTheme, {
-    keysToInvalidate: [[useThemeUtils.QUERY_KEYS.GLOBAL_THEME_DETAILS]]
+    keysToInvalidate: [[useThemeUtils.QUERY_KEYS.GLOBAL_THEME_DETAILS], [useThemeUtils.QUERY_KEYS.THEMES_LIST], [useThemeUtils.QUERY_KEYS.THEME_ENTITY_DETAILS]]
   });
 };
 
@@ -1167,13 +1167,15 @@ var Customize = function Customize(_ref) {
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType;
   var _useThemeUtils = useThemeUtils.useThemeUtils(),
-    currentTheme = _useThemeUtils.currentTheme;
+    currentTheme = _useThemeUtils.currentTheme,
+    setThemeState = _useThemeUtils.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 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);
   var _useCreateTheme = useCreateTheme(),
@@ -1208,11 +1210,15 @@ var Customize = function Customize(_ref) {
       });
     }
     return updateTheme(themeToSave, {
-      onSuccess: function onSuccess() {
+      onSuccess: function onSuccess(_ref4) {
+        var theme = _ref4.theme;
+        onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 ? void 0 : onUpdateThemeSuccess(theme);
+        setThemeState({
+          previewingTheme: theme
+        });
         resetForm({
-          values: values
+          values: theme
         });
-        onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 ? void 0 : onUpdateThemeSuccess(values);
       }
     });
   };
@@ -1226,10 +1232,10 @@ var Customize = function Customize(_ref) {
       enableReinitialize: true,
       onSubmit: onSubmit
     },
-    children: function children(_ref4) {
-      var dirty = _ref4.dirty,
-        values = _ref4.values,
-        setFieldValue = _ref4.setFieldValue;
+    children: function children(_ref5) {
+      var dirty = _ref5.dirty,
+        values = _ref5.values,
+        setFieldValue = _ref5.setFieldValue;
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "neeto-themes-sidebar__scroll",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1249,8 +1255,8 @@ var Customize = function Customize(_ref) {
             })
           }), neetoCist.filterBy({
             kind: "image"
-          }, themePropertiesSchema).map(function (_ref5) {
-            var key = _ref5.key;
+          }, themePropertiesSchema).map(function (_ref6) {
+            var key = _ref6.key;
             return /*#__PURE__*/react.createElement(Images, {
               onPropertiesChange: onPropertiesChange,
               attribute: key,
@@ -1304,7 +1310,6 @@ var Customize = function Customize(_ref) {
           appendTo: function appendTo() {
             return document.body;
           },
-          disabled: isEditingCurrentlyAppliedTheme,
           position: "top",
           reference: submitBtnRef,
           trigger: "click",
@@ -1341,6 +1346,7 @@ var Customize = function Customize(_ref) {
               }
             })]
           }),
+          disabled: isEditingCurrentlyAppliedTheme || isCurrentThemeAndGlobalThemeSame && values.shouldSetAsGlobalTheme,
           onMount: setPopoverInstance
         })]
       });
@@ -1656,6 +1662,7 @@ var Themes = function Themes(_ref) {
     thumbnail = _ref.thumbnail,
     themeBeingApplied = _ref.themeBeingApplied,
     onApplyTheme = _ref.onApplyTheme,
+    onApplyGlobalThemeSuccess = _ref.onApplyGlobalThemeSuccess,
     isApplyingTheme = _ref.isApplyingTheme;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -1724,6 +1731,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) {
@@ -1879,7 +1890,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 = react.useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray(_useState, 2),
     currentScreen = _useState2[0],
@@ -2050,6 +2062,7 @@ var Sidebar = function Sidebar(_ref) {
         highlightTheme: highlightTheme,
         isApplyingTheme: isApplyingTheme,
         isCurrentThemeLoading: isCurrentThemeLoading,
+        onApplyGlobalThemeSuccess: onApplyGlobalThemeSuccess,
         onApplyTheme: onApplyTheme,
         themeBeingApplied: themeBeingApplied,
         themeToHighlight: themeToHighlight,
@@ -2105,7 +2118,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
     onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? neetoCist.noop : _ref$onApplyThemeSucc,
     _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
-    onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? neetoCist.noop : _ref$onUpdateThemeSuc;
+    onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? neetoCist.noop : _ref$onUpdateThemeSuc,
+    _ref$onApplyGlobalThe = _ref.onApplyGlobalThemeSuccess,
+    onApplyGlobalThemeSuccess = _ref$onApplyGlobalThe === void 0 ? neetoCist.noop : _ref$onApplyGlobalThe;
   var _useThemeStore = useThemeUtils.useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -2141,7 +2156,7 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
       previewingTheme: currentTheme
     });
     setTheme(currentTheme);
-  }, [isLoading, entityId]);
+  }, [isLoading, entityId, currentTheme]);
   react.useEffect(function () {
     if (neetoCist.isNotPresent(currentTheme)) return;
     setThemeState({
@@ -2152,6 +2167,7 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-themes__wrapper",
     children: [/*#__PURE__*/jsxRuntime.jsx(Sidebar, {
+      onApplyGlobalThemeSuccess: onApplyGlobalThemeSuccess,
       onApplyThemeSuccess: onApplyThemeSuccess,
       onPropertiesChange: onPropertiesChange,
       onUpdateThemeSuccess: onUpdateThemeSuccess,