Fix enum lint warning in dashboard (#5234)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## 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}`

<!-- end pr-codex -->

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;

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",
     ),
   );

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: {
               )}
             />
           </div>
-          {billingAccountInfo?.status !== AccountStatus.ValidPayment ? (
+          {billingAccountInfo?.status !== accountStatus.validPayment ? (
             <ToolTipLabel label="Please update your payment method to create an ecosystem">
               {/* Allows the button to be disabled but the tooltip still works */}
               <div className="w-full">

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;

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]);

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({

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<PricingCardProps> = ({
           <FeatureItem key={Array.isArray(f) ? f[0] : f} text={f} />
         ))}
       </Flex>
-      {name === AccountPlan.Growth && onDashboard ? (
+      {name === accountPlan.growth && onDashboard ? (
         <UpgradeModal
           name={name}
           ctaProps={ctaProps}

apps/dashboard/src/components/homepage/sections/PricingSection.tsx

@@ -1,4 +1,4 @@
-import { AccountPlan } from "@3rdweb-sdk/react/hooks/useApi";
+import { accountPlan } from "@3rdweb-sdk/react/hooks/useApi";
 import { Box, Container, Flex, SimpleGrid } from "@chakra-ui/react";
 import { Heading, Text, TrackedLink } from "tw-components";
 import { CONTACT_US_URL } from "utils/pricing";
@@ -48,7 +48,7 @@ export const PricingSection: React.FC<PricingSectionProps> = ({
 
         <SimpleGrid columns={{ base: 1, xl: 3 }} gap={{ base: 6, xl: 8 }}>
           <PricingCard
-            name={AccountPlan.Free}
+            name={accountPlan.free}
             ctaTitle="Get started for free"
             ctaProps={{
               category: trackingCategory,
@@ -61,7 +61,7 @@ export const PricingSection: React.FC<PricingSectionProps> = ({
             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<PricingSectionProps> = ({
           />
 
           <PricingCard
-            name={AccountPlan.Pro}
+            name={accountPlan.pro}
             ctaTitle="Contact us"
             ctaProps={{
               category: trackingCategory,

apps/dashboard/src/components/homepage/sections/UpgradeModal.tsx

@@ -1,4 +1,8 @@
-import { AccountPlan, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
+import {
+  type AccountPlan,
+  accountPlan,
+  useAccount,
+} from "@3rdweb-sdk/react/hooks/useApi";
 import {
   Flex,
   Modal,
@@ -44,7 +48,7 @@ export const UpgradeModal: React.FC<UpgradeModalProps> = ({
   // 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]);

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<ApplyForOpCreditsFormProps> = ({
       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: "",

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, CreditsRecord> = {
-  [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<AccountPlan, CreditsRecord> = {
     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<AccountPlan, CreditsRecord> = {
     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 && (
                     <PlanCard
-                      creditsRecord={PlanToCreditsRecord[AccountPlan.Growth]}
+                      creditsRecord={PlanToCreditsRecord[accountPlan.growth]}
                     />
                   )}
                   <PlanCard
-                    creditsRecord={PlanToCreditsRecord[AccountPlan.Pro]}
+                    creditsRecord={PlanToCreditsRecord[accountPlan.pro]}
                   />
                 </SimpleGrid>
               </>

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<OnboardingChoosePlanProps> = ({
     });
 
     // 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<OnboardingChoosePlanProps> = ({
       <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
         <PricingCard
           size="sm"
-          name={AccountPlan.Free}
+          name={accountPlan.free}
           ctaTitle="Get started for free"
           ctaProps={{
             category: "account",
             onClick: (e) => {
               e.preventDefault();
-              handleSave(AccountPlan.Free);
+              handleSave(accountPlan.free);
             },
             label: "freePlan",
             href: "/",
@@ -93,15 +94,15 @@ const OnboardingChoosePlan: React.FC<OnboardingChoosePlanProps> = ({
         <PricingCard
           size="sm"
           ctaTitle="Claim your 1-month free"
-          name={AccountPlan.Growth}
+          name={accountPlan.growth}
           ctaHint="Your free trial will end after 30 days."
           canTrialGrowth={true}
           ctaProps={{
             category: "account",
             label: "growthPlan",
             onClick: (e) => {
               e.preventDefault();
-              handleSave(AccountPlan.Growth);
+              handleSave(accountPlan.growth);
             },
             href: "/",
             variant: "solid",

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<OnboardingStepsProps> = ({
   );
 
   const hasValidPayment = useMemo(() => {
-    return meQuery?.data?.status === AccountStatus.ValidPayment;
+    return meQuery?.data?.status === accountStatus.validPayment;
   }, [meQuery?.data?.status]);
 
   const hasApiKeys = useMemo(() => {

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
   );
 };