Cloud settings -> billing (#3469)

web/src/app/ee/admin/billing/BillingInformationPage.tsx

@@ -85,8 +85,8 @@ export default function BillingInformationPage() {
         {popup}
 
         <h2 className="text-2xl font-bold mb-6 text-gray-800 flex items-center">
-          <CreditCard className="mr-4 text-gray-600" size={24} />
+          {/* <CreditCard className="mr-4 text-gray-600" size={24} /> */}
-          Billing Information
+          Subscription Details
         </h2>
 
         <div className="space-y-4">

web/src/app/ee/admin/billing/page.tsx

@@ -1,6 +1,6 @@
 import { AdminPageTitle } from "@/components/admin/Title";
 import BillingInformationPage from "./BillingInformationPage";
-import { FaCloud } from "react-icons/fa";
+import { MdOutlineCreditCard } from "react-icons/md";
 
 export interface BillingInformation {
   seats: number;
@@ -14,8 +14,8 @@ export default function page() {
   return (
     <div className="container max-w-4xl">
       <AdminPageTitle
-        title="Cloud Settings"
+        title="Billing Information"
-        icon={<FaCloud size={32} className="my-auto" />}
+        icon={<MdOutlineCreditCard size={32} className="my-auto" />}
       />
       <BillingInformationPage />
     </div>

web/src/components/admin/ClientLayout.tsx

@@ -30,7 +30,7 @@ import { User } from "@/lib/types";
 import { usePathname } from "next/navigation";
 import { SettingsContext } from "../settings/SettingsProvider";
 import { useContext } from "react";
-import { Cloud } from "@phosphor-icons/react";
+import { MdOutlineCreditCard } from "react-icons/md";
 
 export function ClientLayout({
   user,
@@ -386,14 +386,14 @@ export function ClientLayout({
                               {
                                 name: (
                                   <div className="flex">
-                                    <Cloud
+                                    <MdOutlineCreditCard
                                       className="text-icon-settings-sidebar"
                                       size={18}
                                     />
-                                    <div className="ml-1">Cloud Settings</div>
+                                    <div className="ml-1">Billing</div>
                                   </div>
                                 ),
-                                link: "/admin/cloud-settings",
+                                link: "/admin/billing",
                               },
                             ]
                           : []),

web/src/components/admin/Layout.tsx

@@ -7,7 +7,7 @@ import {
 import { redirect } from "next/navigation";
 import { ClientLayout } from "./ClientLayout";
 import {
-  SERVER_SIDE_ONLY__CLOUD_ENABLED,
+  NEXT_PUBLIC_CLOUD_ENABLED,
   SERVER_SIDE_ONLY__PAID_ENTERPRISE_FEATURES_ENABLED,
 } from "@/lib/constants";
 import { AnnouncementBanner } from "../header/AnnouncementBanner";
@@ -45,7 +45,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
   return (
     <ClientLayout
       enableEnterprise={SERVER_SIDE_ONLY__PAID_ENTERPRISE_FEATURES_ENABLED}
-      enableCloud={SERVER_SIDE_ONLY__CLOUD_ENABLED}
+      enableCloud={NEXT_PUBLIC_CLOUD_ENABLED}
       user={user}
     >
       <AnnouncementBanner />

web/src/components/header/AnnouncementBanner.tsx

@@ -82,7 +82,7 @@ export function AnnouncementBanner() {
                   Your trial is ending soon - submit your billing information to
                   continue using Onyx.{" "}
                   <Link
-                    href="/admin/cloud-settings"
+                    href="/admin/billing"
                     className="ml-2 underline cursor-pointer"
                   >
                     Update here

web/src/lib/constants.ts

@@ -74,7 +74,4 @@ export const NEXT_PUBLIC_CLOUD_ENABLED =
 export const REGISTRATION_URL =
   process.env.INTERNAL_URL || "http://127.0.0.1:3001";
 
-export const SERVER_SIDE_ONLY__CLOUD_ENABLED =
-  process.env.NEXT_PUBLIC_CLOUD_ENABLED?.toLowerCase() === "true";
-
 export const TEST_ENV = process.env.TEST_ENV?.toLowerCase() === "true";

web/src/lib/userSS.ts

@@ -2,7 +2,7 @@ import { cookies } from "next/headers";
 import { User } from "./types";
 import { buildUrl } from "./utilsSS";
 import { ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies";
-import { AuthType, SERVER_SIDE_ONLY__CLOUD_ENABLED } from "./constants";
+import { AuthType, NEXT_PUBLIC_CLOUD_ENABLED } from "./constants";
 
 export interface AuthTypeMetadata {
   authType: AuthType;
@@ -22,7 +22,7 @@ export const getAuthTypeMetadataSS = async (): Promise<AuthTypeMetadata> => {
   let authType: AuthType;
 
   // Override fasapi users auth so we can use both
-  if (SERVER_SIDE_ONLY__CLOUD_ENABLED) {
+  if (NEXT_PUBLIC_CLOUD_ENABLED) {
     authType = "cloud";
   } else {
     authType = data.auth_type as AuthType;

web/src/middleware.ts

@@ -14,7 +14,7 @@ export const config = {
     "/admin/standard-answer/:path*",
 
     // Cloud only
-    "/admin/cloud-settings/:path*",
+    "/admin/billing/:path*",
   ],
 };