@bigbinary/neeto-themes-frontend 2.0.3 → 2.0.5

package/dist/index.js

@@ -1,20 +1,20 @@
 import { shallow } from 'zustand/shallow';
 import { useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
 import { t as t$1 } from 'i18next';
+import { isNotPresent, snakeToCamelCase, filterBy, isPresent, isNot, findBy, findIndexBy, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { withImmutableActions, useMutationWithInvalidation, withT, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { prop, isEmpty, negate } from 'ramda';
 import { create as create$1 } from 'zustand';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { isNotPresent, snakeToCamelCase, filterBy, isPresent, isNot, findBy, findIndexBy, toLabelAndValue, humanize, isNotEmpty } from '@bigbinary/neeto-cist';
-import Alert from '@bigbinary/neetoui/Alert';
-import { useTranslation, Trans } from 'react-i18next';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import Toastr from '@bigbinary/neetoui/Toastr';
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import Alert from '@bigbinary/neetoui/Alert';
+import { useTranslation, Trans } from 'react-i18next';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { prop, isEmpty, negate } from 'ramda';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import Close from '@bigbinary/neeto-icons/Close';
 import Button from '@bigbinary/neetoui/Button';
@@ -40,6 +40,33 @@ import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
 import Plus from '@bigbinary/neeto-icons/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.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 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 = create$1(withImmutableActions(function (set) {
   return {
@@ -129,35 +156,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.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 (isNotPresent(theme === null || theme === void 0 ? void 0 : theme.properties)) return;
+  theme.properties.forEach(function (property) {
+    var attribute = 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(snakeToCamelCase("".concat(property.key, "_overlay_opacity")), Math.abs(overlayOpacity / 100), variableNamesMap);
+      setVariable(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);
+    }
+  });
+  filterBy({
+    kind: "image"
+  }, themeConfig).forEach(function (_ref) {
+    var _theme$attribute;
+    var key = _ref.key;
+    var attribute = 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.get("".concat(BASE_URL, "/api/v1/schema"));
+};
+var schemasApi = {
+  list: list$1
 };
 
-var useShowThemeEntity = function useShowThemeEntity(entityId) {
+var useListSchema = function useListSchema() {
   return 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(prop("setConfigState"));
+  var _useThemeStore = useThemeStore(function (store) {
+      return {
+        previewingTheme: store["previewingTheme"],
+        currentTheme: store["currentTheme"]
+      };
+    }, 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;
+  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]);
+  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.get("".concat(BASE_URL, "/api/v1/themes"), {
     params: {
       entity_id: entityId
@@ -193,7 +286,7 @@ var apply = function apply(_ref2) {
   });
 };
 var themesApi = {
-  list: list$1,
+  list: list,
   show: show,
   create: create,
   update: update,
@@ -250,99 +343,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 (isNotPresent(theme === null || theme === void 0 ? void 0 : theme.properties)) return;
-  theme.properties.forEach(function (property) {
-    var attribute = 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(snakeToCamelCase("".concat(property.key, "_overlay_opacity")), Math.abs(overlayOpacity / 100), variableNamesMap);
-      setVariable(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);
-    }
-  });
-  filterBy({
-    kind: "image"
-  }, themeConfig).forEach(function (_ref) {
-    var _theme$attribute;
-    var key = _ref.key;
-    var attribute = 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.get("".concat(BASE_URL, "/api/v1/schema"));
-};
-var schemasApi = {
-  list: list
-};
-
-var useListSchema = function useListSchema() {
-  return useQuery({
-    queryKey: [QUERY_KEYS.SCHEMA_DETAILS],
-    queryFn: schemasApi.list
-  });
-};
-
-var useThemeUtils = function useThemeUtils() {
-  var setConfigState = useConfigStore(prop("setConfigState"));
-  var _useThemeStore = useThemeStore(function (store) {
-      return {
-        previewingTheme: store["previewingTheme"],
-        currentTheme: store["currentTheme"]
-      };
-    }, 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;
-  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]);
-  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"
@@ -1689,7 +1689,8 @@ var MemoizedAlert = /*#__PURE__*/memo(Alert);
 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 = useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray(_useState, 2),
     currentScreen = _useState2[0],
@@ -1756,10 +1757,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 = useRef(null);
   var themeToEdit = useRef(null);
   var handleEditTheme = function handleEditTheme(theme) {
@@ -1787,10 +1789,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) {
@@ -1821,18 +1823,6 @@ var Sidebar = function Sidebar(_ref) {
       }
     });
   }, [deleteTheme, themeToDelete]);
-  useEffect(function () {
-    if (isNotPresent(currentTheme)) return;
-    setTheme(currentTheme);
-  }, [currentTheme, entityId]);
-  useEffect(function () {
-    if (isNotPresent(currentTheme)) return;
-    setThemeState({
-      currentTheme: currentTheme,
-      isCurrentThemeLoading: isCurrentThemeLoading,
-      previewingTheme: currentTheme
-    });
-  }, [currentTheme, isCurrentThemeLoading]);
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-themes-sidebar neeto-ui-border-gray-200 flex-shrink-0 border-r",
     children: [/*#__PURE__*/jsx(TitleBar, {
@@ -1890,19 +1880,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 ? noop : _ref$onApplyThemeSucc;
   var _useThemeStore = useThemeStore(function (store) {
       return {
-        isCurrentThemeLoading: store["isCurrentThemeLoading"]
+        setThemeState: store["setThemeState"]
       };
     }, shallow),
-    isCurrentThemeLoading = _useThemeStore.isCurrentThemeLoading;
+    setThemeState = _useThemeStore.setThemeState;
+  var _useThemeUtils = useThemeUtils(),
+    setTheme = _useThemeUtils.setTheme;
   var _useConfigStore = useConfigStore(function (store) {
       return {
         setConfigState: store["setConfigState"]
       };
     }, 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;
   useEffect(function () {
     setConfigState({
       entityType: entityType,
@@ -1910,9 +1912,22 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
       isTemplateThemesEnabled: isTemplateThemesEnabled
     });
   }, []);
+  useEffect(function () {
+    if (isNotPresent(currentTheme)) return;
+    setThemeState({
+      currentTheme: currentTheme,
+      isCurrentThemeLoading: isCurrentThemeLoading,
+      previewingTheme: currentTheme
+    });
+  }, [currentTheme, isCurrentThemeLoading]);
+  useEffect(function () {
+    if (isNotPresent(currentTheme)) return;
+    setTheme(currentTheme);
+  }, [currentTheme, entityId]);
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-themes__wrapper",
     children: [/*#__PURE__*/jsx(Sidebar, {
+      onApplyThemeSuccess: onApplyThemeSuccess,
       onPropertiesChange: onPropertiesChange,
       thumbnail: thumbnail
     }), /*#__PURE__*/jsx("div", {