Merge branch 'main' into yash/handle-token-by-index

Author: kumaryash90

.changeset/wise-boxes-fail.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/service-utils": patch
+---
+
+add `pastDue` to possible billing status flags

apps/dashboard/knip.json

@@ -9,5 +9,9 @@
   ],
   "project": ["src/**"],
   "ignoreBinaries": ["only-allow", "biome"],
-  "ignoreDependencies": ["@storybook/blocks", "@thirdweb-dev/service-utils"]
+  "ignoreDependencies": [
+    "@storybook/blocks",
+    "@thirdweb-dev/service-utils",
+    "@types/color"
+  ]
 }

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEmbeddedWallets.ts

@@ -1,9 +1,4 @@
-import {
-  keepPreviousData,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { THIRDWEB_EWS_API_HOST } from "constants/urls";
 import { useActiveAccount } from "thirdweb/react";
 import type { WalletUser } from "thirdweb/wallets";
@@ -33,7 +28,6 @@ const fetchAccountList = ({
     const json = await res.json();
     return json as {
       users: WalletUser[];
-      totalPages: number;
     };
   };
 };
@@ -57,11 +51,11 @@ export function useEmbeddedWallets(params: {
       clientId,
       pageNumber: page,
     }),
-    placeholderData: keepPreviousData,
     enabled: !!address && !!clientId,
   });
 }
 
+// TODO: fetching list of all users needs to be improved
 export function useAllEmbeddedWallets(params: {
   authToken: string;
 }) {
@@ -70,15 +64,13 @@ export function useAllEmbeddedWallets(params: {
   const address = useActiveAccount()?.address;
 
   return useMutation({
-    mutationFn: async ({
-      clientId,
-      totalPages,
-    }: { clientId: string; totalPages: number }) => {
-      const walletRes = [];
-      for (let page = 1; page <= totalPages; page++) {
-        const res = queryClient.fetchQuery<{
+    mutationFn: async ({ clientId }: { clientId: string }) => {
+      const responses: WalletUser[] = [];
+      let page = 1;
+
+      while (true) {
+        const res = await queryClient.fetchQuery<{
           users: WalletUser[];
-          totalPages: number;
         }>({
           queryKey: embeddedWalletsKeys.embeddedWallets(
             address || "",
@@ -91,9 +83,16 @@ export function useAllEmbeddedWallets(params: {
             pageNumber: page,
           }),
         });
-        walletRes.push(res);
+
+        if (res.users.length === 0) {
+          break;
+        }
+
+        page++;
+        responses.push(...res.users);
       }
-      return (await Promise.all(walletRes)).flatMap((res) => res.users);
+
+      return responses;
     },
   });
 }

apps/dashboard/src/app/team/[team_slug]/(team)/_components/BillingAlertBanner.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  PastDueBannerUI,
+  ServiceCutOffBannerUI,
+} from "./BillingAlertBannersUI";
+
+const meta = {
+  title: "Banners/Billing Alerts",
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const PaymentAlerts: Story = {
+  render: () => (
+    <div className="space-y-10">
+      <PastDueBannerUI
+        teamSlug="foo"
+        redirectToBillingPortal={() => Promise.resolve({ status: 200 })}
+      />
+
+      <ServiceCutOffBannerUI
+        teamSlug="foo"
+        redirectToBillingPortal={() => Promise.resolve({ status: 200 })}
+      />
+    </div>
+  ),
+};

apps/dashboard/src/app/team/[team_slug]/(team)/_components/BillingAlertBanners.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { redirectToBillingPortal } from "@/actions/billing";
+import {
+  PastDueBannerUI,
+  ServiceCutOffBannerUI,
+} from "./BillingAlertBannersUI";
+
+export function PastDueBanner(props: { teamSlug: string }) {
+  return (
+    <PastDueBannerUI
+      redirectToBillingPortal={redirectToBillingPortal}
+      teamSlug={props.teamSlug}
+    />
+  );
+}
+
+export function ServiceCutOffBanner(props: { teamSlug: string }) {
+  return (
+    <ServiceCutOffBannerUI
+      redirectToBillingPortal={redirectToBillingPortal}
+      teamSlug={props.teamSlug}
+    />
+  );
+}

apps/dashboard/src/app/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import type { BillingBillingPortalAction } from "@/actions/billing";
+import { BillingPortalButton } from "@/components/billing";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+function BillingAlertBanner(props: {
+  title: string;
+  description: React.ReactNode;
+  teamSlug: string;
+  variant: "error" | "warning";
+  ctaLabel: string;
+  redirectToBillingPortal: BillingBillingPortalAction;
+}) {
+  const [isRouteLoading, setIsRouteLoading] = useState(false);
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col border-b bg-card px-4 py-6 lg:items-center lg:text-center",
+        props.variant === "warning" &&
+          "border-yellow-600 bg-yellow-50 text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-100",
+        props.variant === "error" &&
+          "border-red-600 bg-red-50 text-red-800 dark:border-red-700 dark:bg-red-950 dark:text-red-100",
+      )}
+    >
+      <h3 className="font-semibold text-xl tracking-tight">{props.title}</h3>
+      <p className="mt-1 mb-4 text-sm">{props.description}</p>
+      <BillingPortalButton
+        className={cn(
+          "gap-2",
+          props.variant === "warning" &&
+            "border border-yellow-600 bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-100 dark:hover:bg-yellow-800",
+          props.variant === "error" &&
+            "border border-red-600 bg-red-100 text-red-800 hover:bg-red-200 dark:border-red-700 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800",
+        )}
+        size="sm"
+        teamSlug={props.teamSlug}
+        redirectPath={`/team/${props.teamSlug}`}
+        redirectToBillingPortal={props.redirectToBillingPortal}
+        onClick={() => {
+          setIsRouteLoading(true);
+        }}
+      >
+        {props.ctaLabel}
+        {isRouteLoading ? <Spinner className="size-4" /> : null}
+      </BillingPortalButton>
+    </div>
+  );
+}
+
+export function PastDueBannerUI(props: {
+  teamSlug: string;
+  redirectToBillingPortal: BillingBillingPortalAction;
+}) {
+  return (
+    <BillingAlertBanner
+      ctaLabel="View Invoices"
+      variant="warning"
+      title="Unpaid Invoices"
+      redirectToBillingPortal={props.redirectToBillingPortal}
+      description={
+        <>
+          You have unpaid invoices. Service may be suspended if not paid
+          promptly.
+        </>
+      }
+      teamSlug={props.teamSlug}
+    />
+  );
+}
+
+export function ServiceCutOffBannerUI(props: {
+  teamSlug: string;
+  redirectToBillingPortal: BillingBillingPortalAction;
+}) {
+  return (
+    <BillingAlertBanner
+      ctaLabel="Pay Now"
+      variant="error"
+      title="Service Suspended"
+      redirectToBillingPortal={props.redirectToBillingPortal}
+      description={
+        <>
+          Your service has been suspended due to unpaid invoices. Pay now to
+          resume service.
+        </>
+      }
+      teamSlug={props.teamSlug}
+    />
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/layout.tsx

@@ -30,7 +30,9 @@ export default async function Page(props: {
   );
 
   const hasSmartWalletsWithoutBilling =
-    isBundlerServiceEnabled && team.billingStatus !== "validPayment";
+    isBundlerServiceEnabled &&
+    team.billingStatus !== "validPayment" &&
+    team.billingStatus !== "pastDue";
 
   const userOpStats = await getAggregateUserOpUsage({
     teamId: team.id,

apps/dashboard/src/app/team/[team_slug]/layout.tsx

@@ -3,6 +3,10 @@ import { AppFooter } from "@/components/blocks/app-footer";
 import { redirect } from "next/navigation";
 import { TWAutoConnect } from "../../components/autoconnect";
 import { SaveLastVisitedTeamPage } from "../components/last-visited-page/SaveLastVisitedPage";
+import {
+  PastDueBanner,
+  ServiceCutOffBanner,
+} from "./(team)/_components/BillingAlertBanners";
 
 export default async function RootTeamLayout(props: {
   children: React.ReactNode;
@@ -17,8 +21,19 @@ export default async function RootTeamLayout(props: {
 
   return (
     <div className="flex min-h-dvh flex-col">
-      <div className="flex grow flex-col">{props.children}</div>
+      <div className="flex grow flex-col">
+        {team.billingStatus === "pastDue" && (
+          <PastDueBanner teamSlug={team_slug} />
+        )}
+
+        {team.billingStatus === "invalidPayment" && (
+          <ServiceCutOffBanner teamSlug={team_slug} />
+        )}
+
+        {props.children}
+      </div>
       <TWAutoConnect />
+
       <AppFooter />
       <SaveLastVisitedTeamPage />
     </div>

apps/dashboard/src/app/team/components/TeamHeader/getValidTeamPlan.tsx

@@ -1,7 +1,10 @@
 import type { Team } from "@/api/team";
 
 export function getValidTeamPlan(team: Team): Team["billingPlan"] {
-  if (team.billingStatus !== "validPayment") {
+  if (
+    team.billingStatus !== "validPayment" &&
+    team.billingStatus !== "pastDue"
+  ) {
     return "free";
   }