@bigbinary/neeto-themes-frontend 1.1.14 → 1.1.16

package/dist/index.cjs.js

@@ -2703,9 +2703,9 @@ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) {
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * Convenience wrapper component for the `useDropzone` hook
  *
@@ -6096,7 +6096,7 @@ var _reactInfiniteScroller2 = _interopRequireDefault(_reactInfiniteScroller);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties$3(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -6200,7 +6200,7 @@ var MasonryInfiniteScroller = (_temp2 = _class = function (_Component) {
           _props.packed;
           _props.position;
           _props.sizes;
-          var props = _objectWithoutProperties$3(_props, ['children', 'className', 'style', 'pack', 'packed', 'position', 'sizes']);
+          var props = _objectWithoutProperties(_props, ['children', 'className', 'style', 'pack', 'packed', 'position', 'sizes']);
 
       return _react2.default.createElement(
         _reactInfiniteScroller2.default,
@@ -6772,7 +6772,7 @@ var Modal = function Modal(_ref) {
   })))), /*#__PURE__*/React__default["default"].createElement("input", getInputProps()));
 };
 
-var _excluded$2 = ["key", "label"];
+var _excluded = ["key", "label"];
 var Menu = neetoui.Dropdown.Menu,
   MenuItem = neetoui.Dropdown.MenuItem;
 var ImageUploader = function ImageUploader(_ref) {
@@ -6892,7 +6892,7 @@ var ImageUploader = function ImageUploader(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Menu, null, options.map(function (_ref2) {
     var key = _ref2.key,
       label = _ref2.label,
-      otherProps = _objectWithoutProperties$2(_ref2, _excluded$2);
+      otherProps = _objectWithoutProperties$2(_ref2, _excluded);
     return /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, _extends$1({}, otherProps, {
       key: key
     }), label);
@@ -7122,11 +7122,12 @@ var buildInitialValues = function buildInitialValues(theme, themeConfig) {
     name: i18next.t("neetoThemes.build.leftSideBar.themes.createTheme.newThemeName"),
     properties: themeConfig.map(function (_ref) {
       var key = _ref.key,
-        kind = _ref.kind;
+        kind = _ref.kind,
+        defaultValue = _ref.defaultValue;
       switch (kind) {
         case "color":
           return {
-            value: "#000000",
+            value: defaultValue,
             kind: "color",
             key: key
           };
@@ -7235,105 +7236,39 @@ var Customize = function Customize(_ref) {
   });
 };
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-var _excluded = ["id", "name", "appliedCount", "properties"];
-var Card = function Card(_ref) {
-  var _ref$active = _ref.active,
-    active = _ref$active === void 0 ? false : _ref$active,
+var Thumbnail = function Thumbnail(_ref) {
+  var _theme$snakeToCamelCa, _findBy, _findBy2;
+  var active = _ref.active,
     isPreviewing = _ref.isPreviewing,
-    onSetPreviewTheme = _ref.onSetPreviewTheme,
-    onDeleteTheme = _ref.onDeleteTheme,
-    onEditTheme = _ref.onEditTheme,
-    onApplyTheme = _ref.onApplyTheme,
-    theme = _ref.theme,
-    isApplyingTheme = _ref.isApplyingTheme,
-    onCloneTheme = _ref.onCloneTheme,
     isHighLightedTheme = _ref.isHighLightedTheme,
-    setThemeBeingApplied = _ref.setThemeBeingApplied;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var id = theme.id,
-    name = theme.name,
-    appliedCount = theme.appliedCount,
-    properties = theme.properties,
-    styles = _objectWithoutProperties(theme, _excluded);
+    theme = _ref.theme;
   var _useConfigStore = useConfigStore(function (store) {
       return {
-        themeConfig: store["themeConfig"],
-        entityId: store["entityId"],
-        entityType: store["entityType"]
+        themeConfig: store["themeConfig"]
       };
     }, shallow.shallow),
     _useConfigStore$theme = _useConfigStore.themeConfig,
-    themeConfig = _useConfigStore$theme === void 0 ? [] : _useConfigStore$theme,
-    entityId = _useConfigStore.entityId,
-    entityType = _useConfigStore.entityType;
+    themeConfig = _useConfigStore$theme === void 0 ? [] : _useConfigStore$theme;
   var _themeConfig = _slicedToArray$3(themeConfig, 2),
     colorObject1 = _themeConfig[0],
     colorObject2 = _themeConfig[1];
   var primaryLabel = neetoCist.humanize(colorObject1 === null || colorObject1 === void 0 ? void 0 : colorObject1.key);
   var secondaryLabel = neetoCist.humanize(colorObject2 === null || colorObject2 === void 0 ? void 0 : colorObject2.key);
-  var handleApplyThemeClick = function handleApplyThemeClick() {
-    if (isApplyingTheme) return;
-    setThemeBeingApplied(theme);
-    onApplyTheme({
-      themeId: theme.id,
-      entityId: entityId,
-      entityType: entityType
-    });
-  };
-  var handleCloneTheme = function handleCloneTheme() {
-    return onCloneTheme(theme);
-  };
-  var handleEditTheme = function handleEditTheme() {
-    return onEditTheme(theme);
-  };
-  var handleDeleteTheme = function handleDeleteTheme() {
-    return onDeleteTheme(id, name, appliedCount);
-  };
   var primaryColor = neetoCist.findBy({
     key: colorObject1.key
-  }, properties).value;
+  }, theme.properties).value;
   var secondaryColor = neetoCist.findBy({
     key: colorObject2.key
-  }, properties).value;
-  var backgroundImageUrl = theme[neetoCist.snakeToCamelCase(neetoCist.findBy({
+  }, theme.properties).value;
+  var backgroundImageUrl = (_theme$snakeToCamelCa = theme[neetoCist.snakeToCamelCase(neetoCist.findBy({
     useAsCardBackground: true
-  }, themeConfig).key)].url;
-  var isContentBackgroundEnabled = ramda.path(["layoutOptions", "isContentBackgroundEnabled"], styles);
+  }, themeConfig).key)]) === null || _theme$snakeToCamelCa === void 0 ? void 0 : _theme$snakeToCamelCa.url;
+  var buttonBackgroundColor = (_findBy = neetoCist.findBy({
+    key: (_findBy2 = neetoCist.findBy({
+      useAsCardButtonBackground: true
+    }, themeConfig)) === null || _findBy2 === void 0 ? void 0 : _findBy2.key
+  }, theme.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "group space-y-2 pt-0.5",
-    "data-cy": active ? "active-theme-card" : "theme-card",
-    id: theme.id
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"]("neeto-themes-theme-thumbnail neeto-ui-rounded-lg border transition-all duration-300 ease-in-out", {
       "neeto-ui-border-gray-400": !active,
       "neeto-ui-border-gray-800 neeto-themes-theme-thumbnail--active": active,
@@ -7341,20 +7276,13 @@ var Card = function Card(_ref) {
       "neeto-themes-theme-thumbnail--highlight-active": isHighLightedTheme
     }),
     style: {
-      backgroundColor: ramda.path(["colorScheme", "backgroundColor"], styles),
       backgroundImage: backgroundImageUrl ? "url(".concat(backgroundImageUrl, ")") : "initial",
       backgroundSize: "cover"
-    },
-    onClick: function onClick() {
-      return onSetPreviewTheme(theme);
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-rounded-lg cursor-pointer p-3 transition-all duration-300 ease-in-out group-hover:opacity-85"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-rounded-lg p-3",
-    style: {
-      backgroundColor: isContentBackgroundEnabled && ramda.path(["layoutOptions", "contentBackgroundColor"], styles)
-    }
+    className: "neeto-ui-rounded-lg p-3"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-3"
   }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
@@ -7374,9 +7302,74 @@ var Card = function Card(_ref) {
   }, secondaryLabel))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-rounded-lg h-5 w-12",
     style: {
-      backgroundColor: ramda.path(["colorScheme", "buttonBackgroundColor"], styles)
+      backgroundColor: buttonBackgroundColor
+    }
+  }))));
+};
+
+var Card = function Card(_ref) {
+  var _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    isPreviewing = _ref.isPreviewing,
+    onSetPreviewTheme = _ref.onSetPreviewTheme,
+    onDeleteTheme = _ref.onDeleteTheme,
+    onEditTheme = _ref.onEditTheme,
+    onApplyTheme = _ref.onApplyTheme,
+    theme = _ref.theme,
+    isApplyingTheme = _ref.isApplyingTheme,
+    onCloneTheme = _ref.onCloneTheme,
+    isHighLightedTheme = _ref.isHighLightedTheme,
+    setThemeBeingApplied = _ref.setThemeBeingApplied,
+    Thumbnail$1 = _ref.thumbnail;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var id = theme.id,
+    name = theme.name,
+    appliedCount = theme.appliedCount;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        entityId: store["entityId"],
+        entityType: store["entityType"]
+      };
+    }, shallow.shallow),
+    entityId = _useConfigStore.entityId,
+    entityType = _useConfigStore.entityType;
+  var handleApplyThemeClick = function handleApplyThemeClick() {
+    if (isApplyingTheme) return;
+    setThemeBeingApplied(theme);
+    onApplyTheme({
+      themeId: theme.id,
+      entityId: entityId,
+      entityType: entityType
+    });
+  };
+  var handleCloneTheme = function handleCloneTheme() {
+    return onCloneTheme(theme);
+  };
+  var handleEditTheme = function handleEditTheme() {
+    return onEditTheme(theme);
+  };
+  var handleDeleteTheme = function handleDeleteTheme() {
+    return onDeleteTheme(id, name, appliedCount);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "group space-y-2 pt-0.5",
+    "data-cy": active ? "active-theme-card" : "theme-card",
+    id: theme.id,
+    onClick: function onClick() {
+      return onSetPreviewTheme(theme);
     }
-  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, Thumbnail$1 ? /*#__PURE__*/React__default["default"].createElement(Thumbnail$1, {
+    active: active,
+    isHighLightedTheme: isHighLightedTheme,
+    isPreviewing: isPreviewing,
+    theme: theme
+  }) : /*#__PURE__*/React__default["default"].createElement(Thumbnail, {
+    active: active,
+    isHighLightedTheme: isHighLightedTheme,
+    isPreviewing: isPreviewing,
+    theme: theme
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-start justify-between gap-1"
   }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "line-clamp-2 min-w-0 flex-grow break-words pt-1",
@@ -7442,7 +7435,8 @@ var Themes = function Themes(_ref) {
     didScrollActiveThemeIntoView = _ref.didScrollActiveThemeIntoView,
     isLoading = _ref.isLoading,
     currentTheme = _ref.currentTheme,
-    isCurrentThemeLoading = _ref.isCurrentThemeLoading;
+    isCurrentThemeLoading = _ref.isCurrentThemeLoading,
+    thumbnail = _ref.thumbnail;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useThemeUtils = useThemeUtils(),
@@ -7535,6 +7529,7 @@ var Themes = function Themes(_ref) {
       onApplyTheme: onApplyTheme,
       setThemeBeingApplied: setThemeBeingApplied,
       theme: theme,
+      thumbnail: thumbnail,
       active: (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === theme.id,
       isPreviewing: (previewingTheme === null || previewingTheme === void 0 ? void 0 : previewingTheme.id) === theme.id,
       key: theme.id,
@@ -7560,6 +7555,7 @@ var Themes = function Themes(_ref) {
       onEditTheme: onEditTheme,
       setThemeBeingApplied: setThemeBeingApplied,
       theme: theme,
+      thumbnail: thumbnail,
       active: isActive,
       isHighLightedTheme: theme.id === themeToHighlight,
       key: theme.id,
@@ -7625,8 +7621,9 @@ var TitleBar = function TitleBar(_ref) {
 };
 
 var MemoizedAlert = /*#__PURE__*/React.memo(Alert__default["default"]);
-var Sidebar = function Sidebar() {
+var Sidebar = function Sidebar(_ref) {
   var _themeToEdit$current, _themeToEdit$current2, _themeToDelete$curren2, _themeToDelete$curren3;
+  var thumbnail = _ref.thumbnail;
   var _useState = React.useState(DESIGN_SCREENS.THEMES),
     _useState2 = _slicedToArray$3(_useState, 2),
     currentScreen = _useState2[0],
@@ -7759,6 +7756,7 @@ var Sidebar = function Sidebar() {
     isCurrentThemeLoading: isCurrentThemeLoading,
     themeToHighlight: themeToHighlight,
     themes: themes,
+    thumbnail: thumbnail,
     isLoading: isLoading || isFetchingConfig,
     onDeleteTheme: handleDelete,
     onEditTheme: handleEditTheme
@@ -7783,7 +7781,8 @@ var Sidebar = function Sidebar() {
 var NeetoThemes = function NeetoThemes(_ref) {
   var children = _ref.children,
     entityType = _ref.entityType,
-    entityId = _ref.entityId;
+    entityId = _ref.entityId,
+    thumbnail = _ref.thumbnail;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         isCurrentThemeLoading: store["isCurrentThemeLoading"]
@@ -7804,7 +7803,9 @@ var NeetoThemes = function NeetoThemes(_ref) {
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-themes__wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(Sidebar, null), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Sidebar, {
+    thumbnail: thumbnail
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-themes-preview__wrapper"
   }, isCurrentThemeLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "m-auto flex h-full w-full items-center justify-center"