@bigbinary/neeto-themes-frontend 2.0.3 → 2.0.5

package/dist/index.cjs.js

@@ -5,20 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var shallow = require('zustand/shallow');
 var react = require('react');
 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 reactQuery = require('@tanstack/react-query');
+var axios = require('axios');
+var ramda = require('ramda');
 var zustand = require('zustand');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var neetoCist = require('@bigbinary/neeto-cist');
-var Alert = require('@bigbinary/neetoui/Alert');
-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 reactQuery = require('@tanstack/react-query');
-var axios = require('axios');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var Alert = require('@bigbinary/neetoui/Alert');
+var reactI18next = require('react-i18next');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var ramda = require('ramda');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var Close = require('@bigbinary/neeto-icons/Close');
 var Button = require('@bigbinary/neetoui/Button');
@@ -65,12 +65,12 @@ function _interopNamespace(e) {
 }
 
 var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
-var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
@@ -92,6 +92,33 @@ var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var LeftArrow__default = /*#__PURE__*/_interopDefaultLegacy(LeftArrow);
 var Plus__default = /*#__PURE__*/_interopDefaultLegacy(Plus);
 
+var BASE_URL = "neeto_themes_engine";
+var WHITE = "255, 255, 255";
+var BLACK = "0, 0, 0";
+
+var show$1 = function show(entityId) {
+  return axios__default["default"].get("".concat(BASE_URL, "/api/v1/entities/").concat(entityId));
+};
+var entitiesApi = {
+  show: show$1
+};
+
+var QUERY_KEYS = {
+  THEMES_LIST: "themes-list",
+  THEME_DETAILS: "theme-details",
+  SCHEMA_DETAILS: "schema-details"
+};
+
+var useShowThemeEntity = function useShowThemeEntity(entityId) {
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
+    queryFn: function queryFn() {
+      return entitiesApi.show(entityId);
+    },
+    enabled: !!entityId
+  });
+};
+
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useConfigStore = zustand.create(reactUtils.withImmutableActions(function (set) {
   return {
@@ -181,35 +208,101 @@ var hexToRgba = function hexToRgba(hex) {
   return "".concat(r, ", ").concat(g, ", ").concat(b).concat(a !== undefined ? ", ".concat(a) : "");
 };
 
-var BASE_URL = "neeto_themes_engine";
-var WHITE = "255, 255, 255";
-var BLACK = "0, 0, 0";
-
-var show$1 = function show(entityId) {
-  return axios__default["default"].get("".concat(BASE_URL, "/api/v1/entities/").concat(entityId));
+var root = document.querySelector(":root");
+var setVariable = function setVariable(name, value, variableNamesMap) {
+  var variableName = variableNamesMap[name];
+  if (!variableName) return;
+  root.style.setProperty(variableName, value);
 };
-var entitiesApi = {
-  show: show$1
+var setTheme = function setTheme(theme, variableNamesMap, themeConfig) {
+  if (neetoCist.isNotPresent(theme === null || theme === void 0 ? void 0 : theme.properties)) return;
+  theme.properties.forEach(function (property) {
+    var attribute = neetoCist.snakeToCamelCase(property.key);
+    if (property.kind === "color") {
+      setVariable(attribute, hexToRgba(property.value), variableNamesMap);
+    } else if (property.kind === "overlay_opacity") {
+      var overlayOpacity = Number(property.value);
+      setVariable(neetoCist.snakeToCamelCase("".concat(property.key, "_overlay_opacity")), Math.abs(overlayOpacity / 100), variableNamesMap);
+      setVariable(neetoCist.snakeToCamelCase("".concat(property.key, "_overlay_color")), overlayOpacity < 0 ? BLACK : WHITE, variableNamesMap);
+    } else if (property.kind === "radius") {
+      setVariable(attribute, "".concat(property.value, "px"), variableNamesMap);
+    } else {
+      setVariable(attribute, property.value, variableNamesMap);
+    }
+  });
+  neetoCist.filterBy({
+    kind: "image"
+  }, themeConfig).forEach(function (_ref) {
+    var _theme$attribute;
+    var key = _ref.key;
+    var attribute = neetoCist.snakeToCamelCase(key);
+    setVariable(attribute, "url(".concat((_theme$attribute = theme[attribute]) === null || _theme$attribute === void 0 ? void 0 : _theme$attribute.url, ")"), variableNamesMap);
+  });
 };
 
-var QUERY_KEYS = {
-  THEMES_LIST: "themes-list",
-  THEME_DETAILS: "theme-details",
-  SCHEMA_DETAILS: "schema-details"
+var list$1 = function list() {
+  return axios__default["default"].get("".concat(BASE_URL, "/api/v1/schema"));
+};
+var schemasApi = {
+  list: list$1
 };
 
-var useShowThemeEntity = function useShowThemeEntity(entityId) {
+var useListSchema = function useListSchema() {
   return reactQuery.useQuery({
-    queryKey: [QUERY_KEYS.THEME_ENTITY_DETAILS, entityId],
-    queryFn: function queryFn() {
-      return entitiesApi.show(entityId);
-    },
-    enabled: !!entityId
+    queryKey: [QUERY_KEYS.SCHEMA_DETAILS],
+    queryFn: schemasApi.list
   });
 };
 
+var useThemeUtils = function useThemeUtils() {
+  var setConfigState = useConfigStore(ramda.prop("setConfigState"));
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        previewingTheme: store["previewingTheme"],
+        currentTheme: store["currentTheme"]
+      };
+    }, shallow.shallow),
+    previewingTheme = _useThemeStore.previewingTheme,
+    currentTheme = _useThemeStore.currentTheme;
+  var _useListSchema = useListSchema(),
+    isFetchingSchema = _useListSchema.isLoading,
+    data = _useListSchema.data;
+  var _ref = data || {},
+    _ref$schema = _ref.schema,
+    themePropertiesSchema = _ref$schema === void 0 ? [] : _ref$schema,
+    _ref$variableNamesMap = _ref.variableNamesMap,
+    variableNamesMap = _ref$variableNamesMap === void 0 ? {} : _ref$variableNamesMap;
+  react.useEffect(function () {
+    if (data) {
+      setConfigState({
+        themePropertiesSchema: data === null || data === void 0 ? void 0 : data.schema,
+        variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap,
+        defaultThemeName: data === null || data === void 0 ? void 0 : data.defaultThemeName
+      });
+    }
+  }, [data]);
+  react.useEffect(function () {
+    return setConfigState({
+      isFetchingSchema: isFetchingSchema
+    });
+  }, [isFetchingSchema]);
+  var setVariable$1 = function setVariable$1(name, value) {
+    return setVariable(name, value, variableNamesMap);
+  };
+  var setTheme$1 = function setTheme$1(theme) {
+    return setTheme(theme, variableNamesMap, themePropertiesSchema);
+  };
+  return {
+    setTheme: setTheme$1,
+    setVariable: setVariable$1,
+    previewingTheme: previewingTheme,
+    currentTheme: currentTheme,
+    isFetchingSchema: isFetchingSchema
+  };
+};
+
 var _excluded$1 = ["themeId"];
-var list$1 = function list(entityId) {
+var list = function list(entityId) {
   return axios__default["default"].get("".concat(BASE_URL, "/api/v1/themes"), {
     params: {
       entity_id: entityId
@@ -245,7 +338,7 @@ var apply = function apply(_ref2) {
   });
 };
 var themesApi = {
-  list: list$1,
+  list: list,
   show: show,
   create: create,
   update: update,
@@ -302,99 +395,6 @@ var useApplyTheme = function useApplyTheme(_ref) {
   });
 };
 
-var root = document.querySelector(":root");
-var setVariable = function setVariable(name, value, variableNamesMap) {
-  var variableName = variableNamesMap[name];
-  if (!variableName) return;
-  root.style.setProperty(variableName, value);
-};
-var setTheme = function setTheme(theme, variableNamesMap, themeConfig) {
-  if (neetoCist.isNotPresent(theme === null || theme === void 0 ? void 0 : theme.properties)) return;
-  theme.properties.forEach(function (property) {
-    var attribute = neetoCist.snakeToCamelCase(property.key);
-    if (property.kind === "color") {
-      setVariable(attribute, hexToRgba(property.value), variableNamesMap);
-    } else if (property.kind === "overlay_opacity") {
-      var overlayOpacity = Number(property.value);
-      setVariable(neetoCist.snakeToCamelCase("".concat(property.key, "_overlay_opacity")), Math.abs(overlayOpacity / 100), variableNamesMap);
-      setVariable(neetoCist.snakeToCamelCase("".concat(property.key, "_overlay_color")), overlayOpacity < 0 ? BLACK : WHITE, variableNamesMap);
-    } else if (property.kind === "radius") {
-      setVariable(attribute, "".concat(property.value, "px"), variableNamesMap);
-    } else {
-      setVariable(attribute, property.value, variableNamesMap);
-    }
-  });
-  neetoCist.filterBy({
-    kind: "image"
-  }, themeConfig).forEach(function (_ref) {
-    var _theme$attribute;
-    var key = _ref.key;
-    var attribute = neetoCist.snakeToCamelCase(key);
-    setVariable(attribute, "url(".concat((_theme$attribute = theme[attribute]) === null || _theme$attribute === void 0 ? void 0 : _theme$attribute.url, ")"), variableNamesMap);
-  });
-};
-
-var list = function list() {
-  return axios__default["default"].get("".concat(BASE_URL, "/api/v1/schema"));
-};
-var schemasApi = {
-  list: list
-};
-
-var useListSchema = function useListSchema() {
-  return reactQuery.useQuery({
-    queryKey: [QUERY_KEYS.SCHEMA_DETAILS],
-    queryFn: schemasApi.list
-  });
-};
-
-var useThemeUtils = function useThemeUtils() {
-  var setConfigState = useConfigStore(ramda.prop("setConfigState"));
-  var _useThemeStore = useThemeStore(function (store) {
-      return {
-        previewingTheme: store["previewingTheme"],
-        currentTheme: store["currentTheme"]
-      };
-    }, shallow.shallow),
-    previewingTheme = _useThemeStore.previewingTheme,
-    currentTheme = _useThemeStore.currentTheme;
-  var _useListSchema = useListSchema(),
-    isFetchingSchema = _useListSchema.isLoading,
-    data = _useListSchema.data;
-  var _ref = data || {},
-    _ref$schema = _ref.schema,
-    themePropertiesSchema = _ref$schema === void 0 ? [] : _ref$schema,
-    _ref$variableNamesMap = _ref.variableNamesMap,
-    variableNamesMap = _ref$variableNamesMap === void 0 ? {} : _ref$variableNamesMap;
-  react.useEffect(function () {
-    if (data) {
-      setConfigState({
-        themePropertiesSchema: data === null || data === void 0 ? void 0 : data.schema,
-        variableNamesMap: data === null || data === void 0 ? void 0 : data.variableNamesMap,
-        defaultThemeName: data === null || data === void 0 ? void 0 : data.defaultThemeName
-      });
-    }
-  }, [data]);
-  react.useEffect(function () {
-    return setConfigState({
-      isFetchingSchema: isFetchingSchema
-    });
-  }, [isFetchingSchema]);
-  var setVariable$1 = function setVariable$1(name, value) {
-    return setVariable(name, value, variableNamesMap);
-  };
-  var setTheme$1 = function setTheme$1(theme) {
-    return setTheme(theme, variableNamesMap, themePropertiesSchema);
-  };
-  return {
-    setTheme: setTheme$1,
-    setVariable: setVariable$1,
-    previewingTheme: previewingTheme,
-    currentTheme: currentTheme,
-    isFetchingSchema: isFetchingSchema
-  };
-};
-
 var POSITION_OPTIONS = [{
   label: "Left",
   value: "left"
@@ -1741,7 +1741,8 @@ var MemoizedAlert = /*#__PURE__*/react.memo(Alert__default["default"]);
 var Sidebar = function Sidebar(_ref) {
   var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3, _themeToDelete$curren4;
   var thumbnail = _ref.thumbnail,
-    onPropertiesChange = _ref.onPropertiesChange;
+    onPropertiesChange = _ref.onPropertiesChange,
+    onApplyThemeSuccess = _ref.onApplyThemeSuccess;
   var _useState = react.useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     currentScreen = _useState2[0],
@@ -1808,10 +1809,11 @@ var Sidebar = function Sidebar(_ref) {
         });
         setThemeBeingApplied({});
         setCurrentScreen(DESIGN_SCREENS.THEMES);
+        onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess();
       }
     }),
     applyTheme = _useApplyTheme.mutate,
-    isApplyingTheme = _useApplyTheme.isLoading;
+    isApplyingTheme = _useApplyTheme.isPending;
   var themeToDelete = react.useRef(null);
   var themeToEdit = react.useRef(null);
   var handleEditTheme = function handleEditTheme(theme) {
@@ -1839,10 +1841,10 @@ var Sidebar = function Sidebar(_ref) {
   var highlightTheme = function highlightTheme(themeToHighlight) {
     setTimeout(function () {
       scrollElementIntoView(themeToHighlight.id);
-    }, 1000);
+    }, 1500);
     setTimeout(function () {
       setThemeToHighlight(null);
-    }, 3500);
+    }, 4000);
     setThemeToHighlight(themeToHighlight.id);
   };
   var onCreateTheme = function onCreateTheme(createdTheme) {
@@ -1873,18 +1875,6 @@ var Sidebar = function Sidebar(_ref) {
       }
     });
   }, [deleteTheme, themeToDelete]);
-  react.useEffect(function () {
-    if (neetoCist.isNotPresent(currentTheme)) return;
-    setTheme(currentTheme);
-  }, [currentTheme, entityId]);
-  react.useEffect(function () {
-    if (neetoCist.isNotPresent(currentTheme)) return;
-    setThemeState({
-      currentTheme: currentTheme,
-      isCurrentThemeLoading: isCurrentThemeLoading,
-      previewingTheme: currentTheme
-    });
-  }, [currentTheme, isCurrentThemeLoading]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-themes-sidebar neeto-ui-border-gray-200 flex-shrink-0 border-r",
     children: [/*#__PURE__*/jsxRuntime.jsx(TitleBar, {
@@ -1942,19 +1932,31 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     thumbnail = _ref.thumbnail,
     onPropertiesChange = _ref.onPropertiesChange,
     _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
-    isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes;
+    isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes,
+    _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
+    onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? neetoCist.noop : _ref$onApplyThemeSucc;
   var _useThemeStore = useThemeStore(function (store) {
       return {
-        isCurrentThemeLoading: store["isCurrentThemeLoading"]
+        setThemeState: store["setThemeState"]
       };
     }, shallow.shallow),
-    isCurrentThemeLoading = _useThemeStore.isCurrentThemeLoading;
+    setThemeState = _useThemeStore.setThemeState;
+  var _useThemeUtils = useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
   var _useConfigStore = useConfigStore(function (store) {
       return {
         setConfigState: store["setConfigState"]
       };
     }, shallow.shallow),
     setConfigState = _useConfigStore.setConfigState;
+  var _useShowThemeEntity = useShowThemeEntity(entityId),
+    _useShowThemeEntity$d = _useShowThemeEntity.data,
+    _useShowThemeEntity$d2 = _useShowThemeEntity$d === void 0 ? {} : _useShowThemeEntity$d,
+    _useShowThemeEntity$d3 = _useShowThemeEntity$d2.theme,
+    currentTheme = _useShowThemeEntity$d3 === void 0 ? {} : _useShowThemeEntity$d3,
+    isLoading = _useShowThemeEntity.isLoading,
+    isFetchingCurrentTheme = _useShowThemeEntity.isFetching;
+  var isCurrentThemeLoading = isLoading || isFetchingCurrentTheme;
   react.useEffect(function () {
     setConfigState({
       entityType: entityType,
@@ -1962,9 +1964,22 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
       isTemplateThemesEnabled: isTemplateThemesEnabled
     });
   }, []);
+  react.useEffect(function () {
+    if (neetoCist.isNotPresent(currentTheme)) return;
+    setThemeState({
+      currentTheme: currentTheme,
+      isCurrentThemeLoading: isCurrentThemeLoading,
+      previewingTheme: currentTheme
+    });
+  }, [currentTheme, isCurrentThemeLoading]);
+  react.useEffect(function () {
+    if (neetoCist.isNotPresent(currentTheme)) return;
+    setTheme(currentTheme);
+  }, [currentTheme, entityId]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-themes__wrapper",
     children: [/*#__PURE__*/jsxRuntime.jsx(Sidebar, {
+      onApplyThemeSuccess: onApplyThemeSuccess,
       onPropertiesChange: onPropertiesChange,
       thumbnail: thumbnail
     }), /*#__PURE__*/jsxRuntime.jsx("div", {