@bigbinary/neeto-themes-frontend 3.1.13 → 3.1.14

package/dist/cjs/NeetoThemesBuilder.js

@@ -9,7 +9,7 @@ var reactI18next = require('react-i18next');
 var utils = require('../index-D6OhrVJO.js');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
-var useThemeUtils = require('../useThemeUtils-CL0WCj1m.js');
+var useThemeUtils = require('../useThemeUtils-Dx-g0zNJ.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classnames = require('classnames');
 var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
@@ -30,14 +30,14 @@ var BlockNavigation = require('@bigbinary/neetoui/formik/BlockNavigation');
 var ramda = require('ramda');
 var formik = require('formik');
 var jsxRuntime = require('react/jsx-runtime');
-var Down = require('@bigbinary/neeto-icons/Down');
+var Right = require('@bigbinary/neeto-icons/Right');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var i18next = require('i18next');
 var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
 var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
 var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var Select = require('@bigbinary/neetoui/Select');
 var antd = require('antd');
-var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
@@ -267,7 +267,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 = useThemeUtils.useConfigStore(function (store) {
       return {
         accordionOpenState: store["accordionOpenState"],
@@ -288,18 +289,18 @@ var Card$2 = function Card(_ref) {
       onClick: function onClick() {
         return setAccordionOpenState(_objectSpread$4(_objectSpread$4({}, accordionOpenState), {}, _defineProperty({}, name, !accordionOpenState[name])));
       },
-      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-        className: "min-w-0 flex-grow text-left",
+      children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Down, {
+        children: [title, neetoCist.isPresent(helpPopoverProps) && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread$4({}, helpPopoverProps))]
+      }), /*#__PURE__*/jsxRuntime.jsx(Right, {
         size: 20,
         className: classnames("transition-all duration-300", {
-          "rotate-180": accordionOpenState[name]
+          "rotate-90": accordionOpenState[name]
         })
       })]
     }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -352,11 +353,15 @@ var CustomCSS = function CustomCSS(_ref) {
   var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"],
-        accordionOpenState: store["accordionOpenState"]
+        accordionOpenState: store["accordionOpenState"],
+        helpPopoverProps: store["helpPopoverProps"]
       };
     }, shallow.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 = neetoCist.findBy({
     kind: "custom_css"
   }, values.properties);
@@ -389,6 +394,7 @@ var CustomCSS = function CustomCSS(_ref) {
     className: "neeto-themes-sidebar__custom-css-wrapper",
     id: "css-editor",
     children: /*#__PURE__*/jsxRuntime.jsx(Card$2, {
+      helpPopoverProps: customCssHelpPopoverProps,
       name: "customcss",
       title: isCustomCssScreen ? "" : t("neetoThemes.build.leftSideBar.themes.customCSS"),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1078,12 +1084,19 @@ var Images = function Images(_ref) {
     useDefaultImageSize = _ref.useDefaultImageSize;
   var _useFormikContext = formik.useFormikContext(),
     values = _useFormikContext.values;
+  var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow.shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
   var key = neetoCist.snakeToCamelCase(attribute);
   var title = buildLabel(key, "image");
   var imageData = values[key];
   return /*#__PURE__*/jsxRuntime.jsxs(Card$2, {
     className: className,
     title: title,
+    helpPopoverProps: helpPopoverProps[key],
     name: key,
     children: [/*#__PURE__*/jsxRuntime.jsx(ImageBlock, {
       attribute: attribute,
@@ -1098,11 +1111,21 @@ var Images = function Images(_ref) {
   });
 };
 
-var ThemeMeta = reactUtils.withT(function (_ref) {
-  var t = _ref.t,
-    className = _ref.className;
+var ThemeMeta = function ThemeMeta(_ref) {
+  var className = _ref.className;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
+      return {
+        helpPopoverProps: store["helpPopoverProps"]
+      };
+    }, shallow.shallow),
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
+  var _helpPopoverProps$nam = helpPopoverProps.name,
+    nameHelpPopoverProps = _helpPopoverProps$nam === void 0 ? {} : _helpPopoverProps$nam;
   return /*#__PURE__*/jsxRuntime.jsx(Card$2, {
     className: className,
+    helpPopoverProps: nameHelpPopoverProps,
     name: "name",
     title: t("neetoThemes.common.name"),
     children: /*#__PURE__*/jsxRuntime.jsx(Input, {
@@ -1111,7 +1134,7 @@ var ThemeMeta = reactUtils.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; }
@@ -1136,12 +1159,14 @@ var Customize = function Customize(_ref) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"],
         entityType: store["entityType"],
-        isFetchingSchema: store["isFetchingSchema"]
+        isFetchingSchema: store["isFetchingSchema"],
+        helpPopoverProps: store["helpPopoverProps"]
       };
     }, shallow.shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType,
-    isFetchingSchema = _useConfigStore.isFetchingSchema;
+    isFetchingSchema = _useConfigStore.isFetchingSchema,
+    helpPopoverProps = _useConfigStore.helpPopoverProps;
   var _useParams = reactRouterDom.useParams(),
     themeId = _useParams.themeId;
   var _useThemeStore = useThemeUtils.useThemeStore(function (store) {
@@ -1167,6 +1192,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 = react.useRef(null);
   var _useCreateTheme = useCreateTheme(),
@@ -1249,6 +1276,7 @@ var Customize = function Customize(_ref) {
             className: classnames({
               hidden: isCustomCssScreen
             }),
+            helpPopoverProps: styleHelpPopoverProps,
             name: "style",
             title: t("neetoThemes.common.style"),
             children: /*#__PURE__*/jsxRuntime.jsx(Properties, {
@@ -2144,7 +2172,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     _ref$onUpdateThemeSuc = _ref.onUpdateThemeSuccess,
     onUpdateThemeSuccess = _ref$onUpdateThemeSuc === void 0 ? neetoCist.noop : _ref$onUpdateThemeSuc,
     _ref$onApplyGlobalThe = _ref.onApplyGlobalThemeSuccess,
-    onApplyGlobalThemeSuccess = _ref$onApplyGlobalThe === void 0 ? neetoCist.noop : _ref$onApplyGlobalThe;
+    onApplyGlobalThemeSuccess = _ref$onApplyGlobalThe === void 0 ? neetoCist.noop : _ref$onApplyGlobalThe,
+    _ref$helpPopoverProps = _ref.helpPopoverProps,
+    helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps;
   var _useThemeStore = useThemeUtils.useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -2174,7 +2204,8 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
       entityType: entityType,
       entityId: entityId,
       isTemplateThemesEnabled: isTemplateThemesEnabled,
-      helpDocUrl: helpDocUrl
+      helpDocUrl: helpDocUrl,
+      helpPopoverProps: helpPopoverProps
     });
   }, []);
   react.useEffect(function () {