feat : limit each session to 1 hours when checkout

app/commission/pay/[id]/page.tsx

@@ -13,6 +13,7 @@ import { getCustomerSession } from "@/lib/auth/server";
 import { promptPayConfig } from "@/lib/commission/payment";
 import { generatePromptPayPayload } from "@/lib/commission/promptpay";
 import { getCommissionLabels } from "@/lib/commission/catalog";
+import { checkoutExpiresAt, checkoutNow } from "@/lib/commission/checkout-expiration";
 
 export const instant = false;
 
@@ -27,21 +28,21 @@ export default async function CommissionPayPage({ params }: PageProps<"/commissi
   const [ticket] = await getDb().select({ id: commissionTickets.id }).from(commissionTickets)
     .where(eq(commissionTickets.checkoutId, id)).limit(1);
   if (ticket) redirect(`/commission/tickets/${ticket.id}`);
-  const { identifier } = promptPayConfig();
-  const payload = generatePromptPayPayload({ identifier, amount: checkout.amountBaht });
-  const qr = await QRCode.toDataURL(payload, { margin: 2, width: 300 });
+  const expiresAt = checkoutExpiresAt(checkout.createdAt);
+  const serverNow = checkoutNow();
+  let qr: string | null = null;
+  if (serverNow < expiresAt) {
+    const { identifier } = promptPayConfig();
+    const payload = generatePromptPayPayload({ identifier, amount: checkout.amountBaht });
+    qr = await QRCode.toDataURL(payload, { margin: 2, width: 300 });
+  }
   const catalog = await getCommissionLabels(checkout.request);
   return <div className="min-h-svh"><SiteHeader /><main className="mx-auto flex max-w-3xl flex-col gap-6 p-4 py-10 sm:p-8">
     <Link href="/commission" className="text-sm underline">กลับไป Commission</Link>
     <h1 className="font-heading text-3xl font-semibold">ชำระเงิน</h1>
     <Card><CardHeader><CardTitle>รายการคำขอ - ฿{checkout.amountBaht}</CardTitle></CardHeader>
       <CardContent>{catalog && <CommissionRequestSummary request={checkout.request} catalog={catalog} amountBaht={checkout.amountBaht} />}</CardContent></Card>
-    <Card><CardHeader><CardTitle>สแกน PromptPay</CardTitle></CardHeader><CardContent className="flex flex-col items-center gap-4">
-      {/* Generated locally from the fixed checkout amount and configured recipient. */}
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img src={qr} alt={`PromptPay QR สำหรับชำระเงิน ${checkout.amountBaht} บาท`} width={300} height={300} />
-      <strong>฿{checkout.amountBaht}</strong><p className="text-sm text-muted-foreground">โอนเงินแล้วอัปโหลดรูปสลิปเพื่อยืนยัน</p>
-    </CardContent></Card>
-    <CommissionPaymentForm checkoutId={id} />
+    <CommissionPaymentForm checkoutId={id} amountBaht={checkout.amountBaht} qr={qr}
+      expiresAt={expiresAt} serverNow={serverNow} />
   </main></div>;
 }