From bd3ff240c79242f0c0346c84748c0954cc45ef40 Mon Sep 17 00:00:00 2001
From: Kavin Venkatachalam <kavin.saratha@gmail.com>
Date: Tue, 1 Jul 2025 17:09:19 +0530
Subject: [PATCH] feat: disable modules on viewer if the license is invalid

---
 .../AppCanvas/ConfigHandle/ConfigHandle.jsx        | 14 ++++++++++++++
 frontend/src/_styles/modules.scss                  |  4 ++++
 2 files changed, 18 insertions(+)

diff --git a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
index f25d815159..05bcd8fbda 100644
--- a/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx
@@ -7,6 +7,7 @@ import SolidIcon from '@/_ui/Icon/solidIcons/index';
 import { ToolTip } from '@/_components/ToolTip';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 import { DROPPABLE_PARENTS } from '../appCanvasConstants';
+import { Tooltip } from 'react-tooltip';
 
 const CONFIG_HANDLE_HEIGHT = 20;
 const BUFFER_HEIGHT = 1;
@@ -25,6 +26,7 @@ export const ConfigHandle = ({
   subContainerIndex,
 }) => {
   const { moduleId } = useModuleContext();
+  const isLicenseValid = useStore((state) => state.isLicenseValid(), shallow);
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
   const componentName = useStore((state) => state.getComponentDefinition(id, moduleId)?.component?.name || '', shallow);
   const isMultipleComponentsSelected = useStore(
@@ -111,6 +113,9 @@ export const ConfigHandle = ({
           }
         }
       }}
+      data-tooltip-id={`invalid-license-modules-${componentName?.toLowerCase()}`}
+      data-tooltip-html="Your plan is expired. <br/> Renew to use the modules."
+      data-tooltip-place="right"
     >
       {licenseValid && isRestricted && (
         <ToolTip message={getTooltip()} show={licenseValid && isRestricted && !draggingComponentId}>
@@ -201,6 +206,15 @@ export const ConfigHandle = ({
           </div>
         )}
       </span>
+      {/* Tooltip for invalid license on ModuleViewer */}
+      {!isLicenseValid && componentType === 'ModuleViewer' && (
+        <Tooltip
+          id={`invalid-license-modules-${componentName?.toLowerCase()}`}
+          className="tooltip"
+          isOpen={_showHandle && componentType === 'ModuleViewer'}
+          style={{ textAlign: 'center' }}
+        />
+      )}
     </div>
   );
 };
diff --git a/frontend/src/_styles/modules.scss b/frontend/src/_styles/modules.scss
index c8410b41a3..239cc3201c 100644
--- a/frontend/src/_styles/modules.scss
+++ b/frontend/src/_styles/modules.scss
@@ -72,6 +72,10 @@
             scrollbar-color: #6a727c4d transparent;
         }
     }
+    &.disabled{
+        pointer-events: none;
+        opacity: 0.5;
+    }
 }
 
 .empty-module-container{