#9196 Paywall banner in Sidebar and Page Editor

src/extensionConsole/pages/teamTrials/TeamTrialBanner.test.tsx → src/components/teamTrials/TeamTrialBanner.test.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from "react";
-import TeamTrialBanner from "@/extensionConsole/pages/teamTrials/TeamTrialBanner";
+import TeamTrialBanner from "@/components/teamTrials/TeamTrialBanner";
 import { render, screen, waitFor } from "@/extensionConsole/testHelpers";
 import { organizationResponseFactory } from "@/testUtils/factories/organizationFactories";
 import { type Timestamp } from "@/types/stringTypes";

src/extensionConsole/pages/teamTrials/TeamTrialBanner.tsx → src/components/teamTrials/TeamTrialBanner.tsx

@@ -16,10 +16,10 @@
  */
 
 import Banner from "@/components/banner/Banner";
-import TrialCallToActionLink from "@/extensionConsole/pages/teamTrials/TrialCallToActionLink";
+import TrialCallToActionLink from "@/components/teamTrials/TrialCallToActionLink";
 import useTeamTrialStatus, {
   TeamTrialStatus,
-} from "@/extensionConsole/pages/teamTrials/useTeamTrialStatus";
+} from "@/components/teamTrials/useTeamTrialStatus";
 import React from "react";
 import { Collapse } from "react-bootstrap";
 

src/extensionConsole/pages/teamTrials/TrialAwareButton.test.tsx → src/components/teamTrials/TrialAwareButton.test.tsx

@@ -16,7 +16,7 @@
  */
 
 import { render, screen, waitFor } from "@/extensionConsole/testHelpers";
-import { TrialAwareButton } from "@/extensionConsole/pages/teamTrials/TrialAwareButton";
+import { TrialAwareButton } from "@/components/teamTrials/TrialAwareButton";
 import { appApiMock } from "@/testUtils/appApiMock";
 import { registryIdFactory } from "@/testUtils/factories/stringFactories";
 import React from "react";

src/extensionConsole/pages/teamTrials/TrialAwareButton.tsx → src/components/teamTrials/TrialAwareButton.tsx

@@ -15,11 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import TrialCallToActionLink from "@/extensionConsole/pages/teamTrials/TrialCallToActionLink";
-import useGetAllTeamScopes from "@/extensionConsole/pages/teamTrials/useGetAllTeamScopes";
+import TrialCallToActionLink from "@/components/teamTrials/TrialCallToActionLink";
+import useGetAllTeamScopes from "@/components/teamTrials/useGetAllTeamScopes";
 import useTeamTrialStatus, {
   TeamTrialStatus,
-} from "@/extensionConsole/pages/teamTrials/useTeamTrialStatus";
+} from "@/components/teamTrials/useTeamTrialStatus";
 import { type RegistryId } from "@/types/registryTypes";
 import { type IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

src/extensionConsole/App.tsx

@@ -56,7 +56,7 @@ import DatabaseUnresponsiveBanner from "@/components/DatabaseUnresponsiveBanner"
 import ActivateModPage from "@/extensionConsole/pages/activateMod/ActivateModPage";
 import { RestrictedFeatures } from "@/auth/featureFlags";
 import { useLocation } from "react-router";
-import TeamTrialBanner from "@/extensionConsole/pages/teamTrials/TeamTrialBanner";
+import TeamTrialBanner from "@/components/teamTrials/TeamTrialBanner";
 
 // Register the built-in bricks
 registerEditors();

src/extensionConsole/pages/activateMod/ActivateModCard.tsx

@@ -44,7 +44,7 @@ import { assertNotNullish } from "@/utils/nullishUtils";
 import { Milestones } from "@/data/model/UserMilestone";
 import MarketplaceListingIcon from "@/components/MarketplaceListingIcon";
 import castError from "@/utils/castError";
-import { TrialAwareButton } from "@/extensionConsole/pages/teamTrials/TrialAwareButton";
+import { TrialAwareButton } from "@/components/teamTrials/TrialAwareButton";
 
 const WizardHeader: React.VoidFunctionComponent<{
   mod: ModDefinition;

src/extensionConsole/pages/mods/Status.tsx

@@ -33,7 +33,7 @@ import reportEvent from "@/telemetry/reportEvent";
 import { Events } from "@/telemetry/events";
 import { useHistory } from "react-router";
 import { UI_PATHS } from "@/data/service/urlPaths";
-import { TrialAwareButton } from "@/extensionConsole/pages/teamTrials/TrialAwareButton";
+import { TrialAwareButton } from "@/components/teamTrials/TrialAwareButton";
 import useFindModInstance from "@/mods/hooks/useFindModInstance";
 import { compact } from "lodash";
 

src/pageEditor/layout/EditorLayout.module.scss

@@ -18,6 +18,8 @@
 .root {
   display: flex;
   height: inherit;
+  // Establishes new formatting context to enable scrolling independent of the outer layout
+  overflow: auto;
 
   & > * {
     height: auto !important;

src/pageEditor/layout/PanelContent.tsx

@@ -47,6 +47,10 @@ import DimensionGate from "@/pageEditor/components/DimensionGate";
 import { allFramesInInspectedTab } from "@/pageEditor/context/connection";
 import DatabaseUnresponsiveBanner from "@/components/DatabaseUnresponsiveBanner";
 import { InsertPaneProvider } from "@/pageEditor/panes/insert/InsertPane";
+import TeamTrialBanner from "@/components/teamTrials/TeamTrialBanner";
+import useTeamTrialStatus, {
+  TeamTrialStatus,
+} from "@/components/teamTrials/useTeamTrialStatus";
 
 const STARTER_BRICKS_TO_EXCLUDE_FROM_CLEANUP: StarterBrickType[] = [
   StarterBrickTypes.SIDEBAR_PANEL,
@@ -76,6 +80,8 @@ const cleanUpStarterBrickForModComponentFormState = (
 
 const PanelContent: React.FC = () => {
   const dispatch = useDispatch();
+  const trialStatus = useTeamTrialStatus();
+
   const activeModComponentFormState = useSelector(
     selectActiveModComponentFormState,
   );
@@ -128,6 +134,7 @@ const PanelContent: React.FC = () => {
       <ReduxPersistenceContext.Provider value={authPersistenceContext}>
         <ModalProvider>
           <ErrorBoundary>
+            {trialStatus === TeamTrialStatus.EXPIRED && <TeamTrialBanner />}
             <TabConnectionErrorBanner />
             <DatabaseUnresponsiveBanner />
             <DimensionGate>

src/pageEditor/pageEditor.html

@@ -27,7 +27,7 @@
     <base target="_blank" />
   </head>
   <body class="h-100">
-    <div id="container" class="h-100 full-height">
+    <div id="container" class="h-100 full-height align-items-stretch">
       <div class="global-loading-message">Loading Page Editor 🚀</div>
     </div>
     <script src="loadingScreen.js"></script>

src/sidebar/SidebarBody.test.tsx

@@ -29,6 +29,7 @@ import {
 
 jest.mock("@/sidebar/hooks/useConnectedTargetUrl");
 jest.mock("@/hooks/useTheme");
+jest.mock("@/components/teamTrials/useTeamTrialStatus");
 jest.mock("@/contentScript/messenger/api", () => ({
   ensureStarterBricksInstalled: jest.fn(),
   getReservedSidebarEntries: jest.fn().mockResolvedValue({

src/sidebar/SidebarBody.tsx

@@ -22,6 +22,10 @@ import RestrictedUrlPopupApp from "@/tinyPages/RestrictedUrlPopupApp";
 import useConnectedTargetUrl from "./hooks/useConnectedTargetUrl";
 import { getReasonByUrl as getRestrictedReasonByUrl } from "@/tinyPages/restrictedUrlPopupUtils";
 import DatabaseUnresponsiveBanner from "@/components/DatabaseUnresponsiveBanner";
+import TeamTrialBanner from "@/components/teamTrials/TeamTrialBanner";
+import useTeamTrialStatus, {
+  TeamTrialStatus,
+} from "@/components/teamTrials/useTeamTrialStatus";
 
 const SidebarReady: React.FC<{ url: string }> = ({ url }) => {
   const restricted = getRestrictedReasonByUrl(url);
@@ -37,9 +41,12 @@ const SidebarReady: React.FC<{ url: string }> = ({ url }) => {
 // navigation in the SidebarApp
 function SidebarBody() {
   const url = useConnectedTargetUrl();
+  const trialStatus = useTeamTrialStatus();
+
   return (
     <>
       <Header />
+      {trialStatus === TeamTrialStatus.EXPIRED && <TeamTrialBanner />}
       <DatabaseUnresponsiveBanner />
       <div className="full-height">{url && <SidebarReady url={url} />}</div>
     </>