From df8b2f6f9076fe5acce37700dd3846798df89497 Mon Sep 17 00:00:00 2001 From: MananTank Date: Wed, 30 Oct 2024 18:48:09 +0000 Subject: [PATCH] Fix enum lint warning in dashboard (#5234) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem solved Short description of the bug fixed or feature added --- ## PR-Codex overview This PR refactors the code to replace the usage of `AccountStatus` and `AccountPlan` enums with `accountStatus` and `accountPlan` constants, improving consistency and clarity throughout the codebase. ### Detailed summary - Replaced `AccountStatus` enum with `accountStatus` constant object. - Replaced `AccountPlan` enum with `accountPlan` constant object. - Updated all references to use `accountStatus` and `accountPlan` instead of enums. - Adjusted conditions and logic to align with the new structure. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../src/@3rdweb-sdk/react/hooks/useApi.ts | 33 ++++++++++--------- .../account-abstraction/[clientId]/page.tsx | 4 +-- .../client/create-ecosystem-form.client.tsx | 4 +-- .../settings/billing/BillingSettingsPage.tsx | 17 +++++----- .../AccountAbstractionPage.tsx | 4 +-- .../engine/create/CreateEnginePage.tsx | 4 +-- .../homepage/sections/PricingCard.tsx | 4 +-- .../homepage/sections/PricingSection.tsx | 8 ++--- .../homepage/sections/UpgradeModal.tsx | 8 +++-- .../onboarding/ApplyForOpCreditsForm.tsx | 4 +-- .../onboarding/ApplyForOpCreditsModal.tsx | 25 +++++++------- .../src/components/onboarding/ChoosePlan.tsx | 13 ++++---- .../src/components/onboarding/Steps.tsx | 4 +-- .../src/components/onboarding/index.tsx | 8 ++--- .../settings/Account/Billing/ManageButton.tsx | 10 +++--- .../settings/Account/Billing/Pricing.tsx | 26 +++++++-------- .../Account/Billing/UpgradeButton.tsx | 4 +-- .../settings/Account/Billing/alerts/Alert.tsx | 16 ++++----- .../Billing/alerts/BillingAlerts.stories.tsx | 6 ++-- .../alerts/RecurringPaymentFailureAlert.tsx | 8 ++--- .../settings/Account/Billing/index.tsx | 30 ++++++++--------- .../dashboard/settings/api-keys/index.tsx | 4 +-- apps/dashboard/src/stories/stubs.ts | 8 ++--- apps/dashboard/src/utils/pricing.tsx | 10 +++--- 24 files changed, 133 insertions(+), 129 deletions(-) diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts index c2ed8655978..408ef187538 100644 --- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts +++ b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts @@ -12,21 +12,24 @@ import { useLoggedInUser } from "./useLoggedInUser"; // FIXME: We keep repeating types, API server should provide them -export enum AccountStatus { - NoCustomer = "noCustomer", - NoPayment = "noPayment", - PaymentVerification = "paymentVerification", - ValidPayment = "validPayment", - InvalidPayment = "invalidPayment", - InvalidPaymentMethod = "invalidPaymentMethod", -} - -export enum AccountPlan { - Free = "free", - Growth = "growth", - Pro = "pro", - Enterprise = "enterprise", -} +export const accountStatus = { + noCustomer: "noCustomer", + noPayment: "noPayment", + paymentVerification: "paymentVerification", + validPayment: "validPayment", + invalidPayment: "invalidPayment", + invalidPaymentMethod: "invalidPaymentMethod", +} as const; + +export const accountPlan = { + free: "free", + growth: "growth", + pro: "pro", + enterprise: "enterprise", +} as const; + +export type AccountStatus = (typeof accountStatus)[keyof typeof accountStatus]; +export type AccountPlan = (typeof accountPlan)[keyof typeof accountPlan]; export type AuthorizedWallet = { id: string; diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/[clientId]/page.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/[clientId]/page.tsx index 36555657151..652d80b7bfe 100644 --- a/apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/[clientId]/page.tsx +++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/[clientId]/page.tsx @@ -1,4 +1,4 @@ -import { AccountStatus } from "@3rdweb-sdk/react/hooks/useApi"; +import { accountStatus } from "@3rdweb-sdk/react/hooks/useApi"; import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts"; import { ConnectSDKCard } from "components/shared/ConnectSDKCard"; import { SmartWallets } from "components/smart-wallets"; @@ -38,7 +38,7 @@ export default async function Page(props: { const hasSmartWalletsWithoutBilling = apiKeys.find((k) => k.services?.find( (s) => - dashboardAccount.status !== AccountStatus.ValidPayment && + dashboardAccount.status !== accountStatus.validPayment && s.name === "bundler", ), ); diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx index 4bd587eb770..65dc1e75a24 100644 --- a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx +++ b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx @@ -16,7 +16,7 @@ import { Input } from "@/components/ui/input"; import { RadioGroup, RadioGroupItemButton } from "@/components/ui/radio-group"; import { ToolTipLabel } from "@/components/ui/tooltip"; import { useDashboardRouter } from "@/lib/DashboardRouter"; -import { AccountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi"; +import { accountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi"; import { zodResolver } from "@hookform/resolvers/zod"; import { Loader2 } from "lucide-react"; import Link from "next/link"; @@ -164,7 +164,7 @@ export function CreateEcosystemForm(props: { )} /> - {billingAccountInfo?.status !== AccountStatus.ValidPayment ? ( + {billingAccountInfo?.status !== accountStatus.validPayment ? ( {/* Allows the button to be disabled but the tooltip still works */}
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx index 5a1d65e8d02..5b1a3326564 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx @@ -1,20 +1,21 @@ "use client"; import { Spinner } from "@/components/ui/Spinner/Spinner"; -import { AccountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi"; +import { accountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi"; import { Billing } from "components/settings/Account/Billing"; export const SettingsBillingPage = (props: { teamId: string | undefined; }) => { const meQuery = useAccount({ - refetchInterval: (query) => - [ - AccountStatus.InvalidPayment, - AccountStatus.InvalidPaymentMethod, - ].includes(query.state?.status as AccountStatus) - ? 1000 - : false, + refetchInterval: (query) => { + const status = query.state?.status as string; + const isInvalidPayment = + status === accountStatus.invalidPayment || + status === accountStatus.invalidPaymentMethod; + + return isInvalidPayment ? 1000 : false; + }, }); const { data: account } = meQuery; diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx index 28f4bae7f37..8d1c436ec87 100644 --- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx @@ -4,8 +4,8 @@ import { Spinner } from "@/components/ui/Spinner/Spinner"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { TrackedLinkTW } from "@/components/ui/tracked-link"; import { - AccountStatus, type ApiKeyService, + accountStatus, useAccount, } from "@3rdweb-sdk/react/hooks/useApi"; import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser"; @@ -40,7 +40,7 @@ export function AccountAbstractionPage(props: { return apiKeyServices.find( (s) => - accountQuery.data.status !== AccountStatus.ValidPayment && + accountQuery.data.status !== accountStatus.validPayment && s.name === "bundler", ); }, [apiKeyServices, accountQuery.data]); diff --git a/apps/dashboard/src/components/engine/create/CreateEnginePage.tsx b/apps/dashboard/src/components/engine/create/CreateEnginePage.tsx index c76b8adbb0f..9a1b185f03b 100644 --- a/apps/dashboard/src/components/engine/create/CreateEnginePage.tsx +++ b/apps/dashboard/src/components/engine/create/CreateEnginePage.tsx @@ -1,7 +1,7 @@ "use client"; import { useDashboardRouter } from "@/lib/DashboardRouter"; -import { AccountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi"; +import { accountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi"; import { useState } from "react"; import { toast } from "sonner"; import { ConfirmEngineTierDialog } from "../../../components/engine/create/ConfirmEngineTierDialog"; @@ -79,7 +79,7 @@ export const CreateEnginePage = () => { setIsConfirmationDialogOpen(false); // If Payment is already setup, deploy the Engine - if (accountQuery.data?.status === AccountStatus.ValidPayment) { + if (accountQuery.data?.status === accountStatus.validPayment) { await createEngineInstance(selectedTier); } else { trackEvent({ diff --git a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx index 65470112377..241c5999fba 100644 --- a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx +++ b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx @@ -1,4 +1,4 @@ -import { AccountPlan } from "@3rdweb-sdk/react/hooks/useApi"; +import { type AccountPlan, accountPlan } from "@3rdweb-sdk/react/hooks/useApi"; import { Box, type CardProps, Flex } from "@chakra-ui/react"; import { Badge, @@ -133,7 +133,7 @@ export const PricingCard: React.FC = ({ ))} - {name === AccountPlan.Growth && onDashboard ? ( + {name === accountPlan.growth && onDashboard ? ( = ({ = ({ ctaTitle={ canTrialGrowth ? "Claim your 1-month free" : "Get started" } - name={AccountPlan.Growth} + name={accountPlan.growth} ctaHint={ canTrialGrowth ? "Your free trial will end after 30 days." @@ -82,7 +82,7 @@ export const PricingSection: React.FC = ({ /> = ({ // FIXME: this needs to be re-worked // eslint-disable-next-line no-restricted-syntax useEffect(() => { - if (account.data?.plan === AccountPlan.Growth) { + if (account.data?.plan === accountPlan.growth) { onClose(); } }, [account.data?.plan, onClose]); diff --git a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx index 5b52abb65e8..1394ced96f5 100644 --- a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx +++ b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx @@ -1,4 +1,4 @@ -import { AccountPlan, useAccount } from "@3rdweb-sdk/react/hooks/useApi"; +import { accountPlan, useAccount } from "@3rdweb-sdk/react/hooks/useApi"; import { Flex, FormControl, Input, Textarea } from "@chakra-ui/react"; import { Select as ChakraSelect } from "chakra-react-select"; import { ChakraNextImage } from "components/Image"; @@ -41,7 +41,7 @@ export const ApplyForOpCreditsForm: React.FC = ({ firstname: "", lastname: "", thirdweb_account_id: account?.id || "", - plan_type: PlanToCreditsRecord[account?.plan || AccountPlan.Free].title, + plan_type: PlanToCreditsRecord[account?.plan || accountPlan.free].title, email: account?.email || "", company: "", website: "", diff --git a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx index 6918e1269bb..980e6386adf 100644 --- a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx +++ b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx @@ -1,6 +1,7 @@ import { - AccountPlan, - AccountStatus, + type AccountPlan, + accountPlan, + accountStatus, useAccount, } from "@3rdweb-sdk/react/hooks/useApi"; import { @@ -32,13 +33,13 @@ export type CreditsRecord = { }; export const PlanToCreditsRecord: Record = { - [AccountPlan.Free]: { + [accountPlan.free]: { title: "Starter", upTo: true, credits: "$250", color: "#3b394b", }, - [AccountPlan.Growth]: { + [accountPlan.growth]: { title: "Growth", upTo: true, credits: "$2,500", @@ -52,7 +53,7 @@ export const PlanToCreditsRecord: Record = { ctaTitle: "Upgrade for $99", ctaHref: "/dashboard/settings/billing", }, - [AccountPlan.Pro]: { + [accountPlan.pro]: { title: "Pro", credits: "$3,000+", color: "#282B6F", @@ -64,7 +65,7 @@ export const PlanToCreditsRecord: Record = { ctaTitle: "Contact Us", ctaHref: "https://meetings.hubspot.com/sales-thirdweb/thirdweb-pro", }, - [AccountPlan.Enterprise]: { + [accountPlan.enterprise]: { title: "Enterprise", credits: "Custom", color: "#000000", @@ -94,16 +95,16 @@ export const ApplyForOpCreditsModal: React.FC = () => { const hasValidPayment = useMemo(() => { return ( - !!(account?.data?.status === AccountStatus.ValidPayment) || + !!(account?.data?.status === accountStatus.validPayment) || hasAddedPaymentMethod ); }, [account?.data?.status, hasAddedPaymentMethod]); - const isFreePlan = account.data?.plan === AccountPlan.Free; - const isProPlan = account.data?.plan === AccountPlan.Pro; + const isFreePlan = account.data?.plan === accountPlan.free; + const isProPlan = account.data?.plan === accountPlan.pro; const creditsRecord = - PlanToCreditsRecord[account.data?.plan || AccountPlan.Free]; + PlanToCreditsRecord[account.data?.plan || accountPlan.free]; return ( <> @@ -193,11 +194,11 @@ export const ApplyForOpCreditsModal: React.FC = () => { > {isFreePlan && ( )} diff --git a/apps/dashboard/src/components/onboarding/ChoosePlan.tsx b/apps/dashboard/src/components/onboarding/ChoosePlan.tsx index 65a01a3288b..65689e58ce4 100644 --- a/apps/dashboard/src/components/onboarding/ChoosePlan.tsx +++ b/apps/dashboard/src/components/onboarding/ChoosePlan.tsx @@ -1,5 +1,6 @@ import { - AccountPlan, + type AccountPlan, + accountPlan, useUpdateAccountPlan, } from "@3rdweb-sdk/react/hooks/useApi"; import { PricingCard } from "components/homepage/sections/PricingCard"; @@ -24,7 +25,7 @@ const OnboardingChoosePlan: React.FC = ({ }); // free is default, so no need to update account - if (plan === AccountPlan.Free) { + if (plan === accountPlan.free) { trackEvent({ category: "account", action: "choosePlan", @@ -76,13 +77,13 @@ const OnboardingChoosePlan: React.FC = ({
{ e.preventDefault(); - handleSave(AccountPlan.Free); + handleSave(accountPlan.free); }, label: "freePlan", href: "/", @@ -93,7 +94,7 @@ const OnboardingChoosePlan: React.FC = ({ = ({ label: "growthPlan", onClick: (e) => { e.preventDefault(); - handleSave(AccountPlan.Growth); + handleSave(accountPlan.growth); }, href: "/", variant: "solid", diff --git a/apps/dashboard/src/components/onboarding/Steps.tsx b/apps/dashboard/src/components/onboarding/Steps.tsx index adb424a649a..85a54772780 100644 --- a/apps/dashboard/src/components/onboarding/Steps.tsx +++ b/apps/dashboard/src/components/onboarding/Steps.tsx @@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button"; import { useDashboardRouter } from "@/lib/DashboardRouter"; import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet"; import { - AccountStatus, + accountStatus, useAccount, useAccountCredits, useApiKeys, @@ -76,7 +76,7 @@ export const OnboardingSteps: React.FC = ({ ); const hasValidPayment = useMemo(() => { - return meQuery?.data?.status === AccountStatus.ValidPayment; + return meQuery?.data?.status === accountStatus.validPayment; }, [meQuery?.data?.status]); const hasApiKeys = useMemo(() => { diff --git a/apps/dashboard/src/components/onboarding/index.tsx b/apps/dashboard/src/components/onboarding/index.tsx index 923d76c953c..8cd7da79538 100644 --- a/apps/dashboard/src/components/onboarding/index.tsx +++ b/apps/dashboard/src/components/onboarding/index.tsx @@ -1,7 +1,7 @@ import { Spinner } from "@/components/ui/Spinner/Spinner"; import { type Account, - AccountStatus, + accountStatus, useAccount, } from "@3rdweb-sdk/react/hooks/useApi"; import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser"; @@ -26,9 +26,9 @@ function Loading() { const skipBilling = (account: Account) => { return ( - [AccountStatus.ValidPayment, AccountStatus.PaymentVerification].includes( - account.status, - ) || account.onboardSkipped + account.status === accountStatus.validPayment || + account.status === accountStatus.paymentVerification || + account.onboardSkipped ); }; diff --git a/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx b/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx index ac830507836..76b1baedc64 100644 --- a/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx +++ b/apps/dashboard/src/components/settings/Account/Billing/ManageButton.tsx @@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button"; import { TrackedLinkTW } from "@/components/ui/tracked-link"; import { type Account, - AccountStatus, + accountStatus, useCreateBillingSession, } from "@3rdweb-sdk/react/hooks/useApi"; import { useMemo } from "react"; @@ -26,14 +26,14 @@ export const ManageBillingButton: React.FC = ({ const [buttonLabel, buttonText] = useMemo(() => { switch (account.status) { - case AccountStatus.InvalidPayment: - case AccountStatus.ValidPayment: { + case accountStatus.invalidPayment: + case accountStatus.validPayment: { return ["manage", "Manage billing"]; } - case AccountStatus.PaymentVerification: { + case accountStatus.paymentVerification: { return ["verifyPaymentMethod", "Verify your payment method →"]; } - case AccountStatus.InvalidPaymentMethod: { + case accountStatus.invalidPaymentMethod: { return ["addAnotherPayment", "Add another payment method →"]; } default: { diff --git a/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx b/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx index 8ca1fa64abe..a59c1ef73ee 100644 --- a/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx +++ b/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx @@ -1,4 +1,4 @@ -import { AccountPlan } from "@3rdweb-sdk/react/hooks/useApi"; +import { type AccountPlan, accountPlan } from "@3rdweb-sdk/react/hooks/useApi"; import { SimpleGrid } from "@chakra-ui/react"; import { PricingCard } from "components/homepage/sections/PricingCard"; import { useMemo } from "react"; @@ -25,15 +25,13 @@ export const BillingPricing: React.FC = ({ loading, onSelect, }) => { - const isPro = [AccountPlan.Pro, AccountPlan.Enterprise].includes( - plan as AccountPlan, - ); + const isPro = plan === accountPlan.pro || plan === accountPlan.enterprise; const freeCtaTitle = useMemo(() => { if (!validPayment) { return "Get started for free"; } - if (plan !== AccountPlan.Free) { + if (plan !== accountPlan.free) { return "Downgrade"; } @@ -51,7 +49,7 @@ export const BillingPricing: React.FC = ({ return "Contact us"; } - if (plan === AccountPlan.Free) { + if (plan === accountPlan.free) { return canTrialGrowth ? trialTitle : "Upgrade"; } @@ -65,14 +63,14 @@ export const BillingPricing: React.FC = ({ return ( { e.preventDefault(); - handleSelect(AccountPlan.Free); + handleSelect(accountPlan.free); }, isLoading: loading, isDisabled: loading || invalidPayment || paymentVerification, @@ -85,18 +83,18 @@ export const BillingPricing: React.FC = ({ { e.preventDefault(); - handleSelect(AccountPlan.Growth); + handleSelect(accountPlan.growth); }, isLoading: loading, isDisabled: loading || invalidPayment || paymentVerification, @@ -112,7 +110,7 @@ export const BillingPricing: React.FC = ({ { meQuery.isPending || !meQuery.data || pathname?.startsWith("/dashboard/settings/billing") || - meQuery.data?.plan !== AccountPlan.Free + meQuery.data?.plan !== accountPlan.free ) { return null; } diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx index 41605929b5c..287d07f0b31 100644 --- a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx +++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx @@ -5,8 +5,8 @@ import { TrackedLinkTW } from "@/components/ui/tracked-link"; import { cn } from "@/lib/utils"; import { type Account, - AccountStatus, type UsageBillableByService, + accountStatus, useAccount, useAccountUsage, } from "@3rdweb-sdk/react/hooks/useApi"; @@ -45,11 +45,9 @@ export const BillingAlerts = (props: { const usageQuery = useAccountUsage(); const meQuery = useAccount({ refetchInterval: (account) => - [ - AccountStatus.InvalidPayment, - AccountStatus.InvalidPaymentMethod, - AccountStatus.PaymentVerification, - ].includes(account.state.data?.status as AccountStatus) + account.state.data?.status === accountStatus.invalidPayment || + account.state.data?.status === accountStatus.invalidPaymentMethod || + account.state.data?.status === accountStatus.paymentVerification ? 1000 : false, }); @@ -112,7 +110,7 @@ export function BillingAlertsUI(props: { const paymentFailureAlerts: AlertConditionType[] = [ { shouldShowAlert: - dashboardAccount.status === AccountStatus.PaymentVerification, + dashboardAccount.status === accountStatus.paymentVerification, key: "verifyPaymentAlert", title: "Your payment method requires verification", description: @@ -122,7 +120,7 @@ export function BillingAlertsUI(props: { }, { shouldShowAlert: - dashboardAccount.status === AccountStatus.InvalidPaymentMethod, + dashboardAccount.status === accountStatus.invalidPaymentMethod, key: "invalidPaymentMethodAlert", title: "Your payment method is invalid", description: @@ -162,7 +160,7 @@ export function BillingAlertsUI(props: { usage.storage.sumFileSizeBytes >= limits.storage; const hasHardLimits = - dashboardAccount.status !== AccountStatus.ValidPayment; + dashboardAccount.status !== accountStatus.validPayment; const isFreePlan = dashboardAccount.plan === "free"; const isGrowthPlan = dashboardAccount.plan === "growth"; const usageAlerts: AlertConditionType[] = [ diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx index 30a62241aea..5ba0f1be8d1 100644 --- a/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx +++ b/apps/dashboard/src/components/settings/Account/Billing/alerts/BillingAlerts.stories.tsx @@ -1,11 +1,11 @@ +import { accountStatus } from "@3rdweb-sdk/react/hooks/useApi"; import type { Meta, StoryObj } from "@storybook/react"; +import { BadgeContainer, mobileViewport } from "stories/utils"; import { ThirdwebProvider } from "thirdweb/react"; -import { AccountStatus } from "../../../../../@3rdweb-sdk/react/hooks/useApi"; import { createBillableServiceUsageDataStub, createDashboardAccountStub, } from "../../../../../stories/stubs"; -import { BadgeContainer, mobileViewport } from "../../../../../stories/utils"; import { BillingAlertsUI } from "./Alert"; const meta = { @@ -54,7 +54,7 @@ function Story() { setIsPaymentMethodOpen(true) } diff --git a/apps/dashboard/src/components/settings/Account/Billing/index.tsx b/apps/dashboard/src/components/settings/Account/Billing/index.tsx index e751ad1ace8..4cb22ad345b 100644 --- a/apps/dashboard/src/components/settings/Account/Billing/index.tsx +++ b/apps/dashboard/src/components/settings/Account/Billing/index.tsx @@ -1,8 +1,9 @@ "use client"; import { type Account, - AccountPlan, - AccountStatus, + type AccountPlan, + accountPlan, + accountStatus, useUpdateAccountPlan, } from "@3rdweb-sdk/react/hooks/useApi"; import { Flex } from "@chakra-ui/react"; @@ -30,7 +31,7 @@ interface BillingProps { export const Billing: React.FC = ({ account, teamId }) => { const updatePlanMutation = useUpdateAccountPlan( - account?.plan === AccountPlan.Free, + account?.plan === accountPlan.free, ); const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false); const [paymentMethodSaving, setPaymentMethodSaving] = useState(false); @@ -52,10 +53,10 @@ export const Billing: React.FC = ({ account, teamId }) => { "Failed to change your billing plan.", ); - const validPayment = account.status === AccountStatus.ValidPayment; + const validPayment = account.status === accountStatus.validPayment; const paymentVerification = - account.status === AccountStatus.PaymentVerification; - const invalidPayment = account.status === AccountStatus.InvalidPayment; + account.status === accountStatus.paymentVerification; + const invalidPayment = account.status === accountStatus.invalidPayment; const handleUpdatePlan = useCallback( (plan: AccountPlan, feedback?: string) => { @@ -114,7 +115,7 @@ export const Billing: React.FC = ({ account, teamId }) => { return; } // downgrade from Growth to Free - if (plan === AccountPlan.Free || account.plan === AccountPlan.Growth) { + if (plan === accountPlan.free || account.plan === accountPlan.growth) { setDowngradePlan(plan); } else { handleUpdatePlan(plan); @@ -211,8 +212,8 @@ export const Billing: React.FC = ({ account, teamId }) => { // and didn't have it already set, so update it here when payment // method is available. if ( - account.plan !== AccountPlan.Growth && - selectedPlan === AccountPlan.Growth + account.plan !== accountPlan.growth && + selectedPlan === accountPlan.growth ) { handleUpdatePlan(selectedPlan); setSelectedPlan(undefined); @@ -232,12 +233,11 @@ export const Billing: React.FC = ({ account, teamId }) => { handleUpdatePlan, ]); - const showSteps = [ - AccountStatus.NoCustomer, - AccountStatus.NoPayment, - AccountStatus.InvalidPayment, - AccountStatus.InvalidPaymentMethod, - ].includes(account.status); + const showSteps = + account.status === accountStatus.noCustomer || + account.status === accountStatus.noPayment || + account.status === accountStatus.invalidPayment || + account.status === accountStatus.invalidPaymentMethod; return ( diff --git a/apps/dashboard/src/pages/dashboard/settings/api-keys/index.tsx b/apps/dashboard/src/pages/dashboard/settings/api-keys/index.tsx index 75458fdf303..c78210ed8c4 100644 --- a/apps/dashboard/src/pages/dashboard/settings/api-keys/index.tsx +++ b/apps/dashboard/src/pages/dashboard/settings/api-keys/index.tsx @@ -1,6 +1,6 @@ import { Button } from "@/components/ui/button"; import { - AccountStatus, + accountStatus, useAccount, useApiKeys, } from "@3rdweb-sdk/react/hooks/useApi"; @@ -31,7 +31,7 @@ const SettingsApiKeysPage: ThirdwebNextPage = () => { return apiKeys.find((k) => k.services?.find( (s) => - account.status !== AccountStatus.ValidPayment && s.name === "bundler", + account.status !== accountStatus.validPayment && s.name === "bundler", ), ); }, [apiKeys, account]); diff --git a/apps/dashboard/src/stories/stubs.ts b/apps/dashboard/src/stories/stubs.ts index 52cbb3a8059..4fe910e5640 100644 --- a/apps/dashboard/src/stories/stubs.ts +++ b/apps/dashboard/src/stories/stubs.ts @@ -2,11 +2,11 @@ import type { Project } from "@/api/projects"; import type { Team } from "@/api/team"; import { type Account, - AccountPlan, - AccountStatus, type ApiKey, type ApiKeyService, type UsageBillableByService, + accountPlan, + accountStatus, } from "@3rdweb-sdk/react/hooks/useApi"; import type { EngineAlert, @@ -172,8 +172,8 @@ export function createDashboardAccountStub( id: id, name: `Name ${id}`, email: `email-${id}@example.com`, - status: AccountStatus.NoPayment, - plan: AccountPlan.Free, + status: accountStatus.noPayment, + plan: accountPlan.free, advancedEnabled: false, currentBillingPeriodStartsAt: new Date().toISOString(), currentBillingPeriodEndsAt: new Date().toISOString(), diff --git a/apps/dashboard/src/utils/pricing.tsx b/apps/dashboard/src/utils/pricing.tsx index 51e778cd13c..b334a6531ee 100644 --- a/apps/dashboard/src/utils/pricing.tsx +++ b/apps/dashboard/src/utils/pricing.tsx @@ -1,4 +1,4 @@ -import { AccountPlan } from "@3rdweb-sdk/react/hooks/useApi"; +import { type AccountPlan, accountPlan } from "@3rdweb-sdk/react/hooks/useApi"; import { Link, Text } from "tw-components"; export const CONTACT_US_URL = @@ -14,7 +14,7 @@ export const PLANS: { features: Array; }; } = { - [AccountPlan.Free]: { + [accountPlan.free]: { title: "Starter", price: 0, subTitle: null, @@ -29,7 +29,7 @@ export const PLANS: { "Blockchain infra (RPC, IPFS)", ], }, - [AccountPlan.Growth]: { + [accountPlan.growth]: { price: 99, title: "Growth", subTitle: "Everything in Starter, plus:", @@ -45,7 +45,7 @@ export const PLANS: { "Advanced paymaster rules", ], }, - [AccountPlan.Pro]: { + [accountPlan.pro]: { price: "Custom", title: "Pro", subTitle: "Everything in Growth, plus:", @@ -60,7 +60,7 @@ export const PLANS: { "Enterprise grade SLAs", ], }, - [AccountPlan.Enterprise]: { + [accountPlan.enterprise]: { price: "$$$", title: "Enterprise", subTitle: "Everything in Pro, plus:",