diff --git a/public/assets/images/messageImage_1756462829731.jpg b/public/assets/images/messageImage_1756462829731.jpg new file mode 100644 index 0000000..a169205 Binary files /dev/null and b/public/assets/images/messageImage_1756462829731.jpg differ diff --git a/src/app/(public)/redeem/[transactionId]/page.tsx b/src/app/(public)/redeem/[transactionId]/page.tsx new file mode 100644 index 0000000..da264b6 --- /dev/null +++ b/src/app/(public)/redeem/[transactionId]/page.tsx @@ -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 = { + "๐": "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 ( +
+ Brand Logo +
+ ); +} + +/* ======================= + 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(null); + const [error, setError] = useState(null); + const [result, setResult] = useState(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) { + const onlyDigits = toAsciiDigitsOnly(e.target.value).slice(0, 10); // cap 10 ตัวเลย + setPhoneDigits(onlyDigits); + } + + function handleBeforeInput(e: React.FormEvent & { 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) { + // รองรับปุ่มควบคุมพื้นฐาน + 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) { + 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 ( +
+
+ {/* Header / Branding */} +
+ +

Redeem Points

+

+ Transaction: {transactionId || "—"} +

+
+ + {/* Card */} +
+ {!transactionId && ( +
+ ไม่พบ TransactionId ใน URL โปรดสแกน QR ใหม่ +
+ )} + +
+
+ + +
+ รองรับเฉพาะเบอร์โทร 10 +
+ {phoneError && ( +
+ {phoneError} +
+ )} +
+ + +
+ + {message && ( +
+ {message} +
+ )} + {error && ( +
+ {/*{error}*/} + Redeem ไม่สำเร็จ +
+ )} + + {result && ( +
+
รายละเอียด
+
+ {"balance" in result && ( +
+ ยอดคงเหลือใหม่: {result.balance} +
+ )} + {"voucherCode" in result && ( +
+ รหัสคูปอง: {result.voucherCode} +
+ )} + {"ledgerEntryId" in result && ( +
+ Ledger: {result.ledgerEntryId} +
+ )} + {"redeemed" in result &&
สถานะ: {String(result.redeemed)}
} +
+
+ )} +
+
+
+ ); +} \ No newline at end of file