Change Redeem Page

src/app/(public)/redeem/[transactionId]/page.tsx

@@ -1,8 +1,9 @@
+// File: src/app/(public)/redeem/[transactionId]/page.tsx
 "use client";
 
 import { useState, useMemo } from "react";
 import { useParams, useSearchParams } from "next/navigation";
-import BrandLogo from "@/app/component/common/BrandLogo"
+import BrandLogo from "@/app/component/common/BrandLogo";
 
 /* =======================
    Config
@@ -30,28 +31,25 @@ function uuidv4() {
 
 function getTenantKeyFromHost() {
     if (typeof window === "undefined") return process.env.NEXT_PUBLIC_DEFAULT_TENANT_KEY ?? "demo";
-    const host = window.location.hostname; // e.g. tenant1.app.example.com
+    const host = window.location.hostname;
     const parts = host.split(".");
-    if (parts.length >= 3) return parts[0]; // subdomain as tenant key
+    if (parts.length >= 3) return parts[0];
     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",
         "๕": "5", "๖": "6", "๗": "7", "๘": "8", "๙": "9",
     };
     const thToEn = input.replace(/[๐-๙]/g, (ch) => map[ch] ?? ch);
-    return thToEn.replace(/\D/g, ""); // keep digits only
+    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);
@@ -63,7 +61,7 @@ function looksLikeCountryCodeFormat(raw: string) {
 async function redeemPoints(input: {
     tenantKey: string;
     transactionId: string;
-    phoneDigits10: string; // 0812345678
+    phoneDigits10: string;
     idempotencyKey: string;
 }): Promise<RedeemResponse> {
     const res = await fetch(`${API_BASE}/api/v1/loyalty/redeem`, {
@@ -94,16 +92,14 @@ async function redeemPoints(input: {
 export default function RedeemPage() {
     const params = useParams<{ transactionId: string }>();
     const search = useSearchParams();
-    const transactionId =
-        params?.transactionId ?? search?.get("transactionId") ?? "";
+    const transactionId = params?.transactionId ?? search?.get("transactionId") ?? "";
 
-    const [phoneDigits, setPhoneDigits] = useState<string>(""); // ตัวเลขล้วน
+    const [phoneDigits, setPhoneDigits] = useState<string>("");
     const [loading, setLoading] = useState<boolean>(false);
     const [message, setMessage] = useState<string | null>(null);
     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)) {
@@ -120,29 +116,23 @@ export default function RedeemPage() {
 
     const phoneValid = phoneDigits.length === 10 && !phoneError && isStrictThaiMobile10(phoneDigits);
 
-    // --- Handlers: บังคับให้ "พิมพ์ได้แต่เลข" ---
+    // Input guards — allow only digits (รองรับเลขไทย)
     function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
         const onlyDigits = toAsciiDigitsOnly(e.target.value).slice(0, 10);
         setPhoneDigits(onlyDigits);
     }
-
     function handleBeforeInput(e: React.FormEvent<HTMLInputElement>) {
-        // ใช้ nativeEvent: InputEvent เพื่อเช็คตัวอักษรที่กำลังจะป้อน
         const ie = e.nativeEvent as InputEvent;
         const data = (ie && "data" in ie ? ie.data : undefined) ?? "";
-        if (!data) return; // allow deletions/composition
+        if (!data) return;
         if (!/^[0-9๐-๙]+$/.test(data)) e.preventDefault();
     }
-
     function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-        // อนุญาตปุ่มควบคุมพื้นฐาน
         const allow = ["Backspace", "Delete", "Tab", "ArrowLeft", "ArrowRight", "Home", "End"];
         if (allow.includes(e.key)) return;
-        // อนุญาตเฉพาะ 0-9 เท่านั้น
         if (/^[0-9]$/.test(e.key)) return;
         e.preventDefault();
     }
-
     function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
         e.preventDefault();
         const text = e.clipboardData.getData("text") ?? "";
@@ -170,7 +160,7 @@ export default function RedeemPage() {
             });
 
             setResult(data);
-            setMessage(data.message ?? "ดำเนินการแลกคะแนนสำเร็จ");
+            setMessage("สะสมคะแนนสำเร็จ");
         } catch (err: unknown) {
             const msg = err instanceof Error ? err.message : "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้";
             setError(msg);
@@ -180,49 +170,66 @@ export default function RedeemPage() {
     }
 
     return (
-        <main className="min-h-screen flex items-center justify-center bg-white px-4">
-            <div className="w-full max-w-md">
-                {/* Header / Branding */}
-                <div className="flex flex-col items-center mb-4">
+        <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">
+                {/* Brand */}
+                <div className="flex flex-col items-center">
                     <BrandLogo />
-                    <h1 className="mt-3 text-2xl font-semibold tracking-tight">Redeem Points</h1>
-                    <p className="text-xs text-gray-500 mt-1">
-                        Transaction: <span className="font-mono">{transactionId || "—"}</span>
-                    </p>
+                    <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>
+                <p className="mt-1 text-xs text-neutral-500">
+                    Transaction: <span className="font-mono">{transactionId || "—"}</span>
+                </p>
+
                 {/* Card */}
-                <div className="w-full bg-white rounded-2xl shadow-xl ring-1 ring-black/5 p-6">
+                <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">
                     {!transactionId && (
-                        <div className="mb-4 text-sm rounded-xl border border-red-200 bg-red-50 p-3 text-red-700">
+                        <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>
+                        <div className="group">
                             <label className="block text-sm font-medium">เบอร์โทรศัพท์</label>
-                            <input
-                                className={`mt-1 w-full rounded-xl border px-3 py-2 outline-none focus:ring-2 focus:ring-black/10 ${
-                                    phoneError ? "border-red-400" : "border-gray-300"
-                                }`}
-                                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-gray-500" id="phone-help">
+                            <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>
+                            <div className="mt-1 text-xs text-neutral-500" id="phone-help">
                                 รองรับเฉพาะเบอร์โทรศัพท์มือถือ
                             </div>
                             {phoneError && (
@@ -235,28 +242,28 @@ export default function RedeemPage() {
                         <button
                             type="submit"
                             disabled={loading || !phoneValid || !transactionId}
-                            className="w-full rounded-xl bg-black text-white py-2.5 disabled:opacity-50 disabled:cursor-not-allowed transition"
+                            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"
                         >
                             {loading ? "กำลังดำเนินการ..." : "ยืนยันการแลกคะแนน"}
                         </button>
                     </form>
 
+                    {/* Result banners */}
                     {message && (
-                        <div className="mt-4 rounded-xl border border-green-200 bg-green-50 p-3 text-sm text-green-800">
-                            {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>
                     )}
                     {error && (
-                        <div className="mt-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
-                            {/*{error}*/}
+                        <div role="status" className="mt-4 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 p-3 text-sm">
+                        <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="space-y-1 text-gray-700">
+                            <div className="space-y-1">
                                 {"balance" in result && (
                                     <div>ยอดคงเหลือใหม่: <span className="font-semibold">{result.balance}</span></div>
                                 )}
@@ -271,7 +278,7 @@ export default function RedeemPage() {
                         </div>
                     )}
                 </div>
-            </div>
+            </section>
         </main>
     );
 }