Move onboarding components to app router folder

apps/dashboard/src/components/homepage/sections/PricingCard.tsx → apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -1,13 +1,14 @@
 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";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { cn } from "@/lib/utils";
+import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
 import type React from "react";
 import { TEAM_PLANS } from "utils/pricing";
-import { CheckoutButton } from "../../../@/components/billing";
 import { remainingDays } from "../../../utils/date-utils";
-import { FeatureItem } from "./FeatureItem";
 
 type ButtonProps = React.ComponentProps<typeof Button>;
 
@@ -154,3 +155,30 @@ export const PricingCard: React.FC<PricingCardProps> = ({
     </div>
   );
 };
+
+type FeatureItemProps = {
+  text: string | string[];
+};
+
+function FeatureItem({ text }: FeatureItemProps) {
+  const titleStr = Array.isArray(text) ? text[0] : text;
+
+  return (
+    <div className="flex items-center gap-2">
+      <CheckIcon className="size-4 shrink-0 text-green-500" />
+      {Array.isArray(text) ? (
+        <div className="flex items-center gap-2">
+          <p className="text-muted-foreground">
+            {titleStr}{" "}
+            <span className="text-muted-foreground md:hidden">{text[1]}</span>
+          </p>
+          <ToolTipLabel label={text[1]}>
+            <CircleDollarSignIcon className="hidden size-4 text-muted-foreground md:block" />
+          </ToolTipLabel>
+        </div>
+      ) : (
+        <p className="text-muted-foreground">{titleStr}</p>
+      )}
+    </div>
+  );
+}

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

@@ -23,7 +23,7 @@ import { toUnits } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { useActiveAccount, useWalletBalance } from "thirdweb/react";
 import { z } from "zod";
-import { isOnboardingComplete } from "../../../../../../login/isOnboardingRequired";
+import { isOnboardingComplete } from "../../../../../../login/onboarding/isOnboardingRequired";
 
 function formatTime(seconds: number) {
   const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

apps/dashboard/src/app/account/settings/getAccount.ts

@@ -1,8 +1,8 @@
 import { API_SERVER_URL } from "@/constants/env";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { getAuthToken } from "../../api/lib/getAuthToken";
-import { isOnboardingComplete } from "../../login/isOnboardingRequired";
 import { loginRedirect } from "../../login/loginRedirect";
+import { isOnboardingComplete } from "../../login/onboarding/isOnboardingRequired";
 
 /**
  * Just get the account object without enforcing onboarding.

apps/dashboard/src/app/login/LoginPage.tsx

@@ -15,10 +15,10 @@ import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 import { ThirdwebMiniLogo } from "../components/ThirdwebMiniLogo";
 import { getSDKTheme } from "../components/sdk-component-theme";
 import { doLogin, doLogout, getLoginPayload, isLoggedIn } from "./auth-actions";
-import { isOnboardingComplete } from "./isOnboardingRequired";
+import { isOnboardingComplete } from "./onboarding/isOnboardingRequired";
 
 const LazyOnboardingUI = lazy(
-  () => import("../../components/onboarding/on-boarding-ui.client"),
+  () => import("./onboarding/on-boarding-ui.client"),
 );
 
 const wallets = [

apps/dashboard/src/components/onboarding/ChoosePlan.tsx → apps/dashboard/src/app/login/onboarding/ChoosePlan.tsx

@@ -1,6 +1,7 @@
 "use client";
+
+import { PricingCard } from "@/components/blocks/pricing-card";
 import { Button } from "@/components/ui/button";
-import { PricingCard } from "components/homepage/sections/PricingCard";
 import { ArrowRightIcon } from "lucide-react";
 import { TitleAndDescription } from "./Title";
 

apps/dashboard/src/components/onboarding/ConfirmEmail.tsx → apps/dashboard/src/app/login/onboarding/ConfirmEmail.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import type { Team } from "@/api/team";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import {
@@ -13,19 +16,18 @@ import {
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  type EmailConfirmationValidationSchema,
-  emailConfirmationValidationSchema,
-} from "components/settings/Account/validations";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { shortenString } from "utils/usedapp-external";
-import type { Team } from "../../@/api/team";
 import { TitleAndDescription } from "./Title";
+import {
+  type EmailConfirmationValidationSchema,
+  emailConfirmationValidationSchema,
+} from "./validations";
 
 interface OnboardingConfirmEmailProps {
   email: string;

apps/dashboard/src/components/onboarding/General.tsx → apps/dashboard/src/app/login/onboarding/General.tsx

@@ -1,11 +1,13 @@
+"use client";
+
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useMutation } from "@tanstack/react-query";
-import { AccountForm } from "components/settings/Account/AccountForm";
 import { useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
-import { doLogout } from "../../app/login/auth-actions";
+import { doLogout } from "../auth-actions";
+import { AccountForm } from "./AccountForm";
 import { TitleAndDescription } from "./Title";
 
 type OnboardingGeneralProps = {

apps/dashboard/src/components/onboarding/LinkWallet.tsx → apps/dashboard/src/app/login/onboarding/LinkWallet.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";

apps/dashboard/src/components/onboarding/Title.tsx → apps/dashboard/src/app/login/onboarding/Title.tsx

@@ -1,4 +1,5 @@
 import type { JSX } from "react";
+
 type TitleAndDescriptionProps = {
   heading: string | JSX.Element;
   description: string | JSX.Element;

apps/dashboard/src/components/onboarding/on-boarding-ui.client.tsx → apps/dashboard/src/app/login/onboarding/on-boarding-ui.client.tsx

@@ -1,15 +1,22 @@
 "use client";
+import type { Team } from "@/api/team";
 import { cn } from "@/lib/utils";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { useTrack } from "hooks/analytics/useTrack";
 import { useState } from "react";
-import { useTrack } from "../../hooks/analytics/useTrack";
 import { OnboardingChoosePlan } from "./ChoosePlan";
 import { OnboardingConfirmEmail } from "./ConfirmEmail";
 import { OnboardingGeneral } from "./General";
 import { OnboardingLinkWallet } from "./LinkWallet";
-import type { OnboardingScreen } from "./types";
 import { useSkipOnboarding } from "./useSkipOnboarding";
 
+type OnboardingScreen =
+  | { id: "onboarding" }
+  | { id: "linking" }
+  | { id: "confirming" }
+  | { id: "confirmLinking" }
+  | { id: "plan"; team: Team };
+
 function OnboardingUI(props: {
   account: Account;
   onComplete: () => void;

apps/dashboard/src/components/onboarding/useSkipOnboarding.tsx → apps/dashboard/src/app/login/onboarding/useSkipOnboarding.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import { useTrack } from "../../hooks/analytics/useTrack";
+import { useTrack } from "hooks/analytics/useTrack";
 
 export function useSkipOnboarding() {
   const mutation = useUpdateAccount();

apps/dashboard/src/app/login/page.tsx

@@ -1,7 +1,7 @@
 import { redirect } from "next/navigation";
 import { getRawAccount } from "../account/settings/getAccount";
 import { LoginAndOnboardingPage } from "./LoginPage";
-import { isOnboardingComplete } from "./isOnboardingRequired";
+import { isOnboardingComplete } from "./onboarding/isOnboardingRequired";
 
 export default async function Page(props: {
   searchParams: Promise<{

apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx

@@ -1,5 +1,5 @@
 import type { Team } from "@/api/team";
-import { PricingCard } from "components/homepage/sections/PricingCard";
+import { PricingCard } from "@/components/blocks/pricing-card";
 import { useMemo } from "react";
 import { getValidTeamPlan } from "../../../../app/team/components/TeamHeader/getValidTeamPlan";