[Dashboard] Fix all crashing stories in storybook

MananTank · MananTank · commit da30248b9f3e · 2024-12-04T20:05:20.000+05:30
diff --git a/apps/dashboard/src/@/actions/billing.ts b/apps/dashboard/src/@/actions/billing.ts
@@ -12,6 +12,13 @@ export type RedirectCheckoutOptions = {
   redirectUrl: string;
   metadata?: Record<string, string>;
 };
+
+export type RedirectBillingCheckoutAction = (
+  options: RedirectCheckoutOptions,
+) => Promise<{
+  status: number;
+}>;
+
 export async function redirectToCheckout(
   options: RedirectCheckoutOptions,
 ): Promise<{ status: number }> {
@@ -63,6 +70,13 @@ export type BillingPortalOptions = {
   teamSlug: string | undefined;
   redirectUrl: string;
 };
+
+export type BillingBillingPortalAction = (
+  options: BillingPortalOptions,
+) => Promise<{
+  status: number;
+}>;
+
 export async function redirectToBillingPortal(
   options: BillingPortalOptions,
 ): Promise<{ status: number }> {
diff --git a/apps/dashboard/src/@/components/billing.tsx b/apps/dashboard/src/@/components/billing.tsx
@@ -1,16 +1,17 @@
 "use client";
 
-import {
-  type BillingPortalOptions,
-  type RedirectCheckoutOptions,
-  redirectToBillingPortal,
-  redirectToCheckout,
+import type {
+  BillingBillingPortalAction,
+  BillingPortalOptions,
+  RedirectBillingCheckoutAction,
+  RedirectCheckoutOptions,
 } from "../actions/billing";
 import { Button, type ButtonProps } from "./ui/button";
 
 type CheckoutButtonProps = Omit<RedirectCheckoutOptions, "redirectUrl"> &
   ButtonProps & {
     redirectPath: string;
+    redirectToCheckout: RedirectBillingCheckoutAction;
   };
 
 export function CheckoutButton({
@@ -20,6 +21,7 @@ export function CheckoutButton({
   metadata,
   redirectPath,
   children,
+  redirectToCheckout,
   ...restProps
 }: CheckoutButtonProps) {
   return (
@@ -43,12 +45,15 @@ export function CheckoutButton({
 type BillingPortalButtonProps = Omit<BillingPortalOptions, "redirectUrl"> &
   ButtonProps & {
     redirectPath: string;
+    redirectToBillingPortal: BillingBillingPortalAction;
   };
+
 export function BillingPortalButton({
   onClick,
   teamSlug,
   redirectPath,
   children,
+  redirectToBillingPortal,
   ...restProps
 }: BillingPortalButtonProps) {
   return (
diff --git a/apps/dashboard/src/@/components/blocks/pricing-card.tsx b/apps/dashboard/src/@/components/blocks/pricing-card.tsx
@@ -1,5 +1,4 @@
 import type { Team } from "@/api/team";
-import { CheckoutButton } from "@/components/billing";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
@@ -9,6 +8,8 @@ import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
 import type React from "react";
 import { TEAM_PLANS } from "utils/pricing";
 import { remainingDays } from "../../../utils/date-utils";
+import type { RedirectBillingCheckoutAction } from "../../actions/billing";
+import { CheckoutButton } from "../billing";
 
 type ButtonProps = React.ComponentProps<typeof Button>;
 
@@ -33,6 +34,7 @@ type PricingCardProps = {
   canTrialGrowth?: boolean;
   activeTrialEndsAt?: string;
   redirectPath: string;
+  redirectToCheckout: RedirectBillingCheckoutAction;
 };
 
 export const PricingCard: React.FC<PricingCardProps> = ({
@@ -44,6 +46,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   canTrialGrowth = false,
   activeTrialEndsAt,
   redirectPath,
+  redirectToCheckout,
 }) => {
   const plan = TEAM_PLANS[billingPlan];
   const isCustomPrice = typeof plan.price === "string";
@@ -132,6 +135,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
               teamSlug={teamSlug}
               sku={billingPlan === "starter" ? "plan:starter" : "plan:growth"}
               redirectPath={redirectPath}
+              redirectToCheckout={redirectToCheckout}
             >
               {cta.title}
             </CheckoutButton>
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx
@@ -7,7 +7,7 @@ import {
   TURNSTILE_SITE_KEY,
 } from "@/constants/env";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 import { Turnstile } from "@marsidev/react-turnstile";
@@ -66,7 +66,7 @@ export function FaucetButton({
     client,
   });
   const trackEvent = useTrack();
-
+  const router = useDashboardRouter();
   const queryClient = useQueryClient();
 
   const claimMutation = useMutation({
@@ -144,11 +144,17 @@ export function FaucetButton({
   // Force users to log in to claim the faucet
   if (!address || !userQuery.user) {
     return (
-      <CustomConnectWallet
-        loginRequired={true}
-        loadingButtonClassName="!w-full"
-        signInLinkButtonClassName="!w-full !h-auto !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm hover:!bg-primary/80"
-      />
+      <Button
+        variant="primary"
+        className="w-full"
+        onClick={() => {
+          router.push(
+            `/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`,
+          );
+        }}
+      >
+        Sign In
+      </Button>
     );
   }
 
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx
@@ -1,12 +1,12 @@
 import { Checkbox } from "@/components/ui/checkbox";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { Toaster, toast } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
 import { ZERO_ADDRESS } from "thirdweb";
-import { ThirdwebProvider } from "thirdweb/react";
+import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import {
   ErrorProvider,
   type TransactionError,
@@ -82,7 +82,7 @@ function Component() {
       <ErrorProvider>
         <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
           <div>
-            <CustomConnectWallet loginRequired={false} />
+            <ConnectButton client={getThirdwebClient()} />
           </div>
 
           <div className="flex items-center gap-5">
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx
@@ -6,15 +6,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { subDays } from "date-fns";
 import { useState } from "react";
 import { Toaster, toast } from "sonner";
 import { mobileViewport } from "stories/utils";
 import { NATIVE_TOKEN_ADDRESS, ZERO_ADDRESS } from "thirdweb";
-import { ThirdwebProvider } from "thirdweb/react";
+import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { checksumAddress } from "thirdweb/utils";
 import {
   type ClaimConditionFormValues,
@@ -111,7 +111,7 @@ function Component() {
     <ThirdwebProvider>
       <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
         <div>
-          <CustomConnectWallet loginRequired={false} />
+          <ConnectButton client={getThirdwebClient()} />
         </div>
 
         <div className="flex flex-wrap items-center gap-5">
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx
@@ -7,13 +7,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { Toaster, toast } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
-import { ThirdwebProvider } from "thirdweb/react";
+import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import {
   type MintFormValues,
   MintableModuleUI,
@@ -83,7 +83,7 @@ function Component() {
     <ThirdwebProvider>
       <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
         <div>
-          <CustomConnectWallet loginRequired={false} />
+          <ConnectButton client={getThirdwebClient()} />
         </div>
 
         <div className="flex flex-wrap items-center gap-5">
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx
@@ -1,11 +1,11 @@
 import { Checkbox } from "@/components/ui/checkbox";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { Toaster, toast } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
-import { ThirdwebProvider } from "thirdweb/react";
+import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import {
   OpenEditionMetadataModuleUI,
   type SetSharedMetadataFormValues,
@@ -64,7 +64,7 @@ function Component() {
     <ThirdwebProvider>
       <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
         <div>
-          <CustomConnectWallet loginRequired={false} />
+          <ConnectButton client={getThirdwebClient()} />
         </div>
 
         <div className="flex gap-2">
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx
@@ -1,11 +1,11 @@
 import { Checkbox } from "@/components/ui/checkbox";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { Toaster, toast } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
-import { ThirdwebProvider } from "thirdweb/react";
+import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import {
   type DefaultRoyaltyFormValues,
   type RoyaltyInfoFormValues,
@@ -78,7 +78,7 @@ function Component() {
     <ThirdwebProvider>
       <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
         <div>
-          <CustomConnectWallet loginRequired={false} />
+          <ConnectButton client={getThirdwebClient()} />
         </div>
 
         <div className="flex items-center gap-5">
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx
@@ -1,10 +1,11 @@
 import { Checkbox } from "@/components/ui/checkbox";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { Toaster, toast } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
-import { ThirdwebProvider } from "thirdweb/react";
+import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import {
   type TransferableModuleFormValues,
   TransferableModuleUI,
@@ -80,6 +81,10 @@ function Component() {
           </div>
         </div>
 
+        <div>
+          <ConnectButton client={getThirdwebClient()} />
+        </div>
+
         <BadgeContainer label="Empty AllowList, Not Restricted">
           <TransferableModuleUI
             contractInfo={contractInfo}
diff --git a/apps/dashboard/src/app/login/LoginPage.tsx b/apps/dashboard/src/app/login/LoginPage.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { redirectToCheckout } from "@/actions/billing";
 import { getRawAccountAction } from "@/actions/getAccount";
 import { ColorModeToggle } from "@/components/color-mode-toggle";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
@@ -155,6 +156,7 @@ function PageContent(props: {
           account={screen.account}
           onComplete={onComplete}
           redirectPath={props.nextPath || "/team"}
+          redirectToCheckout={redirectToCheckout}
         />
       </Suspense>
     );
diff --git a/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx b/apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type { RedirectBillingCheckoutAction } from "@/actions/billing";
 import { TextDivider } from "@/components/TextDivider";
 import { PricingCard } from "@/components/blocks/pricing-card";
 import { Button } from "@/components/ui/button";
@@ -10,6 +11,7 @@ export function OnboardingChoosePlan(props: {
   canTrialGrowth: boolean;
   teamSlug: string;
   redirectPath: string;
+  redirectToCheckout: RedirectBillingCheckoutAction;
 }) {
   return (
     <div>
@@ -31,6 +33,7 @@ export function OnboardingChoosePlan(props: {
             },
           }}
           redirectPath={props.redirectPath}
+          redirectToCheckout={props.redirectToCheckout}
         />
 
         <PricingCard
@@ -48,6 +51,7 @@ export function OnboardingChoosePlan(props: {
           canTrialGrowth={props.canTrialGrowth}
           highlighted
           redirectPath={props.redirectPath}
+          redirectToCheckout={props.redirectToCheckout}
         />
       </div>
 
diff --git a/apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx b/apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import type { RedirectBillingCheckoutAction } from "@/actions/billing";
 import type { Team } from "@/api/team";
 import { cn } from "@/lib/utils";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
@@ -22,6 +23,7 @@ function OnboardingUI(props: {
   onComplete: () => void;
   // path to redirect from stripe
   redirectPath: string;
+  redirectToCheckout: RedirectBillingCheckoutAction;
 }) {
   const { account } = props;
   const [screen, setScreen] = useState<OnboardingScreen>({ id: "onboarding" });
@@ -137,6 +139,7 @@ function OnboardingUI(props: {
             props.onComplete();
           }}
           canTrialGrowth={true}
+          redirectToCheckout={props.redirectToCheckout}
         />
       )}
     </div>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card.tsx
@@ -1,13 +1,14 @@
 "use client";
 
+import { redirectToCheckout } from "@/actions/billing";
+import { CheckoutButton } from "@/components/billing";
 import { Button } from "@/components/ui/button";
 import type { EngineTier } from "@3rdweb-sdk/react/hooks/useEngine";
 import { Flex, Spacer } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { CheckIcon } from "lucide-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { CheckoutButton } from "../../../../../../../../@/components/billing";
 
 interface EngineTierCardConfig {
   name: string;
@@ -145,6 +146,7 @@ export const EngineTierCard = ({
             });
           }}
           variant={isPrimaryCta ? "default" : "outline"}
+          redirectToCheckout={redirectToCheckout}
         >
           {ctaText ?? defaultCtaText}
         </CheckoutButton>
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.stories.tsx
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx
diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
diff --git a/apps/dashboard/src/components/buttons/TransactionButton.tsx b/apps/dashboard/src/components/buttons/TransactionButton.tsx
diff --git a/apps/dashboard/src/components/settings/Account/Billing/BillingPricing.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/BillingPricing.stories.tsx
diff --git a/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx b/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx
diff --git a/apps/dashboard/src/components/settings/Account/Billing/index.tsx b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
