create-ailk 0.1.0 → 0.2.0

package/templates/apps/web/app/[locale]/(authed)/account/__tests__/page.test.tsx

@@ -0,0 +1,260 @@
+/**
+ * Tests for /[locale]/account — the respondent's own account page (#4984).
+ *
+ * Covers:
+ *   1. Results + Purchases both render from fixtures; a 404'd experiment key
+ *      is skipped (no throw, no row); a non-skippable error rethrows.
+ *   2. Empty states: no configured experiment keys + `[]` checkouts.
+ *   3. Profile: name, email, verified / unverified badge copy.
+ *   4. SidebarNav carries the three in-page anchors (Profile / Results / Purchases).
+ *   5. Sign-out: `signOut()` then `router.push("/")`.
+ */
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+
+// The global setup mock resolves only top-level namespace keys against
+// en.json; this page reads nested keys (`nav.profile`, `profile.verified`, …)
+// via `t("nav.profile")` — a call shape real next-intl supports — so resolve
+// dotted namespaces AND dotted keys here against the same catalog.
+jest.mock("next-intl/server", () => {
+  const msgs: unknown = require("../../../../../messages/en.json");
+  const dig = (obj: unknown, path: string): unknown =>
+    path.split(".").reduce<unknown>(
+      (acc, k) => (acc !== null && typeof acc === "object" ? (acc as Record<string, unknown>)[k] : undefined),
+      obj,
+    );
+  return {
+    __esModule: true,
+    getTranslations: async (arg: string | { namespace?: string; locale?: string }) => {
+      const ns = typeof arg === "string" ? arg : (arg.namespace ?? "");
+      const messages = dig(msgs, ns);
+      return (key: string): string => {
+        const value = dig(messages, key);
+        return typeof value === "string" ? value : `${ns}.${key}`;
+      };
+    },
+  };
+});
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: jest.fn().mockResolvedValue(new Headers()),
+  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc" }),
+}));
+
+const mockGetSession = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; auth.ts's lazy Better-Auth singleton has no HTTP/DB boundary a unit test of the profile fields can mock without standing up Prisma.
+jest.mock("../../../../../auth", () => ({
+  __esModule: true,
+  auth: { api: { getSession: (...args: unknown[]) => mockGetSession(...args) } },
+}));
+
+const mockSignupMe = jest.fn();
+const mockCheckoutsMe = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  waitlistSignups: { me: (...args: unknown[]) => mockSignupMe(...args) },
+  flowCheckouts: { me: (...args: unknown[]) => mockCheckoutsMe(...args) },
+}));
+
+let mockExperimentKeys: string[] = [];
+// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; account-config.ts is the OSS template's (empty) experiment registry — a pure constant with no external boundary to mock instead, overridden here to exercise the populated path.
+jest.mock("../../../../../lib/account-config", () => ({
+  __esModule: true,
+  get accountExperimentKeys() {
+    return mockExperimentKeys;
+  },
+}));
+
+const mockSignOut = jest.fn();
+jest.mock("better-auth/react", () => ({
+  __esModule: true,
+  createAuthClient: () => ({ signOut: (...args: unknown[]) => mockSignOut(...args) }),
+}));
+
+const mockPush = jest.fn();
+const mockRefresh = jest.fn();
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  useRouter: () => ({ push: mockPush, refresh: mockRefresh }),
+  usePathname: () => "/en/account",
+}));
+
+import Page from "../page";
+
+const SESSION = {
+  user: { id: "user_1", name: "Ada", email: "ada@example.com", emailVerified: true },
+};
+
+const SIGNUP = {
+  experimentKey: "ailk-founder-diagnostic",
+  waitlistKey: "early_bird",
+  completedAt: "2026-09-03T00:00:05.000Z",
+  tier: "hot",
+  score: 12,
+  aeoScore: null,
+  answers: { q3: null },
+};
+
+const NOT_FOUND = {
+  ok: false,
+  status: 404,
+  body: { error: { code: "signup_not_found", message: "Not found" } },
+};
+
+const CHECKOUTS = [
+  {
+    id: "fc_done",
+    flowSlug: "founder-flow",
+    experimentKey: "ailk-founder-diagnostic",
+    offerKey: "pro",
+    status: "completed",
+    amountMinor: 4900,
+    currency: "usd",
+    period: "monthly",
+    completedAt: "2026-09-04T10:00:00.000Z",
+    createdAt: "2026-09-04T09:58:00.000Z",
+  },
+  {
+    id: "fc_open",
+    flowSlug: "founder-flow",
+    experimentKey: "ailk-founder-diagnostic",
+    offerKey: "starter",
+    status: "created",
+    amountMinor: 1900,
+    currency: "usd",
+    period: "monthly",
+    completedAt: null,
+    createdAt: "2026-09-05T08:00:00.000Z",
+  },
+];
+
+async function renderPage(): Promise<void> {
+  const element = await Page({ params: Promise.resolve({ locale: "en" }) });
+  render(element);
+}
+
+beforeEach(() => {
+  mockGetSession.mockReset().mockResolvedValue(SESSION);
+  mockSignupMe.mockReset().mockImplementation(async (key: string) =>
+    key === SIGNUP.experimentKey ? { ok: true, body: SIGNUP } : NOT_FOUND,
+  );
+  mockCheckoutsMe.mockReset().mockResolvedValue({ ok: true, body: CHECKOUTS });
+  mockSignOut.mockReset().mockResolvedValue(undefined);
+  mockPush.mockReset();
+  mockRefresh.mockReset();
+  mockExperimentKeys = ["ailk-founder-diagnostic", "beta-cohort"];
+});
+
+describe("AccountPage — results + purchases", () => {
+  it("renders the signup for a configured key and skips a 404'd key", async () => {
+    await renderPage();
+
+    const results = screen.getByTestId("account-results");
+    const row = within(results).getByTestId("account-result-ailk-founder-diagnostic");
+    expect(within(row).getByText("hot")).toBeInTheDocument();
+    expect(within(row).getByText("early_bird")).toBeInTheDocument();
+    expect(within(results).queryByTestId("account-result-beta-cohort")).not.toBeInTheDocument();
+    expect(within(results).queryByText("beta-cohort")).not.toBeInTheDocument();
+
+    // One read per configured key, each forwarding the caller's cookie.
+    expect(mockSignupMe).toHaveBeenCalledTimes(2);
+    expect(mockSignupMe).toHaveBeenCalledWith("ailk-founder-diagnostic", {
+      headers: { cookie: "session=abc" },
+    });
+    expect(mockSignupMe).toHaveBeenCalledWith("beta-cohort", {
+      headers: { cookie: "session=abc" },
+    });
+  });
+
+  it("renders every checkout, newest-first order preserved, with a formatted amount", async () => {
+    await renderPage();
+
+    const purchases = screen.getByTestId("account-purchases");
+    const done = within(purchases).getByTestId("account-purchase-fc_done");
+    const open = within(purchases).getByTestId("account-purchase-fc_open");
+    expect(done).toBeInTheDocument();
+    expect(open).toBeInTheDocument();
+    expect(within(done).getByText("$49")).toBeInTheDocument();
+    expect(within(done).getByText("completed")).toBeInTheDocument();
+    expect(within(open).getByText("created")).toBeInTheDocument();
+    expect(mockCheckoutsMe).toHaveBeenCalledWith({ headers: { cookie: "session=abc" } });
+  });
+
+  it("rethrows a non-skippable signup error to the route error boundary", async () => {
+    mockSignupMe.mockResolvedValue({
+      ok: false,
+      status: 500,
+      body: { error: { code: "internal_error", message: "Boom" } },
+    });
+    await expect(Page({ params: Promise.resolve({ locale: "en" }) })).rejects.toThrow("Boom");
+  });
+
+  it("treats a 403 email_unverified checkouts read as no purchases, not an error", async () => {
+    mockCheckoutsMe.mockResolvedValue({
+      ok: false,
+      status: 403,
+      body: { error: { code: "email_unverified", message: "Verify first" } },
+    });
+    await renderPage();
+    expect(within(screen.getByTestId("account-purchases")).getByText("No purchases yet")).toBeInTheDocument();
+  });
+});
+
+describe("AccountPage — empty states", () => {
+  it("renders both empty states with no configured keys and no checkouts", async () => {
+    mockExperimentKeys = [];
+    mockCheckoutsMe.mockResolvedValue({ ok: true, body: [] });
+    await renderPage();
+
+    expect(mockSignupMe).not.toHaveBeenCalled();
+    expect(within(screen.getByTestId("account-results")).getByText("No results yet")).toBeInTheDocument();
+    expect(within(screen.getByTestId("account-purchases")).getByText("No purchases yet")).toBeInTheDocument();
+  });
+});
+
+describe("AccountPage — profile", () => {
+  it("shows name, email, and the verified badge", async () => {
+    await renderPage();
+    const profile = screen.getByTestId("account-profile");
+    expect(within(profile).getByTestId("account-profile-name")).toHaveTextContent("Ada");
+    expect(within(profile).getByTestId("account-profile-email")).toHaveTextContent("ada@example.com");
+    expect(within(profile).getByTestId("account-email-status")).toHaveTextContent("Email verified");
+  });
+
+  it("shows the unverified badge for an unverified session", async () => {
+    mockGetSession.mockResolvedValue({
+      user: { ...SESSION.user, emailVerified: false },
+    });
+    await renderPage();
+    expect(within(screen.getByTestId("account-profile")).getByTestId("account-email-status")).toHaveTextContent(
+      "Email not verified",
+    );
+  });
+});
+
+describe("AccountPage — sidebar nav", () => {
+  it("renders the three in-page anchors with their labels", async () => {
+    await renderPage();
+    // AppShell may mount the rail twice (desktop rail + drawer) — assert on
+    // the first instance of each.
+    expect(screen.getAllByTestId("sidebar-nav-item-profile")[0]).toHaveTextContent("Profile");
+    expect(screen.getAllByTestId("sidebar-nav-item-results")[0]).toHaveTextContent("Results");
+    expect(screen.getAllByTestId("sidebar-nav-item-purchases")[0]).toHaveTextContent("Purchases");
+    expect(screen.getAllByTestId("sidebar-nav-item-results")[0]).toHaveAttribute(
+      "href",
+      "/account#results",
+    );
+  });
+});
+
+describe("AccountPage — sign out", () => {
+  it("calls signOut, then pushes home and refreshes", async () => {
+    await renderPage();
+    fireEvent.click(screen.getByTestId("account-sign-out"));
+
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/"));
+    expect(mockSignOut).toHaveBeenCalledTimes(1);
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+    expect(mockSignOut.mock.invocationCallOrder[0]).toBeLessThan(mockPush.mock.invocationCallOrder[0]!);
+  });
+});

package/templates/apps/web/app/[locale]/(authed)/account/page.tsx

@@ -0,0 +1,263 @@
+/**
+ * /[locale]/account — the signed-in respondent's own profile, results, and
+ * purchases (#4984).
+ *
+ * RSC. The `(authed)` layout is the gate — it already resolved a session or
+ * rendered `SignInGate`; this page reads the session again ONLY for the
+ * profile fields (name / email / verified). Every data read goes through
+ * `@working-theory/api-client` with the caller's cookie forwarded
+ * (`../../../../lib/server-api`, D9): `waitlistSignups.me(key)` once per key
+ * in `lib/account-config.ts` (Results) and `flowCheckouts.me()` (Purchases).
+ * A 404 (no signup / no user row for that key) or a 401/403 (session missing,
+ * email unverified — the profile row already says so) is skipped, never
+ * thrown; every other error rethrows to the route error boundary.
+ *
+ * Chrome: `PortalShell` hard-codes its /portal nav and accepts only
+ * `siteName` + `children`, so this composes `AppShell` + `SidebarNav`
+ * directly — the same structure PortalShell itself uses — with this page's
+ * own three in-page anchors. The page renders inside the locale layout
+ * (which owns the marketing Nav/Footer) — the operator's decision; there is
+ * no second MarketingShell here.
+ */
+
+import {
+  flowCheckouts,
+  waitlistSignups,
+  type FlowCheckoutMeItem,
+  type WaitlistSignupMeResponse,
+} from "@working-theory/api-client";
+import { AppShell } from "@working-theory/templates/shells";
+import { localeHref } from "@working-theory/ui";
+import { DescriptionList } from "@working-theory/ui/blocks";
+import { SidebarNav, type SidebarNavItem } from "@working-theory/ui/chrome";
+import {
+  Badge,
+  EmptyState,
+  Heading,
+  MoneyAmount,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Text,
+} from "@working-theory/ui/primitives";
+import { ClipboardList, Receipt, UserRound } from "lucide-react";
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { auth } from "../../../../auth";
+import { accountExperimentKeys } from "../../../../lib/account-config";
+import { forwardedCookieInit, unwrapApiResult } from "../../../../lib/server-api";
+import { ForbiddenState } from "../waitlist/components/ForbiddenState";
+import { formatCount, formatDateTime } from "../waitlist/format";
+
+import { SignOutButton } from "./sign-out-button";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  return { title: t("title"), description: t("description") };
+}
+
+/**
+ * Statuses that mean "nothing to show for this caller" rather than "the read
+ * failed": 404 (no signup for that experiment / no user row), 401/403 (no
+ * session or email unverified — the profile section already renders the
+ * unverified badge, so no second error surface is needed).
+ */
+const SKIPPED_STATUSES = new Set([401, 403, 404]);
+
+type CookieInit = Awaited<ReturnType<typeof forwardedCookieInit>>;
+
+/** One `waitlistSignups.me` per configured key; skipped keys drop out. */
+async function readSignups(init: CookieInit): Promise<WaitlistSignupMeResponse[]> {
+  const results = await Promise.all(
+    accountExperimentKeys.map(async (key) => {
+      const res = await waitlistSignups.me(key, init);
+      if (!res.ok && SKIPPED_STATUSES.has(res.status)) return null;
+      return unwrapApiResult(Promise.resolve(res));
+    }),
+  );
+  return results.filter((r): r is WaitlistSignupMeResponse => r !== null);
+}
+
+async function readCheckouts(init: CookieInit): Promise<FlowCheckoutMeItem[]> {
+  const res = await flowCheckouts.me(init);
+  if (!res.ok && SKIPPED_STATUSES.has(res.status)) return [];
+  return unwrapApiResult(Promise.resolve(res));
+}
+
+export default async function AccountPage({ params }: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  if (!session) {
+    // Unreachable behind the (authed) layout's gate; rendered rather than
+    // thrown so a race (session expired between layout and page) degrades
+    // to the dashboard's shared 401/403 shape instead of an error boundary.
+    const tCommon = await getTranslations({ locale, namespace: "waitlistDashboard.common" });
+    return (
+      <ForbiddenState
+        headline={tCommon("forbiddenHeadline")}
+        description={tCommon("forbiddenDescription")}
+      />
+    );
+  }
+
+  const init = await forwardedCookieInit();
+  const [signups, checkouts] = await Promise.all([readSignups(init), readCheckouts(init)]);
+
+  const { name, email, emailVerified } = session.user;
+  const displayName = name || email;
+  const siteName = process.env.NEXT_PUBLIC_SITE_NAME ?? "AI Launch Kit";
+  const unavailable = t("results.unavailable");
+
+  const navItems: SidebarNavItem[] = [
+    { labelKey: "profile", label: t("nav.profile"), path: "/account#profile", icon: UserRound },
+    { labelKey: "results", label: t("nav.results"), path: "/account#results", icon: ClipboardList },
+    { labelKey: "purchases", label: t("nav.purchases"), path: "/account#purchases", icon: Receipt },
+  ];
+
+  const sidebar = (
+    <SidebarNav
+      locale={locale}
+      navItems={navItems}
+      activePath={localeHref(locale, "/account")}
+      logo={<span className="text-sm font-semibold text-brand">{siteName}</span>}
+      user={{ name: displayName }}
+    />
+  );
+
+  return (
+    <AppShell sidebar={sidebar} title={siteName}>
+      <div className="flex flex-col gap-10" data-testid="account-page">
+        <div>
+          <Heading level={1}>{t("title")}</Heading>
+          <Text as="p" variant="body-sm" tone="muted" className="mt-1">
+            {t("description")}
+          </Text>
+        </div>
+
+        <section id="profile" className="flex flex-col gap-4" data-testid="account-profile">
+          <Heading level={2}>{t("profile.heading")}</Heading>
+          <DescriptionList
+            items={[
+              {
+                label: t("profile.name"),
+                value: name || t("profile.unavailable"),
+                "data-testid": "account-profile-name",
+              },
+              {
+                label: t("profile.email"),
+                value: (
+                  <span className="inline-flex flex-wrap items-center gap-2">
+                    <span data-testid="account-profile-email">{email}</span>
+                    <Badge
+                      variant={emailVerified ? "success" : "warning"}
+                      size="sm"
+                      role="status"
+                      data-testid="account-email-status"
+                    >
+                      {emailVerified ? t("profile.verified") : t("profile.unverified")}
+                    </Badge>
+                  </span>
+                ),
+              },
+            ]}
+          />
+          <div>
+            <SignOutButton label={t("profile.signOut")} homeHref={localeHref(locale, "/")} />
+          </div>
+        </section>
+
+        <section id="results" className="flex flex-col gap-4" data-testid="account-results">
+          <Heading level={2}>{t("results.heading")}</Heading>
+          {signups.length === 0 ? (
+            <EmptyState
+              headline={t("results.emptyHeadline")}
+              description={t("results.emptyDescription")}
+            />
+          ) : (
+            <Table data-testid="account-results-table">
+              <TableHeader>
+                <TableRow>
+                  <TableHead scope="col">{t("results.experiment")}</TableHead>
+                  <TableHead scope="col">{t("results.waitlist")}</TableHead>
+                  <TableHead scope="col">{t("results.tier")}</TableHead>
+                  <TableHead scope="col">{t("results.score")}</TableHead>
+                  <TableHead scope="col">{t("results.completedAt")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {signups.map((signup) => (
+                  <TableRow
+                    key={signup.experimentKey}
+                    data-testid={`account-result-${signup.experimentKey}`}
+                  >
+                    <TableCell>{signup.experimentKey}</TableCell>
+                    <TableCell>{signup.waitlistKey}</TableCell>
+                    <TableCell>{signup.tier ?? unavailable}</TableCell>
+                    <TableCell>
+                      {signup.score === null ? unavailable : formatCount(signup.score, locale)}
+                    </TableCell>
+                    <TableCell>{formatDateTime(signup.completedAt, locale)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </section>
+
+        <section id="purchases" className="flex flex-col gap-4" data-testid="account-purchases">
+          <Heading level={2}>{t("purchases.heading")}</Heading>
+          {checkouts.length === 0 ? (
+            <EmptyState
+              headline={t("purchases.emptyHeadline")}
+              description={t("purchases.emptyDescription")}
+            />
+          ) : (
+            <Table data-testid="account-purchases-table">
+              <TableHeader>
+                <TableRow>
+                  <TableHead scope="col">{t("purchases.offer")}</TableHead>
+                  <TableHead scope="col">{t("purchases.status")}</TableHead>
+                  <TableHead scope="col">{t("purchases.amount")}</TableHead>
+                  <TableHead scope="col">{t("purchases.period")}</TableHead>
+                  <TableHead scope="col">{t("purchases.date")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {checkouts.map((checkout) => (
+                  <TableRow key={checkout.id} data-testid={`account-purchase-${checkout.id}`}>
+                    <TableCell>{checkout.offerKey}</TableCell>
+                    <TableCell>{checkout.status}</TableCell>
+                    <TableCell>
+                      <MoneyAmount
+                        amountMinor={checkout.amountMinor}
+                        currency={checkout.currency}
+                        locale={locale}
+                      />
+                    </TableCell>
+                    <TableCell>{checkout.period}</TableCell>
+                    <TableCell>
+                      {formatDateTime(checkout.completedAt ?? checkout.createdAt, locale)}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </section>
+      </div>
+    </AppShell>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/sign-out-button.tsx

@@ -0,0 +1,39 @@
+"use client"; // sign-out is a client-side Better Auth call + router navigation
+
+/**
+ * SignOutButton — the /account profile section's sign-out control (#4984).
+ *
+ * `createAuthClient()` at module scope is the `sign-in-gate.tsx` idiom. On
+ * click: end the session, then navigate home and refresh so every RSC under
+ * the `(authed)` gate re-reads the (now absent) session.
+ */
+
+import { Button } from "@working-theory/ui/primitives";
+import { createAuthClient } from "better-auth/react";
+import { useRouter } from "next/navigation";
+import type { ReactElement } from "react";
+
+const authClient = createAuthClient();
+
+export interface SignOutButtonProps {
+  /** Visible button label (`account.profile.signOut`). */
+  label: string;
+  /** Where to land after sign-out — `localeHref(locale, "/")`. */
+  homeHref: string;
+}
+
+export function SignOutButton({ label, homeHref }: SignOutButtonProps): ReactElement {
+  const router = useRouter();
+  const onSignOut = (): void => {
+    void (async () => {
+      await authClient.signOut();
+      router.push(homeHref);
+      router.refresh();
+    })();
+  };
+  return (
+    <Button variant="outline" onClick={onSignOut} data-testid="account-sign-out">
+      {label}
+    </Button>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/layout.tsx

@@ -0,0 +1,54 @@
+/**
+ * (authed) segment layout — the operator-dashboard session guard (#4665 D9).
+ *
+ * RSC: reads the active Better Auth session via `auth.api.getSession`
+ * (mirrors `apps-paid/workspace/app/(authed)/layout.tsx`). With no session it
+ * renders `SignInGate` — the dashboard's own front door — rather than
+ * redirecting (a `redirect("/sign-in")` would render the visitor's requested
+ * path only as a query param; rendering the gate in place keeps the URL, and
+ * the gate itself links to `/sign-in?next=<path>` for the full sign-in
+ * surface — #4984). This guard reads no public-route auth-requirement flag
+ * (spec Clarifications) — that flag governs whether PUBLIC marketing routes
+ * redirect; tenant signup data is never public, so this gate always applies.
+ */
+
+import { localeHref } from "@working-theory/ui";
+import { headers } from "next/headers";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement, ReactNode } from "react";
+
+import { auth } from "../../../auth";
+
+import { SignInGate } from "./sign-in-gate";
+
+interface Props {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}
+
+export default async function AuthedLayout({
+  children,
+  params,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  if (!session) {
+    const t = await getTranslations({
+      locale,
+      namespace: "waitlistDashboard.gate",
+    });
+    return (
+      <SignInGate
+        labels={{
+          emptyHeadline: t("emptyHeadline"),
+          emptyDescription: t("emptyDescription"),
+          signInLinkLabel: t("signInLink"),
+        }}
+        signInPath={localeHref(locale, "/sign-in")}
+      />
+    );
+  }
+
+  return <>{children}</>;
+}