@bigbinary/neeto-themes-frontend 1.2.3 → 1.2.5

package/dist/index.js

@@ -8,26 +8,26 @@ 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 '@babel/runtime/helpers/asyncToGenerator';
-import '@babel/runtime/regenerator';
-import '@bigbinary/neetoui/Toastr';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import Toastr from '@bigbinary/neetoui/Toastr';
 import { useQuery } from 'react-query';
 import axios from 'axios';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { prop, isEmpty, negate } from 'ramda';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Close, LeftArrow, Plus } from '@bigbinary/neeto-icons';
+import { LeftAlign, CenterAlign, Close, LeftArrow, Plus } from '@bigbinary/neeto-icons';
 import Button from '@bigbinary/neetoui/Button';
 import Popover from '@bigbinary/neetoui/Popover';
 import Typography from '@bigbinary/neetoui/Typography';
 import Form from '@bigbinary/neetoui/formik/Form';
 import * as yup from 'yup';
-import { useFormikContext } from 'formik';
+import { useFormikContext, Field } from 'formik';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ImageUploader } from '@bigbinary/neeto-image-uploader-frontend';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
-import ColorPicker from '@bigbinary/neetoui/ColorPicker';
 import Select from '@bigbinary/neetoui/Select';
+import ColorPicker from '@bigbinary/neetoui/ColorPicker';
 import { Slider } from 'antd';
 import Switch from '@bigbinary/neetoui/Switch';
 import Input from '@bigbinary/neetoui/formik/Input';
@@ -43,6 +43,7 @@ var useConfigStore = create$1(withImmutableActions(function (set) {
     entityId: "",
     variableNamesMap: {},
     isFetchingSchema: true,
+    isTemplateThemesEnabled: false,
     setConfigState: set
   };
 }));
@@ -57,6 +58,52 @@ var useThemeStore = create$1(withImmutableActions(function (set) {
   };
 }));
 
+var getImageFromUrl = function getImageFromUrl(source) {
+  var image = new Image();
+  image.crossOrigin = "anonymous";
+  image.src = source;
+  return new Promise(function (resolve) {
+    image.onload = function () {
+      resolve(image);
+    };
+  });
+};
+var getDominantColorFromUrl = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(imageUrl) {
+    var image, context, c;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return getImageFromUrl(imageUrl);
+        case 3:
+          image = _context.sent;
+          context = document.createElement("canvas").getContext("2d");
+          context === null || context === void 0 || context.drawImage(image, 0, 0, 1, 1);
+          c = context === null || context === void 0 ? void 0 : context.getImageData(0, 0, 1, 1).data;
+          if (!c) {
+            _context.next = 9;
+            break;
+          }
+          return _context.abrupt("return", "#".concat(((1 << 24) + (c[0] << 16) + (c[1] << 8) + c[2]).toString(16).slice(1)));
+        case 9:
+          return _context.abrupt("return", null);
+        case 12:
+          _context.prev = 12;
+          _context.t0 = _context["catch"](0);
+          Toastr.error(_context.t0);
+          return _context.abrupt("return", null);
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 12]]);
+  }));
+  return function getDominantColorFromUrl(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
 var scrollElementIntoView = function scrollElementIntoView(elementId) {
   var elementToScroll = document.getElementById(elementId);
   elementToScroll === null || elementToScroll === void 0 || elementToScroll.scrollIntoView({
@@ -102,8 +149,12 @@ var useShowThemeEntity = function useShowThemeEntity(entityId) {
 };
 
 var _excluded$1 = ["themeId"];
-var list$1 = function list() {
-  return axios.get("".concat(BASE_URL, "/api/v1/themes"));
+var list$1 = function list(entityId) {
+  return axios.get("".concat(BASE_URL, "/api/v1/themes"), {
+    params: {
+      entity_id: entityId
+    }
+  });
 };
 var show = function show(id) {
   return axios.get("".concat(BASE_URL, "/api/v1/themes/").concat(id));
@@ -143,8 +194,17 @@ var themesApi = {
   apply: apply
 };
 
-var useListThemes = function useListThemes() {
-  return useQuery(QUERY_KEYS.THEMES_LIST, themesApi.list);
+var useListThemes = function useListThemes(entityId) {
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        isTemplateThemesEnabled: store["isTemplateThemesEnabled"]
+      };
+    }, shallow),
+    isTemplateThemesEnabled = _useConfigStore.isTemplateThemesEnabled;
+  var queryKey = isTemplateThemesEnabled ? [QUERY_KEYS.THEMES_LIST, entityId] : [QUERY_KEYS.THEMES_LIST];
+  return useQuery(queryKey, function () {
+    return themesApi.list(entityId);
+  });
 };
 var useCreateTheme = function useCreateTheme() {
   return useMutationWithInvalidation(themesApi.create, {
@@ -195,6 +255,8 @@ var setTheme = function setTheme(theme, variableNamesMap, themeConfig) {
       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);
     }
@@ -381,6 +443,12 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             kind: "slider",
             key: key
           };
+        case "radius":
+          return {
+            value: defaultValue,
+            kind: "radius",
+            key: key
+          };
         case "boolean":
           return {
             value: String(defaultValue),
@@ -393,6 +461,12 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             kind: "position_selector",
             key: key
           };
+        case "alignment_block":
+          return {
+            value: defaultValue,
+            kind: "alignment_block",
+            key: key
+          };
         default:
           return null;
       }
@@ -410,23 +484,26 @@ var buildImageData = function buildImageData(values, themePropertiesSchema) {
   }, {});
 };
 var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
-  var _findBy;
   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 dependentProperty = findBy({
+  var dependentPropertySchema = findBy({
     key: conditionalKey
   }, themePropertiesSchema);
-  if (dependentProperty.kind === "image") {
+  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((_findBy = findBy({
-    key: conditionalKey
-  }, formikValues.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value);
+  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)));
@@ -454,6 +531,32 @@ var Card$2 = function Card(_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 py-3 first:pt-0 last:pb-0",
+    "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 DESIGN_SCREENS = {
   THEMES: "Themes",
   Customize: "Customize"
@@ -461,6 +564,7 @@ var DESIGN_SCREENS = {
 var ONE_MEGABYTE = 1;
 
 var ImageBlock = function ImageBlock(_ref) {
+  var _findBy;
   var label = _ref.label,
     name = _ref.name,
     _ref$imageData = _ref.imageData,
@@ -468,22 +572,73 @@ var ImageBlock = function ImageBlock(_ref) {
     _ref$uploadConfig = _ref.uploadConfig,
     uploadConfig = _ref$uploadConfig === void 0 ? {
       maxImageSize: ONE_MEGABYTE
-    } : _ref$uploadConfig;
+    } : _ref$uploadConfig,
+    attribute = _ref.attribute;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
-  var handleImageChange = function handleImageChange(image) {
-    if (isEmpty(image.signedId) || isEmpty(image.url)) {
-      setFieldValue(name, {
-        signedId: null,
-        url: image.url
-      });
-      return;
-    }
-    setFieldValue(name, {
-      signedId: image.signedId,
-      url: image.url
-    });
-  };
+    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 py-3 first:pt-0 last:pb-0",
     "data-cy": "theme-style-".concat(joinHyphenCase(label)),
@@ -494,12 +649,25 @@ var ImageBlock = function ImageBlock(_ref) {
         style: "body2",
         children: label
       })
-    }), /*#__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
+    }), /*#__PURE__*/jsxs("div", {
+      className: "space-y-3 divide-y divide-gray-200",
+      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),
+        onChange: function onChange(option) {
+          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
+        }
+      })]
     })]
   });
 };
@@ -516,6 +684,7 @@ var Images = function Images(_ref) {
     children: /*#__PURE__*/jsx("div", {
       className: "divide-y divide-gray-200",
       children: /*#__PURE__*/jsx(ImageBlock, {
+        attribute: attribute,
         imageData: imageData,
         name: key
       })
@@ -523,6 +692,54 @@ var Images = function Images(_ref) {
   });
 };
 
+var AlignmentBlock = function AlignmentBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between gap-2 py-3 first:pt-0 last:pb-0",
+    "data-cy": joinHyphenCase(label),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx(Field, {
+      name: name,
+      children: function children(_ref2) {
+        var value = _ref2.field.value,
+          setFieldValue = _ref2.form.setFieldValue;
+        return /*#__PURE__*/jsxs("div", {
+          className: "flex items-center gap-3",
+          children: [/*#__PURE__*/jsx(Button, {
+            "data-cy": "alignment-left",
+            icon: LeftAlign,
+            size: "large",
+            style: value === "left" ? "primary" : "text",
+            tooltipProps: {
+              content: "Left align",
+              position: "bottom"
+            },
+            onClick: function onClick() {
+              return setFieldValue(name, "left");
+            }
+          }), /*#__PURE__*/jsx(Button, {
+            "data-cy": "alignment-center",
+            icon: CenterAlign,
+            size: "large",
+            style: value === "center" ? "primary" : "text",
+            tooltipProps: {
+              content: "Center align",
+              position: "bottom"
+            },
+            onClick: function onClick() {
+              return setFieldValue(name, "center");
+            }
+          })]
+        });
+      }
+    })]
+  });
+};
+
 var ColorBlock = function ColorBlock(_ref) {
   var label = _ref.label,
     _ref$color = _ref.color,
@@ -582,32 +799,6 @@ 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 py-3 first:pt-0 last:pb-0",
-    "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,
@@ -704,7 +895,7 @@ var Properties = function Properties(_ref) {
     }
   };
   useEffect(function () {
-    onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, setFieldValue);
+    onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
     setTheme(values);
     setThemeState({
       previewingTheme: values
@@ -743,11 +934,26 @@ var Properties = function Properties(_ref) {
           onChange: handleColorChange(key)
         }, key);
       }), filterBy({
-        kind: "overlay_opacity"
+        kind: "radius"
       }, values.properties).map(function (_ref6) {
         var key = _ref6.key,
           value = _ref6.value,
           kind = _ref6.kind;
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SliderBlock, {
+          label: buildLabel(key, kind),
+          max: 50,
+          min: 0,
+          value: Number(value) || 0,
+          onChange: function onChange(radius) {
+            return handleChange(key, radius, "".concat(radius, "px"));
+          }
+        }, key);
+      }), filterBy({
+        kind: "overlay_opacity"
+      }, values.properties).map(function (_ref7) {
+        var key = _ref7.key,
+          value = _ref7.value,
+          kind = _ref7.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(SliderBlock, {
           label: buildLabel(key, kind),
           marks: OVERLAY_OPACITY_SLIDER_MARKS,
@@ -760,11 +966,11 @@ var Properties = function Properties(_ref) {
         }, key);
       }), filterBy({
         kind: "position_selector"
-      }, values.properties).map(function (_ref7) {
+      }, values.properties).map(function (_ref8) {
         var _findBy;
-        var key = _ref7.key,
-          kind = _ref7.kind,
-          value = _ref7.value;
+        var key = _ref8.key,
+          kind = _ref8.kind,
+          value = _ref8.value;
         var index = findIndexBy({
           key: key
         }, values.properties);
@@ -782,10 +988,10 @@ var Properties = function Properties(_ref) {
         }, key);
       }), filterBy({
         kind: "boolean"
-      }, values.properties).map(function (_ref8) {
-        var key = _ref8.key,
-          kind = _ref8.kind,
-          value = _ref8.value;
+      }, values.properties).map(function (_ref9) {
+        var key = _ref9.key,
+          kind = _ref9.kind,
+          value = _ref9.value;
         var index = findIndexBy({
           key: key
         }, values.properties);
@@ -796,6 +1002,18 @@ var Properties = function Properties(_ref) {
             return setFieldValue("properties[".concat(index, "].value"), String(e.target.checked));
           }
         }, key);
+      }), filterBy({
+        kind: "alignment_block"
+      }, values.properties).map(function (_ref10) {
+        var key = _ref10.key,
+          kind = _ref10.kind;
+        var index = findIndexBy({
+          key: key
+        }, values.properties);
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsx(AlignmentBlock, {
+          label: buildLabel(key, kind),
+          name: "properties[".concat(index, "].value")
+        });
       })]
     })
   });
@@ -1471,7 +1689,7 @@ var Sidebar = function Sidebar(_ref) {
     t = _useTranslation.t;
   var _useThemeUtils = useThemeUtils(),
     setTheme = _useThemeUtils.setTheme;
-  var _useListThemes = useListThemes(),
+  var _useListThemes = useListThemes(entityId),
     _useListThemes$data = _useListThemes.data,
     _useListThemes$data2 = _useListThemes$data === void 0 ? {} : _useListThemes$data,
     _useListThemes$data2$ = _useListThemes$data2.themes,
@@ -1624,7 +1842,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     entityType = _ref.entityType,
     entityId = _ref.entityId,
     thumbnail = _ref.thumbnail,
-    onPropertiesChange = _ref.onPropertiesChange;
+    onPropertiesChange = _ref.onPropertiesChange,
+    _ref$isTemplateThemes = _ref.isTemplateThemesEnabled,
+    isTemplateThemesEnabled = _ref$isTemplateThemes === void 0 ? false : _ref$isTemplateThemes;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         isCurrentThemeLoading: store["isCurrentThemeLoading"]
@@ -1640,7 +1860,8 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
   useEffect(function () {
     setConfigState({
       entityType: entityType,
-      entityId: entityId
+      entityId: entityId,
+      isTemplateThemesEnabled: isTemplateThemesEnabled
     });
   }, []);
   return /*#__PURE__*/jsxs("div", {