Simulationable/amrez-nova-eop-services-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change Redeem Page

Browse Source
This commit is contained in:
Thanakarn Klangkasame
2025-10-02 13:05:51 +07:00
parent e394f352e8
commit 594e0d42d1
1 changed files with 54 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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