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