bug fixes

frontend/src/AppBuilder/LeftSidebar/PageMenu/PageHandlerMenu.jsx

@@ -3,6 +3,8 @@ import { Overlay, Popover } from 'react-bootstrap';
 import { Button } from '@/_ui/LeftSidebar';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
+import { ToolTip } from '@/_components/ToolTip';
+import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 export const PageHandlerMenu = ({ darkMode }) => {
   const setShowEditingPopover = useStore((state) => state.setShowEditingPopover);
@@ -25,24 +27,6 @@ export const PageHandlerMenu = ({ darkMode }) => {
   const featureAccess = useStore((state) => state?.license?.featureAccess, shallow);
   const licenseValid = !featureAccess?.licenseStatus?.isExpired && featureAccess?.licenseStatus?.isLicenseValid;
 
-  // const popoverTargetRef = null;
-  // console.log(
-  //   {
-  //     setShowEditingPopover,
-  //     setShowRenameHandlerModal,
-  //     setEditingPage,
-  //     setShowPageEventsModal,
-  //     popoverTargetRef,
-  //     editingPage,
-  //     showRenameHandlerModal,
-  //     showPageEventsModal,
-  //     setEditingPageName,
-  //     showEditingPopover,
-  //     closeEditingPopover,
-  //   },
-  //   'editingPage'
-  // );
-
   const closeMenu = () => {
     closePageEditPopover();
   };
@@ -124,7 +108,6 @@ export const PageHandlerMenu = ({ darkMode }) => {
                     callback={() => markAsHomePage(editingPage.id)}
                   />
                 )}
-
                 {!isDisabled && (
                   <Field
                     id={isHidden ? 'unhide-page' : 'hide-page'}
@@ -137,7 +120,6 @@ export const PageHandlerMenu = ({ darkMode }) => {
                     disabled={isHomePage}
                   />
                 )}
-
                 <Field
                   id="clone-page"
                   text="Duplicate page"
@@ -147,7 +129,6 @@ export const PageHandlerMenu = ({ darkMode }) => {
                     clonePage(editingPage.id);
                   }}
                 />
-
                 <Field
                   id="settings"
                   text="Event Handlers"
@@ -169,18 +150,32 @@ export const PageHandlerMenu = ({ darkMode }) => {
                   }}
                   disabled={isHomePage}
                 />
-                {licenseValid && (
-                  <Field
-                    id={isDisabled ? 'enable-page' : 'disable-page'}
-                    text={isDisabled ? 'Page permission' : 'Page permission'}
-                    customClass={'delete-btn'}
-                    iconSrc={`assets/images/icons/editor/left-sidebar/authorization.svg`}
-                    closeMenu={closeMenu}
-                    callback={(id) => {
-                      togglePagePermissionModal(true);
-                    }}
-                  />
-                )}
+
+                <Field
+                  id={isDisabled ? 'enable-page' : 'disable-page'}
+                  disabled={!licenseValid}
+                  classNames={'page-permission-btn'}
+                  text={() => {
+                    return (
+                      <ToolTip
+                        message={'Page permissions are available only in paid plans'}
+                        placement="right"
+                        show={!licenseValid}
+                      >
+                        <div className="d-flex align-items-center">
+                          <div>Page permission</div>
+                          {!licenseValid && <SolidIcon name="enterprisesmall" />}
+                        </div>
+                      </ToolTip>
+                    );
+                  }}
+                  customClass={'delete-btn'}
+                  iconSrc={`assets/images/icons/editor/left-sidebar/authorization.svg`}
+                  closeMenu={closeMenu}
+                  callback={(id) => {
+                    togglePagePermissionModal(true);
+                  }}
+                />
                 <Field
                   id="delete-page"
                   text="Delete page"
@@ -240,7 +235,16 @@ const PageHandleField = ({ page, updatePageHandle }) => {
   );
 };
 
-const Field = ({ id, text, iconSrc, customClass = '', closeMenu, disabled = false, callback = () => null }) => {
+const Field = ({
+  id,
+  text,
+  iconSrc,
+  customClass = '',
+  classNames,
+  closeMenu,
+  disabled = false,
+  callback = () => null,
+}) => {
   const handleOnClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -250,7 +254,12 @@ const Field = ({ id, text, iconSrc, customClass = '', closeMenu, disabled = fals
 
   return (
     <div className={`field ${customClass ? ` ${customClass}` : ''}`}>
-      <Button.UnstyledButton onClick={handleOnClick} styles={{ height: '28px' }} disabled={disabled}>
+      <Button.UnstyledButton
+        onClick={handleOnClick}
+        styles={{ height: '28px' }}
+        classNames={classNames}
+        disabled={disabled}
+      >
         <Button.Content title={text} iconSrc={iconSrc} direction="left" />
       </Button.UnstyledButton>
     </div>

frontend/src/_styles/components.scss

@@ -237,6 +237,16 @@ $btn-dark-color: #FFFFFF;
       }
     }
   }
+
+  .page-permission-btn {
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
+
+    &.disabled {
+      opacity: 1 !important;
+    }
+  }
 }
 
 .notification-dot {

server/ee

@@ -1 +1 @@
-Subproject commit 90e11056ebdb40f0560ece55198c3ecc8ead4988
+Subproject commit 78c6a52262ba2df4a0771ae778178d2d74bb7517