@bigbinary/neeto-themes-frontend 4.0.18 → 4.0.19

package/app/javascript/src/translations/en.json

@@ -22,10 +22,13 @@
       "useTheme": "Apply",
       "previewTheme": "Preview",
       "customizeStyle": "Customize style",
+      "addImage": "Add image",
       "addLogo": "Add logo",
       "changeLogo": "Change logo",
       "addCoverImage": "Add cover image",
       "changeCoverImage": "Change cover image",
+      "addBackgroundImage": "Add background image",
+      "changeBackgroundImage": "Change background image",
       "activeTheme": "Active theme",
       "defaultTheme": "(default theme)",
       "edit": "Edit",

package/dist/.ready

@@ -1 +1 @@
-Built at 2026-05-23T05:05:52.478Z
+Built at 2026-05-27T16:06:22.794Z

package/dist/NeetoThemesBuilder.js

@@ -1,13 +1,13 @@
 import { shallow } from 'zustand/shallow';
 import { Suspense, lazy, useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
-import { isPresent, hyphenate, findBy, findIndexBy, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { isPresent, hyphenate, findBy, findIndexBy, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, capitalize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { useMutationWithInvalidation, useQueryParams, useBreakpoints, PageTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { useTranslation, Trans } from 'react-i18next';
 import { B as BASE_URL, b as scrollElementIntoView, c as setCustomCSS, g as getDominantColorFromUrl, i as isEditThemeRoute, d as isFunction, e as isNewThemeRoute } from './index-JpAFUrB8.js';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
-import { Q as QUERY_KEYS, b as useConfigStore, a as useExpandedSection, c as useThemeStore, u as useThemeUtils, P as POSITION_OPTIONS, H as HUNDRED, O as OVERLAY_OPACITY_SLIDER_MARKS, F as FONT_OPTIONS, T as THEME_VALIDATION_SCHEMA, A as APPLY_SPINNER_DELAY } from './useExpandedSection-BkPg-7yk.js';
+import { Q as QUERY_KEYS, b as useConfigStore, a as useExpandedSection, c as useThemeStore, u as useThemeUtils, P as POSITION_OPTIONS, H as HUNDRED, O as OVERLAY_OPACITY_SLIDER_MARKS, F as FONT_OPTIONS, d as useSyncExpandedSectionFromUrl, T as THEME_VALIDATION_SCHEMA, A as APPLY_SPINNER_DELAY } from './useExpandedSection-D9J7nzlC.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classnames from 'classnames';
 import { joinHyphenCase, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
@@ -18,13 +18,13 @@ import { useHistory, useParams, Switch as Switch$1, Route } from 'react-router-d
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import Close from '@bigbinary/neeto-icons/Close';
+import { isEmpty, negate, isNotNil } from 'ramda';
 import Popover from '@bigbinary/neetoui/Popover';
 import Typography from '@bigbinary/neetoui/Typography';
 import Switch from '@bigbinary/neetoui/Switch';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
 import Form from '@bigbinary/neetoui/formik/Form';
 import BlockNavigation from '@bigbinary/neetoui/formik/BlockNavigation';
-import { isEmpty, negate, isNotNil } from 'ramda';
 import { useFormikContext, Field } from 'formik';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import i18n, { t as t$1 } from 'i18next';
@@ -49,7 +49,6 @@ import Search from '@bigbinary/neeto-molecules/Search';
 import AddImage from '@bigbinary/neeto-icons/AddImage';
 import CodeBlock from '@bigbinary/neeto-icons/CodeBlock';
 import ColorPicker$1 from '@bigbinary/neeto-icons/ColorPicker';
-import Image from '@bigbinary/neeto-icons/Image';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
 import RightArrow from '@bigbinary/neeto-icons/RightArrow';
@@ -1372,6 +1371,7 @@ var Customize = function Customize(_ref) {
     currentScreen = _ref.currentScreen;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  useSyncExpandedSectionFromUrl();
   var history = useHistory();
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
@@ -1570,11 +1570,11 @@ var Customize = function Customize(_ref) {
             type: "reset"
           }), /*#__PURE__*/jsx(Button, {
             "data-testid": "save-changes-button",
+            disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting || !isValid,
             label: t("neetoThemes.buttons.save"),
             loading: isSubmitting,
             ref: submitBtnRef,
-            type: "submit",
-            disabled: !dirty && (themeData === null || themeData === void 0 ? void 0 : themeData.id) || isSubmitting || !isValid
+            type: "submit"
           })]
         }), /*#__PURE__*/jsx(Popover, {
           appendTo: function appendTo() {
@@ -1724,7 +1724,6 @@ var Thumbnail = function Thumbnail(_ref) {
 };
 
 var Card$1 = function Card(_ref) {
-  var _theme$logo, _theme$coverImage;
   var _ref$active = _ref.active,
     active = _ref$active === void 0 ? false : _ref$active,
     isPreviewing = _ref.isPreviewing,
@@ -1740,8 +1739,17 @@ var Card$1 = function Card(_ref) {
     Thumbnail$1 = _ref.thumbnail;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
   var id = theme.id,
     name = theme.name;
+  var imageProperties = filterBy({
+    kind: "image"
+  }, themePropertiesSchema);
   var handleDeleteTheme = function handleDeleteTheme() {
     return onDeleteTheme(id, name);
   };
@@ -1865,16 +1873,19 @@ var Card$1 = function Card(_ref) {
           label: t("neetoThemes.common.customizeStyle"),
           testId: "quick-customize-style",
           onClick: handleQuickEdit("style")
-        }), /*#__PURE__*/jsx(QuickActionRow, {
-          icon: AddImage,
-          testId: "quick-add-logo",
-          label: t((_theme$logo = theme.logo) !== null && _theme$logo !== void 0 && _theme$logo.url ? "neetoThemes.common.changeLogo" : "neetoThemes.common.addLogo"),
-          onClick: handleQuickEdit("logo")
-        }), /*#__PURE__*/jsx(QuickActionRow, {
-          icon: Image,
-          testId: "quick-add-cover-image",
-          label: t((_theme$coverImage = theme.coverImage) !== null && _theme$coverImage !== void 0 && _theme$coverImage.url ? "neetoThemes.common.changeCoverImage" : "neetoThemes.common.addCoverImage"),
-          onClick: handleQuickEdit("coverImage")
+        }), imageProperties.map(function (_ref2) {
+          var _theme$camelKey;
+          var key = _ref2.key;
+          var camelKey = snakeToCamelCase(key);
+          var hasImage = isPresent((_theme$camelKey = theme[camelKey]) === null || _theme$camelKey === void 0 ? void 0 : _theme$camelKey.url);
+          var action = hasImage ? "change" : "add";
+          var specificKey = "neetoThemes.common.".concat(action).concat(capitalize(camelKey));
+          return /*#__PURE__*/jsx(QuickActionRow, {
+            icon: AddImage,
+            label: t([specificKey, "neetoThemes.common.addImage"]),
+            testId: "quick-add-".concat(hyphenate(key)),
+            onClick: handleQuickEdit(camelKey)
+          }, key);
         }), /*#__PURE__*/jsx(QuickActionRow, {
           icon: CodeBlock,
           label: t("neetoThemes.build.leftSideBar.themes.customCSS"),