Fix Redeem
This commit is contained in:
Thanakarn Klangkasame
@@ -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();
|
||||
}
|
||||
|
||||
/* =======================
|
||||
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>
|
||||
);
|
||||
return res.json() as Promise<RedeemResponse>;
|
||||
}
|
||||
|
||||
/* =======================
|
||||
@@ -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 [loading, setLoading] = useState(false);
|
||||
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<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 }) {
|
||||
// block non-digits ที่กำลังจะป้อน (รองรับเลขไทย)
|
||||
if (!e.data) return; // allow deletions/composition
|
||||
if (!/^[0-9๐-๙]+$/.test(e.data)) e.preventDefault();
|
||||
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 (!/^[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) {
|
||||
setError(err?.message ?? "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้");
|
||||
} catch (err: unknown) {
|
||||
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}*/}
|
||||
Redeem ไม่สำเร็จ
|
||||
{error}
|
||||
</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>
|
||||
ยอดคงเหลือใหม่: <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>
|
||||
@@ -287,4 +273,4 @@ export default function RedeemPage() {
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user