feat: enhance store success page with email masking and resend functionality, improve messaging for download link

Author: infinitedim

src/actions/purchase-email.ts

@@ -0,0 +1,62 @@
+"use server";
+
+import { headers } from "next/headers";
+import { logActivity } from "@/lib/activity-log";
+import {
+  resendPurchaseEmailByStripeSession,
+  type PurchaseEmailResendResult,
+} from "@/lib/purchase-email-resend";
+import {
+  getClientIp,
+  getPurchaseEmailResendLimiter,
+} from "@/lib/rate-limit";
+import { getRequestBaseUrl } from "@/lib/request-url";
+import { verifyTurnstile } from "@/lib/turnstile";
+
+export async function resendPurchaseConfirmationEmail(
+  sessionId: string,
+  turnstileToken?: string | null,
+): Promise<PurchaseEmailResendResult> {
+  const trimmed = sessionId.trim();
+  if (!trimmed) {
+    return { ok: false, error: "Missing checkout reference." };
+  }
+
+  const headerList = await headers();
+  const ip = getClientIp(headerList);
+
+  const humanVerified = await verifyTurnstile(turnstileToken, ip);
+  if (!humanVerified) {
+    return {
+      ok: false,
+      error: "Verification failed. Please refresh and try again.",
+    };
+  }
+
+  const limiter = getPurchaseEmailResendLimiter();
+  if (limiter) {
+    const { success } = await limiter.limit(`${trimmed}:${ip}`);
+    if (!success) {
+      return {
+        ok: false,
+        error: "Too many resend attempts. Please wait a few minutes.",
+      };
+    }
+  }
+
+  const result = await resendPurchaseEmailByStripeSession(
+    trimmed,
+    getRequestBaseUrl(headerList),
+  );
+
+  if (result.ok) {
+    await logActivity({
+      action: "purchase.email_resent_customer",
+      entityType: "Purchase",
+      metadata: { stripeSessionId: trimmed, tokenRotated: true },
+      actorEmail: "customer",
+    });
+  }
+
+  return result;
+}

src/app/(public)/store/success/page.tsx

@@ -1,4 +1,6 @@
 import Link from "next/link";
+import { PurchaseEmailResend } from "@/components/molecules/PurchaseEmailResend";
+import { maskEmail } from "@/lib/purchase-email-resend";
 import { getStripe, isStripeConfigured } from "@/lib/stripe";
 
 export const metadata = {
@@ -14,6 +16,7 @@ export default async function StoreSuccessPage({
 }: SuccessPageProps) {
   const { session_id: sessionId } = await searchParams;
   let productName: string | null = null;
+  let maskedEmail: string | null = null;
 
   if (sessionId && isStripeConfigured()) {
     try {
@@ -25,8 +28,16 @@ export default async function StoreSuccessPage({
       if (!productName && session.metadata?.productId) {
         productName = "your purchase";
       }
+
+      const buyerEmail =
+        session.metadata?.buyerEmail ||
+        session.customer_details?.email ||
+        session.customer_email;
+      if (buyerEmail) {
+        maskedEmail = maskEmail(buyerEmail);
+      }
     } catch {
-      // Non-blocking — email is the source of truth for the download link
+      // Non-blocking — resend flow re-verifies the session server-side.
     }
   }
 
@@ -43,12 +54,26 @@ export default async function StoreSuccessPage({
           {productName
             ? `Thank you for purchasing ${productName}.`
             : "Thank you for your purchase."}{" "}
-          We've sent a secure, one-time download link to your email. It
-          expires in 24 hours.
+          Your secure download link is sent to your email and expires in 24
+          hours.
         </p>
         <p className="mt-2 text-sm text-zinc-500">
-          Check your inbox (and spam folder). The link can only be used once.
+          Check your inbox and spam folder. The link allows a limited number of
+          downloads.
         </p>
+
+        {sessionId ? (
+          <PurchaseEmailResend
+            sessionId={sessionId}
+            maskedEmail={maskedEmail}
+          />
+        ) : (
+          <p className="mt-6 text-sm text-zinc-500">
+            If you don&apos;t receive an email within a few minutes, contact
+            support with your receipt.
+          </p>
+        )}
+
         <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center">
           <Link
             href="/store"

src/components/molecules/PurchaseEmailResend.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { resendPurchaseConfirmationEmail } from "@/actions/purchase-email";
+import { TurnstileField } from "@/components/molecules/TurnstileField";
+import { isTurnstileClientEnabled } from "@/lib/turnstile";
+import { cn } from "@/utils";
+
+const turnstileEnabled = isTurnstileClientEnabled();
+
+interface PurchaseEmailResendProps {
+  sessionId: string;
+  maskedEmail?: string | null;
+}
+
+export function PurchaseEmailResend({
+  sessionId,
+  maskedEmail,
+}: PurchaseEmailResendProps) {
+  const [feedback, setFeedback] = useState<{
+    type: "success" | "error";
+    text: string;
+  } | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const [turnstileReady, setTurnstileReady] = useState(!turnstileEnabled);
+  const [turnstileToken, setTurnstileToken] = useState("");
+  const [turnstileResetKey, setTurnstileResetKey] = useState(0);
+
+  const bumpTurnstile = () => {
+    setTurnstileReady(!turnstileEnabled);
+    setTurnstileToken("");
+    setTurnstileResetKey((key) => key + 1);
+  };
+
+  const handleResend = () => {
+    setFeedback(null);
+    startTransition(async () => {
+      const result = await resendPurchaseConfirmationEmail(
+        sessionId,
+        turnstileToken || null,
+      );
+      // Turnstile tokens are single-use — always refresh after an attempt.
+      bumpTurnstile();
+
+      if (result.ok) {
+        setFeedback({ type: "success", text: result.message });
+      } else {
+        setFeedback({ type: "error", text: result.error });
+      }
+    });
+  };
+
+  return (
+    <div className="mt-8 rounded-none border border-zinc-100 bg-zinc-50 p-5 text-left">
+      <p className="text-sm font-medium text-zinc-800">
+        Didn&apos;t get the email?
+      </p>
+      <p className="mt-1 text-sm text-zinc-600">
+        {maskedEmail
+          ? `We can email a fresh download link to ${maskedEmail}. Any older link will stop working. Check spam first.`
+          : "We can email a fresh download link. Any older link will stop working. Check spam first."}
+      </p>
+
+      <TurnstileField
+        resetKey={turnstileResetKey}
+        onVerifiedChange={setTurnstileReady}
+        onTokenChange={setTurnstileToken}
+      />
+
+      <button
+        type="button"
+        onClick={handleResend}
+        disabled={isPending || !turnstileReady}
+        className={cn(
+          "mt-4 inline-flex w-full items-center justify-center border border-zinc-300 bg-white px-5 py-2.5 text-sm font-medium tracking-wide text-zinc-800 uppercase transition-colors hover:bg-zinc-100 disabled:opacity-50 sm:w-auto",
+        )}
+      >
+        {isPending ? (
+          <span className="h-4 w-4 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-800" />
+        ) : (
+          "Send new download link"
+        )}
+      </button>
+      {feedback && (
+        <p
+          className={cn(
+            "mt-3 text-sm",
+            feedback.type === "success" ? "text-emerald-700" : "text-red-600",
+          )}
+          role="status"
+        >
+          {feedback.text}
+        </p>
+      )}
+    </div>
+  );
+}

src/components/molecules/TurnstileField.tsx

@@ -8,11 +8,14 @@ interface TurnstileFieldProps {
   /** Bump to reset the widget (e.g. after a failed submit). */
   resetKey?: number;
   onVerifiedChange?: (verified: boolean) => void;
+  /** For server actions / fetch handlers that need the raw token. */
+  onTokenChange?: (token: string) => void;
 }
 
 export function TurnstileField({
   resetKey = 0,
   onVerifiedChange,
+  onTokenChange,
 }: TurnstileFieldProps) {
   const widgetRef = useRef<TurnstileInstance>(null);
   const [token, setToken] = useState("");
@@ -24,6 +27,7 @@ export function TurnstileField({
     prevResetKey.current = resetKey;
     setToken("");
     onVerifiedChange?.(false);
+    onTokenChange?.("");
     widgetRef.current?.reset();
     // eslint-disable-next-line react-hooks/exhaustive-deps -- onVerifiedChange is stable (setState)
   }, [resetKey]);
@@ -44,15 +48,18 @@ export function TurnstileField({
         options={{ theme: "light", size: "normal" }}
         onSuccess={(value) => {
           setToken(value);
+          onTokenChange?.(value);
           onVerifiedChange?.(true);
         }}
         onExpire={() => {
           setToken("");
+          onTokenChange?.("");
           onVerifiedChange?.(false);
           widgetRef.current?.reset();
         }}
         onError={() => {
           setToken("");
+          onTokenChange?.("");
           onVerifiedChange?.(false);
         }}
       />

src/lib/email.ts

@@ -214,7 +214,11 @@ export async function sendPurchaseConfirmation({
   siteUrl?: string;
 }) {
   const config = getResendConfig();
-  if (!config) return;
+  if (!config) {
+    throw new Error(
+      "Purchase confirmation email failed: RESEND_API_KEY or RESEND_FROM_EMAIL not configured.",
+    );
+  }
 
   const safeName = escapeHtml(name);
   const baseUrl = (siteUrl || getSiteUrl()).replace(/\/$/, "");