@bigbinary/neeto-themes-frontend 2.0.7 → 2.0.9

package/dist/index.js

@@ -1,7 +1,7 @@
 import { shallow } from 'zustand/shallow';
 import { useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
 import { t as t$1 } from 'i18next';
-import { findBy, isNotPresent, isPresent, snakeToCamelCase, isNot, filterBy, findIndexBy, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { isNotPresent, snakeToCamelCase, filterBy, findBy, isPresent, isNot, 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';
@@ -91,105 +91,6 @@ var useThemeStore = create$1(withImmutableActions(function (set) {
   };
 }));
 
-var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
-  if (isPresent(theme)) return theme;
-  return {
-    name: t$1("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
-    properties: themePropertiesSchema.map(function (_ref) {
-      var key = _ref.key,
-        kind = _ref.kind,
-        defaultValue = _ref.defaultValue;
-      switch (kind) {
-        case "color":
-          return {
-            value: defaultValue,
-            kind: "color",
-            key: key
-          };
-        case "font_family":
-          return {
-            value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-            kind: "font_family",
-            key: key
-          };
-        case "overlay_opacity":
-          return {
-            value: 0,
-            kind: "overlay_opacity",
-            key: key
-          };
-        case "slider":
-          return {
-            value: 0,
-            kind: "slider",
-            key: key
-          };
-        case "radius":
-          return {
-            value: defaultValue,
-            kind: "radius",
-            key: key
-          };
-        case "boolean":
-          return {
-            value: String(defaultValue),
-            kind: "boolean",
-            key: key
-          };
-        case "position_selector":
-          return {
-            value: defaultValue,
-            kind: "position_selector",
-            key: key
-          };
-        case "alignment_block":
-          return {
-            value: defaultValue,
-            kind: "alignment_block",
-            key: key
-          };
-        default:
-          return null;
-      }
-    }).filter(isNot(null))
-  };
-};
-var buildImageData = function buildImageData(values, themePropertiesSchema) {
-  return filterBy({
-    kind: "image"
-  }, themePropertiesSchema).reduce(function (acc, item) {
-    var _values$snakeToCamelC;
-    var signedId = (_values$snakeToCamelC = values[snakeToCamelCase(item.key)]) === null || _values$snakeToCamelC === void 0 ? void 0 : _values$snakeToCamelC.signedId;
-    acc[item.key] = signedId;
-    return acc;
-  }, {});
-};
-var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
-  var property = findBy({
-    key: key
-  }, themePropertiesSchema);
-  if (isNotPresent(property)) return false;
-  if (property !== null && property !== void 0 && property.hidden) return false;
-  var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
-  if (isNotPresent(conditionalKey)) return true;
-  var dependentPropertySchema = findBy({
-    key: conditionalKey
-  }, themePropertiesSchema);
-  var dependentProperty = findBy({
-    key: conditionalKey
-  }, formikValues.properties);
-  if (dependentPropertySchema.kind === "image") {
-    var _formikValues$snakeTo;
-    return isPresent((_formikValues$snakeTo = formikValues[snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
-  } else if (dependentPropertySchema.kind === "boolean") {
-    return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
-  }
-  return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
-};
-var buildLabel = function buildLabel(key, kind) {
-  return t$1("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(snakeToCamelCase(key)));
-};
-
 var getImageFromUrl = function getImageFromUrl(source) {
   var image = new Image();
   image.crossOrigin = "anonymous";
@@ -261,11 +162,32 @@ var setVariable = function setVariable(name, value, variableNamesMap) {
   if (!variableName) return;
   root.style.setProperty(variableName, value);
 };
+var isPropertyIndependent = function isPropertyIndependent(key, theme, schema) {
+  var property = findBy({
+    key: key
+  }, schema);
+  if (isNotPresent(property)) return false;
+  var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
+  if (isNotPresent(conditionalKey)) return true;
+  var dependentPropertySchema = findBy({
+    key: conditionalKey
+  }, schema);
+  var dependentProperty = findBy({
+    key: conditionalKey
+  }, theme.properties);
+  if (dependentPropertySchema.kind === "image") {
+    var _theme$snakeToCamelCa;
+    return isPresent((_theme$snakeToCamelCa = theme[snakeToCamelCase(conditionalKey)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url);
+  } else if (dependentPropertySchema.kind === "boolean") {
+    return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
+  }
+  return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.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 (!isPropertyVisible(property.key, theme, themeConfig)) {
+    if (!isPropertyIndependent(property.key, theme, themeConfig)) {
       setVariable(attribute, "", variableNamesMap);
       return;
     }
@@ -522,6 +444,105 @@ var OVERLAY_OPACITY_SLIDER_MARKS = {
 };
 var HUNDRED = 100;
 
+var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
+  if (isPresent(theme)) return theme;
+  return {
+    name: t$1("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
+    properties: themePropertiesSchema.map(function (_ref) {
+      var key = _ref.key,
+        kind = _ref.kind,
+        defaultValue = _ref.defaultValue;
+      switch (kind) {
+        case "color":
+          return {
+            value: defaultValue,
+            kind: "color",
+            key: key
+          };
+        case "font_family":
+          return {
+            value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+            kind: "font_family",
+            key: key
+          };
+        case "overlay_opacity":
+          return {
+            value: 0,
+            kind: "overlay_opacity",
+            key: key
+          };
+        case "slider":
+          return {
+            value: 0,
+            kind: "slider",
+            key: key
+          };
+        case "radius":
+          return {
+            value: defaultValue,
+            kind: "radius",
+            key: key
+          };
+        case "boolean":
+          return {
+            value: String(defaultValue),
+            kind: "boolean",
+            key: key
+          };
+        case "position_selector":
+          return {
+            value: defaultValue,
+            kind: "position_selector",
+            key: key
+          };
+        case "alignment_block":
+          return {
+            value: defaultValue,
+            kind: "alignment_block",
+            key: key
+          };
+        default:
+          return null;
+      }
+    }).filter(isNot(null))
+  };
+};
+var buildImageData = function buildImageData(values, themePropertiesSchema) {
+  return filterBy({
+    kind: "image"
+  }, themePropertiesSchema).reduce(function (acc, item) {
+    var _values$snakeToCamelC;
+    var signedId = (_values$snakeToCamelC = values[snakeToCamelCase(item.key)]) === null || _values$snakeToCamelC === void 0 ? void 0 : _values$snakeToCamelC.signedId;
+    acc[item.key] = signedId;
+    return acc;
+  }, {});
+};
+var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
+  var property = findBy({
+    key: key
+  }, themePropertiesSchema);
+  if (isNotPresent(property)) return false;
+  if (property !== null && property !== void 0 && property.hidden) return false;
+  var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
+  if (isNotPresent(conditionalKey)) return true;
+  var dependentPropertySchema = findBy({
+    key: conditionalKey
+  }, themePropertiesSchema);
+  var dependentProperty = findBy({
+    key: conditionalKey
+  }, formikValues.properties);
+  if (dependentPropertySchema.kind === "image") {
+    var _formikValues$snakeTo;
+    return isPresent((_formikValues$snakeTo = formikValues[snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
+  } else if (dependentPropertySchema.kind === "boolean") {
+    return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
+  }
+  return isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
+};
+var buildLabel = function buildLabel(key, kind) {
+  return t$1("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(snakeToCamelCase(key)));
+};
+
 var Card$2 = function Card(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "" : _ref$title,
@@ -1075,7 +1096,8 @@ var Customize = function Customize(_ref) {
     onCreateTheme = _ref.onCreateTheme,
     onApplyTheme = _ref.onApplyTheme,
     isApplyingTheme = _ref.isApplyingTheme,
-    onPropertiesChange = _ref.onPropertiesChange;
+    onPropertiesChange = _ref.onPropertiesChange,
+    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState({}),
@@ -1121,9 +1143,10 @@ var Customize = function Customize(_ref) {
     }
     return updateTheme(themeToSave, {
       onSuccess: function onSuccess() {
-        return resetForm({
+        resetForm({
           values: values
         });
+        onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 || onUpdateThemeSuccess(values);
       }
     });
   };
@@ -1459,11 +1482,13 @@ var Card = function Card(_ref) {
           },
           menuItems: [{
             key: "edit",
+            "data-cy": "edit-theme-menu-item",
             label: t("neetoThemes.common.edit"),
             isVisible: isPresent(onEditTheme),
             onClick: handleEditTheme
           }, {
             key: "clone",
+            "data-cy": "clone-theme-menu-item",
             label: t("neetoThemes.build.leftSideBar.themes.themeOptions.clone"),
             onClick: handleCloneTheme
           }, {
@@ -1694,7 +1719,8 @@ var Sidebar = function Sidebar(_ref) {
   var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3, _themeToDelete$curren4;
   var thumbnail = _ref.thumbnail,
     onPropertiesChange = _ref.onPropertiesChange,
-    onApplyThemeSuccess = _ref.onApplyThemeSuccess;
+    onApplyThemeSuccess = _ref.onApplyThemeSuccess,
+    onUpdateThemeSuccess = _ref.onUpdateThemeSuccess;
   var _useState = useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray(_useState, 2),
     currentScreen = _useState2[0],
@@ -1761,7 +1787,7 @@ var Sidebar = function Sidebar(_ref) {
         });
         setThemeBeingApplied({});
         setCurrentScreen(DESIGN_SCREENS.THEMES);
-        onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess();
+        onApplyThemeSuccess === null || onApplyThemeSuccess === void 0 || onApplyThemeSuccess(theme);
       }
     }),
     applyTheme = _useApplyTheme.mutate,
@@ -1857,6 +1883,7 @@ var Sidebar = function Sidebar(_ref) {
       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
     }), /*#__PURE__*/jsx(MemoizedAlert, {
@@ -1886,7 +1913,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
     isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes,
     _ref$onApplyThemeSucc = _ref.onApplyThemeSuccess,
-    onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? noop : _ref$onApplyThemeSucc;
+    onApplyThemeSuccess = _ref$onApplyThemeSucc === void 0 ? noop : _ref$onApplyThemeSucc,
+    _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
+    onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? noop : _ref$onUpdateThemeSuc;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -1935,6 +1964,7 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     children: [/*#__PURE__*/jsx(Sidebar, {
       onApplyThemeSuccess: onApplyThemeSuccess,
       onPropertiesChange: onPropertiesChange,
+      onUpdateThemeSuccess: onUpdateThemeSuccess,
       thumbnail: thumbnail
     }), /*#__PURE__*/jsx("div", {
       className: "neeto-themes-preview__wrapper",