@xk2800/nextjs-template 0.7.1-beta.6 → 0.7.1-beta.8

package/README.md

@@ -34,24 +34,24 @@ UPDATE "user" SET roles = 'admin' WHERE email = 'you@example.com';
 
 - **Auth:** email/password, Google OAuth, Google One Tap, passkeys, TOTP 2FA with backup codes, password reset, email verification
 - **Security:** new-device email alerts, per-device sign-in/sign-up throttle, active-session revocation, self-serve account deletion, cookie-consent banner with an admin consent-mode switch
-- **Admin:** user management (roles, bans, bulk actions, CSV export), impersonation, system-wide activity log, device-security cards, live auth toggles, maintenance mode
+- **Admin:** user management (roles, bans, bulk actions, CSV export), impersonation, system-wide activity log, device-security cards, live auth toggles, maintenance mode, marketing email via Resend Broadcasts with user self opt-in (Beta)
 - **Ops:** `bun run doctor`, Docker image, Doppler support, separate env files for dev, prod and test
 
 ## Docs
 
-| Topic | |
-|---|---|
-| Every env var, env vs. admin settings, Doppler | [Configuration](docs/content/configuration.mdx) |
-| Folder layout, request flow, adding protected pages/routes | [Architecture](docs/content/architecture.mdx) |
-| Tables, column gotchas, migrations | [Database](docs/content/database.mdx) |
-| Providers, sessions, helpers, client usage | [Authentication](docs/content/authentication.mdx) |
-| 2FA, passkeys, device alerts, throttle, cookie consent | [Security Features](docs/content/security.mdx) |
-| Admin dashboard, impersonation, maintenance mode | [Admin & Maintenance](docs/content/admin.mdx) |
-| Every route, body and guard | [API Reference](docs/content/api.mdx) |
-| UI, auth, dashboard and email components | [Components](docs/content/components.mdx) |
-| Installing the npm package | [Using as a Package](docs/content/npm-package.mdx) |
-| Production checklist, migrations, Docker | [Deployment](docs/content/deployment.mdx) |
-| Common errors and fixes | [Troubleshooting](docs/content/troubleshooting.mdx) |
+| Topic                                                      |                                                     |
+| ---------------------------------------------------------- | --------------------------------------------------- |
+| Every env var, env vs. admin settings, Doppler             | [Configuration](docs/content/configuration.mdx)     |
+| Folder layout, request flow, adding protected pages/routes | [Architecture](docs/content/architecture.mdx)       |
+| Tables, column gotchas, migrations                         | [Database](docs/content/database.mdx)               |
+| Providers, sessions, helpers, client usage                 | [Authentication](docs/content/authentication.mdx)   |
+| 2FA, passkeys, device alerts, throttle, cookie consent     | [Security Features](docs/content/security.mdx)      |
+| Admin dashboard, impersonation, maintenance mode           | [Admin & Maintenance](docs/content/admin.mdx)       |
+| Every route, body and guard                                | [API Reference](docs/content/api.mdx)               |
+| UI, auth, dashboard and email components                   | [Components](docs/content/components.mdx)           |
+| Installing the npm package                                 | [Using as a Package](docs/content/npm-package.mdx)  |
+| Production checklist, migrations, Docker                   | [Deployment](docs/content/deployment.mdx)           |
+| Common errors and fixes                                    | [Troubleshooting](docs/content/troubleshooting.mdx) |
 
 ## Using as a package
 
@@ -63,7 +63,7 @@ bun add @xk2800/nextjs-template
 
 ```ts
 // next.config.ts — components ship as raw .tsx
-const nextConfig = { transpilePackages: ["@xk2800/nextjs-template"] }
+const nextConfig = { transpilePackages: ["@xk2800/nextjs-template"] };
 ```
 
 ```css
@@ -75,25 +75,27 @@ const nextConfig = { transpilePackages: ["@xk2800/nextjs-template"] }
 
 ```ts
 // app/api/auth/[...all]/route.ts
-import { auth } from "@xk2800/nextjs-template/auth"
-import { toNextJsHandler } from "better-auth/next-js"
-export const { GET, POST } = toNextJsHandler(auth)
+import { auth } from "@xk2800/nextjs-template/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+export const { GET, POST } = toNextJsHandler(auth);
 ```
 
 Peer dependencies, the full import list, migrations, adding providers and One Tap are covered in **[Using as a Package](docs/content/npm-package.mdx)**.
 
 ## Common scripts
 
-| | |
-|---|---|
-| `bun dev` | Dev server |
-| `bun run doctor` | Check env, auth secret, DB connection and pending migrations |
-| `bun update @xk2800/nextjs-template` | Pull template updates (then `bun run generate`) |
-| `bun run generate` | Generate a migration from `server/db/schema.ts` |
-| `bun run migrate:dev` / `:prod` / `:test` | Apply migrations |
-| `bun run studio:dev` | Drizzle Studio |
-| `bun run test` | Unit tests |
-| `bun run storybook` | Storybook for every component (mock data, no DB needed) |
-| `bun run *:doppler` | Any of the above with secrets from Doppler |
+|                                           |                                                              |
+| ----------------------------------------- | ------------------------------------------------------------ |
+| `bun dev`                                 | Dev server                                                   |
+| `bun run doctor`                          | Check env, auth secret, DB connection and pending migrations |
+| `bun update @xk2800/nextjs-template`      | Pull template updates (then `bun run generate`)              |
+| `bun run generate`                        | Generate a migration from `server/db/schema.ts`              |
+| `bun run migrate:dev` / `:prod` / `:test` | Apply migrations                                             |
+| `bun run studio:dev`                      | Drizzle Studio                                               |
+| `bun run test`                            | Unit tests                                                   |
+| `bun run storybook`                       | Storybook for every component (mock data, no DB needed)      |
+| `bun run *:doppler`                       | Any of the above with secrets from Doppler                   |
 
 **Working on the template itself:** clone this repo, copy `.env.development.example` to `.env.development`, then run `bun install`. Publishing steps are in [PUBLISHING.md](PUBLISHING.md).
+
+test

package/components/dashboard/admin/broadcastActions.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Button } from "../../ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../ui/dialog"
+import ConfirmSendDialog from "./confirmSendDialog"
+
+interface Preview {
+  subject: string | null
+  from: string | null
+  previewText: string | null
+  html: string | null
+  text: string | null
+}
+
+export default function BroadcastActions({ id, name, status }: { id: string; name: string; status: string }) {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [preview, setPreview] = useState<Preview | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [sending, setSending] = useState(false)
+  const [confirming, setConfirming] = useState(false)
+
+  const openPreview = async () => {
+    setOpen(true)
+    if (preview) return
+    setLoading(true)
+    try {
+      const response = await fetch(`/api/admin/marketing/${id}`)
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || "Failed to load preview")
+      setPreview(data)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to load preview")
+      setOpen(false)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const send = async () => {
+    setSending(true)
+    try {
+      const response = await fetch(`/api/admin/marketing/${id}`, { method: "POST" })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || "Failed to send broadcast")
+      toast.success("Broadcast sent")
+      setOpen(false)
+      router.refresh()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to send broadcast")
+    } finally {
+      setSending(false)
+    }
+  }
+
+  // Resend has no push for broadcast status, so poll while it's queued and
+  // refresh the list once it moves on (e.g. to "sent").
+  // ponytail: stops after ~5 min; a broadcast scheduled for later stays
+  // "queued" until it goes out, so it's not worth polling that long.
+  useEffect(() => {
+    if (status !== "queued") return
+    let tries = 0
+    const timer = setInterval(async () => {
+      if (++tries > 100) return clearInterval(timer)
+      try {
+        const response = await fetch(`/api/admin/marketing/${id}`)
+        if (!response.ok) return
+        const data = await response.json()
+        if (data.status !== "queued") {
+          clearInterval(timer)
+          router.refresh()
+        }
+      } catch {
+        // network blip, try again next tick
+      }
+    }, 3000)
+    return () => clearInterval(timer)
+  }, [id, status, router])
+
+  const isDraft = status === "draft"
+
+  return (
+    <>
+      {status === "queued" && (
+        <span className="flex items-center gap-1.5 text-xs">
+          <span className="size-2 animate-pulse rounded-full bg-amber-500" />
+          Sending…
+        </span>
+      )}
+      <Button size="sm" variant="outline" onClick={openPreview}>Preview</Button>
+      {isDraft && (
+        <Button size="sm" disabled={sending} onClick={() => setConfirming(true)}>
+          {sending ? "Sending…" : "Send"}
+        </Button>
+      )}
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{preview?.subject || name}</DialogTitle>
+            <DialogDescription>
+              {preview ? `From ${preview.from ?? "—"}${preview.previewText ? ` · ${preview.previewText}` : ""}` : "Loading…"}
+            </DialogDescription>
+          </DialogHeader>
+          {loading ? (
+            <div className="h-[60vh] animate-pulse rounded-md bg-muted" />
+          ) : preview?.html ? (
+            // sandbox="" — no scripts, no navigation out of the frame
+            <iframe
+              title="Email preview"
+              sandbox=""
+              srcDoc={preview.html}
+              className="h-[60vh] w-full rounded-md border bg-white"
+            />
+          ) : (
+            <pre className="h-[60vh] overflow-auto whitespace-pre-wrap rounded-md border p-4 text-sm">
+              {preview?.text ?? ""}
+            </pre>
+          )}
+          {isDraft && (
+            <div className="flex justify-end">
+              <Button disabled={sending || loading} onClick={() => setConfirming(true)}>
+                {sending ? "Sending…" : "Send now"}
+              </Button>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmSendDialog
+        open={confirming}
+        onOpenChange={setConfirming}
+        subject={preview?.subject || name}
+        audience="its segment"
+        onConfirm={send}
+      />
+    </>
+  )
+}

package/components/dashboard/admin/confirmSendDialog.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../ui/alert-dialog"
+
+export default function ConfirmSendDialog({
+  open,
+  onOpenChange,
+  subject,
+  audience,
+  onConfirm,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  subject: string
+  audience: string
+  onConfirm: () => void
+}) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Send this broadcast?</AlertDialogTitle>
+          <AlertDialogDescription>
+            &ldquo;{subject}&rdquo; goes to every subscribed contact in {audience} right away.
+            This can&apos;t be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>Send now</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/components/dashboard/admin/marketingEmailForm.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Input } from "../../ui/input"
+import { Label } from "../../ui/label"
+import { Textarea } from "../../ui/textarea"
+import { Button } from "../../ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select"
+import ConfirmSendDialog from "./confirmSendDialog"
+
+export default function MarketingEmailForm({ segments }: { segments: { id: string; name: string }[] }) {
+  const router = useRouter()
+  const [segmentId, setSegmentId] = useState(segments[0]?.id ?? "")
+  const [subject, setSubject] = useState("")
+  const [previewText, setPreviewText] = useState("")
+  const [body, setBody] = useState("")
+  const [pending, setPending] = useState<"draft" | "send" | null>(null)
+
+  const [confirming, setConfirming] = useState(false)
+  const segmentName = segments.find((s) => s.id === segmentId)?.name ?? "this segment"
+
+  const submit = async (send: boolean) => {
+    setPending(send ? "send" : "draft")
+    try {
+      const response = await fetch("/api/admin/marketing", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ segmentId, subject, previewText, body, send }),
+      })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || "Failed to create broadcast")
+
+      toast.success(send ? "Broadcast sent" : "Draft saved in Resend")
+      setSubject("")
+      setPreviewText("")
+      setBody("")
+      router.refresh()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to create broadcast")
+    } finally {
+      setPending(null)
+    }
+  }
+
+  if (segments.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>No segments yet</CardTitle>
+          <CardDescription>
+            Create a segment and add contacts in the Resend dashboard (Audience), then reload this page.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    )
+  }
+
+  const canSubmit = !!segmentId && !!subject.trim() && !!body.trim() && !pending
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>New broadcast</CardTitle>
+        <CardDescription>
+          Plain text. Blank lines start a new paragraph. An unsubscribe link is added automatically.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="segment">Segment</Label>
+          <Select value={segmentId} onValueChange={setSegmentId}>
+            <SelectTrigger id="segment" className="w-full">
+              <SelectValue placeholder="Choose a segment" />
+            </SelectTrigger>
+            <SelectContent>
+              {segments.map((s) => (
+                <SelectItem key={s.id} value={s.id}>{s.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="subject">Subject</Label>
+          <Input id="subject" value={subject} maxLength={200} onChange={(e) => setSubject(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="preview">Preview text (optional)</Label>
+          <Input id="preview" value={previewText} maxLength={200} onChange={(e) => setPreviewText(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="body">Message</Label>
+          <Textarea id="body" rows={12} value={body} onChange={(e) => setBody(e.target.value)} />
+        </div>
+        <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+          <Button variant="outline" disabled={!canSubmit} onClick={() => submit(false)}>
+            {pending === "draft" ? "Saving…" : "Save as draft"}
+          </Button>
+          <Button disabled={!canSubmit} onClick={() => setConfirming(true)}>
+            {pending === "send" ? "Sending…" : "Send now"}
+          </Button>
+        </div>
+        <ConfirmSendDialog
+          open={confirming}
+          onOpenChange={setConfirming}
+          subject={subject}
+          audience={`"${segmentName}"`}
+          onConfirm={() => submit(true)}
+        />
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/admin/marketingSection.tsx

@@ -0,0 +1,67 @@
+import { Suspense } from "react"
+import { getMarketingOverview } from "@xk2800/nextjs-template/marketing"
+import { formatDateTime } from "@xk2800/nextjs-template/lib/formatters"
+import { Skeleton } from "../../ui/skeleton"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Badge } from "../../ui/badge"
+import MarketingEmailForm from "./marketingEmailForm"
+import BroadcastActions from "./broadcastActions"
+import SubscribersCard from "./subscribersCard"
+
+// Admin marketing email page body: compose form, recent broadcasts and
+// subscribers. `segmentId` picks the Subscribers segment (e.g. from
+// ?segment=); unknown or missing falls back to the first segment.
+export default async function MarketingSection({ segmentId }: { segmentId?: string }) {
+  const { segments, broadcasts, error } = await getMarketingOverview()
+
+  if (error) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Resend isn&apos;t reachable</CardTitle>
+          <CardDescription>
+            {error} Broadcasts need a <strong>full access</strong> API key (a sending-only key can&apos;t list segments).
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <MarketingEmailForm segments={segments} />
+
+      {broadcasts.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent broadcasts</CardTitle>
+            <CardDescription>Open, click and unsubscribe stats are in the Resend dashboard</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="divide-y">
+              {broadcasts.map((b) => (
+                <li key={b.id} className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 py-2 text-sm">
+                  <span className="truncate">{b.name || "(untitled)"}</span>
+                  <span className="flex shrink-0 items-center gap-2 text-muted-foreground">
+                    {formatDateTime(b.sent_at ?? b.created_at)}
+                    <Badge variant={b.status === "sent" ? "default" : "secondary"}>{b.status}</Badge>
+                    <BroadcastActions id={b.id} name={b.name || "(untitled)"} status={b.status} />
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      )}
+
+      {segments.length > 0 && (
+        <Suspense fallback={<Skeleton className="h-48 w-full" />}>
+          <SubscribersCard
+            segments={segments}
+            segmentId={segments.some((s) => s.id === segmentId) ? segmentId! : segments[0].id}
+          />
+        </Suspense>
+      )}
+    </div>
+  )
+}

package/components/dashboard/admin/subscribersCard.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link"
+import { listSegmentContacts, SEGMENT_CONTACTS_LIMIT as LIMIT, type MarketingSegment } from "@xk2800/nextjs-template/marketing"
+import { formatDateTime } from "@xk2800/nextjs-template/lib/formatters"
+import { Button } from "../../ui/button"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Badge } from "../../ui/badge"
+
+export default async function SubscribersCard({
+  segments,
+  segmentId,
+}: {
+  segments: MarketingSegment[]
+  segmentId: string
+}) {
+  const { contacts, hasMore, error } = await listSegmentContacts(segmentId)
+  const subscribed = contacts.filter((c) => !c.unsubscribed).length
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Subscribers</CardTitle>
+        <CardDescription>
+          {error
+            ? `Couldn't load contacts: ${error}`
+            : `${subscribed} subscribed, ${contacts.length - subscribed} unsubscribed${hasMore ?` (first ${LIMIT} shown)` : ""}. Add or import contacts in Resend → Audience.`}
+        </CardDescription>
+        {segments.length > 1 && (
+          <div className="flex flex-wrap gap-2 pt-2">
+            {segments.map((s) => (
+              <Button key={s.id} asChild size="sm" variant={s.id === segmentId ? "default" : "outline"}>
+                <Link href={`?segment=${s.id}`} scroll={false}>{s.name}</Link>
+              </Button>
+            ))}
+          </div>
+        )}
+      </CardHeader>
+      {contacts.length > 0 && (
+        <CardContent>
+          <ul className="divide-y">
+            {contacts.map((c) => {
+              const name = [c.first_name, c.last_name].filter(Boolean).join(" ")
+              return (
+                <li key={c.id} className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-2 text-sm">
+                  <span className="min-w-0 truncate">
+                    {c.email}
+                    {name && <span className="text-muted-foreground"> · {name}</span>}
+                  </span>
+                  <span className="flex shrink-0 items-center gap-2 text-muted-foreground">
+                    {formatDateTime(c.created_at)}
+                    <Badge variant={c.unsubscribed ? "secondary" : "default"}>
+                      {c.unsubscribed ? "unsubscribed" : "subscribed"}
+                    </Badge>
+                  </span>
+                </li>
+              )
+            })}
+          </ul>
+        </CardContent>
+      )}
+    </Card>
+  )
+}

package/components/dashboard/marketingUpdatesCard.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useState } from "react"
+import { toast } from "sonner"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card"
+import { Switch } from "../ui/switch"
+import { Label } from "../ui/label"
+
+export default function MarketingUpdatesCard({
+  initialSubscribed,
+  emailVerified,
+}: {
+  initialSubscribed: boolean
+  emailVerified: boolean
+}) {
+  const [subscribed, setSubscribed] = useState(initialSubscribed)
+  const [saving, setSaving] = useState(false)
+
+  const toggle = async (next: boolean) => {
+    setSaving(true)
+    try {
+      const response = await fetch("/api/marketing/subscription", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ subscribed: next }),
+      })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || "Failed to update subscription")
+      setSubscribed(next)
+      toast.success(next ? "Subscribed to product updates" : "Unsubscribed from product updates")
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to update subscription")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Email updates</CardTitle>
+        <CardDescription>
+          Occasional news about new features. You can turn this off here or with the link in any email.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div className="flex items-center justify-between gap-4">
+          <Label htmlFor="marketing-updates">Send me product updates</Label>
+          <Switch
+            id="marketing-updates"
+            checked={subscribed}
+            disabled={saving || (!subscribed && !emailVerified)}
+            onCheckedChange={toggle}
+          />
+        </div>
+        {!subscribed && !emailVerified && (
+          <p className="text-sm text-muted-foreground">Verify your email address to subscribe.</p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/marketingUpdatesSection.tsx

@@ -0,0 +1,10 @@
+import { isSubscribed, MARKETING_SEGMENT_ID } from "@xk2800/nextjs-template/marketing"
+import MarketingUpdatesCard from "./marketingUpdatesCard"
+
+// Dashboard opt-in for product updates. Renders nothing until
+// RESEND_MARKETING_SEGMENT_ID is set.
+export default async function MarketingUpdatesSection({ email, emailVerified }: { email: string; emailVerified: boolean }) {
+  if (!MARKETING_SEGMENT_ID) return null
+  const subscribed = await isSubscribed(email)
+  return <MarketingUpdatesCard initialSubscribed={subscribed} emailVerified={emailVerified} />
+}