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

Author: MananTank

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: "",