move the trial banner component to the trial module

src/intl/en.json

@@ -1369,13 +1369,15 @@
       },
       "footer": "For the next 7 days, enjoy all Pro account features.",
       "cta": "Let's go!"
+    },
+    "banner": {
+      "content": "Your trial is active for the next <strong>{days, plural, =1 {{days} day} other {{days} days}}</strong> or until your <strong>credit runs out</strong>. Enjoy exploring or <upgrade>upgrade to Pro</upgrade>!"
     }
   },
   "layouts": {
     "createOrganization": "Create organization",
     "main": {
       "accountUnderReview": "We need more information to approve your account. Please <link>verify your identity</link> to prevent account suspension.",
-      "trial": "Your trial is active for the next <strong>{days, plural, =1 {{days} day} other {{days} days}}</strong> or until your <strong>credit runs out</strong>. Enjoy exploring or <upgrade>upgrade to Pro</upgrade>!",
       "sessionTokenWarning": "You are currently seeing the organization {organizationName}",
       "paymentFailure": "We tried to charge your card, but the payment has failed. Please <stripe>update your payment method</stripe> and pay your past due invoices.",
       "subscriptionHasPendingUpdate": "The provided payment details could not be processed. Please check your payment information in the <stripe>billing portal</stripe> to resolve the issue.",

src/layouts/main/main-layout.tsx

@@ -1,6 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
 import clsx from 'clsx';
-import { intervalToDuration } from 'date-fns';
 import { Suspense, useEffect, useRef, useState } from 'react';
 import { z } from 'zod';
 
@@ -23,9 +22,9 @@ import { useThemeModeOrPreferred } from 'src/hooks/theme';
 import { createTranslate } from 'src/intl/translate';
 import { CommandPalette } from 'src/modules/command-palette/command-palette';
 import { CreateServiceDialog } from 'src/modules/create-service-dialog/create-service-dialog';
+import { TrialBanner } from 'src/modules/trial/trial-banner';
 import { TrialWelcomeDialog } from 'src/modules/trial/trial-welcome-dialog';
 import { inArray } from 'src/utils/arrays';
-import { defined } from 'src/utils/assert';
 
 import { AppBreadcrumbs } from './app-breadcrumbs';
 import { EstimatedCosts } from './estimated-costs';
@@ -152,25 +151,6 @@ function useBanner(): 'session' | 'trial' | void {
   }
 }
 
-function TrialBanner() {
-  const trial = defined(useOrganization().trial);
-  const { days } = intervalToDuration({ start: new Date(), end: trial.endsAt });
-
-  const upgrade = (children: React.ReactNode) => (
-    <Link to={routes.organizationSettings.plans()} className="underline">
-      {children}
-    </Link>
-  );
-
-  return (
-    <FeatureFlag feature="trial">
-      <div className="bg-green/10 px-4 py-1.5 text-center text-green md:h-full md:whitespace-nowrap">
-        <T id="trial" values={{ days: defined(days) + 1, upgrade }} />
-      </div>
-    </FeatureFlag>
-  );
-}
-
 function SessionTokenBanner() {
   const organization = useOrganization();
   const { clearToken } = useToken();

src/modules/trial/trial-banner.tsx

@@ -0,0 +1,29 @@
+import { intervalToDuration } from 'date-fns';
+
+import { useOrganization } from 'src/api/hooks/session';
+import { routes } from 'src/application/routes';
+import { Link } from 'src/components/link';
+import { FeatureFlag } from 'src/hooks/feature-flag';
+import { createTranslate } from 'src/intl/translate';
+import { defined } from 'src/utils/assert';
+
+const T = createTranslate('trial.banner');
+
+export function TrialBanner() {
+  const trial = defined(useOrganization().trial);
+  const { days } = intervalToDuration({ start: new Date(), end: trial.endsAt });
+
+  const upgrade = (children: React.ReactNode) => (
+    <Link to={routes.organizationSettings.plans()} className="underline">
+      {children}
+    </Link>
+  );
+
+  return (
+    <FeatureFlag feature="trial">
+      <div className="bg-green/10 px-4 py-1.5 text-center text-green md:h-full md:whitespace-nowrap">
+        <T id="content" values={{ days: defined(days) + 1, upgrade }} />
+      </div>
+    </FeatureFlag>
+  );
+}