From 3e134f97eb26b52022b659c5f497b0e5d59e5b92 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 23 Sep 2024 17:11:43 +0530
Subject: [PATCH] [WEB-2489] fix: overlapping issues for trial banner (#1178)
 (#1240)

* fix overplaping issues for trial banner

* fix css

Co-authored-by: Ketan Sharma <sharma01ketan@gmail.com>
---
 web/app/layout.tsx                                 |  2 --
 .../license/banner/free-trial-banner.tsx           | 14 ++++----------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 4a56d0adc0..7058784d9c 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -85,10 +85,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               "app-container"
             )}
           >
-            <div className="flex-shrink-0">
               {/* free trial banner */}
               <FreeTrialBanner />
-            </div>
             <div className="w-full h-full overflow-hidden relative">{children}</div>
           </div>
         </AppProvider>
diff --git a/web/ee/components/license/banner/free-trial-banner.tsx b/web/ee/components/license/banner/free-trial-banner.tsx
index dabcf591b0..4a1d85d530 100644
--- a/web/ee/components/license/banner/free-trial-banner.tsx
+++ b/web/ee/components/license/banner/free-trial-banner.tsx
@@ -18,9 +18,7 @@ export const FreeTrialBanner: FC = observer(() => {
   const { config } = useInstance();
   const { allowPermissions } = useUserPermissions();
   const { currentWorkspace } = useWorkspace();
-  const { currentWorkspaceSubscribedPlanDetail: subscriptionDetail } = useWorkspaceSubscription();
-  // states
-  const [pricingModalOpen, setPricingModalOpen] = useState(false);
+  const { currentWorkspaceSubscribedPlanDetail: subscriptionDetail, togglePaidPlanModal } = useWorkspaceSubscription();
   // derived values
   const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
@@ -32,10 +30,7 @@ export const FreeTrialBanner: FC = observer(() => {
   if (!subscriptionDetail.show_trial_banner) return <></>;
 
   return (
-    <>
-      {/* This modal is intentionally placed inside the condition to avoid unnecessary calls to list product endpoint.  */}
-      <CloudUpgradeModal isOpen={pricingModalOpen} handleClose={() => setPricingModalOpen(false)} />
-
+    <div className="flex-shrink-0 w-full z-[20] bg-custom-background-100">
       <div className="bg-custom-primary-100/10 text-custom-primary-100 py-2 px-5">
         <div className="relative container mx-auto flex justify-center items-center gap-2">
           <div className="text-sm font-medium">
@@ -46,7 +41,7 @@ export const FreeTrialBanner: FC = observer(() => {
             .
           </div>
           <div className="flex gap-2 flex-shrink-0">
-            <Button variant="outline-primary" size="sm" className="py-1" onClick={() => setPricingModalOpen(true)}>
+            <Button variant="outline-primary" size="sm" className="py-1" onClick={() => togglePaidPlanModal(true)}>
               <Crown className="w-3.5 h-3.5" />
               Upgrade to Pro
             </Button>
@@ -54,7 +49,6 @@ export const FreeTrialBanner: FC = observer(() => {
               href="https://cal.com/plane/"
               target="_blank"
               className={cn(getButtonStyling("neutral-primary", "sm"), "py-1")}
-              onClick={() => setPricingModalOpen(true)}
             >
               <Phone className="w-3.5 h-3.5" />
               Get 1:1 help
@@ -62,6 +56,6 @@ export const FreeTrialBanner: FC = observer(() => {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 });