Fix Redeem

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

@@ -1,16 +1,25 @@
-// File: src/app/(public)/redeem/[transactionId]/page.tsx
 "use client";
 
-import Image from "next/image";
 import { useState, useMemo } from "react";
 import { useParams, useSearchParams } from "next/navigation";
+import BrandLogo from "@/app/component/common/BrandLogo"
 
 /* =======================
    Config
 ======================= */
-const LOGO_PATH = "/assets/images/messageImage_1756462829731.jpg";
 const API_BASE = process.env.NEXT_PUBLIC_EOP_PUBLIC_API_BASE ?? "";
 
+/* =======================
+   Types
+======================= */
+type RedeemResponse = {
+    balance?: number;
+    voucherCode?: string;
+    ledgerEntryId?: string;
+    redeemed?: boolean;
+    message?: string;
+};
+
 /* =======================
    Utils
 ======================= */
@@ -56,7 +65,7 @@ async function redeemPoints(input: {
     transactionId: string;
     phoneDigits10: string; // 0812345678
     idempotencyKey: string;
-}) {
+}): Promise<RedeemResponse> {
     const res = await fetch(`${API_BASE}/api/v1/loyalty/redeem`, {
         method: "POST",
         headers: {
@@ -76,26 +85,7 @@ async function redeemPoints(input: {
         const text = await res.text();
         throw new Error(text || `HTTP ${res.status}`);
     }
-    return res.json();
+    return res.json() as Promise<RedeemResponse>;
-}
-
-/* =======================
-   Components
-======================= */
-function BrandLogo() {
-    // ไม่มีกรอบ/เงา — ให้ภาพลอยบนพื้นหลังขาวของหน้า
-    return (
-        <div className="relative w-56 h-16 sm:w-64 sm:h-20">
-            <Image
-                src={LOGO_PATH}
-                alt="Brand Logo"
-                fill
-                priority
-                sizes="(max-width:640px) 224px, 256px"
-                className="object-contain"
-            />
-        </div>
-    );
 }
 
 /* =======================
@@ -105,13 +95,13 @@ export default function RedeemPage() {
     const params = useParams<{ transactionId: string }>();
     const search = useSearchParams();
     const transactionId =
-        (params?.transactionId as string) || search?.get("transactionId") || "";
+        params?.transactionId ?? search?.get("transactionId") ?? "";
 
-    const [phoneDigits, setPhoneDigits] = useState(""); // เก็บเฉพาะตัวเลขอย่างเดียว
+    const [phoneDigits, setPhoneDigits] = useState<string>(""); // ตัวเลขล้วน
-    const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState<boolean>(false);
     const [message, setMessage] = useState<string | null>(null);
     const [error, setError] = useState<string | null>(null);
-    const [result, setResult] = useState<any>(null);
+    const [result, setResult] = useState<RedeemResponse | null>(null);
 
     // Validation message
     const phoneError: string | null = useMemo(() => {
@@ -130,20 +120,22 @@ export default function RedeemPage() {
 
     const phoneValid = phoneDigits.length === 10 && !phoneError && isStrictThaiMobile10(phoneDigits);
 
-    // --- Handlers บังคับให้ "พิมพ์ได้แต่เลข" ---
+    // --- Handlers: บังคับให้ "พิมพ์ได้แต่เลข" ---
     function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-        const onlyDigits = toAsciiDigitsOnly(e.target.value).slice(0, 10); // cap 10 ตัวเลย
+        const onlyDigits = toAsciiDigitsOnly(e.target.value).slice(0, 10);
         setPhoneDigits(onlyDigits);
     }
 
-    function handleBeforeInput(e: React.FormEvent<HTMLInputElement> & { data?: string }) {
+    function handleBeforeInput(e: React.FormEvent<HTMLInputElement>) {
-        // block non-digits ที่กำลังจะป้อน (รองรับเลขไทย)
+        // ใช้ nativeEvent: InputEvent เพื่อเช็คตัวอักษรที่กำลังจะป้อน
-        if (!e.data) return; // allow deletions/composition
+        const ie = e.nativeEvent as InputEvent;
-        if (!/^[0-9๐-๙]+$/.test(e.data)) e.preventDefault();
+        const data = (ie && "data" in ie ? ie.data : undefined) ?? "";
+        if (!data) return; // allow deletions/composition
+        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 เท่านั้น
@@ -179,8 +171,9 @@ export default function RedeemPage() {
 
             setResult(data);
             setMessage(data.message ?? "ดำเนินการแลกคะแนนสำเร็จ");
-        } catch (err: any) {
+        } catch (err: unknown) {
-            setError(err?.message ?? "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้");
+            const msg = err instanceof Error ? err.message : "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้";
+            setError(msg);
         } finally {
             setLoading(false);
         }
@@ -208,7 +201,7 @@ export default function RedeemPage() {
 
                     <form onSubmit={onSubmit} className="space-y-4">
                         <div>
-                            <label className="block text-sm font-medium">เบอร์โทรศัพท์</label>
+                            <label className="block text-sm font-medium">เบอร์โทรศัพท์ (ไทย 10 หลัก)</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"
@@ -216,21 +209,21 @@ export default function RedeemPage() {
                                 placeholder="เช่น 0812345678"
                                 value={phoneDigits}
                                 onChange={handleChange}
-                                onBeforeInput={handleBeforeInput as any}
+                                onBeforeInput={handleBeforeInput}
                                 onKeyDown={handleKeyDown}
                                 onPaste={handlePaste}
                                 inputMode="numeric"
                                 pattern="[0-9]*"
                                 autoComplete="tel"
                                 autoFocus
-                                maxLength={10} // รับแค่ 10 ตัว
+                                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">
-                                รองรับเฉพาะเบอร์โทร 10
+                                รองรับเฉพาะตัวเลข 10 หลัก (06 / 08 / 09xxxxxxxx)
                             </div>
                             {phoneError && (
                                 <div className="mt-1 text-xs text-red-600" id="phone-error">
@@ -255,8 +248,7 @@ export default function RedeemPage() {
                     )}
                     {error && (
                         <div className="mt-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
-                            {/*{error}*/}
+                            {error}
-                            Redeem ไม่สำเร็จ
                         </div>
                     )}
 
@@ -265,19 +257,13 @@ export default function RedeemPage() {
                             <div className="font-medium mb-1">รายละเอียด</div>
                             <div className="space-y-1 text-gray-700">
                                 {"balance" in result && (
-                                    <div>
+                                    <div>ยอดคงเหลือใหม่: <span className="font-semibold">{result.balance}</span></div>
-                                        ยอดคงเหลือใหม่: <span className="font-semibold">{result.balance}</span>
-                                    </div>
                                 )}
                                 {"voucherCode" in result && (
-                                    <div>
+                                    <div>รหัสคูปอง: <span className="font-mono">{result.voucherCode}</span></div>
-                                        รหัสคูปอง: <span className="font-mono">{result.voucherCode}</span>
-                                    </div>
                                 )}
                                 {"ledgerEntryId" in result && (
-                                    <div>
+                                    <div>Ledger: <span className="font-mono">{result.ledgerEntryId}</span></div>
-                                        Ledger: <span className="font-mono">{result.ledgerEntryId}</span>
-                                    </div>
                                 )}
                                 {"redeemed" in result && <div>สถานะ: {String(result.redeemed)}</div>}
                             </div>
@@ -287,4 +273,4 @@ export default function RedeemPage() {
             </div>
         </main>
     );
-}
+}

src/app/component/common/BrandLogo.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+
+const LOGO_PATH = "/assets/images/messageImage_1756462829731.jpg";
+
+function BrandLogo() {
+    return (
+        <div className="relative w-56 h-16 sm:w-64 sm:h-20">
+            <Image
+                src={LOGO_PATH}
+                alt="Brand Logo"
+                fill
+                priority
+                sizes="(max-width:640px) 224px, 256px"
+                className="object-contain"
+            />
+        </div>
+    );
+}
+
+export default BrandLogo;