@m5kdev/web-ui 0.1.4 → 0.2.0

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

@@ -1,53 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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";
-}