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:01:28 +07:00
parent f65f8a09f4
commit e394f352e8
1 changed files with 68 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,9 @@
// File: src/app/(public)/redeem/[transactionId]/page.tsx
"use client"; "use client";
import { useState, useMemo } from "react"; import { useState, useMemo } from "react";
import { useParams, useSearchParams } from "next/navigation"; import { useParams, useSearchParams } from "next/navigation";
import BrandLogo from "@/app/component/common/BrandLogo" import BrandLogo from "@/app/component/common/BrandLogo";
/* ======================= /* =======================
Config Config
@@ -30,28 +31,25 @@ function uuidv4() {
function getTenantKeyFromHost() { function getTenantKeyFromHost() {
if (typeof window === "undefined") return process.env.NEXT_PUBLIC_DEFAULT_TENANT_KEY ?? "demo"; 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 host = window.location.hostname;
const parts = host.split("."); const parts = host.split(".");
if (parts.length >= 3) return parts[0]; // subdomain as tenant key if (parts.length >= 3) return parts[0];
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",
"๕": "5", "๖": "6", "๗": "7", "๘": "8", "๙": "9", "๕": "5", "๖": "6", "๗": "7", "๘": "8", "๙": "9",
}; };
const thToEn = input.replace(/[๐-๙]/g, (ch) => map[ch] ?? ch); const thToEn = input.replace(/[๐-๙]/g, (ch) => map[ch] ?? ch);
return thToEn.replace(/\D/g, ""); // keep digits only 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);
@@ -63,7 +61,7 @@ function looksLikeCountryCodeFormat(raw: string) {
async function redeemPoints(input: { async function redeemPoints(input: {
tenantKey: string; tenantKey: string;
transactionId: string; transactionId: string;
phoneDigits10: string; // 0812345678 phoneDigits10: string;
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`, {
@@ -94,16 +92,14 @@ async function redeemPoints(input: {
export default function RedeemPage() { export default function RedeemPage() {
const params = useParams<{ transactionId: string }>(); const params = useParams<{ transactionId: string }>();
const search = useSearchParams(); const search = useSearchParams();
const transactionId = const transactionId = params?.transactionId ?? search?.get("transactionId") ?? "";
params?.transactionId ?? search?.get("transactionId") ?? "";
const [phoneDigits, setPhoneDigits] = useState<string>(""); // ตัวเลขล้วน const [phoneDigits, setPhoneDigits] = useState<string>("");
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [message, setMessage] = useState<string | null>(null); const [message, setMessage] = useState<string | null>(null);
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)) {
@@ -120,29 +116,23 @@ export default function RedeemPage() {
const phoneValid = phoneDigits.length === 10 && !phoneError && isStrictThaiMobile10(phoneDigits); const phoneValid = phoneDigits.length === 10 && !phoneError && isStrictThaiMobile10(phoneDigits);
// --- Handlers: บังคับให้ "พิมพ์ได้แต่เลข" --- // Input guards — allow only digits (รองรับเลขไทย)
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);
} }
function handleBeforeInput(e: React.FormEvent<HTMLInputElement>) { function handleBeforeInput(e: React.FormEvent<HTMLInputElement>) {
// ใช้ nativeEvent: InputEvent เพื่อเช็คตัวอักษรที่กำลังจะป้อน
const ie = e.nativeEvent as InputEvent; const ie = e.nativeEvent as InputEvent;
const data = (ie && "data" in ie ? ie.data : undefined) ?? ""; const data = (ie && "data" in ie ? ie.data : undefined) ?? "";
if (!data) return; // allow deletions/composition if (!data) return;
if (!/^[0-9๐-๙]+$/.test(data)) e.preventDefault(); if (!/^[0-9๐-๙]+$/.test(data)) e.preventDefault();
} }
function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) { function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
// อนุญาตปุ่มควบคุมพื้นฐาน
const allow = ["Backspace", "Delete", "Tab", "ArrowLeft", "ArrowRight", "Home", "End"]; const allow = ["Backspace", "Delete", "Tab", "ArrowLeft", "ArrowRight", "Home", "End"];
if (allow.includes(e.key)) return; if (allow.includes(e.key)) return;
// อนุญาตเฉพาะ 0-9 เท่านั้น
if (/^[0-9]$/.test(e.key)) return; if (/^[0-9]$/.test(e.key)) return;
e.preventDefault(); e.preventDefault();
} }
function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) { function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
e.preventDefault(); e.preventDefault();
const text = e.clipboardData.getData("text") ?? ""; const text = e.clipboardData.getData("text") ?? "";
@@ -170,7 +160,7 @@ export default function RedeemPage() {
}); });
setResult(data); setResult(data);
setMessage(data.message ?? "ดำเนินการแลกคะแนนสำเร็จ"); setMessage("สะสมคะแนนสำเร็จ");
} catch (err: unknown) { } catch (err: unknown) {
const msg = err instanceof Error ? err.message : "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้"; const msg = err instanceof Error ? err.message : "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้";
setError(msg); setError(msg);
@@ -180,31 +170,45 @@ export default function RedeemPage() {
} }
return ( return (
<main className="min-h-screen flex items-center justify-center bg-white px-4"> <main className="relative min-h-screen overflow-hidden bg-white text-neutral-900">
<div className="w-full max-w-md"> {/* Background: mono grid + soft lights */}
{/* Header / Branding */} <div
<div className="flex flex-col items-center mb-4"> 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 */}
<div className="flex flex-col items-center">
<BrandLogo /> <BrandLogo />
<h1 className="mt-3 text-2xl font-semibold tracking-tight">Redeem Points</h1> <div className="mt-3 h-px w-24 bg-neutral-200" />
<p className="text-xs text-gray-500 mt-1">
Transaction: <span className="font-mono">{transactionId || "—"}</span>
</p>
</div> </div>
{/* Headings */}
<h1 className="mt-6 text-3xl font-extrabold tracking-tight sm:text-4xl">
Redeem Points
</h1>
<p className="mt-1 text-xs text-neutral-500">
Transaction: <span className="font-mono">{transactionId || "—"}</span>
</p>
{/* Card */} {/* Card */}
<div className="w-full bg-white rounded-2xl shadow-xl ring-1 ring-black/5 p-6"> <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">
{!transactionId && ( {!transactionId && (
<div className="mb-4 text-sm rounded-xl border border-red-200 bg-red-50 p-3 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-4">
<div> <div className="group">
<label className="block text-sm font-medium">เบอร์โทรศัพท์</label> <label className="block text-sm font-medium">เบอร์โทรศัพท์</label>
<div className="relative mt-1">
<input <input
className={`mt-1 w-full rounded-xl border px-3 py-2 outline-none focus:ring-2 focus:ring-black/10 ${ className={`w-full rounded-xl border px-4 py-3 pr-12 outline-none transition focus:ring-2 ${
phoneError ? "border-red-400" : "border-gray-300" phoneError ? "border-red-400 focus:ring-red-200" : "border-neutral-300 focus:ring-neutral-200"
}`} }`}
placeholder="เช่น 0812345678" placeholder="เช่น 0812345678"
value={phoneDigits} value={phoneDigits}
@@ -222,7 +226,10 @@ export default function RedeemPage() {
required required
type="text" type="text"
/> />
<div className="mt-1 text-xs text-gray-500" id="phone-help"> {/* 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>
<div className="mt-1 text-xs text-neutral-500" id="phone-help">
รองรับเฉพาะเบอร์โทรศัพท์มือถือ รองรับเฉพาะเบอร์โทรศัพท์มือถือ
</div> </div>
{phoneError && ( {phoneError && (
@@ -235,28 +242,28 @@ export default function RedeemPage() {
<button <button
type="submit" type="submit"
disabled={loading || !phoneValid || !transactionId} disabled={loading || !phoneValid || !transactionId}
className="w-full rounded-xl bg-black text-white py-2.5 disabled:opacity-50 disabled:cursor-not-allowed transition" 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"
> >
{loading ? "กำลังดำเนินการ..." : "ยืนยันการแลกคะแนน"} {loading ? "กำลังดำเนินการ..." : "ยืนยันการแลกคะแนน"}
</button> </button>
</form> </form>
{/* Result banners */}
{message && ( {message && (
<div className="mt-4 rounded-xl border border-green-200 bg-green-50 p-3 text-sm text-green-800"> <div role="status" className="mt-4 rounded-xl border border-neutral-900/10 bg-neutral-900/5 p-3 text-sm text-neutral-900">
{message} สะสมคะแนนสำเร็จ
</div> </div>
)} )}
{error && ( {error && (
<div className="mt-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700"> <div role="status" className="mt-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
{/*{error}*/}
สะสมคะแนนไม่สำเร็จ สะสมคะแนนไม่สำเร็จ
</div> </div>
)} )}
{result && ( {result && (
<div className="mt-4 rounded-xl border p-3 text-sm"> <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="font-medium mb-1">รายละเอียด</div>
<div className="space-y-1 text-gray-700"> <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>
)} )}
@@ -271,7 +278,7 @@ export default function RedeemPage() {
</div> </div>
)} )}
</div> </div>
</div> </section>
</main> </main>
); );
} }