From 9ae7257ecec3000673efaa72bde0c99c81864465 Mon Sep 17 00:00:00 2001
From: Ankit Srivastava <67647761+ankitsrivas14@users.noreply.github.com>
Date: Sun, 15 Oct 2023 13:46:58 +0530
Subject: [PATCH] chore: Callout to Banner component migration for Billing
 Banner (#27910)

---
 .../src/ce/selectors/tenantSelectors.tsx      |   3 +
 app/client/src/pages/common/PageHeader.tsx    | 207 ++++++++++--------
 app/client/src/pages/common/PageWrapper.tsx   |   2 -
 3 files changed, 113 insertions(+), 99 deletions(-)

diff --git a/app/client/src/ce/selectors/tenantSelectors.tsx b/app/client/src/ce/selectors/tenantSelectors.tsx
index 838ebe4aa2..d74c446251 100644
--- a/app/client/src/ce/selectors/tenantSelectors.tsx
+++ b/app/client/src/ce/selectors/tenantSelectors.tsx
@@ -49,5 +49,8 @@ export const getIsFormLoginEnabled = (state: AppState): boolean =>
 export const getInstanceId = (state: AppState): string =>
   state.tenant?.instanceId;
 
+// eslint-disable-next-line
+export const shouldShowLicenseBanner = (state: AppState) => false;
+
 export const getHideWatermark = (state: AppState): boolean =>
   state.tenant?.tenantConfiguration?.hideWatermark;
diff --git a/app/client/src/pages/common/PageHeader.tsx b/app/client/src/pages/common/PageHeader.tsx
index afb140781d..44f8e11f20 100644
--- a/app/client/src/pages/common/PageHeader.tsx
+++ b/app/client/src/pages/common/PageHeader.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useEffect } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useRouteMatch } from "react-router-dom";
 import { connect, useDispatch, useSelector } from "react-redux";
 import { getCurrentUser } from "selectors/usersSelectors";
 import styled from "styled-components";
@@ -22,7 +22,10 @@ import ProfileDropdown from "./ProfileDropdown";
 import { useIsMobileDevice } from "utils/hooks/useDeviceDetect";
 import MobileSideBar from "./MobileSidebar";
 import { getTemplateNotificationSeenAction } from "actions/templateActions";
-import { getTenantConfig } from "@appsmith/selectors/tenantSelectors";
+import {
+  getTenantConfig,
+  shouldShowLicenseBanner,
+} from "@appsmith/selectors/tenantSelectors";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { Button } from "design-system";
 import { getSelectedAppTheme } from "selectors/appThemingSelectors";
@@ -30,12 +33,14 @@ import { getCurrentApplication } from "selectors/editorSelectors";
 import { get } from "lodash";
 import { NAVIGATION_SETTINGS } from "constants/AppConstants";
 import { getAssetUrl, isAirgapped } from "@appsmith/utils/airgapHelpers";
+import { Banner } from "@appsmith/utils/licenseHelpers";
 
 const StyledPageHeader = styled(StyledHeader)<{
   hideShadow?: boolean;
   isMobile?: boolean;
   showSeparator?: boolean;
   showingTabs: boolean;
+  isBannerVisible?: boolean;
 }>`
   justify-content: normal;
   background: var(--ads-v2-color-bg);
@@ -51,6 +56,7 @@ const StyledPageHeader = styled(StyledHeader)<{
     padding: 0 12px;
     padding-left: 10px;
   `};
+  ${({ isBannerVisible }) => isBannerVisible && `top: 40px;`};
 `;
 
 const HeaderSection = styled.div`
@@ -188,104 +194,111 @@ export function PageHeader(props: PageHeaderProps) {
   }, [location.pathname]);
 
   const isAirgappedInstance = isAirgapped();
+  const showBanner = useSelector(shouldShowLicenseBanner);
+  const isHomePage = useRouteMatch("/applications")?.isExact;
+  const isLicensePage = useRouteMatch("/license")?.isExact;
 
   return (
-    <StyledPageHeader
-      data-testid="t--appsmith-page-header"
-      hideShadow={props.hideShadow || false}
-      isMobile={isMobile}
-      showSeparator={props.showSeparator || false}
-      showingTabs={showTabs}
-    >
-      <HeaderSection>
-        {tenantConfig.brandLogoUrl && (
-          <Link className="t--appsmith-logo" to={APPLICATIONS_URL}>
-            <img
-              alt="Logo"
-              className="h-6"
-              src={getAssetUrl(tenantConfig.brandLogoUrl)}
-            />
-          </Link>
-        )}
-      </HeaderSection>
-      <Tabs>
-        {showTabs && !isMobile && (
-          <TabsList>
-            <Tab
-              className="t--apps-tab"
-              isSelected={matchApplicationPath(location.pathname)}
-              onClick={() => history.push(APPLICATIONS_URL)}
-            >
-              <div>Apps</div>
-            </Tab>
-
-            {!isAirgappedInstance && (
-              <Tab
-                className="t--templates-tab"
-                isSelected={
-                  matchTemplatesPath(location.pathname) ||
-                  matchTemplatesIdPath(location.pathname)
-                }
-                onClick={() => {
-                  AnalyticsUtil.logEvent("TEMPLATES_TAB_CLICK");
-                  history.push(TEMPLATES_PATH);
-                }}
-              >
-                <div>Templates</div>
-              </Tab>
-            )}
-          </TabsList>
-        )}
-      </Tabs>
-
-      {user && !isMobile && (
-        <div>
-          {user.username === ANONYMOUS_USERNAME ? (
-            <EditorButton
-              filled
-              intent={"primary"}
-              onClick={() => history.push(loginUrl)}
-              size="small"
-              text="Sign In"
-            />
-          ) : (
-            <ProfileDropdown
-              hideEditProfileLink={props.hideEditProfileLink}
-              name={user.name}
-              navColorStyle={navColorStyle}
-              photoId={user?.photoId}
-              primaryColor={primaryColor}
-              userName={user.username}
-            />
+    <>
+      <Banner />
+      <StyledPageHeader
+        data-testid="t--appsmith-page-header"
+        hideShadow={props.hideShadow || false}
+        isBannerVisible={showBanner && (isHomePage || isLicensePage)}
+        isMobile={isMobile}
+        showSeparator={props.showSeparator || false}
+        showingTabs={showTabs}
+      >
+        <HeaderSection>
+          {tenantConfig.brandLogoUrl && (
+            <Link className="t--appsmith-logo" to={APPLICATIONS_URL}>
+              <img
+                alt="Logo"
+                className="h-6"
+                src={getAssetUrl(tenantConfig.brandLogoUrl)}
+              />
+            </Link>
           )}
-        </div>
-      )}
-      {isMobile && !isMobileSidebarOpen && (
-        <Button
-          isIconButton
-          kind="tertiary"
-          onClick={() => setIsMobileSidebarOpen(true)}
-          size={"md"}
-          startIcon="hamburger"
-        />
-      )}
-      {isMobile && isMobileSidebarOpen && (
-        <Button
-          isIconButton
-          kind="tertiary"
-          onClick={() => setIsMobileSidebarOpen(false)}
-          size="sm"
-          startIcon="close-x"
-        />
-      )}
-      {isMobile && user && (
-        <MobileSideBar
-          isOpen={isMobileSidebarOpen}
-          name={user.name}
-          userName={user.username}
-        />
-      )}
-    </StyledPageHeader>
+        </HeaderSection>
+        <Tabs>
+          {showTabs && !isMobile && (
+            <TabsList>
+              <Tab
+                className="t--apps-tab"
+                isSelected={matchApplicationPath(location.pathname)}
+                onClick={() => history.push(APPLICATIONS_URL)}
+              >
+                <div>Apps</div>
+              </Tab>
+
+              {!isAirgappedInstance && (
+                <Tab
+                  className="t--templates-tab"
+                  isSelected={
+                    matchTemplatesPath(location.pathname) ||
+                    matchTemplatesIdPath(location.pathname)
+                  }
+                  onClick={() => {
+                    AnalyticsUtil.logEvent("TEMPLATES_TAB_CLICK");
+                    history.push(TEMPLATES_PATH);
+                  }}
+                >
+                  <div>Templates</div>
+                </Tab>
+              )}
+            </TabsList>
+          )}
+        </Tabs>
+
+        {user && !isMobile && (
+          <div>
+            {user.username === ANONYMOUS_USERNAME ? (
+              <EditorButton
+                filled
+                intent={"primary"}
+                onClick={() => history.push(loginUrl)}
+                size="small"
+                text="Sign In"
+              />
+            ) : (
+              <ProfileDropdown
+                hideEditProfileLink={props.hideEditProfileLink}
+                name={user.name}
+                navColorStyle={navColorStyle}
+                photoId={user?.photoId}
+                primaryColor={primaryColor}
+                userName={user.username}
+              />
+            )}
+          </div>
+        )}
+        {isMobile && !isMobileSidebarOpen && (
+          <Button
+            isIconButton
+            kind="tertiary"
+            onClick={() => setIsMobileSidebarOpen(true)}
+            size={"md"}
+            startIcon="hamburger"
+          />
+        )}
+        {isMobile && isMobileSidebarOpen && (
+          <Button
+            isIconButton
+            kind="tertiary"
+            onClick={() => setIsMobileSidebarOpen(false)}
+            size="sm"
+            startIcon="close-x"
+          />
+        )}
+        {isMobile && user && (
+          <MobileSideBar
+            isOpen={isMobileSidebarOpen}
+            name={user.name}
+            userName={user.username}
+          />
+        )}
+      </StyledPageHeader>
+    </>
   );
 }
 
diff --git a/app/client/src/pages/common/PageWrapper.tsx b/app/client/src/pages/common/PageWrapper.tsx
index 3d5fece7a7..8bd185cc61 100644
--- a/app/client/src/pages/common/PageWrapper.tsx
+++ b/app/client/src/pages/common/PageWrapper.tsx
@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
 import React, { useMemo } from "react";
 import { Helmet } from "react-helmet";
 import styled from "styled-components";
-import { Banner } from "@appsmith/utils/licenseHelpers";
 import {
   getPageTitle,
   getHTMLPageTitle,
@@ -84,7 +83,6 @@ export function PageWrapper(props: PageWrapperProps) {
 
   return (
     <Wrapper isFixed={isFixed}>
-      <Banner />
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>