Add Redeem Page
This commit is contained in:
Thanakarn Klangkasame
BIN
public/assets/images/messageImage_1756462829731.jpg
Normal file
BIN
public/assets/images/messageImage_1756462829731.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
290
src/app/(public)/redeem/[transactionId]/page.tsx
Normal file
290
src/app/(public)/redeem/[transactionId]/page.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
// 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";
|
||||
|
||||
/* =======================
|
||||
Config
|
||||
======================= */
|
||||
const LOGO_PATH = "/assets/images/messageImage_1756462829731.jpg";
|
||||
const API_BASE = process.env.NEXT_PUBLIC_EOP_PUBLIC_API_BASE ?? "";
|
||||
|
||||
/* =======================
|
||||
Utils
|
||||
======================= */
|
||||
function uuidv4() {
|
||||
if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
|
||||
return "idem-" + Date.now() + "-" + Math.random().toString(16).slice(2);
|
||||
}
|
||||
|
||||
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 parts = host.split(".");
|
||||
if (parts.length >= 3) return parts[0]; // subdomain as tenant key
|
||||
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
|
||||
}
|
||||
|
||||
// รับเฉพาะเบอร์มือถือไทย 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);
|
||||
}
|
||||
|
||||
/* =======================
|
||||
API
|
||||
======================= */
|
||||
async function redeemPoints(input: {
|
||||
tenantKey: string;
|
||||
transactionId: string;
|
||||
phoneDigits10: string; // 0812345678
|
||||
idempotencyKey: string;
|
||||
}) {
|
||||
const res = await fetch(`${API_BASE}/api/v1/loyalty/redeem`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Tenant-Key": input.tenantKey,
|
||||
"Idempotency-Key": input.idempotencyKey,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
transactionId: input.transactionId,
|
||||
contact: { phone: input.phoneDigits10 },
|
||||
metadata: { source: "qr-landing" },
|
||||
}),
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
/* =======================
|
||||
Page
|
||||
======================= */
|
||||
export default function RedeemPage() {
|
||||
const params = useParams<{ transactionId: string }>();
|
||||
const search = useSearchParams();
|
||||
const transactionId =
|
||||
(params?.transactionId as string) || search?.get("transactionId") || "";
|
||||
|
||||
const [phoneDigits, setPhoneDigits] = useState(""); // เก็บเฉพาะตัวเลขอย่างเดียว
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [result, setResult] = useState<any>(null);
|
||||
|
||||
// Validation message
|
||||
const phoneError: string | null = useMemo(() => {
|
||||
if (!phoneDigits) return null;
|
||||
if (looksLikeCountryCodeFormat(phoneDigits)) {
|
||||
return "กรุณาใส่เบอร์รูปแบบไทย 10 หลัก เช่น 0812345678 (ไม่ต้องใส่ +66)";
|
||||
}
|
||||
if (phoneDigits.length > 0 && phoneDigits.length !== 10) {
|
||||
return "กรุณากรอกเป็นตัวเลข 10 หลัก";
|
||||
}
|
||||
if (phoneDigits.length === 10 && !isStrictThaiMobile10(phoneDigits)) {
|
||||
return "รับเฉพาะเบอร์มือถือไทยที่ขึ้นต้นด้วย 06, 08 หรือ 09 เท่านั้น";
|
||||
}
|
||||
return null;
|
||||
}, [phoneDigits]);
|
||||
|
||||
const phoneValid = phoneDigits.length === 10 && !phoneError && isStrictThaiMobile10(phoneDigits);
|
||||
|
||||
// --- Handlers บังคับให้ "พิมพ์ได้แต่เลข" ---
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const onlyDigits = toAsciiDigitsOnly(e.target.value).slice(0, 10); // cap 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 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") ?? "";
|
||||
const onlyDigits = toAsciiDigitsOnly(text);
|
||||
if (!onlyDigits) return;
|
||||
setPhoneDigits((prev) => (prev + onlyDigits).slice(0, 10));
|
||||
}
|
||||
|
||||
async function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setMessage(null);
|
||||
setResult(null);
|
||||
|
||||
try {
|
||||
const tenantKey = getTenantKeyFromHost();
|
||||
const idempotencyKey = uuidv4();
|
||||
|
||||
const data = await redeemPoints({
|
||||
tenantKey,
|
||||
transactionId,
|
||||
phoneDigits10: phoneDigits,
|
||||
idempotencyKey,
|
||||
});
|
||||
|
||||
setResult(data);
|
||||
setMessage(data.message ?? "ดำเนินการแลกคะแนนสำเร็จ");
|
||||
} catch (err: any) {
|
||||
setError(err?.message ?? "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
<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>
|
||||
|
||||
{/* Card */}
|
||||
<div className="w-full bg-white rounded-2xl shadow-xl ring-1 ring-black/5 p-6">
|
||||
{!transactionId && (
|
||||
<div className="mb-4 text-sm rounded-xl border border-red-200 bg-red-50 p-3 text-red-700">
|
||||
ไม่พบ TransactionId ใน URL โปรดสแกน QR ใหม่
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<div>
|
||||
<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 as any}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPaste={handlePaste}
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
autoComplete="tel"
|
||||
autoFocus
|
||||
maxLength={10} // รับแค่ 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
|
||||
</div>
|
||||
{phoneError && (
|
||||
<div className="mt-1 text-xs text-red-600" id="phone-error">
|
||||
{phoneError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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"
|
||||
>
|
||||
{loading ? "กำลังดำเนินการ..." : "ยืนยันการแลกคะแนน"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{message && (
|
||||
<div className="mt-4 rounded-xl border border-green-200 bg-green-50 p-3 text-sm text-green-800">
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="mt-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
|
||||
{/*{error}*/}
|
||||
Redeem ไม่สำเร็จ
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className="mt-4 rounded-xl border p-3 text-sm">
|
||||
<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>
|
||||
)}
|
||||
{"voucherCode" in result && (
|
||||
<div>
|
||||
รหัสคูปอง: <span className="font-mono">{result.voucherCode}</span>
|
||||
</div>
|
||||
)}
|
||||
{"ledgerEntryId" in result && (
|
||||
<div>
|
||||
Ledger: <span className="font-mono">{result.ledgerEntryId}</span>
|
||||
</div>
|
||||
)}
|
||||
{"redeemed" in result && <div>สถานะ: {String(result.redeemed)}</div>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user