@bigbinary/neeto-themes-frontend 4.0.5 → 4.0.7

package/dist/cjs/NeetoThemesBuilder.js

@@ -273,7 +273,9 @@ var Card$2 = function Card(_ref) {
     name = _ref.name,
     className = _ref.className,
     helpPopoverProps = _ref.helpPopoverProps,
-    required = _ref.required;
+    required = _ref.required,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
       return {
         accordionOpenState: store["accordionOpenState"],
@@ -288,10 +290,12 @@ var Card$2 = function Card(_ref) {
     "data-cy": "theme-".concat(neetoCist.hyphenate(title), "-properties"),
     className: classnames("neeto-themes-nano-section neeto-ui-border-gray-200 border-b pt-2 transition-all duration-300 last:border-none", className, {
       "pb-2": !accordionOpenState[name],
-      "pb-3": accordionOpenState[name]
+      "pb-3": accordionOpenState[name],
+      "opacity-40": isDisabled
     }),
     children: [title && /*#__PURE__*/jsxRuntime.jsxs("button", {
       className: "neeto-themes-nano-section__title flex w-full cursor-pointer items-center justify-between px-1 py-2 focus:outline-none",
+      disabled: isDisabled,
       type: "button",
       onClick: function onClick() {
         return setAccordionOpenState(_objectSpread$4(_objectSpread$4({}, accordionOpenState), {}, _defineProperty({}, name, !accordionOpenState[name])));
@@ -355,7 +359,9 @@ var buildPathname = function buildPathname(route) {
 
 var CustomCSS = function CustomCSS(_ref) {
   var onEditCSSClick = _ref.onEditCSSClick,
-    currentScreen = _ref.currentScreen;
+    currentScreen = _ref.currentScreen,
+    isEnabled = _ref.isEnabled,
+    isProFeature = _ref.isProFeature;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
@@ -376,7 +382,7 @@ var CustomCSS = function CustomCSS(_ref) {
   var customCSS = neetoCist.findBy({
     kind: "custom_css"
   }, values.properties);
-  if (!customCSS) return null;
+  if (!customCSS || !isEnabled && !isProFeature) return null;
   var parentElementClass = neetoCist.findBy({
     kind: "custom_css"
   }, themePropertiesSchema).parentClass;
@@ -405,10 +411,14 @@ var CustomCSS = function CustomCSS(_ref) {
     className: "neeto-themes-sidebar__custom-css-wrapper",
     id: "css-editor",
     children: /*#__PURE__*/jsxRuntime.jsx(Card$2, {
-      helpPopoverProps: customCssHelpPopoverProps,
+      isDisabled: !isEnabled,
       name: "customcss",
+      helpPopoverProps: isEnabled ? customCssHelpPopoverProps : {
+        title: t("neetoThemes.common.proFeature.title"),
+        description: t("neetoThemes.common.proFeature.description")
+      },
       title: isCustomCssScreen ? "" : t("neetoThemes.build.leftSideBar.themes.customCSS"),
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: isEnabled && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "w-full",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: "neeto-themes-sidebar__custom-css-editor-header w-full justify-end gap-1 rounded-b-none p-2",
@@ -1307,14 +1317,16 @@ var Customize = function Customize(_ref) {
         entityType: store["entityType"],
         isFetchingSchema: store["isFetchingSchema"],
         helpPopoverProps: store["helpPopoverProps"],
-        enabledFeatures: store["enabledFeatures"]
+        enabledFeatures: store["enabledFeatures"],
+        proFeatures: store["proFeatures"]
       };
     }, shallow.shallow),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType,
     isFetchingSchema = _useConfigStore.isFetchingSchema,
     helpPopoverProps = _useConfigStore.helpPopoverProps,
-    enabledFeatures = _useConfigStore.enabledFeatures;
+    enabledFeatures = _useConfigStore.enabledFeatures,
+    proFeatures = _useConfigStore.proFeatures;
   var _useParams = reactRouterDom.useParams(),
     themeId = _useParams.themeId;
   var _useThemeStore = useThemeUtils.useThemeStore(function (store) {
@@ -1449,9 +1461,11 @@ var Customize = function Customize(_ref) {
               defaultImageSize: propertyDefaultSize || defaultImageSize,
               key: key
             }, "fixedAspectRatio", propertyFixedAspectRatio || fixedAspectRatio));
-          }), enabledFeatures.customCSS && /*#__PURE__*/jsxRuntime.jsx(CustomCSS, {
+          }), /*#__PURE__*/jsxRuntime.jsx(CustomCSS, {
             currentScreen: currentScreen,
-            onEditCSSClick: onEditCSSClick
+            onEditCSSClick: onEditCSSClick,
+            isEnabled: enabledFeatures.customCSS,
+            isProFeature: proFeatures.customCSS
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "neeto-ui-bg-gray-50 neeto-ui-border-gray-200 mt-2 flex flex-col space-y-2 border p-2",
             children: [/*#__PURE__*/jsxRuntime.jsx(Tooltip, {
@@ -2336,7 +2350,9 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
     _ref$enabledFeatures = _ref.enabledFeatures,
     enabledFeatures = _ref$enabledFeatures === void 0 ? {
       customCSS: true
-    } : _ref$enabledFeatures;
+    } : _ref$enabledFeatures,
+    _ref$proFeatures = _ref.proFeatures,
+    proFeatures = _ref$proFeatures === void 0 ? {} : _ref$proFeatures;
   var _useThemeStore = useThemeUtils.useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -2368,7 +2384,8 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
       isTemplateThemesEnabled: isTemplateThemesEnabled,
       helpDocUrl: helpDocUrl,
       helpPopoverProps: helpPopoverProps,
-      enabledFeatures: enabledFeatures
+      enabledFeatures: enabledFeatures,
+      proFeatures: proFeatures
     });
   }, []);
   react.useEffect(function () {