@bigbinary/neeto-themes-frontend 3.1.13 → 3.1.14

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 { hyphenate, findBy, findIndexBy, isPresent, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
-import { useMutationWithInvalidation, withT, useBreakpoints, PageTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { hyphenate, isPresent, findBy, findIndexBy, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { useMutationWithInvalidation, 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-Bxlleq-V.js';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
-import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils, P as POSITION_OPTIONS, O as OVERLAY_OPACITY_SLIDER_MARKS, H as HUNDRED, F as FONT_OPTIONS, T as THEME_VALIDATION_SCHEMA } from './useThemeUtils-DdkCd9iz.js';
+import { Q as QUERY_KEYS, a as useConfigStore, b as useThemeStore, u as useThemeUtils, P as POSITION_OPTIONS, O as OVERLAY_OPACITY_SLIDER_MARKS, H as HUNDRED, F as FONT_OPTIONS, T as THEME_VALIDATION_SCHEMA } from './useThemeUtils-Do1vR9LD.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classnames from 'classnames';
 import { joinHyphenCase, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
@@ -28,14 +28,14 @@ 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 Down from '@bigbinary/neeto-icons/Down';
+import Right from '@bigbinary/neeto-icons/Right';
+import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import { t as t$1 } from 'i18next';
 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';
@@ -265,7 +265,8 @@ var Card$2 = function Card(_ref) {
     title = _ref$title === void 0 ? "" : _ref$title,
     children = _ref.children,
     name = _ref.name,
-    className = _ref.className;
+    className = _ref.className,
+    helpPopoverProps = _ref.helpPopoverProps;
   var _useConfigStore = useConfigStore(function (store) {
       return {
         accordionOpenState: store["accordionOpenState"],
@@ -286,18 +287,18 @@ var Card$2 = function Card(_ref) {
       onClick: function onClick() {
         return setAccordionOpenState(_objectSpread$4(_objectSpread$4({}, accordionOpenState), {}, _defineProperty({}, name, !accordionOpenState[name])));
       },
-      children: [/*#__PURE__*/jsx(Typography, {
-        className: "min-w-0 flex-grow text-left",
+      children: [/*#__PURE__*/jsxs(Typography, {
+        className: "flex min-w-0 flex-grow items-center gap-2 text-left",
         component: "span",
         "data-cy": "theme-properties",
         lineHeight: "normal",
         style: "h4",
         weight: "semibold",
-        children: title
-      }), /*#__PURE__*/jsx(Down, {
+        children: [title, isPresent(helpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$4({}, helpPopoverProps))]
+      }), /*#__PURE__*/jsx(Right, {
         size: 20,
         className: classnames("transition-all duration-300", {
-          "rotate-180": accordionOpenState[name]
+          "rotate-90": accordionOpenState[name]
         })
       })]
     }), children && /*#__PURE__*/jsx("div", {
@@ -350,11 +351,15 @@ var CustomCSS = function CustomCSS(_ref) {
   var _useConfigStore = useConfigStore(function (store) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"],
-        accordionOpenState: store["accordionOpenState"]
+        accordionOpenState: store["accordionOpenState"],
+        helpPopoverProps: store["helpPopoverProps"]
       };
     }, shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
-    accordionOpenState = _useConfigStore.accordionOpenState;
+    accordionOpenState = _useConfigStore.accordionOpenState,
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var _helpPopoverProps$cus = helpPopoverProps.customCss,
+    customCssHelpPopoverProps = _helpPopoverProps$cus === void 0 ? {} : _helpPopoverProps$cus;
   var customCSS = findBy({
     kind: "custom_css"
   }, values.properties);
@@ -387,6 +392,7 @@ var CustomCSS = function CustomCSS(_ref) {
     className: "neeto-themes-sidebar__custom-css-wrapper",
     id: "css-editor",
     children: /*#__PURE__*/jsx(Card$2, {
+      helpPopoverProps: customCssHelpPopoverProps,
       name: "customcss",
       title: isCustomCssScreen ? "" : t("neetoThemes.build.leftSideBar.themes.customCSS"),
       children: /*#__PURE__*/jsxs("div", {
@@ -1076,12 +1082,19 @@ var Images = function Images(_ref) {
     useDefaultImageSize = _ref.useDefaultImageSize;
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
   var key = snakeToCamelCase(attribute);
   var title = buildLabel(key, "image");
   var imageData = values[key];
   return /*#__PURE__*/jsxs(Card$2, {
     className: className,
     title: title,
+    helpPopoverProps: helpPopoverProps[key],
     name: key,
     children: [/*#__PURE__*/jsx(ImageBlock, {
       attribute: attribute,
@@ -1096,11 +1109,21 @@ var Images = function Images(_ref) {
   });
 };
 
-var ThemeMeta = withT(function (_ref) {
-  var t = _ref.t,
-    className = _ref.className;
+var ThemeMeta = function ThemeMeta(_ref) {
+  var className = _ref.className;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var _helpPopoverProps$nam = helpPopoverProps.name,
+    nameHelpPopoverProps = _helpPopoverProps$nam === void 0 ? {} : _helpPopoverProps$nam;
   return /*#__PURE__*/jsx(Card$2, {
     className: className,
+    helpPopoverProps: nameHelpPopoverProps,
     name: "name",
     title: t("neetoThemes.common.name"),
     children: /*#__PURE__*/jsx(Input, {
@@ -1109,7 +1132,7 @@ var ThemeMeta = withT(function (_ref) {
       name: "name"
     })
   });
-});
+};
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -1134,12 +1157,14 @@ var Customize = function Customize(_ref) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"],
         entityType: store["entityType"],
-        isFetchingSchema: store["isFetchingSchema"]
+        isFetchingSchema: store["isFetchingSchema"],
+        helpPopoverProps: store["helpPopoverProps"]
       };
     }, shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType,
-    isFetchingSchema = _useConfigStore.isFetchingSchema;
+    isFetchingSchema = _useConfigStore.isFetchingSchema,
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
   var _useParams = useParams(),
     themeId = _useParams.themeId;
   var _useThemeStore = useThemeStore(function (store) {
@@ -1165,6 +1190,8 @@ var Customize = function Customize(_ref) {
   var isLoading = isFetchingSchema || isLoadingTheme;
   var isThemeGlobalTheme = themeId && (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id) === themeId;
   var isCurrentThemeAndGlobalThemeSame = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id) === (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.id);
+  var _helpPopoverProps$sty = helpPopoverProps.style,
+    styleHelpPopoverProps = _helpPopoverProps$sty === void 0 ? {} : _helpPopoverProps$sty;
   var isEditingCurrentlyAppliedTheme = themeId === (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.id);
   var submitBtnRef = useRef(null);
   var _useCreateTheme = useCreateTheme(),
@@ -1247,6 +1274,7 @@ var Customize = function Customize(_ref) {
             className: classnames({
               hidden: isCustomCssScreen
             }),
+            helpPopoverProps: styleHelpPopoverProps,
             name: "style",
             title: t("neetoThemes.common.style"),
             children: /*#__PURE__*/jsx(Properties, {
@@ -2142,7 +2170,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
     onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? noop : _ref$onUpdateThemeSuc,
     _ref$onApplyGlobalThe = _ref.onApplyGlobalThemeSuccess,
-    onApplyGlobalThemeSuccess = _ref$onApplyGlobalThe === void 0 ? noop : _ref$onApplyGlobalThe;
+    onApplyGlobalThemeSuccess = _ref$onApplyGlobalThe === void 0 ? noop : _ref$onApplyGlobalThe,
+    _ref$helpPopoverProps = _ref.helpPopoverProps,
+    helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps;
   var _useThemeStore = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -2172,7 +2202,8 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
       entityType: entityType,
       entityId: entityId,
       isTemplateThemesEnabled: isTemplateThemesEnabled,
-      helpDocUrl: helpDocUrl
+      helpDocUrl: helpDocUrl,
+      helpPopoverProps: helpPopoverProps
     });
   }, []);
   useEffect(function () {