create-ailk 0.19.0 → 0.20.0

package/templates/apps/web/app/[locale]/(authed)/account/agreements-actions.ts

@@ -0,0 +1,170 @@
+"use server";
+
+/**
+ * account/agreements-actions.ts — the account home's carried
+ * sign-up-agreement CONSUME step (#8438 D13, spec
+ * docs/specs/8438-consent-registry-and-ledger-step-spec.md C6).
+ *
+ * `apps/web` never touches the database (the ledger writer is `apps/api`),
+ * and Better Auth creates the user from the sign-up card before any Person
+ * exists to record a grant against. So the card remembers which agreements
+ * the person ticked, in a short-lived, signed, email-bound cookie — this
+ * file's `acceptCarriedAgreementsAction`, called once on the account home's
+ * first signed-in render (`agreements-prompt.tsx`), decodes it and writes
+ * each missing agreement with `via: "sign_up"`, then deletes the cookie
+ * either way (single-use).
+ *
+ * The MINT side, `rememberSignUpAgreementsAction`, lives in
+ * `(auth)/sign-up/sign-up.actions.ts` instead of here, deliberately:
+ * `(auth)/**` is one of the sign-in SEEDS a sign-in-less spoke drops
+ * (`SPOKE_REMOVAL_SEEDS`, `packages/create-ailk/src/topology.ts` D4), and
+ * `agreements-prompt.tsx` — this directory's own file, not a sign-in path —
+ * must never reach into a dropped seed, or the scaffolder's own
+ * dangling-import check (`spokeExclusions`) refuses the spoke build. So the
+ * two sides duplicate the small cookie codec (encode there, decode here)
+ * rather than share a module, precisely so each side's dependencies stay
+ * native to where it lives.
+ *
+ * Kept as its OWN file, separate from this directory's `actions.ts`
+ * (Billing's `openBillingPortal`): that file imports `billing-source.ts`,
+ * which pulls in `account-data.ts`, `@working-theory/ui` and
+ * `lucide-react` — a far heavier footprint than this small, self-contained
+ * cookie codec needs. Keeping it apart means a test (or a bundler) that
+ * reaches this file touches nothing from that tree.
+ *
+ * Cookie value: `<id>@<version>,…|<issuedAtMs>|<sha256(lowercased email)>|
+ * <HMAC-SHA256 over the rest>`, keyed by `BETTER_AUTH_SECRET` — the same
+ * dev fallback `apps/web/auth.ts`'s own `resolveSecret()` publishes when it
+ * is unset. That secret is read directly HERE rather than importing
+ * `resolveSecret` from `auth.ts`: that module statically imports the
+ * ESM-only `better-auth` package, which every broad page-level test suite
+ * that renders the account area would then have to mock. Verified with a
+ * constant-time comparison; never trusted without it.
+ */
+
+import { createHash, createHmac, timingSafeEqual } from "node:crypto";
+
+import { member } from "@working-theory/api-client";
+import { cookies, headers } from "next/headers";
+
+import { forwardedCookieInit } from "../../../../lib/server-api";
+import { readSession } from "../../../../lib/topology.generated";
+
+const SECURE_COOKIE_NAME = "__Host-ailk-signup-agreements";
+const DEV_COOKIE_NAME = "ailk-signup-agreements";
+const MAX_AGE_MS = 60 * 60 * 1000;
+
+/** Mirrors `sign-up.actions.ts`'s own copy — see that file's header. */
+const DEV_FALLBACK_SECRET =
+  "ailk-dev-fallback-secret-published-in-this-repo-never-use-in-production";
+
+/** Mirrors `sign-up.actions.ts`'s own copy exactly — see that file's header. */
+function signUpAgreementsSecret(): string {
+  const configured = process.env.BETTER_AUTH_SECRET;
+  if (configured) return configured;
+  const isBuildPhase = process.env.NEXT_PHASE === "phase-production-build";
+  if (process.env.NODE_ENV === "production" && !isBuildPhase) {
+    throw new Error(
+      "BETTER_AUTH_SECRET is required in production: it verifies the carried sign-up-agreement cookie.",
+    );
+  }
+  return DEV_FALLBACK_SECRET;
+}
+
+function cookieName(): string {
+  return process.env.NODE_ENV === "production" ? SECURE_COOKIE_NAME : DEV_COOKIE_NAME;
+}
+
+function emailHash(email: string): string {
+  return createHash("sha256").update(email.trim().toLowerCase()).digest("hex");
+}
+
+function sign(payload: string): string {
+  return createHmac("sha256", signUpAgreementsSecret()).update(payload).digest("hex");
+}
+
+/** Constant-time string equality — never a `===` on attacker-reachable input. */
+function safeEqual(a: string, b: string): boolean {
+  const bufA = Buffer.from(a);
+  const bufB = Buffer.from(b);
+  return bufA.length === bufB.length && timingSafeEqual(bufA, bufB);
+}
+
+interface CarriedPurpose {
+  id: string;
+  version: number;
+}
+
+interface DecodedCarriedAgreements {
+  purposes: CarriedPurpose[];
+  emailHash: string;
+}
+
+/** Verifies the HMAC and the one-hour window; `null` on any failure. */
+function decodeCarriedAgreements(value: string): DecodedCarriedAgreements | null {
+  const parts = value.split("|");
+  if (parts.length !== 4) return null;
+  const [purposesPart, issuedAtPart, emailHashPart, signature] = parts as [
+    string,
+    string,
+    string,
+    string,
+  ];
+  if (!safeEqual(sign(`${purposesPart}|${issuedAtPart}|${emailHashPart}`), signature)) {
+    return null;
+  }
+
+  const issuedAtMs = Number(issuedAtPart);
+  if (!Number.isFinite(issuedAtMs) || Date.now() - issuedAtMs > MAX_AGE_MS) return null;
+
+  const purposes: CarriedPurpose[] = [];
+  for (const entry of purposesPart.split(",")) {
+    const [id, versionStr] = entry.split("@");
+    const version = Number(versionStr);
+    if (!id || !Number.isFinite(version)) return null;
+    purposes.push({ id, version });
+  }
+  if (purposes.length === 0) return null;
+
+  return { purposes, emailHash: emailHashPart };
+}
+
+export interface AcceptCarriedAgreementsResult {
+  accepted: boolean;
+}
+
+/**
+ * Consumes the sign-up card's carried-agreement cookie — see the file
+ * header for the mint/consume split. Writes every id in `missingPurposeIds`
+ * with `via: "sign_up"` only when the cookie is valid, fresh, bound to the
+ * signed-in (verified) session's own email, and covers every one of those
+ * ids; otherwise writes nothing. The cookie is deleted either way once
+ * found, so this never runs twice for the same cookie.
+ */
+export async function acceptCarriedAgreementsAction(
+  missingPurposeIds: string[],
+): Promise<AcceptCarriedAgreementsResult> {
+  const store = await cookies();
+  const name = cookieName();
+  const raw = store.get(name)?.value;
+  if (!raw) return { accepted: false };
+  store.delete(name);
+
+  const decoded = decodeCarriedAgreements(raw);
+  if (!decoded) return { accepted: false };
+
+  const session = await readSession(await headers());
+  if (!session || !session.user.emailVerified) return { accepted: false };
+  if (decoded.emailHash !== emailHash(session.user.email)) return { accepted: false };
+
+  const carriedIds = new Set(decoded.purposes.map((p) => p.id));
+  if (!missingPurposeIds.every((id) => carriedIds.has(id))) return { accepted: false };
+
+  const init = await forwardedCookieInit();
+  const results = await Promise.all(
+    missingPurposeIds.map((purposeId) =>
+      member.setConsent({ purposeId, granted: true, via: "sign_up" }, init),
+    ),
+  );
+  return { accepted: results.every((r) => r.ok) };
+}

package/templates/apps/web/app/[locale]/(authed)/account/agreements-prompt.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+/**
+ * AgreementsPrompt — the account home's sign-up-agreement re-ask (#8438
+ * D13, spec docs/specs/8438-consent-registry-and-ledger-step-spec.md C6).
+ *
+ * Renders only when `missing` is non-empty — `A/page.tsx` computes that
+ * from `GET /v1/member/consents`: a `signUp` agreement with no OWN grant at
+ * its current `policyVersion` (D4 — never an any-source row an anonymous
+ * form attached, SEC-8438-1).
+ *
+ * On mount, tries the CARRIED case first: `acceptCarriedAgreementsAction`
+ * (this directory's own `agreements-actions.ts`) consumes the sign-up
+ * card's signed, email-bound cookie and writes each missing agreement with
+ * `via: "sign_up"`, so a member who just ticked the boxes on `/sign-up` is
+ * never asked twice. On success the page refreshes and this component is
+ * gone from the next render (`missing` becomes empty); on failure — no
+ * cookie, expired, wrong account, or it does not cover every missing id —
+ * the explicit card below shows instead.
+ *
+ * Dynamically imported, never a static import, mirroring the generated
+ * seam's own idiom (`topology.generated.ts`'s `readSession` imports
+ * `../auth` dynamically): `./agreements-actions` reads a session and posts
+ * through `@working-theory/api-client`, the same database/sign-in-adjacent
+ * surface the seam exists to keep lazy. The cookie it consumes is minted by
+ * `(auth)/sign-up/sign-up.actions.ts` — a sign-in SEED a sign-in-less spoke
+ * drops (`SPOKE_REMOVED_ROOTS`/`spokeExclusions`,
+ * `packages/create-ailk/src/topology.ts` D4) — but this file never reaches
+ * that module directly; the consume-side logic lives here instead,
+ * precisely so this directory carries no cross-boundary import into a seed
+ * a spoke prunes. A spoke member signs up on the hub (C6), so on a spoke
+ * there is simply no carried cookie to find — the "Otherwise" card below
+ * shows instead, exactly as it does for any other failed carried check.
+ *
+ * "Otherwise" card: the statement (plain text, as `AgreementList` reads it
+ * — no markdown-link parsing here either; see that component's own note)
+ * plus a link to its policy when the wire carries one, and one Accept
+ * button that posts every missing id through `setConsentAction` with no
+ * `via` (`account_settings`).
+ */
+
+import { Button, Heading, Link, Text } from "@working-theory/ui/primitives";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState, type ReactElement } from "react";
+
+import { setConsentAction } from "./privacy/actions";
+
+export interface MissingAgreement {
+  id: string;
+  statement: string;
+  policyHref: string | null;
+  version: number;
+  /** True when this purpose has an OWN grant at an older version (D13's "updated" copy). */
+  hadPriorGrant: boolean;
+}
+
+export interface AgreementsPromptLabels {
+  titleNew: string;
+  titleUpdated: string;
+  accept: string;
+  error: string;
+  /** The policy link's label (the same text Privacy's own policy link uses). */
+  policyLink: string;
+}
+
+export interface AgreementsPromptProps {
+  missing: MissingAgreement[];
+  labels: AgreementsPromptLabels;
+}
+
+type CarriedCheck = "checking" | "hidden" | "show";
+
+export function AgreementsPrompt({ missing, labels }: AgreementsPromptProps): ReactElement | null {
+  const router = useRouter();
+  const [state, setState] = useState<CarriedCheck>(missing.length === 0 ? "hidden" : "checking");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const attempted = useRef(false);
+
+  useEffect(() => {
+    if (missing.length === 0) {
+      setState("hidden");
+      return;
+    }
+    if (attempted.current) return;
+    attempted.current = true;
+    let active = true;
+    void (async () => {
+      try {
+        const { acceptCarriedAgreementsAction } = await import("./agreements-actions");
+        const result = await acceptCarriedAgreementsAction(missing.map((m) => m.id));
+        if (!active) return;
+        if (result.accepted) {
+          setState("hidden");
+          router.refresh();
+        } else {
+          setState("show");
+        }
+      } catch {
+        if (active) setState("show");
+      }
+    })();
+    return () => {
+      active = false;
+    };
+     
+  }, [router]);
+
+  async function acceptAll(): Promise<void> {
+    setPending(true);
+    setError(null);
+    try {
+      const results = await Promise.all(missing.map((m) => setConsentAction(m.id, true)));
+      if (results.every((r) => r.ok)) {
+        // Mirrors the carried-cookie path: hide now, rather than leaving
+        // `state` at "show" across the refresh below — the mount-time
+        // effect that would otherwise notice `missing` is now empty never
+        // re-runs (its deps are `[router]`, not `missing`), since this is
+        // the SAME component instance, not a fresh mount.
+        setState("hidden");
+        router.refresh();
+      } else {
+        setError(labels.error);
+        setPending(false);
+      }
+    } catch {
+      setError(labels.error);
+      setPending(false);
+    }
+  }
+
+  if (state !== "show") return null;
+
+  const title = missing.some((m) => m.hadPriorGrant) ? labels.titleUpdated : labels.titleNew;
+
+  return (
+    <div
+      className="mb-block-loose flex flex-col gap-3 rounded-control border-hairline border-(--color-border) bg-surface-secondary p-4"
+      data-testid="account-agreements-prompt"
+    >
+      <Heading level={2} visual={4}>
+        {title}
+      </Heading>
+      <div className="flex flex-col gap-2">
+        {missing.map((agreement) => (
+          <div key={agreement.id} data-testid={`account-agreements-prompt-${agreement.id}`}>
+            <Text as="p" variant="body-sm">
+              {agreement.statement}
+            </Text>
+            {agreement.policyHref ? (
+              <Link
+                href={agreement.policyHref}
+                className="text-body-sm"
+                data-testid={`account-agreements-prompt-${agreement.id}-policy`}
+              >
+                {labels.policyLink}
+              </Link>
+            ) : null}
+          </div>
+        ))}
+      </div>
+      {error ? (
+        <span role="alert" data-testid="account-agreements-prompt-error">
+          <Text as="span" variant="caption">
+            {error}
+          </Text>
+        </span>
+      ) : null}
+      <div>
+        <Button
+          type="button"
+          disabled={pending}
+          onClick={() => void acceptAll()}
+          data-testid="account-agreements-prompt-accept"
+        >
+          {labels.accept}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -22,6 +22,16 @@
  * decoded. No session, no match or a 404 read is a not-found; any other
  * failed read renders the error row with Retry (spec 7423 D12). Titles,
  * notes and comments render as text only.
+ *
+ * A proposal (#8516, spec docs/specs/8516-proposals-as-an-artifact-kind-spec.md
+ * D19) is the same page with its own words: the caption "Proposal", its
+ * price ("Price <amount>", formatted from minor units), and the review form
+ * as "Your decision on version <n>" with Approve proposal / Request changes.
+ * In the latest version's place, once approved: Pay now (`pay-form.tsx`)
+ * while the payment is due, "Paid <date>" once paid, and — back from
+ * Stripe's success page (`?paid=1`) before the webhook lands — the pending
+ * line instead of Pay now. A deliverable, or an older hub's artifact with
+ * no `kind`, renders exactly as before.
  */
 
 import { InboxItemFrame } from "@working-theory/templates/account";
@@ -41,16 +51,20 @@ import { accountSession, logReadFailure } from "../../account-data";
 import { ErrorRow } from "../../error-row";
 import {
   artifactState,
+  isProposal,
   isReviewable,
   loadArtifacts,
+  paymentDue,
   STATE_KEYS,
   versionFileHref,
 } from "../artifact-data";
 
+import { PayForm, type PayFormLabels } from "./pay-form";
 import { ReviewForm, type ReviewFormLabels } from "./review-form";
 
 interface Props {
   params: Promise<{ locale: string; pieceId: string }>;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
 }
 
 /**
@@ -65,6 +79,25 @@ function decodeSegment(segment: string): string {
   }
 }
 
+/**
+ * A proposal's price in the reader's locale. The hub's answer is not parsed
+ * here, so a currency Intl cannot format falls back to the amount and code
+ * rather than erroring the page.
+ */
+function formatPrice(
+  price: { amount: number; currency: string },
+  locale: string,
+): string {
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: price.currency.toUpperCase(),
+    }).format(price.amount / 100);
+  } catch {
+    return `${String(price.amount / 100)} ${price.currency.toUpperCase()}`;
+  }
+}
+
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: "account" });
@@ -73,6 +106,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 export default async function AccountArtifactPage({
   params,
+  searchParams,
 }: Props): Promise<ReactElement> {
   const { locale, pieceId: segment } = await params;
   const t = await getTranslations({ locale, namespace: "account" });
@@ -108,11 +142,31 @@ export default async function AccountArtifactPage({
   const state = artifactState(artifact);
   const reviewable = isReviewable(artifact);
   const latest = artifact.versions[0]!.version;
+  const proposal = isProposal(artifact);
+  const price =
+    proposal && artifact.price ? formatPrice(artifact.price, locale) : null;
+  const due = proposal && paymentDue(artifact);
+  // Stripe's success page returns here with `?paid=1`; until the webhook
+  // stamps the payment, the page says so instead of offering Pay now again.
+  const returnedPaid = due && (await searchParams)?.paid === "1";
+  const paidAt =
+    proposal && artifact.payment?.status === "paid"
+      ? artifact.payment.paidAt
+      : null;
+  const payLabels: PayFormLabels = {
+    pay: t("artifacts.proposal.pay"),
+    paying: t("artifacts.proposal.paying"),
+    error: t("artifacts.proposal.payError"),
+  };
   const labels: ReviewFormLabels = {
-    heading: t("artifacts.review.heading", { version: latest }),
+    heading: proposal
+      ? t("artifacts.proposal.heading", { version: latest })
+      : t("artifacts.review.heading", { version: latest }),
     comment: t("artifacts.review.comment"),
     commentHint: t("artifacts.review.commentHint"),
-    approve: t("artifacts.review.approve"),
+    approve: proposal
+      ? t("artifacts.proposal.approve")
+      : t("artifacts.review.approve"),
     requestChanges: t("artifacts.review.requestChanges"),
     submitting: t("artifacts.review.submitting"),
     sent: t("artifacts.review.sent"),
@@ -122,6 +176,7 @@ export default async function AccountArtifactPage({
       not_latest: t("artifacts.review.errors.notLatest"),
       rate_limited: t("artifacts.review.errors.rateLimited"),
       failed: t("artifacts.review.errors.failed"),
+      payment_failed: t("artifacts.proposal.payError"),
     },
   };
 
@@ -163,7 +218,9 @@ export default async function AccountArtifactPage({
         href: localeHref(locale, "/account/artifacts"),
         label: t("artifacts.back"),
       }}
-      caption={t("artifacts.caption")}
+      caption={
+        proposal ? t("artifacts.proposal.caption") : t("artifacts.caption")
+      }
       title={artifact.title}
       status={t(STATE_KEYS[state])}
       lead={
@@ -173,6 +230,13 @@ export default async function AccountArtifactPage({
       }
       testIdPrefix="artifact"
     >
+      {price !== null ? (
+        <div className="mt-block-tight" data-testid="artifact-price">
+          <Text as="p" variant="body" className="font-semibold">
+            {t("artifacts.proposal.price", { amount: price })}
+          </Text>
+        </div>
+      ) : null}
       <section className="mt-block-loose">
         <Heading level={2} visual={4} className="!text-body font-semibold">
           {t("artifacts.versions")}
@@ -231,8 +295,29 @@ export default async function AccountArtifactPage({
                     pieceId={artifact.id}
                     version={v.version}
                     labels={labels}
+                    pay={proposal ? payLabels : undefined}
                   />
                 ) : null}
+                {v.version === latest && due && !returnedPaid ? (
+                  <PayForm pieceId={artifact.id} labels={payLabels} />
+                ) : null}
+                {v.version === latest && returnedPaid ? (
+                  <div
+                    className="mt-block-tight"
+                    data-testid="artifact-paid-pending"
+                  >
+                    <Text as="p" variant="body-sm">
+                      {t("artifacts.proposal.paidPending")}
+                    </Text>
+                  </div>
+                ) : null}
+                {v.version === latest && paidAt !== null ? (
+                  <div className="mt-block-tight" data-testid="artifact-paid">
+                    <Text as="p" variant="body-sm">
+                      {t("artifacts.proposal.paid", { date: date(paidAt) })}
+                    </Text>
+                  </div>
+                ) : null}
                 {v.version === latest && state === "changes-requested" ? (
                   <div
                     className="mt-block-tight"

package/templates/apps/web/app/[locale]/(authed)/account/artifacts/[pieceId]/pay-form.tsx

@@ -0,0 +1,65 @@
+"use client"; // holds the Pay now Server Action's state: its pending label and error line
+
+/**
+ * PayForm — Pay now on an approved proposal (#8516, spec
+ * docs/specs/8516-proposals-as-an-artifact-kind-spec.md D19). The artifact
+ * page renders it in the latest version's place while the payment is due.
+ *
+ * One primary button and nothing else: no input of any kind, so no card,
+ * number or expiry field can ever live here — the client pays on Stripe's
+ * hosted Checkout page, which `payForProposal` redirects to. The piece goes
+ * as the button's own name and value, and the amount is the API's, from the
+ * stored proposal. A payment that could not open shows the error line; a
+ * successful one never returns. Every string arrives through `labels`.
+ */
+
+import { Button, InlineMessage } from "@working-theory/ui/primitives";
+import { useActionState, type ReactElement } from "react";
+
+import { payForProposal, type ProposalPayState } from "../artifact-actions";
+
+export interface PayFormLabels {
+  pay: string;
+  paying: string;
+  error: string;
+}
+
+export function PayForm({
+  pieceId,
+  labels,
+}: {
+  pieceId: string;
+  labels: PayFormLabels;
+}): ReactElement {
+  const [state, formAction, pending] = useActionState<
+    ProposalPayState,
+    FormData
+  >(payForProposal, { kind: "idle" });
+
+  return (
+    <form
+      action={formAction}
+      className="mt-block-tight flex flex-col gap-4"
+      data-testid="artifact-pay-form"
+    >
+      {state.kind === "error" ? (
+        <InlineMessage variant="error" data-testid="artifact-pay-error">
+          {labels.error}
+        </InlineMessage>
+      ) : null}
+      <div>
+        <Button
+          type="submit"
+          name="pieceId"
+          value={pieceId}
+          // The page's one primary action: a 44px target at every width.
+          size="big"
+          disabled={pending}
+          data-testid="artifact-pay"
+        >
+          {pending ? labels.paying : labels.pay}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/artifacts/[pieceId]/review-form.tsx

@@ -10,6 +10,13 @@
  * (AC-MAA-07). A review that went through shows the sent line and refreshes
  * the page once, which re-reads the artifact and shows Approved or the
  * waiting line in the form's place. Every string arrives through `labels`.
+ *
+ * A proposal (#8516, spec docs/specs/8516-proposals-as-an-artifact-kind-spec.md
+ * D19) passes its own heading and Approve label, and `pay`: an approval
+ * whose payment could not open (`payment_failed` — the review itself is
+ * recorded) shows the error line and Pay now in the form's place, so the
+ * client can try again at once. A deliverable passes no `pay` and renders
+ * as before.
  */
 
 import {
@@ -36,6 +43,8 @@ import {
   type ArtifactReviewState,
 } from "../artifact-actions";
 
+import { PayForm, type PayFormLabels } from "./pay-form";
+
 export interface ReviewFormLabels {
   heading: string;
   comment: string;
@@ -51,10 +60,13 @@ export function ReviewForm({
   pieceId,
   version,
   labels,
+  pay,
 }: {
   pieceId: string;
   version: number;
   labels: ReviewFormLabels;
+  /** A proposal's Pay now labels, for an approval whose payment did not open. */
+  pay?: PayFormLabels | undefined;
 }): ReactElement {
   const commentId = useId();
   const hintId = useId();
@@ -71,6 +83,21 @@ export function ReviewForm({
     if (reviewed) router.refresh();
   }, [reviewed, router]);
 
+  if (
+    pay !== undefined &&
+    state.kind === "error" &&
+    state.reason === "payment_failed"
+  ) {
+    return (
+      <div className="mt-block-tight flex flex-col gap-4">
+        <InlineMessage variant="error" data-testid="artifact-review-error">
+          {labels.errors.payment_failed}
+        </InlineMessage>
+        <PayForm pieceId={pieceId} labels={pay} />
+      </div>
+    );
+  }
+
   if (reviewed) {
     return (
       <InlineMessage