@bigbinary/neeto-themes-frontend 3.0.0 → 3.0.2

package/dist/NeetoThemesBuilder.js

@@ -1,5 +1,5 @@
 import { shallow } from 'zustand/shallow';
-import { useState, createElement, useEffect, useRef, memo, useCallback } from 'react';
+import { useState, useEffect, createElement, useRef, memo, useCallback } from 'react';
 import { t as t$1 } from 'i18next';
 import { hyphenate, findBy, findIndexBy, isPresent, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { useMutationWithInvalidation, withT, useBreakpoints, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
@@ -27,18 +27,18 @@ import Editor from '@monaco-editor/react';
 import { useFormikContext, Field } from 'formik';
 import Down from '@bigbinary/neeto-icons/Down';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
-import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/ImageUploader';
+import { negate, isEmpty } from 'ramda';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
-import Toastr from '@bigbinary/neetoui/Toastr';
-import { isEmpty, negate } from 'ramda';
-import Select from '@bigbinary/neetoui/Select';
 import CenterAlign from '@bigbinary/neeto-icons/CenterAlign';
 import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
 import ColorPicker from '@bigbinary/neetoui/ColorPicker';
+import Select from '@bigbinary/neetoui/Select';
 import { Slider } from 'antd';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/ImageUploader';
+import Toastr from '@bigbinary/neetoui/Toastr';
 import Input from '@bigbinary/neetoui/formik/Input';
 import Search from '@bigbinary/neeto-molecules/Search';
 import Rating from '@bigbinary/neeto-icons/Rating';
@@ -435,13 +435,15 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
         kind = _ref.kind,
         defaultValue = _ref.defaultValue,
         _ref$order = _ref.order,
-        order = _ref$order === void 0 ? null : _ref$order;
+        order = _ref$order === void 0 ? null : _ref$order,
+        dependsOn = _ref.dependsOn;
       switch (kind) {
         case "color":
           return _objectSpread$4({
             value: defaultValue,
             kind: "color",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -449,7 +451,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             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
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -457,7 +460,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: 0,
             kind: "overlay_opacity",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -465,7 +469,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: 0,
             kind: "slider",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -473,7 +478,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: defaultValue,
             kind: "radius",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -481,7 +487,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: String(defaultValue),
             kind: "boolean",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -489,7 +496,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: defaultValue,
             kind: "order_selector",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -497,7 +505,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: defaultValue,
             kind: "alignment_block",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -505,7 +514,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: defaultValue,
             kind: "custom_css",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -550,159 +560,27 @@ var isPropertyVisible = function isPropertyVisible(key, formikValues, themePrope
 var buildLabel = function buildLabel(key, kind) {
   return t$1("neetoThemes.properties.".concat(snakeToCamelCase(kind), ".").concat(snakeToCamelCase(key)));
 };
-
-var SelectBlock = function SelectBlock(_ref) {
-  var label = _ref.label,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
-    value = _ref.value,
-    options = _ref.options,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
-    children: [/*#__PURE__*/jsx(Typography, {
-      "data-cy": "logo-field-labels",
-      style: "body2",
-      children: label
-    }), /*#__PURE__*/jsx("div", {
-      className: "w-40",
-      children: /*#__PURE__*/jsx(Select, {
-        onChange: onChange,
-        options: options,
-        placeholder: placeholder,
-        value: value
-      })
-    })]
+var buildProperties = function buildProperties(values, condition, themePropertiesSchema) {
+  values.forEach(function (value) {
+    themePropertiesSchema.forEach(function (theme) {
+      if (!(value.key === theme.key)) return;
+      value.dependsOn = theme.dependsOn;
+    });
   });
-};
-
-var ImageBlock = function ImageBlock(_ref) {
-  var _findBy;
-  var label = _ref.label,
-    name = _ref.name,
-    _ref$imageData = _ref.imageData,
-    imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
-    _ref$uploadConfig = _ref.uploadConfig,
-    uploadConfig = _ref$uploadConfig === void 0 ? {
-      maxImageSize: ONE_MEGABYTE
-    } : _ref$uploadConfig,
-    attribute = _ref.attribute;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue,
-    values = _useFormikContext.values;
-  var _useConfigStore = useConfigStore(function (store) {
-      return {
-        themePropertiesSchema: store["themePropertiesSchema"]
-      };
-    }, shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
-  var propertySchema = findBy({
-    key: attribute
-  }, themePropertiesSchema);
-  var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
-  var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
-  var positionKeyInSchema = findBy({
-    key: "".concat(name, "_position")
-  }, themePropertiesSchema);
-  var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && isPresent(positionKeyInSchema);
-  var positionKeyIndex = findIndexBy({
-    key: "".concat(name, "_position")
-  }, values.properties);
-  var handleImageChange = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
-      var dominantColor;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            if (!(isEmpty(image.signedId) || isEmpty(image.url))) {
-              _context.next = 4;
-              break;
-            }
-            setFieldValue(name, {
-              signedId: null,
-              url: image.url
-            });
-            return _context.abrupt("return");
-          case 4:
-            _context.next = 6;
-            return getDominantColorFromUrl(image.url);
-          case 6:
-            dominantColor = _context.sent;
-            setFieldValue(name, {
-              signedId: image.signedId,
-              url: image.url,
-              dominantColor: dominantColor
-            });
-            _context.next = 13;
-            break;
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](0);
-            Toastr.error(_context.t0);
-          case 13:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 10]]);
-    }));
-    return function handleImageChange(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  return /*#__PURE__*/jsxs("div", {
-    className: "space-y-3",
-    "data-cy": "theme-style-".concat(label ? joinHyphenCase(label) : "image-block"),
-    children: [label && /*#__PURE__*/jsx("div", {
-      className: "flex items-center justify-between",
-      children: /*#__PURE__*/jsx(Typography, {
-        "data-cy": "style-fields-labels",
-        style: "body2",
-        children: label
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: "space-y-3",
-      children: [/*#__PURE__*/createElement(ImageUploader, {
-        uploadConfig: uploadConfig,
-        className: "h-40 w-full",
-        key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
-        src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
-        onUploadComplete: handleImageChange
-      }), isPositionChangerVisible && /*#__PURE__*/jsx(SelectBlock, {
-        label: buildLabel("".concat(name, "Position"), "image"),
-        options: options || POSITION_OPTIONS,
-        placeholder: t("neetoThemes.common.left"),
-        value: toLabelAndValue(((_findBy = findBy({
-          key: "".concat(name, "_position")
-        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
-        onChange: function onChange(option) {
-          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
-        }
-      })]
-    })]
+  if (condition) {
+    return filterBy({
+      dependsOn: condition
+    }, values);
+  }
+  var imageKeys = new Set();
+  filterBy({
+    kind: "image"
+  }, themePropertiesSchema).forEach(function (ele) {
+    return imageKeys.add(ele.key);
   });
-};
-
-var Images = function Images(_ref) {
-  var attribute = _ref.attribute,
-    className = _ref.className;
-  var _useFormikContext = useFormikContext(),
-    values = _useFormikContext.values;
-  var key = snakeToCamelCase(attribute);
-  var title = buildLabel(key, "image");
-  var imageData = values[key];
-  return /*#__PURE__*/jsx(Card$2, {
-    className: className,
-    title: title,
-    name: "images",
-    children: /*#__PURE__*/jsx(ImageBlock, {
-      attribute: attribute,
-      imageData: imageData,
-      name: key
-    })
+  return values === null || values === void 0 ? void 0 : values.filter(function (_ref2) {
+    var dependsOn = _ref2.dependsOn;
+    return !imageKeys.has(dependsOn);
   });
 };
 
@@ -836,6 +714,32 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
   });
 };
 
+var SelectBlock = function SelectBlock(_ref) {
+  var label = _ref.label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    value = _ref.value,
+    options = _ref.options,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "logo-field-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsx(Select, {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value
+      })
+    })]
+  });
+};
+
 var SliderBlock = function SliderBlock(_ref) {
   var label = _ref.label,
     onChange = _ref.onChange,
@@ -878,6 +782,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
   var doesHelpTextExist = i18n.exists(translationKey);
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between",
+    "data-cy": "theme-style-content-background",
     children: [/*#__PURE__*/jsxs("div", {
       className: "inline-flex items-center gap-4",
       children: [/*#__PURE__*/jsx(Typography, {
@@ -902,9 +807,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
 
 var Properties = function Properties(_ref) {
   var onPropertiesChange = _ref.onPropertiesChange,
-    className = _ref.className;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+    condition = _ref.condition;
   var _useConfigStore = useConfigStore(function (store) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"]
@@ -959,11 +862,8 @@ var Properties = function Properties(_ref) {
       previewingTheme: values
     });
   }, [values]);
-  return /*#__PURE__*/jsx(Card$2, {
-    className: className,
-    name: "style",
-    title: t("neetoThemes.common.style"),
-    children: values.properties.sort(function (a, b) {
+  return /*#__PURE__*/jsx(Fragment, {
+    children: buildProperties(values === null || values === void 0 ? void 0 : values.properties, condition, themePropertiesSchema).sort(function (a, b) {
       var order = function order(key) {
         var _findBy;
         return ((_findBy = findBy({
@@ -1071,6 +971,139 @@ var Properties = function Properties(_ref) {
   });
 };
 
+var ImageBlock = function ImageBlock(_ref) {
+  var _findBy;
+  var label = _ref.label,
+    name = _ref.name,
+    _ref$imageData = _ref.imageData,
+    imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
+    _ref$uploadConfig = _ref.uploadConfig,
+    uploadConfig = _ref$uploadConfig === void 0 ? {
+      maxImageSize: ONE_MEGABYTE
+    } : _ref$uploadConfig,
+    attribute = _ref.attribute;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var propertySchema = findBy({
+    key: attribute
+  }, themePropertiesSchema);
+  var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
+  var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
+  var positionKeyInSchema = findBy({
+    key: "".concat(name, "_position")
+  }, themePropertiesSchema);
+  var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && isPresent(positionKeyInSchema);
+  var positionKeyIndex = findIndexBy({
+    key: "".concat(name, "_position")
+  }, values.properties);
+  var handleImageChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
+      var dominantColor;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            if (!(isEmpty(image.signedId) || isEmpty(image.url))) {
+              _context.next = 4;
+              break;
+            }
+            setFieldValue(name, {
+              signedId: null,
+              url: image.url
+            });
+            return _context.abrupt("return");
+          case 4:
+            _context.next = 6;
+            return getDominantColorFromUrl(image.url);
+          case 6:
+            dominantColor = _context.sent;
+            setFieldValue(name, {
+              signedId: image.signedId,
+              url: image.url,
+              dominantColor: dominantColor
+            });
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](0);
+            Toastr.error(_context.t0);
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+    return function handleImageChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-3",
+    "data-cy": "theme-style-".concat(label ? joinHyphenCase(label) : "image-block"),
+    children: [label && /*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-between",
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "style-fields-labels",
+        style: "body2",
+        children: label
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "space-y-3",
+      children: [/*#__PURE__*/createElement(ImageUploader, {
+        uploadConfig: uploadConfig,
+        className: "h-40 w-full",
+        key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
+        src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
+        onUploadComplete: handleImageChange
+      }), isPositionChangerVisible && /*#__PURE__*/jsx(SelectBlock, {
+        label: buildLabel("".concat(name, "Position"), "image"),
+        options: options || POSITION_OPTIONS,
+        placeholder: t("neetoThemes.common.left"),
+        value: toLabelAndValue(((_findBy = findBy({
+          key: "".concat(name, "_position")
+        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
+        onChange: function onChange(option) {
+          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
+        }
+      })]
+    })]
+  });
+};
+
+var Images = function Images(_ref) {
+  var attribute = _ref.attribute,
+    className = _ref.className,
+    onPropertiesChange = _ref.onPropertiesChange;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values;
+  var key = snakeToCamelCase(attribute);
+  var title = buildLabel(key, "image");
+  var imageData = values[key];
+  return /*#__PURE__*/jsxs(Card$2, {
+    className: className,
+    title: title,
+    name: "images",
+    children: [/*#__PURE__*/jsx(ImageBlock, {
+      attribute: attribute,
+      imageData: imageData,
+      name: key
+    }), /*#__PURE__*/jsx(Properties, {
+      onPropertiesChange: onPropertiesChange,
+      condition: attribute
+    })]
+  });
+};
+
 var ThemeMeta = withT(function (_ref) {
   var t = _ref.t,
     className = _ref.className;
@@ -1113,7 +1146,8 @@ var Customize = function Customize(_ref) {
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType;
   var _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,
@@ -1154,11 +1188,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);
       }
     });
   };
@@ -1172,10 +1210,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__*/jsxs("div", {
         className: "neeto-themes-sidebar__scroll",
         children: [/*#__PURE__*/jsxs("div", {
@@ -1184,21 +1222,27 @@ var Customize = function Customize(_ref) {
             className: classnames({
               hidden: isCustomCssScreen
             })
-          }), /*#__PURE__*/jsx(Properties, {
-            onPropertiesChange: onPropertiesChange,
+          }), /*#__PURE__*/jsx(Card$2, {
             className: classnames({
               hidden: isCustomCssScreen
+            }),
+            name: "style",
+            title: t("neetoThemes.common.style"),
+            children: /*#__PURE__*/jsx(Properties, {
+              onPropertiesChange: onPropertiesChange
             })
           }), filterBy({
             kind: "image"
-          }, themePropertiesSchema).map(function (_ref5) {
-            var key = _ref5.key;
-            return /*#__PURE__*/jsx(Images, {
+          }, themePropertiesSchema).map(function (_ref6) {
+            var key = _ref6.key;
+            return /*#__PURE__*/createElement(Images, {
+              onPropertiesChange: onPropertiesChange,
               attribute: key,
               className: classnames({
                 hidden: isCustomCssScreen
-              })
-            }, key);
+              }),
+              key: key
+            });
           }), /*#__PURE__*/jsx(CustomCSS, {
             currentScreen: currentScreen,
             onEditCSSClick: onEditCSSClick