@carlonicora/nextjs-jsonapi 1.39.2 → 1.40.1

package/src/features/waitlist/components/forms/WaitlistForm.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckCircle, Mail } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import { errorToast, FormInput, GdprConsentCheckbox } from "../../../../components";
+import { Button, Form, Link } from "../../../../shadcnui";
+import { getWaitlistConfig } from "../../config/waitlist.config";
+import { WaitlistService } from "../../data/WaitlistService";
+import { WaitlistQuestionnaireRenderer } from "./WaitlistQuestionnaireRenderer";
+
+interface WaitlistFormProps {
+  onSuccess?: () => void;
+}
+
+export function WaitlistForm({ onSuccess }: WaitlistFormProps) {
+  const t = useTranslations();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const config = getWaitlistConfig();
+  const questionnaireFields = config.questionnaire ?? [];
+
+  // Build dynamic questionnaire schema based on config
+  const questionnaireSchema = questionnaireFields.reduce(
+    (acc, field) => {
+      if (field.type === "checkbox" && field.options && field.options.length > 0) {
+        // Multiple checkboxes - each option is a boolean
+        const optionsSchema = field.options.reduce(
+          (optAcc, opt) => {
+            optAcc[opt.value] = z.boolean().optional();
+            return optAcc;
+          },
+          {} as Record<string, z.ZodOptional<z.ZodBoolean>>,
+        );
+        acc[field.id] = z.object(optionsSchema).optional();
+      } else if (field.type === "checkbox") {
+        // Single checkbox
+        acc[field.id] = field.required ? z.literal(true) : z.boolean().optional();
+      } else if (field.type === "select") {
+        acc[field.id] = field.required ? z.string().min(1) : z.string().optional();
+      } else {
+        // text, textarea
+        acc[field.id] = field.required ? z.string().min(1) : z.string().optional();
+      }
+      return acc;
+    },
+    {} as Record<string, z.ZodTypeAny>,
+  );
+
+  const formSchema = z.object({
+    id: z.uuidv4(),
+    email: z.email({ message: t("common.errors.invalid_email") }),
+    gdprConsent: z.literal(true, {
+      message: t("auth.gdpr.terms_required"),
+    }),
+    marketingConsent: z.boolean().optional(),
+    questionnaire: z.object(questionnaireSchema).optional(),
+  });
+
+  type FormValues = z.infer<typeof formSchema>;
+
+  // Build default values for questionnaire fields
+  const questionnaireDefaults = questionnaireFields.reduce(
+    (acc, field) => {
+      if (field.type === "checkbox" && field.options && field.options.length > 0) {
+        acc[field.id] = field.options.reduce(
+          (optAcc, opt) => {
+            optAcc[opt.value] = false;
+            return optAcc;
+          },
+          {} as Record<string, boolean>,
+        );
+      } else if (field.type === "checkbox") {
+        acc[field.id] = false;
+      } else {
+        acc[field.id] = "";
+      }
+      return acc;
+    },
+    {} as Record<string, any>,
+  );
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      id: v4(),
+      email: "",
+      gdprConsent: false as unknown as true,
+      marketingConsent: false,
+      questionnaire: questionnaireDefaults,
+    },
+  });
+
+  const onSubmit: SubmitHandler<FormValues> = async (values) => {
+    setIsSubmitting(true);
+    try {
+      const now = new Date().toISOString();
+
+      await WaitlistService.submit({
+        id: values.id,
+        email: values.email,
+        gdprConsent: values.gdprConsent,
+        gdprConsentAt: now,
+        marketingConsent: values.marketingConsent ?? false,
+        marketingConsentAt: values.marketingConsent ? now : undefined,
+        questionnaire: values.questionnaire,
+      });
+
+      setIsSuccess(true);
+      onSuccess?.();
+    } catch (e) {
+      errorToast({ error: e });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isSuccess) {
+    return (
+      <div className="space-y-6 text-center">
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
+          <CheckCircle className="h-8 w-8 text-green-600" />
+        </div>
+        <div className="space-y-2">
+          <h3 className="text-xl font-semibold">{t("waitlist.success.title")}</h3>
+          <p className="text-muted-foreground">{t("waitlist.success.description")}</p>
+        </div>
+        <div className="flex items-center justify-center gap-2 text-muted-foreground text-sm">
+          <Mail className="h-4 w-4" />
+          <span>{t("waitlist.success.hint")}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormInput
+          isRequired
+          form={form}
+          id="email"
+          name={t("common.fields.email.label")}
+          placeholder={t("common.fields.email.placeholder")}
+        />
+
+        {questionnaireFields.length > 0 && <WaitlistQuestionnaireRenderer form={form} fields={questionnaireFields} />}
+
+        <div className="space-y-4 py-4">
+          <GdprConsentCheckbox
+            form={form}
+            id="gdprConsent"
+            label={
+              <>
+                {t("auth.gdpr.terms_prefix")}
+                <Link href="/terms" target="_blank" rel="noopener" className="underline">
+                  {t("auth.gdpr.terms_of_service")}
+                </Link>
+                {t("auth.gdpr.and")}
+                <Link href="/privacy" target="_blank" rel="noopener" className="underline">
+                  {t("auth.gdpr.privacy_policy")}
+                </Link>
+              </>
+            }
+            required
+          />
+          <GdprConsentCheckbox
+            form={form}
+            id="marketingConsent"
+            label={t("auth.gdpr.marketing_consent")}
+            description={t("auth.gdpr.marketing_description")}
+          />
+        </div>
+
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
+          {isSubmitting ? t("common.actions.submitting") : t("waitlist.buttons.join")}
+        </Button>
+      </form>
+    </Form>
+  );
+}

package/src/features/waitlist/components/forms/WaitlistQuestionnaireRenderer.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { FormInput, FormTextarea, FormSelect, FormCheckbox } from "../../../../components";
+import { QuestionnaireField } from "../../config/waitlist.config";
+
+interface WaitlistQuestionnaireRendererProps<T extends FieldValues> {
+  form: UseFormReturn<T>;
+  fields: QuestionnaireField[];
+  fieldPrefix?: string;
+}
+
+export function WaitlistQuestionnaireRenderer<T extends FieldValues>({
+  form,
+  fields,
+  fieldPrefix = "questionnaire",
+}: WaitlistQuestionnaireRendererProps<T>) {
+  if (!fields || fields.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {fields.map((field) => {
+        const fieldId = `${fieldPrefix}.${field.id}` as Path<T>;
+
+        switch (field.type) {
+          case "text":
+            return (
+              <FormInput
+                key={field.id}
+                form={form}
+                id={fieldId}
+                name={field.label}
+                placeholder={field.placeholder}
+                isRequired={field.required}
+              />
+            );
+
+          case "textarea":
+            return (
+              <FormTextarea
+                key={field.id}
+                form={form}
+                id={fieldId}
+                name={field.label}
+                placeholder={field.placeholder}
+                className="min-h-24"
+              />
+            );
+
+          case "select":
+            if (!field.options || field.options.length === 0) {
+              return null;
+            }
+            return (
+              <FormSelect
+                key={field.id}
+                form={form}
+                id={fieldId}
+                name={field.label}
+                values={field.options.map((opt) => ({
+                  id: opt.value,
+                  text: opt.label,
+                }))}
+              />
+            );
+
+          case "checkbox":
+            if (!field.options || field.options.length === 0) {
+              return (
+                <FormCheckbox
+                  key={field.id}
+                  form={form}
+                  id={fieldId}
+                  name={field.label}
+                  description={field.description}
+                  isRequired={field.required}
+                />
+              );
+            }
+            // Multiple checkboxes for options
+            return (
+              <div key={field.id} className="space-y-2">
+                <span className="text-sm font-medium">
+                  {field.label}
+                  {field.required && <span className="text-destructive ml-1">*</span>}
+                </span>
+                {field.description && <p className="text-muted-foreground text-xs">{field.description}</p>}
+                <div className="space-y-2">
+                  {field.options.map((option) => (
+                    <FormCheckbox
+                      key={option.value}
+                      form={form}
+                      id={`${fieldId}.${option.value}` as Path<T>}
+                      name={option.label}
+                      description={option.description}
+                    />
+                  ))}
+                </div>
+              </div>
+            );
+
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}

package/src/features/waitlist/components/forms/index.ts

@@ -0,0 +1,2 @@
+export * from "./WaitlistForm";
+export * from "./WaitlistQuestionnaireRenderer";

package/src/features/waitlist/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./forms";
+export * from "./sections";
+export * from "./lists";

package/src/features/waitlist/components/lists/WaitlistList.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { RefreshCw, Users } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useState } from "react";
+import { errorToast } from "../../../../components";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { WaitlistInterface } from "../../data/WaitlistInterface";
+import { WaitlistService } from "../../data/WaitlistService";
+import { useWaitlistTableStructure } from "../../hooks/useWaitlistTableStructure";
+
+export function WaitlistList() {
+  const t = useTranslations();
+  const [entries, setEntries] = useState<WaitlistInterface[]>([]);
+  const [total, setTotal] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+
+  const loadEntries = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const result = await WaitlistService.findMany({
+        status: statusFilter === "all" ? undefined : statusFilter,
+        fetchAll: true,
+      });
+      setEntries(result);
+      setTotal(result.length);
+    } catch (error) {
+      errorToast({ error });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [statusFilter]);
+
+  useEffect(() => {
+    loadEntries();
+  }, [loadEntries]);
+
+  const handleInvite = async (entry: WaitlistInterface) => {
+    try {
+      await WaitlistService.invite(entry.id);
+      showToast(t("waitlist.admin.invite_sent", { email: entry.email }));
+      loadEntries();
+    } catch (error) {
+      errorToast({ error });
+    }
+  };
+
+  const columns = useWaitlistTableStructure({ onInvite: handleInvite });
+
+  const table = useReactTable({
+    data: entries,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Users className="h-5 w-5" />
+          <h2 className="text-xl font-semibold">{t("waitlist.admin.title")}</h2>
+          <span className="text-muted-foreground">({t("waitlist.admin.entries_count", { count: total })})</span>
+        </div>
+
+        <div className="flex items-center gap-4">
+          {/* Status Filter */}
+          <Select value={statusFilter} onValueChange={(value) => setStatusFilter(value ?? "all")}>
+            <SelectTrigger className="w-40">
+              <SelectValue placeholder={t("waitlist.admin.filter_placeholder")} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t("waitlist.admin.all_statuses")}</SelectItem>
+              <SelectItem value="pending">{t("waitlist.admin.status.pending")}</SelectItem>
+              <SelectItem value="confirmed">{t("waitlist.admin.status.confirmed")}</SelectItem>
+              <SelectItem value="invited">{t("waitlist.admin.status.invited")}</SelectItem>
+              <SelectItem value="registered">{t("waitlist.admin.status.registered")}</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Refresh Button */}
+          <Button variant="outline" size="icon" onClick={loadEntries} disabled={isLoading}>
+            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
+          </Button>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  {t("waitlist.admin.loading")}
+                </TableCell>
+              </TableRow>
+            ) : entries.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  {t("waitlist.admin.empty")}
+                </TableCell>
+              </TableRow>
+            ) : (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

package/src/features/waitlist/components/lists/index.ts

@@ -0,0 +1 @@
+export * from "./WaitlistList";

package/src/features/waitlist/components/sections/WaitlistConfirmation.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { CheckCircle, Loader2, XCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { buttonVariants, Link } from "../../../../shadcnui";
+import { WaitlistService } from "../../data/WaitlistService";
+
+interface Props {
+  code: string;
+}
+
+type ConfirmationState = "loading" | "success" | "error";
+
+export function WaitlistConfirmation({ code }: Props) {
+  const t = useTranslations();
+  const [state, setState] = useState<ConfirmationState>("loading");
+  const [errorMessage, setErrorMessage] = useState<string>("");
+
+  useEffect(() => {
+    async function confirmEmail() {
+      try {
+        await WaitlistService.confirm(code);
+        setState("success");
+      } catch (error) {
+        setState("error");
+        setErrorMessage(error instanceof Error ? error.message : t("waitlist.confirmation.error_default"));
+      }
+    }
+
+    confirmEmail();
+  }, [code, t]);
+
+  if (state === "loading") {
+    return (
+      <div className="flex flex-col items-center justify-center space-y-4 py-16 text-center">
+        <Loader2 className="text-primary h-12 w-12 animate-spin" />
+        <p className="text-muted-foreground">{t("waitlist.confirmation.loading")}</p>
+      </div>
+    );
+  }
+
+  if (state === "error") {
+    return (
+      <div className="flex flex-col items-center justify-center space-y-4 py-16 text-center">
+        <div className="bg-destructive/10 rounded-full p-4">
+          <XCircle className="text-destructive h-12 w-12" />
+        </div>
+        <h2 className="text-2xl font-bold">{t("waitlist.confirmation.error_title")}</h2>
+        <p className="text-muted-foreground max-w-md">{errorMessage}</p>
+        <Link href="/waitlist" className={buttonVariants({ variant: "outline" })}>
+          {t("waitlist.buttons.return")}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-4 py-16 text-center">
+      <div className="bg-primary/10 rounded-full p-4">
+        <CheckCircle className="text-primary h-12 w-12" />
+      </div>
+      <h2 className="text-2xl font-bold">{t("waitlist.confirmation.success_title")}</h2>
+      <p className="text-muted-foreground max-w-md">{t("waitlist.confirmation.success_description")}</p>
+      <p className="text-muted-foreground text-sm">{t("waitlist.confirmation.success_hint")}</p>
+    </div>
+  );
+}

package/src/features/waitlist/components/sections/WaitlistHeroSection.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { CheckCircle } from "lucide-react";
+import { getWaitlistConfig } from "../../config/waitlist.config";
+import { WaitlistForm } from "../forms/WaitlistForm";
+
+export function WaitlistHeroSection() {
+  const config = getWaitlistConfig();
+
+  return (
+    <section className="relative overflow-hidden py-16 md:py-24">
+      <div className="container mx-auto px-4">
+        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
+          {/* Left Column - Content */}
+          <div className="space-y-8">
+            <div className="space-y-4">
+              {config.heroTitle && (
+                <h1 className="text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">{config.heroTitle}</h1>
+              )}
+              {config.heroSubtitle && (
+                <p className="text-muted-foreground text-xl md:text-2xl">{config.heroSubtitle}</p>
+              )}
+              {config.heroDescription && <p className="text-muted-foreground">{config.heroDescription}</p>}
+            </div>
+
+            {/* Benefits */}
+            {config.benefits && config.benefits.length > 0 && (
+              <ul className="space-y-3">
+                {config.benefits.map((benefit, index) => (
+                  <li key={index} className="flex items-start gap-3">
+                    <CheckCircle className="text-primary mt-0.5 h-5 w-5 shrink-0" />
+                    <span>{benefit}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          {/* Right Column - Form */}
+          <div className="lg:pl-8">
+            <div className="bg-card rounded-lg border p-6 shadow-lg md:p-8">
+              <WaitlistForm />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/features/waitlist/components/sections/WaitlistSuccessState.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { CheckCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+export function WaitlistSuccessState() {
+  const t = useTranslations();
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-4 py-8 text-center">
+      <div className="bg-primary/10 rounded-full p-4">
+        <CheckCircle className="text-primary h-12 w-12" />
+      </div>
+      <h2 className="text-2xl font-bold">{t("waitlist.success.title")}</h2>
+      <p className="text-muted-foreground max-w-md">{t("waitlist.success.description")}</p>
+      <p className="text-muted-foreground text-sm">{t("waitlist.success.hint")}</p>
+    </div>
+  );
+}

package/src/features/waitlist/components/sections/index.ts

@@ -0,0 +1,3 @@
+export * from "./WaitlistHeroSection";
+export * from "./WaitlistSuccessState";
+export * from "./WaitlistConfirmation";

package/src/features/waitlist/config/waitlist.config.ts

@@ -0,0 +1,35 @@
+export type QuestionnaireFieldType = "text" | "textarea" | "select" | "checkbox";
+
+export interface QuestionnaireOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+export interface QuestionnaireField {
+  id: string;
+  type: QuestionnaireFieldType;
+  label: string;
+  description?: string;
+  placeholder?: string;
+  required?: boolean;
+  options?: QuestionnaireOption[];
+}
+
+export interface WaitlistConfig {
+  questionnaire?: QuestionnaireField[];
+  heroTitle?: string;
+  heroSubtitle?: string;
+  heroDescription?: string;
+  benefits?: string[];
+}
+
+let _waitlistConfig: WaitlistConfig = {};
+
+export function configureWaitlist(config: WaitlistConfig): void {
+  _waitlistConfig = config;
+}
+
+export function getWaitlistConfig(): WaitlistConfig {
+  return _waitlistConfig;
+}