@bigbinary/neeto-themes-frontend 4.0.5 → 4.0.6

package/README.md

@@ -188,6 +188,25 @@ for step-by-step instructions to develop the frontend package.
    export default App;
    ```
 
+   **Props:**
+
+   - `entityId` (required): The ID of the entity to which the theme is attached.
+   - `entityType` (required): The type of the entity (e.g., "Meeting", "Booking").
+   - `thumbnail` (required): A React component to display as the theme thumbnail.
+   - `children` (required): The preview component to render.
+   - `onPropertiesChange` (optional): Callback function triggered when theme properties change.
+   - `defaultImageSize` (optional): Default image size for image uploads. Should be an object with `width` and `height` properties.
+   - `fixedAspectRatio` (optional): Fixed aspect ratio for image uploads. Should be an object with `width` and `height` properties.
+   - `helpDocUrl` (optional): URL to the help documentation.
+   - `isTemplateThemesEnabled` (optional): Boolean to enable template themes feature. Default: `false`.
+   - `pageTitle` (optional): Custom page title for the theme builder.
+   - `onApplyThemeSuccess` (optional): Callback function triggered when a theme is successfully applied.
+   - `onUpdateThemeSuccess` (optional): Callback function triggered when a theme is successfully updated.
+   - `onApplyGlobalThemeSuccess` (optional): Callback function triggered when a global theme is successfully applied.
+   - `helpPopoverProps` (optional): Props to pass to the help popover component.
+   - `enabledFeatures` (optional): Object to control which features are enabled. Default: `{ customCSS: true }`. Set `{ customCSS: false }` to disable the Custom CSS feature.
+   - `proFeatures` (optional): Object to specify which features should be marked as "pro" features. Example: `{ customCSS: true }` will mark Custom CSS as a pro feature.
+
 #### hooks
 
 1. Import `useThemeUtils` hook from "@bigbinary/neeto-themes-frontend"
@@ -209,7 +228,11 @@ for step-by-step instructions to develop the frontend package.
 
 `neeto-themes-nano` will inject custom css into your application as part of a
 theme. You can provide `enabledFeatures={{ customCSS: false }}` in
-`NeetoThemesBuilder` to manually disable the CustomCSS feature. This feature
+`NeetoThemesBuilder` to manually **hide** the CustomCSS feature.
+You can pair it with `proFeatures={{ customCSS: true }}` to show it *disabled*
+in non-enabled cases.
+
+This feature
 requires the initializer to be set with the additional property
 `{ kind: "custom_css", key: "custom_css", default_value: "", parent_class: "neeto-form-eui" }`.
 The `parent_class` key will be used as a parent to inject styles and for CSS

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

@@ -29,7 +29,11 @@
       "images": "Images",
       "name": "Name",
       "left": "Left",
-      "logo": "Logo"
+      "logo": "Logo",
+      "proFeature": {
+        "title": "PRO feature",
+        "description": "This is a PRO feature. Please upgrade to a PRO plan to use this feature."
+      }
     },
     "buttons": {
       "saveChanges": "Save changes",

package/dist/NeetoThemesBuilder.js

@@ -271,7 +271,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 = useConfigStore(function (store) {
       return {
         accordionOpenState: store["accordionOpenState"],
@@ -286,10 +288,12 @@ var Card$2 = function Card(_ref) {
     "data-cy": "theme-".concat(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__*/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])));
@@ -353,7 +357,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 = useTranslation(),
     t = _useTranslation.t;
   var _useFormikContext = useFormikContext(),
@@ -374,7 +380,7 @@ var CustomCSS = function CustomCSS(_ref) {
   var customCSS = findBy({
     kind: "custom_css"
   }, values.properties);
-  if (!customCSS) return null;
+  if (!customCSS || !isEnabled && !isProFeature) return null;
   var parentElementClass = findBy({
     kind: "custom_css"
   }, themePropertiesSchema).parentClass;
@@ -403,10 +409,14 @@ var CustomCSS = function CustomCSS(_ref) {
     className: "neeto-themes-sidebar__custom-css-wrapper",
     id: "css-editor",
     children: /*#__PURE__*/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__*/jsxs("div", {
+      children: isEnabled && /*#__PURE__*/jsxs("div", {
         className: "w-full",
         children: [/*#__PURE__*/jsx("div", {
           className: "neeto-themes-sidebar__custom-css-editor-header w-full justify-end gap-1 rounded-b-none p-2",
@@ -1305,14 +1315,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),
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType,
     isFetchingSchema = _useConfigStore.isFetchingSchema,
     helpPopoverProps = _useConfigStore.helpPopoverProps,
-    enabledFeatures = _useConfigStore.enabledFeatures;
+    enabledFeatures = _useConfigStore.enabledFeatures,
+    proFeatures = _useConfigStore.proFeatures;
   var _useParams = useParams(),
     themeId = _useParams.themeId;
   var _useThemeStore = useThemeStore(function (store) {
@@ -1447,9 +1459,11 @@ var Customize = function Customize(_ref) {
               defaultImageSize: propertyDefaultSize || defaultImageSize,
               key: key
             }, "fixedAspectRatio", propertyFixedAspectRatio || fixedAspectRatio));
-          }), enabledFeatures.customCSS && /*#__PURE__*/jsx(CustomCSS, {
+          }), /*#__PURE__*/jsx(CustomCSS, {
             currentScreen: currentScreen,
-            onEditCSSClick: onEditCSSClick
+            onEditCSSClick: onEditCSSClick,
+            isEnabled: enabledFeatures.customCSS,
+            isProFeature: proFeatures.customCSS
           }), /*#__PURE__*/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__*/jsx(Tooltip, {
@@ -2334,7 +2348,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 = useThemeStore(function (store) {
       return {
         setThemeState: store["setThemeState"]
@@ -2366,7 +2382,8 @@ var NeetoThemesBuilder = function NeetoThemesBuilder(_ref) {
       isTemplateThemesEnabled: isTemplateThemesEnabled,
       helpDocUrl: helpDocUrl,
       helpPopoverProps: helpPopoverProps,
-      enabledFeatures: enabledFeatures
+      enabledFeatures: enabledFeatures,
+      proFeatures: proFeatures
     });
   }, []);
   useEffect(function () {