From 594e0d42d1c6313bbffeb2949c465719d2c9adeb Mon Sep 17 00:00:00 2001
From: Thanakarn Klangkasame <77600906+Simulationable@users.noreply.github.com>
Date: Thu, 2 Oct 2025 13:05:51 +0700
Subject: [PATCH] Change Redeem Page

---
 .../(public)/redeem/[transactionId]/page.tsx  | 109 +++++++++---------
 1 file changed, 54 insertions(+), 55 deletions(-)

diff --git a/src/app/(public)/redeem/[transactionId]/page.tsx b/src/app/(public)/redeem/[transactionId]/page.tsx
index 3ff3da3..baaaba6 100644
--- a/src/app/(public)/redeem/[transactionId]/page.tsx
+++ b/src/app/(public)/redeem/[transactionId]/page.tsx
@@ -37,6 +37,7 @@ function getTenantKeyFromHost() {
     return process.env.NEXT_PUBLIC_DEFAULT_TENANT_KEY ?? "demo";
 }
 
+// แปลงเลขไทย→อารบิก แล้วเหลือเฉพาะ 0-9 เท่านั้น
 function toAsciiDigitsOnly(input: string) {
     const map: Record<string, string> = {
         "๐": "0", "๑": "1", "๒": "2", "๓": "3", "๔": "4",
@@ -46,10 +47,12 @@ function toAsciiDigitsOnly(input: string) {
     return thToEn.replace(/\D/g, "");
 }
 
+// รับเฉพาะเบอร์มือถือไทย 10 หลัก ที่ขึ้นต้นด้วย 06/08/09
 function isStrictThaiMobile10(digitsOnly: string) {
     return /^0(6|8|9)\d{8}$/.test(digitsOnly);
 }
 
+// รูปแบบที่ดูเหมือน +66/66xxxxx (ไม่อนุญาต)
 function looksLikeCountryCodeFormat(raw: string) {
     const t = raw.trim();
     return t.startsWith("+66") || /^66\d+/.test(t);
@@ -61,7 +64,7 @@ function looksLikeCountryCodeFormat(raw: string) {
 async function redeemPoints(input: {
     tenantKey: string;
     transactionId: string;
-    phoneDigits10: string;
+    phoneDigits10: string; // 0812345678
     idempotencyKey: string;
 }): Promise<RedeemResponse> {
     const res = await fetch(`${API_BASE}/api/v1/loyalty/redeem`, {
@@ -100,6 +103,7 @@ export default function RedeemPage() {
     const [error, setError] = useState<string | null>(null);
     const [result, setResult] = useState<RedeemResponse | null>(null);
 
+    // Validation message
     const phoneError: string | null = useMemo(() => {
         if (!phoneDigits) return null;
         if (looksLikeCountryCodeFormat(phoneDigits)) {
@@ -116,7 +120,7 @@ export default function RedeemPage() {
 
     const phoneValid = phoneDigits.length === 10 && !phoneError && isStrictThaiMobile10(phoneDigits);
 
-    // Input guards — allow only digits (รองรับเลขไทย)
+    // Guard input — digits only (รองรับเลขไทย)
     function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
         const onlyDigits = toAsciiDigitsOnly(e.target.value).slice(0, 10);
         setPhoneDigits(onlyDigits);
@@ -170,65 +174,54 @@ export default function RedeemPage() {
     }
 
     return (
-        <main className="relative min-h-screen overflow-hidden bg-white text-neutral-900">
-            {/* Background: mono grid + soft lights */}
-            <div
-                aria-hidden
-                className="pointer-events-none absolute inset-0 -z-20 bg-[radial-gradient(circle_at_1px_1px,#eee_1px,transparent_0)] [background-size:22px_22px]"
-            />
-            <div aria-hidden className="absolute -top-24 -left-24 h-96 w-96 -z-10 rounded-full bg-neutral-200 blur-3xl opacity-70" />
-            <div aria-hidden className="absolute -bottom-28 -right-28 h-[28rem] w-[28rem] -z-10 rounded-full bg-neutral-100 blur-3xl opacity-70" />
-
-            <section className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center px-6">
+        <main className="min-h-screen bg-white text-neutral-900">
+            <section className="mx-auto flex min-h-screen max-w-lg flex-col items-center justify-center px-4">
                 {/* Brand */}
                 <div className="flex flex-col items-center">
                     <BrandLogo />
-                    <div className="mt-3 h-px w-24 bg-neutral-200" />
                 </div>
 
-                {/* Headings */}
-                <h1 className="mt-6 text-3xl font-extrabold tracking-tight sm:text-4xl">
-                    Redeem Points
-                </h1>
+                {/* Heading */}
+                <h1 className="mt-5 text-3xl font-extrabold tracking-tight">Redeem Points</h1>
                 <p className="mt-1 text-xs text-neutral-500">
                     Transaction: <span className="font-mono">{transactionId || "—"}</span>
                 </p>
 
-                {/* Card */}
-                <div className="mt-6 w-full rounded-2xl border border-neutral-200 bg-white/90 p-6 shadow-[0_10px_40px_rgba(0,0,0,0.06)] backdrop-blur-sm transition will-change-transform">
+                {/* Card — เรียบแต่เนี๊ยบขึ้น */}
+                <div className="mt-7 w-full rounded-2xl border border-neutral-200 bg-white p-6 shadow-md sm:p-8">
                     {!transactionId && (
                         <div className="mb-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
                             ไม่พบ TransactionId ใน URL โปรดสแกน QR ใหม่
                         </div>
                     )}
 
-                    <form onSubmit={onSubmit} className="space-y-4">
-                        <div className="group">
-                            <label className="block text-sm font-medium">เบอร์โทรศัพท์</label>
-                            <div className="relative mt-1">
-                                <input
-                                    className={`w-full rounded-xl border px-4 py-3 pr-12 outline-none transition focus:ring-2 ${
-                                        phoneError ? "border-red-400 focus:ring-red-200" : "border-neutral-300 focus:ring-neutral-200"
-                                    }`}
-                                    placeholder="เช่น 0812345678"
-                                    value={phoneDigits}
-                                    onChange={handleChange}
-                                    onBeforeInput={handleBeforeInput}
-                                    onKeyDown={handleKeyDown}
-                                    onPaste={handlePaste}
-                                    inputMode="numeric"
-                                    pattern="[0-9]*"
-                                    autoComplete="tel"
-                                    autoFocus
-                                    maxLength={10}
-                                    aria-invalid={!!phoneError}
-                                    aria-describedby="phone-help phone-error"
-                                    required
-                                    type="text"
-                                />
-                                {/* subtle input gloss */}
-                                <span className="pointer-events-none absolute inset-x-3 top-[6px] h-[2px] rounded bg-gradient-to-r from-white/60 to-transparent" />
-                            </div>
+                    <form onSubmit={onSubmit} className="space-y-5">
+                        <div>
+                            <label className="block text-sm font-medium text-neutral-800">
+                                เบอร์โทรศัพท์
+                            </label>
+                            <input
+                                className={`mt-1 h-12 w-full rounded-lg border px-4 text-base outline-none placeholder:text-neutral-400 focus:ring-2 ${
+                                    phoneError
+                                        ? "border-red-400 focus:ring-red-200"
+                                        : "border-neutral-300 focus:ring-neutral-200"
+                                }`}
+                                placeholder="เช่น 0812345678"
+                                value={phoneDigits}
+                                onChange={handleChange}
+                                onBeforeInput={handleBeforeInput}
+                                onKeyDown={handleKeyDown}
+                                onPaste={handlePaste}
+                                inputMode="numeric"
+                                pattern="[0-9]*"
+                                autoComplete="tel"
+                                autoFocus
+                                maxLength={10}
+                                aria-invalid={!!phoneError}
+                                aria-describedby="phone-help phone-error"
+                                required
+                                type="text"
+                            />
                             <div className="mt-1 text-xs text-neutral-500" id="phone-help">
                                 รองรับเฉพาะเบอร์โทรศัพท์มือถือ
                             </div>
@@ -242,36 +235,42 @@ export default function RedeemPage() {
                         <button
                             type="submit"
                             disabled={loading || !phoneValid || !transactionId}
-                            className="w-full rounded-xl bg-neutral-900 px-5 py-3 text-sm font-medium text-white shadow transition active:scale-[.99] disabled:cursor-not-allowed disabled:opacity-50 hover:bg-neutral-800"
+                            className="w-full rounded-full bg-neutral-900 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-neutral-800 active:scale-[.99] disabled:cursor-not-allowed disabled:opacity-50"
                         >
                             {loading ? "กำลังดำเนินการ..." : "ยืนยันการแลกคะแนน"}
                         </button>
                     </form>
 
-                    {/* Result banners */}
+                    {/* Banners */}
                     {message && (
-                        <div role="status" className="mt-4 rounded-xl border border-neutral-900/10 bg-neutral-900/5 p-3 text-sm text-neutral-900">
+                        <div className="mt-5 rounded-xl border border-neutral-200 bg-neutral-50 p-3 text-sm text-neutral-800">
                             สะสมคะแนนสำเร็จ
                         </div>
                     )}
                     {error && (
-                        <div role="status" className="mt-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+                        <div className="mt-5 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
                             สะสมคะแนนไม่สำเร็จ
                         </div>
                     )}
 
                     {result && (
-                        <div className="mt-4 rounded-xl border border-neutral-200 p-3 text-sm text-neutral-800">
-                            <div className="font-medium mb-1">รายละเอียด</div>
+                        <div className="mt-5 rounded-2xl border border-neutral-200 p-3 text-sm text-neutral-800">
+                            <div className="mb-1 font-medium">รายละเอียด</div>
                             <div className="space-y-1">
                                 {"balance" in result && (
-                                    <div>ยอดคงเหลือใหม่: <span className="font-semibold">{result.balance}</span></div>
+                                    <div>
+                                        ยอดคงเหลือใหม่: <span className="font-semibold">{result.balance}</span>
+                                    </div>
                                 )}
                                 {"voucherCode" in result && (
-                                    <div>รหัสคูปอง: <span className="font-mono">{result.voucherCode}</span></div>
+                                    <div>
+                                        รหัสคูปอง: <span className="font-mono">{result.voucherCode}</span>
+                                    </div>
                                 )}
                                 {"ledgerEntryId" in result && (
-                                    <div>Ledger: <span className="font-mono">{result.ledgerEntryId}</span></div>
+                                    <div>
+                                        Ledger: <span className="font-mono">{result.ledgerEntryId}</span>
+                                    </div>
                                 )}
                                 {"redeemed" in result && <div>สถานะ: {String(result.redeemed)}</div>}
                             </div>