Add Billing page in team settings (chakra) (#4457)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR refactors the billing settings pages by introducing a new `SettingsBillingPage` component and updating related components for better organization and structure.

### Detailed summary
- Introduces a new `SettingsBillingPage` component for billing settings
- Updates components to use the new `SettingsBillingPage`
- Removes unnecessary code related to account and router handling

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { AccountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
+import { Billing } from "components/settings/Account/Billing";
+
+export const SettingsBillingPage = () => {
+  const meQuery = useAccount({
+    refetchInterval: (account) =>
+      [
+        AccountStatus.InvalidPayment,
+        AccountStatus.InvalidPaymentMethod,
+      ].includes(account?.status as AccountStatus)
+        ? 1000
+        : false,
+  });
+
+  const { data: account } = meQuery;
+
+  if (!account) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <Spinner className="size-10" />
+      </div>
+    );
+  }
+
+  return <Billing account={account} />;
+};

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/page.tsx

@@ -1,9 +1,10 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import { SettingsBillingPage } from "./BillingSettingsPage";
+
 export default function Page() {
   return (
-    <div className="h-full py-6 container flex items-center justify-center">
-      <h1 className="text-4xl tracking-tighter text-muted-foreground">
-        Billing Settings
-      </h1>
-    </div>
+    <ChakraProviderSetup>
+      <SettingsBillingPage />
+    </ChakraProviderSetup>
   );
 }

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/layout.tsx

@@ -28,7 +28,7 @@ export default function Layout(props: {
     <div>
       {/* Huge page title  */}
       <div className="py-10 border-b border-border">
-        <div className="container max-w-[1200px]">
+        <div className="container">
           <h1 className="text-3xl tracking-tight font-semibold">
             Team Settings
           </h1>
@@ -44,7 +44,7 @@ export default function Layout(props: {
         />
       </div>
 
-      <div className="flex gap-8 container max-w-[1200px] grow [&>*]:py-8 lg:[&>*]:py-10 lg:min-h-[900px]">
+      <div className="flex gap-8 container grow [&>*]:py-8 lg:[&>*]:py-10 lg:min-h-[900px]">
         <TeamSettingsSidebar teamSlug={props.params.team_slug} />
         <div
           className={cn(

apps/dashboard/src/components/settings/Account/Billing/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   type Account,
   AccountPlan,

apps/dashboard/src/pages/dashboard/settings/billing.tsx

@@ -1,51 +1,21 @@
-import { AccountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { AppLayout } from "components/app-layouts/app";
-import { Billing } from "components/settings/Account/Billing";
 import { SettingsSidebar } from "core-ui/sidebar/settings";
-import { useRouter } from "next/router";
 import { PageId } from "page-id";
-import { useEffect } from "react";
 import type { ThirdwebNextPage } from "utils/types";
+import { SettingsBillingPage } from "../../../app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage";
 
-const SettingsBillingPage: ThirdwebNextPage = () => {
-  const meQuery = useAccount({
-    refetchInterval: (account) =>
-      [
-        AccountStatus.InvalidPayment,
-        AccountStatus.InvalidPaymentMethod,
-      ].includes(account?.status as AccountStatus)
-        ? 1000
-        : false,
-  });
-
-  const router = useRouter();
-  const { data: account } = meQuery;
-
-  const { payment_intent, source_redirect_slug } = router.query;
-
-  // legit usecase, however will move to server side with RSCs
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (payment_intent || source_redirect_slug) {
-      router.replace("/dashboard/settings/billing");
-    }
-  }, [payment_intent, router, source_redirect_slug]);
-
-  if (!account) {
-    return null;
-  }
-
-  return <Billing account={account} />;
+const Page: ThirdwebNextPage = () => {
+  return <SettingsBillingPage />;
 };
 
-SettingsBillingPage.pageId = PageId.SettingsUsage;
+Page.pageId = PageId.SettingsUsage;
 
-SettingsBillingPage.getLayout = (page, props) => (
+Page.getLayout = (page, props) => (
   <AppLayout {...props} hasSidebar={true}>
     <SettingsSidebar activePage="billing" />
 
     {page}
   </AppLayout>
 );
 
-export default SettingsBillingPage;
+export default Page;