@m5kdev/web-ui 0.1.0

package/src/modules/auth/components/SignupRoute.tsx

@@ -0,0 +1,53 @@
+import { Card, CardBody, CardHeader } from "@heroui/react";
+import { useQueryState } from "nuqs";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { SignupForm } from "#modules/auth/components/SignupFormRoute";
+import type { UseBackendTRPC } from "#types";
+import { AuthProviders } from "./AuthProviders";
+import { WaitlistCard } from "./WaitlistCard";
+import { WaitlistCodeValidation } from "./WaitlistCodeValidation";
+
+interface SignupRouteProps {
+  providers?: string[];
+  useTRPC?: UseBackendTRPC;
+}
+
+export function SignupRoute({ providers, useTRPC }: SignupRouteProps) {
+  const { t } = useTranslation();
+
+  const [code] = useQueryState("code");
+  const [email] = useQueryState("email");
+
+  const hasWaitlist = !!useTRPC;
+
+  return (
+    <div className="flex flex-col gap-6">
+      {hasWaitlist && !code ? (
+        <WaitlistCard useTRPC={useTRPC} />
+      ) : (
+        <Card>
+          <CardHeader className="text-center flex flex-col gap-1">
+            <p className="text-xl font-semibold">{t("web-ui:auth.signup.createAccount")}</p>
+            <p className="text-sm text-default-600">{t("web-ui:auth.signup.description")}</p>
+          </CardHeader>
+          <CardBody>
+            <div className="grid gap-6">
+              {hasWaitlist && code && useTRPC && (
+                <WaitlistCodeValidation code={code} useTRPC={useTRPC} />
+              )}
+              <AuthProviders providers={providers} code={code} requestSignUp />
+              <SignupForm code={code} email={email} waitlist={hasWaitlist} />
+            </div>
+          </CardBody>
+        </Card>
+      )}
+      <div className="text-center text-xs text-muted-foreground">
+        {t("web-ui:auth.signup.alreadyHaveAccount")}{" "}
+        <Link to="/login" className="underline underline-offset-4 hover:text-primary">
+          {t("web-ui:auth.login.button")}
+        </Link>
+      </div>
+    </div>
+  );
+}

package/src/modules/auth/components/UserPreferences.tsx

@@ -0,0 +1,144 @@
+import { Button, Form, Input, Select, SelectItem, Switch } from "@heroui/react";
+import type { FormEvent, ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import type { z } from "zod";
+
+type UpdatePreferencesOptions = {
+  noOptimisticUpdate?: boolean;
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+};
+
+interface ControlDefinition {
+  label: string;
+  element: "switch" | "select" | "number";
+  options?: { label: string; value: string }[];
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+type ControlsFor<Preferences> = {
+  [K in keyof Preferences]: ControlDefinition;
+};
+
+export function UserPreferences<S extends z.ZodObject<z.ZodRawShape>>({
+  schema,
+  controls,
+  preferences,
+  isLoading,
+  isPending,
+  updatePreferences,
+}: {
+  schema: S;
+  controls: ControlsFor<z.infer<S>>;
+  preferences: z.infer<S>;
+  isLoading: boolean;
+  isPending: boolean;
+  updatePreferences: (
+    partialPreferences: Partial<z.infer<S>>,
+    options: UpdatePreferencesOptions
+  ) => void;
+}): ReactElement {
+  const { t } = useTranslation("web-ui");
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+
+    const keys = Object.keys(controls) as Array<keyof typeof controls>;
+    const raw: Record<string, unknown> = {};
+    for (const key of keys) {
+      const control = controls[key];
+      if (control.element === "switch") {
+        raw[String(key)] = formData.get(String(key)) != null;
+      }
+      if (control.element === "select") {
+        raw[String(key)] = formData.get(String(key)) as string;
+      }
+      if (control.element === "number") {
+        const value = formData.get(String(key));
+        raw[String(key)] = value == null || value === "" ? undefined : Number(value);
+      }
+    }
+
+    const result = schema.safeParse(raw);
+    if (result.success) {
+      updatePreferences(result.data as Partial<z.infer<S>>, {
+        noOptimisticUpdate: true,
+        onSuccess: () => {
+          toast.success("Preferences updated");
+        },
+        onError: () => {
+          toast.error("Failed to update preferences");
+        },
+      });
+    } else {
+      // eslint-disable-next-line no-console
+      console.error(result.error);
+    }
+  }
+
+  const keys = Object.keys(controls) as Array<keyof typeof controls>;
+
+  if (isLoading) {
+    // FIXME: Add a loading state
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <Form onSubmit={handleSubmit} className="p-6 flex flex-col gap-4">
+      <h1 className="text-2xl font-bold">{t("web-ui:preferences.title")}</h1>
+      {keys.map((key) => {
+        const control = controls[key];
+        switch (control.element) {
+          case "switch":
+            return (
+              <Switch
+                key={String(key)}
+                name={String(key)}
+                value="on"
+                defaultSelected={Boolean(preferences[key as keyof typeof preferences])}
+              >
+                {control.label}
+              </Switch>
+            );
+          case "select":
+            return (
+              <Select
+                key={String(key)}
+                name={String(key)}
+                label={control.label}
+                labelPlacement="outside-top"
+                defaultSelectedKeys={[String(preferences[key as keyof typeof preferences])]}
+              >
+                {(control.options ?? []).map((option) => (
+                  <SelectItem key={option.value}>{option.label}</SelectItem>
+                ))}
+              </Select>
+            );
+          case "number":
+            return (
+              <Input
+                key={String(key)}
+                name={String(key)}
+                type="number"
+                label={control.label}
+                labelPlacement="outside-top"
+                defaultValue={String(preferences[key as keyof typeof preferences] ?? "")}
+                min={control.min}
+                max={control.max}
+                step={control.step}
+              />
+            );
+          default:
+            return <div key={String(key)}>Invalid control</div>;
+        }
+      })}
+      <Button type="submit" color="success" isLoading={isPending}>
+        {t("web-ui:preferences.submit")}
+      </Button>
+    </Form>
+  );
+}

package/src/modules/auth/components/WaitlistCard.tsx

@@ -0,0 +1,78 @@
+import { Alert, Button, Card, CardBody, CardHeader, Input } from "@heroui/react";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import type { UseBackendTRPC } from "#types";
+
+interface WaitlistCardProps {
+  useTRPC: UseBackendTRPC;
+}
+
+export function WaitlistCard({ useTRPC }: WaitlistCardProps) {
+  const { t } = useTranslation();
+  const trpc = useTRPC();
+  const [email, setEmail] = useState("");
+  const [joined, setJoined] = useState(false);
+
+  const { mutate } = useMutation(trpc.auth.joinWaitlist.mutationOptions());
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    mutate(
+      { email },
+      {
+        onSuccess: () => {
+          setJoined(true);
+        },
+        onError: (error) => {
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : t("web-ui:auth.waitlist.error", {
+                  defaultValue: "Failed to join waitlist. Please try again.",
+                })
+          );
+        },
+      }
+    );
+  };
+
+  if (joined) {
+    return (
+      <Card>
+        <CardBody className="pt-6">
+          <Alert color="success" variant="faded" title={t("web-ui:auth.waitlist.success")} />
+        </CardBody>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="text-center flex flex-col gap-1">
+        <p className="text-xl font-semibold">{t("web-ui:auth.waitlist.title")}</p>
+        <p className="text-sm text-default-600">{t("web-ui:auth.waitlist.description")}</p>
+      </CardHeader>
+      <CardBody>
+        <form onSubmit={handleSubmit} className="grid gap-6">
+          <div className="grid gap-2">
+            <Input
+              type="email"
+              label={t("web-ui:auth.waitlist.email")}
+              labelPlacement="outside"
+              placeholder={t("web-ui:auth.waitlist.placeholder.email")}
+              isRequired
+              variant="bordered"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <Button type="submit" color="primary">
+            {t("web-ui:auth.waitlist.button")}
+          </Button>
+        </form>
+      </CardBody>
+    </Card>
+  );
+}

package/src/modules/auth/components/WaitlistCodeValidation.tsx

@@ -0,0 +1,79 @@
+import { Alert } from "@heroui/react";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import type { UseBackendTRPC } from "#types";
+
+interface WaitlistCodeValidationProps {
+  useTRPC: UseBackendTRPC;
+  code: string;
+}
+
+export function WaitlistCodeValidation({ useTRPC, code }: WaitlistCodeValidationProps) {
+  const { t } = useTranslation();
+  const trpc = useTRPC();
+  const { data, isLoading, error } = useQuery(
+    trpc.auth.validateWaitlistCode.queryOptions({ code })
+  );
+  const status = data?.status;
+
+  const className = "p-1";
+
+  if (isLoading) {
+    return (
+      <Alert
+        className={className}
+        color="default"
+        variant="faded"
+        title={t("web-ui:auth.waitlist.validatingCode", {
+          defaultValue: "Validating the invitation code...",
+        })}
+      />
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert
+        className={className}
+        color="danger"
+        variant="faded"
+        title={t("web-ui:auth.waitlist.codeError", {
+          defaultValue: "An error occurred while validating the invitation code.",
+        })}
+      />
+    );
+  }
+
+  if (status === "VALID") {
+    return (
+      <Alert
+        className={className}
+        color="success"
+        variant="faded"
+        title={t("web-ui:auth.waitlist.codeValid", {
+          defaultValue: "Invitation code is valid. You can proceed.",
+        })}
+      />
+    );
+  }
+
+  if (status) {
+    let message = t("web-ui:auth.waitlist.invalidCode", {
+      defaultValue: "Invalid invitation code.",
+    });
+
+    if (status === "EXPIRED") {
+      message = t("web-ui:auth.waitlist.expiredCode", {
+        defaultValue: "Invitation code has expired.",
+      });
+    } else if (status === "NOT_FOUND") {
+      message = t("web-ui:auth.waitlist.codeNotFound", {
+        defaultValue: "Invitation code not found.",
+      });
+    }
+
+    return <Alert className={className} color="danger" variant="faded" title={message} />;
+  }
+
+  return null;
+}

package/src/modules/billing/components/BillingBetaPage.tsx

@@ -0,0 +1,124 @@
+import { Bell, CheckCircle2, Clock3, Sparkles } from "lucide-react";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Badge } from "#components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "#components/ui/card";
+import { Separator } from "#components/ui/separator";
+import { cn } from "#utils";
+
+interface BillingBetaPageProps {
+  appName: string;
+  className?: string;
+  footer?: ReactNode;
+}
+
+export function BillingBetaPage({ appName, className, footer }: BillingBetaPageProps) {
+  const { t } = useTranslation("web-ui");
+  return (
+    <div className={cn("mx-auto max-w-5xl px-4 py-12 md:py-16", className)}>
+      {/* Heading */}
+      <div className="flex flex-col items-center text-center gap-4">
+        <Badge variant="secondary" className="uppercase tracking-wide">
+          {t("billing.beta.badge")}
+        </Badge>
+        <div className="space-y-3">
+          <h1 className="text-3xl md:text-4xl font-semibold tracking-tight">
+            {t("billing.title")}
+          </h1>
+          <p className="text-muted-foreground max-w-2xl">{t("billing.subtitle", { appName })}</p>
+        </div>
+      </div>
+
+      <Separator className="my-8" />
+
+      {/* Info Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
+        <Card>
+          <CardHeader className="space-y-2">
+            <div className="flex items-center gap-2 text-green-600 dark:text-green-500">
+              <Sparkles className="h-5 w-5 shrink-0" />
+              <CardTitle>{t("billing.card.free.title")}</CardTitle>
+            </div>
+            <CardDescription>{t("billing.card.free.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-baseline gap-2">
+              <span className="text-4xl font-bold tracking-tight">
+                {t("billing.card.free.price")}
+              </span>
+              <span className="text-muted-foreground">{t("billing.card.free.priceSuffix")}</span>
+            </div>
+            <ul className="mt-4 space-y-2 text-sm">
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-green-600" />{" "}
+                {t("billing.card.free.feature.fullAccess")}
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-green-600" />{" "}
+                {t("billing.card.free.feature.noCard")}
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-green-600" />{" "}
+                {t("billing.card.free.feature.riskFree")}
+              </li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="space-y-2">
+            <div className="flex items-center gap-2 text-blue-600 dark:text-blue-500">
+              <Clock3 className="h-5 w-5 shrink-0" />
+              <CardTitle>{t("billing.card.progress.title")}</CardTitle>
+            </div>
+            <CardDescription>{t("billing.card.progress.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-2 text-sm">
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-blue-600" />{" "}
+                {t("billing.card.progress.feature.transparentPlans")}
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-blue-600" />{" "}
+                {t("billing.card.progress.feature.fairValue")}
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-blue-600" />{" "}
+                {t("billing.card.progress.feature.simpleBilling")}
+              </li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="space-y-2">
+            <div className="flex items-center gap-2 text-amber-600 dark:text-amber-500">
+              <Bell className="h-5 w-5 shrink-0" />
+              <CardTitle>{t("billing.card.notice.title")}</CardTitle>
+            </div>
+            <CardDescription>{t("billing.card.notice.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-2 text-sm">
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-amber-600" />{" "}
+                {t("billing.card.notice.feature.timeToDecide")}
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-amber-600" />{" "}
+                {t("billing.card.notice.feature.safeData")}
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 shrink-0 text-amber-600" />{" "}
+                {t("billing.card.notice.feature.autoFreeTier")}
+              </li>
+            </ul>
+          </CardContent>
+        </Card>
+      </div>
+
+      {footer}
+    </div>
+  );
+}

package/src/modules/billing/components/BillingInvoicePage.tsx

@@ -0,0 +1,180 @@
+import {
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Chip,
+  Link,
+  Spinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from "@heroui/react";
+import { useSubscription } from "@m5kdev/frontend/modules/billing/hooks/useSubscription";
+import { useQuery } from "@tanstack/react-query";
+import { AlertCircle, CheckCircle2, ExternalLink } from "lucide-react";
+
+import type { UseBackendTRPC } from "#types";
+
+interface BillingInvoicePageProps {
+  useTRPC: UseBackendTRPC;
+  serverUrl: string;
+}
+
+export function BillingInvoicePage({ useTRPC, serverUrl }: BillingInvoicePageProps) {
+  const trpc = useTRPC();
+  const { data: invoices, isLoading } = useQuery(trpc.billing.listInvoices.queryOptions());
+
+  const { data: activeSubscription, isLoading: isLoadingSubscriptions } = useSubscription();
+  const formatCurrency = (amount: number, currency: string) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.toUpperCase(),
+    }).format(amount / 100);
+  };
+
+  const formatDate = (timestamp: number | Date) => {
+    const date = timestamp instanceof Date ? timestamp : new Date(timestamp * 1000);
+    return date.toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  const cancelAt = activeSubscription?.cancelAt || activeSubscription?.cancelAtPeriodEnd;
+  return (
+    <div className="container mx-auto p-10 space-y-8">
+      <Card>
+        <CardHeader className="flex flex-col items-start gap-1 px-6 pt-6">
+          <h1 className="text-xl font-bold">Active Subscription</h1>
+          <p className="text-small text-default-500">Manage your active subscription.</p>
+        </CardHeader>
+        <CardBody className="px-6 pb-6">
+          {isLoadingSubscriptions ? (
+            <div className="flex justify-center py-8">
+              <Spinner />
+            </div>
+          ) : !activeSubscription ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center gap-4">
+              <div className="p-4 rounded-full bg-default-100">
+                <AlertCircle className="w-8 h-8 text-default-500" />
+              </div>
+              <div>
+                <p className="text-lg font-medium">No active subscription</p>
+                <p className="text-small text-default-500">
+                  You are currently on the free tier. Upgrade to access premium features.
+                </p>
+              </div>
+              <Button as={Link} href="/pricing" color="primary">
+                View Plans
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 p-4 rounded-lg bg-default-50 border border-default-200">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-lg font-semibold capitalize">
+                      {activeSubscription.plan || "Premium Plan"}
+                    </h3>
+
+                    <Chip
+                      color={
+                        cancelAt
+                          ? "danger"
+                          : activeSubscription.status === "active"
+                            ? "success"
+                            : "warning"
+                      }
+                      variant="flat"
+                      size="sm"
+                      startContent={<CheckCircle2 className="w-3 h-3 ml-1" />}
+                    >
+                      {cancelAt ? "Cancelled" : activeSubscription.status}
+                    </Chip>
+                  </div>
+                  <p className="text-small text-default-500 flex items-center gap-2">
+                    {cancelAt ? "Your subscription will end on " : "Next billing date: "}
+                    <span className="font-medium text-foreground">
+                      {activeSubscription.periodEnd
+                        ? formatDate(activeSubscription.periodEnd)
+                        : "N/A"}
+                    </span>
+                    <span className="text-small text-default-500">
+                      {`(${activeSubscription.interval === "month" ? "Monthly" : "Annually"})`}
+                    </span>
+                  </p>
+                </div>
+                <div className="flex gap-3">
+                  <Button variant="bordered" as="a" href={`${serverUrl}/stripe/portal`}>
+                    Manage Subscription
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+        </CardBody>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-col items-start gap-1 px-6 pt-6">
+          <h1 className="text-xl font-bold">Invoices</h1>
+          <p className="text-small text-default-500">
+            View your invoice history and download past invoices.
+          </p>
+        </CardHeader>
+        <CardBody className="px-6 pb-6">
+          {isLoading ? (
+            <div className="flex justify-center py-8">
+              <Spinner />
+            </div>
+          ) : (
+            <Table aria-label="Invoices table" removeWrapper>
+              <TableHeader>
+                <TableColumn>Date</TableColumn>
+                <TableColumn>Amount</TableColumn>
+                <TableColumn>Status</TableColumn>
+                <TableColumn align="end">Action</TableColumn>
+              </TableHeader>
+              <TableBody emptyContent="No invoices found.">
+                {(invoices || []).map((invoice) => (
+                  <TableRow key={invoice.id}>
+                    <TableCell>{formatDate(invoice.created)}</TableCell>
+                    <TableCell>{formatCurrency(invoice.total, invoice.currency)}</TableCell>
+                    <TableCell>
+                      <Chip
+                        color={invoice.status === "paid" ? "success" : "default"}
+                        variant="flat"
+                        size="sm"
+                      >
+                        {invoice.status}
+                      </Chip>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {invoice.hosted_invoice_url && (
+                        <Button
+                          as={Link}
+                          href={invoice.hosted_invoice_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          variant="light"
+                          size="sm"
+                          endContent={<ExternalLink className="h-4 w-4" />}
+                        >
+                          View
+                        </Button>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardBody>
+      </Card>
+    </div>
+  );
+}

package/src/modules/billing/components/BillingPlanSelect.tsx

@@ -0,0 +1,14 @@
+import type { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
+import { BillingSinglePlanSelect } from "#modules/billing/components/BillingSinglePlanSelect";
+
+interface BillingPlanSelectProps {
+  plans: StripePlan[];
+}
+
+export function BillingPlanSelect({ plans }: BillingPlanSelectProps) {
+  if (plans.length === 1) {
+    return <BillingSinglePlanSelect plan={plans[0]} />;
+  }
+
+  return "Multiple plans selection not implemented yet";
+}