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";
}
// แปลงเลขไทย→อารบิก แล้วเหลือเฉพาะ 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>