Skip to content

Commit 91f3b4b

Browse files
MananTankMananTank
committed
[Dashboard] Fix all crashing stories in storybook (#5610)
Fixes DASH-493 <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on enhancing the billing and checkout functionalities within the dashboard application. It introduces new props for redirecting to checkout and billing portals, updates UI components, and replaces the `CustomConnectWallet` with a `ConnectButton`. ### Detailed summary - Updated `TransactionButton` to streamline className handling. - Added `redirectToCheckout` prop in various components including `PageContent`, `OnboardingUI`, and `PlanInfoCard`. - Introduced `RedirectBillingCheckoutAction` type in `billing.ts`. - Replaced `CustomConnectWallet` with `ConnectButton` in several components. - Enhanced `BillingPricing` and `PricingCard` components to accept `redirectToCheckout`. - Added stubs for `redirectToBillingPortal` in story files for testing. - Improved UI consistency across billing-related components. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 73e3a68 commit 91f3b4b

File tree

21 files changed

+112
-49
lines changed

21 files changed

+112
-49
lines changed

‎apps/dashboard/src/@/actions/billing.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type RedirectCheckoutOptions = {
1212
redirectUrl: string;
1313
metadata?: Record<string, string>;
1414
};
15+
1516
export async function redirectToCheckout(
1617
options: RedirectCheckoutOptions,
1718
): Promise<{ status: number }> {
@@ -59,10 +60,13 @@ export async function redirectToCheckout(
5960
redirect(json.result);
6061
}
6162

63+
export type RedirectBillingCheckoutAction = typeof redirectToCheckout;
64+
6265
export type BillingPortalOptions = {
6366
teamSlug: string | undefined;
6467
redirectUrl: string;
6568
};
69+
6670
export async function redirectToBillingPortal(
6771
options: BillingPortalOptions,
6872
): Promise<{ status: number }> {
@@ -109,3 +113,5 @@ export async function redirectToBillingPortal(
109113
// redirect to the stripe billing portal
110114
redirect(json.result);
111115
}
116+
117+
export type BillingBillingPortalAction = typeof redirectToBillingPortal;

‎apps/dashboard/src/@/components/billing.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
"use client";
22

3-
import {
4-
type BillingPortalOptions,
5-
type RedirectCheckoutOptions,
6-
redirectToBillingPortal,
7-
redirectToCheckout,
3+
import type {
4+
BillingBillingPortalAction,
5+
BillingPortalOptions,
6+
RedirectBillingCheckoutAction,
7+
RedirectCheckoutOptions,
88
} from "../actions/billing";
99
import { Button, type ButtonProps } from "./ui/button";
1010

1111
type CheckoutButtonProps = Omit<RedirectCheckoutOptions, "redirectUrl"> &
1212
ButtonProps & {
1313
redirectPath: string;
14+
redirectToCheckout: RedirectBillingCheckoutAction;
1415
};
1516

1617
export function CheckoutButton({
@@ -20,6 +21,7 @@ export function CheckoutButton({
2021
metadata,
2122
redirectPath,
2223
children,
24+
redirectToCheckout,
2325
...restProps
2426
}: CheckoutButtonProps) {
2527
return (
@@ -43,12 +45,15 @@ export function CheckoutButton({
4345
type BillingPortalButtonProps = Omit<BillingPortalOptions, "redirectUrl"> &
4446
ButtonProps & {
4547
redirectPath: string;
48+
redirectToBillingPortal: BillingBillingPortalAction;
4649
};
50+
4751
export function BillingPortalButton({
4852
onClick,
4953
teamSlug,
5054
redirectPath,
5155
children,
56+
redirectToBillingPortal,
5257
...restProps
5358
}: BillingPortalButtonProps) {
5459
return (

‎apps/dashboard/src/@/components/blocks/pricing-card.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Team } from "@/api/team";
2-
import { CheckoutButton } from "@/components/billing";
32
import { Badge } from "@/components/ui/badge";
43
import { Button } from "@/components/ui/button";
54
import { ToolTipLabel } from "@/components/ui/tooltip";
@@ -9,6 +8,8 @@ import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
98
import type React from "react";
109
import { TEAM_PLANS } from "utils/pricing";
1110
import { remainingDays } from "../../../utils/date-utils";
11+
import type { RedirectBillingCheckoutAction } from "../../actions/billing";
12+
import { CheckoutButton } from "../billing";
1213

1314
type ButtonProps = React.ComponentProps<typeof Button>;
1415

@@ -33,6 +34,7 @@ type PricingCardProps = {
3334
canTrialGrowth?: boolean;
3435
activeTrialEndsAt?: string;
3536
redirectPath: string;
37+
redirectToCheckout: RedirectBillingCheckoutAction;
3638
};
3739

3840
export const PricingCard: React.FC<PricingCardProps> = ({
@@ -44,6 +46,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
4446
canTrialGrowth = false,
4547
activeTrialEndsAt,
4648
redirectPath,
49+
redirectToCheckout,
4750
}) => {
4851
const plan = TEAM_PLANS[billingPlan];
4952
const isCustomPrice = typeof plan.price === "string";
@@ -132,6 +135,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
132135
teamSlug={teamSlug}
133136
sku={billingPlan === "starter" ? "plan:starter" : "plan:growth"}
134137
redirectPath={redirectPath}
138+
redirectToCheckout={redirectToCheckout}
135139
>
136140
{cta.title}
137141
</CheckoutButton>

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
TURNSTILE_SITE_KEY,
88
} from "@/constants/env";
99
import { useThirdwebClient } from "@/constants/thirdweb.client";
10-
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
1110
import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
1211
import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
1312
import { Turnstile } from "@marsidev/react-turnstile";
@@ -66,7 +65,6 @@ export function FaucetButton({
6665
client,
6766
});
6867
const trackEvent = useTrack();
69-
7068
const queryClient = useQueryClient();
7169

7270
const claimMutation = useMutation({
@@ -144,11 +142,13 @@ export function FaucetButton({
144142
// Force users to log in to claim the faucet
145143
if (!address || !userQuery.user) {
146144
return (
147-
<CustomConnectWallet
148-
loginRequired={true}
149-
loadingButtonClassName="!w-full"
150-
signInLinkButtonClassName="!w-full !h-auto !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm hover:!bg-primary/80"
151-
/>
145+
<Button variant="primary" className="w-full" asChild>
146+
<Link
147+
href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
148+
>
149+
Sign In
150+
</Link>
151+
</Button>
152152
);
153153
}
154154

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Checkbox } from "@/components/ui/checkbox";
2-
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
2+
import { getThirdwebClient } from "@/constants/thirdweb.server";
33
import type { Meta, StoryObj } from "@storybook/react";
44
import { useMutation } from "@tanstack/react-query";
55
import { useState } from "react";
66
import { Toaster, toast } from "sonner";
77
import { BadgeContainer, mobileViewport } from "stories/utils";
88
import { ZERO_ADDRESS } from "thirdweb";
9-
import { ThirdwebProvider } from "thirdweb/react";
9+
import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
1010
import {
1111
ErrorProvider,
1212
type TransactionError,
@@ -82,7 +82,7 @@ function Component() {
8282
<ErrorProvider>
8383
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
8484
<div>
85-
<CustomConnectWallet loginRequired={false} />
85+
<ConnectButton client={getThirdwebClient()} />
8686
</div>
8787

8888
<div className="flex items-center gap-5">

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import {
66
SelectTrigger,
77
SelectValue,
88
} from "@/components/ui/select";
9-
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
9+
import { getThirdwebClient } from "@/constants/thirdweb.server";
1010
import type { Meta, StoryObj } from "@storybook/react";
1111
import { useMutation } from "@tanstack/react-query";
1212
import { subDays } from "date-fns";
1313
import { useState } from "react";
1414
import { Toaster, toast } from "sonner";
1515
import { mobileViewport } from "stories/utils";
1616
import { NATIVE_TOKEN_ADDRESS, ZERO_ADDRESS } from "thirdweb";
17-
import { ThirdwebProvider } from "thirdweb/react";
17+
import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
1818
import { checksumAddress } from "thirdweb/utils";
1919
import {
2020
type ClaimConditionFormValues,
@@ -111,7 +111,7 @@ function Component() {
111111
<ThirdwebProvider>
112112
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
113113
<div>
114-
<CustomConnectWallet loginRequired={false} />
114+
<ConnectButton client={getThirdwebClient()} />
115115
</div>
116116

117117
<div className="flex flex-wrap items-center gap-5">

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import {
77
SelectTrigger,
88
SelectValue,
99
} from "@/components/ui/select";
10-
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
10+
import { getThirdwebClient } from "@/constants/thirdweb.server";
1111
import type { Meta, StoryObj } from "@storybook/react";
1212
import { useMutation } from "@tanstack/react-query";
1313
import { useState } from "react";
1414
import { Toaster, toast } from "sonner";
1515
import { BadgeContainer, mobileViewport } from "stories/utils";
16-
import { ThirdwebProvider } from "thirdweb/react";
16+
import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
1717
import {
1818
type MintFormValues,
1919
MintableModuleUI,
@@ -83,7 +83,7 @@ function Component() {
8383
<ThirdwebProvider>
8484
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
8585
<div>
86-
<CustomConnectWallet loginRequired={false} />
86+
<ConnectButton client={getThirdwebClient()} />
8787
</div>
8888

8989
<div className="flex flex-wrap items-center gap-5">

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Checkbox } from "@/components/ui/checkbox";
2-
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
2+
import { getThirdwebClient } from "@/constants/thirdweb.server";
33
import type { Meta, StoryObj } from "@storybook/react";
44
import { useMutation } from "@tanstack/react-query";
55
import { useState } from "react";
66
import { Toaster, toast } from "sonner";
77
import { BadgeContainer, mobileViewport } from "stories/utils";
8-
import { ThirdwebProvider } from "thirdweb/react";
8+
import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
99
import {
1010
OpenEditionMetadataModuleUI,
1111
type SetSharedMetadataFormValues,
@@ -64,7 +64,7 @@ function Component() {
6464
<ThirdwebProvider>
6565
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
6666
<div>
67-
<CustomConnectWallet loginRequired={false} />
67+
<ConnectButton client={getThirdwebClient()} />
6868
</div>
6969

7070
<div className="flex gap-2">

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Checkbox } from "@/components/ui/checkbox";
2-
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
2+
import { getThirdwebClient } from "@/constants/thirdweb.server";
33
import type { Meta, StoryObj } from "@storybook/react";
44
import { useMutation } from "@tanstack/react-query";
55
import { useState } from "react";
66
import { Toaster, toast } from "sonner";
77
import { BadgeContainer, mobileViewport } from "stories/utils";
8-
import { ThirdwebProvider } from "thirdweb/react";
8+
import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
99
import {
1010
type DefaultRoyaltyFormValues,
1111
type RoyaltyInfoFormValues,
@@ -78,7 +78,7 @@ function Component() {
7878
<ThirdwebProvider>
7979
<div className="container flex max-w-[1150px] flex-col gap-10 py-10">
8080
<div>
81-
<CustomConnectWallet loginRequired={false} />
81+
<ConnectButton client={getThirdwebClient()} />
8282
</div>
8383

8484
<div className="flex items-center gap-5">

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { Checkbox } from "@/components/ui/checkbox";
2+
import { getThirdwebClient } from "@/constants/thirdweb.server";
23
import type { Meta, StoryObj } from "@storybook/react";
34
import { useMutation } from "@tanstack/react-query";
45
import { useState } from "react";
56
import { Toaster, toast } from "sonner";
67
import { BadgeContainer, mobileViewport } from "stories/utils";
7-
import { ThirdwebProvider } from "thirdweb/react";
8+
import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
89
import {
910
type TransferableModuleFormValues,
1011
TransferableModuleUI,
@@ -80,6 +81,10 @@ function Component() {
8081
</div>
8182
</div>
8283

84+
<div>
85+
<ConnectButton client={getThirdwebClient()} />
86+
</div>
87+
8388
<BadgeContainer label="Empty AllowList, Not Restricted">
8489
<TransferableModuleUI
8590
contractInfo={contractInfo}

0 commit comments

Comments
 (0)