Simulationable/amrez-nova-eop-services-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Login and Dashboard

Browse Source
This commit is contained in:
Thanakarn Klangkasame
2025-10-05 19:17:42 +07:00
parent 594e0d42d1
commit 7fb60ba0f5
26 changed files with 1750 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,175 +1,102 @@
// File: src/app/(public)/redeem/[transactionId]/page.tsx
"use client";
import { useState, useMemo } from "react";
import { useMemo, useRef, useState } from "react";
import { useParams, useSearchParams } from "next/navigation";
import BrandLogo from "@/app/component/common/BrandLogo";
import { genIdempotencyKey } from "@/lib/idempotency";
import { resolveTenantKeyFromHost } from "@/lib/tenant";
import { onlyAsciiDigits, isThaiMobile10, looksLikeCountryCode } from "@/lib/phone";
import type { RedeemResponse, RedeemRequest } from "@/types/crm";
/* =======================
Config
======================= */
const API_BASE = process.env.NEXT_PUBLIC_EOP_PUBLIC_API_BASE ?? "";
/* =======================
Types
======================= */
type RedeemResponse = {
balance?: number;
voucherCode?: string;
ledgerEntryId?: string;
redeemed?: boolean;
message?: string;
};
/* =======================
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;
const parts = host.split(".");
if (parts.length >= 3) return parts[0];
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, "");
}
// รับเฉพาะเบอร์มือถือไทย 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;
}): Promise<RedeemResponse> {
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() as Promise<RedeemResponse>;
}
/* =======================
Page
======================= */
export default function RedeemPage() {
const params = useParams<{ transactionId: string }>();
const search = useSearchParams();
const transactionId = params?.transactionId ?? search?.get("transactionId") ?? "";
const [phoneDigits, setPhoneDigits] = useState<string>("");
const [loading, setLoading] = useState<boolean>(false);
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<RedeemResponse | null>(null);
// Validation message
const phoneError: string | null = useMemo(() => {
const idemRef = useRef<string | null>(null);
const phoneError = 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)) {
if (looksLikeCountryCode(phoneDigits)) return "กรุณาใส่รูปแบบไทย 10 หลัก เช่น 0812345678";
if (phoneDigits.length > 0 && phoneDigits.length !== 10) return "กรุณากรอกเป็นตัวเลข 10 หลัก";
if (phoneDigits.length === 10 && !isThaiMobile10(phoneDigits))
return "รับเฉพาะเบอร์มือถือไทยที่ขึ้นต้นด้วย 06, 08 หรือ 09 เท่านั้น";
}
return null;
}, [phoneDigits]);
const phoneValid = phoneDigits.length === 10 && !phoneError && isStrictThaiMobile10(phoneDigits);
const phoneValid = phoneDigits.length === 10 && !phoneError && isThaiMobile10(phoneDigits);
// Guard input — digits only (รองรับเลขไทย)
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
const onlyDigits = toAsciiDigitsOnly(e.target.value).slice(0, 10);
setPhoneDigits(onlyDigits);
setPhoneDigits(onlyAsciiDigits(e.target.value).slice(0, 10));
}
function handleBeforeInput(e: React.FormEvent<HTMLInputElement>) {
const ie = e.nativeEvent as InputEvent;
const data = (ie && "data" in ie ? ie.data : undefined) ?? "";
if (!data) return;
if (!/^[0-9๐-๙]+$/.test(data)) e.preventDefault();
const nativeEvt = e.nativeEvent as unknown;
const data =
nativeEvt && typeof nativeEvt === "object" && "data" in (nativeEvt as InputEvent)
? (nativeEvt as InputEvent).data
: null;
if (data && !/^[0-9๐-๙]+$/.test(data)) e.preventDefault();
}
function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
const allow = ["Backspace", "Delete", "Tab", "ArrowLeft", "ArrowRight", "Home", "End"];
if (allow.includes(e.key)) return;
if (/^[0-9]$/.test(e.key)) return;
if (allow.includes(e.key) || /^[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);
const onlyDigits = onlyAsciiDigits(e.clipboardData.getData("text") ?? "");
if (!onlyDigits) return;
setPhoneDigits((prev) => (prev + onlyDigits).slice(0, 10));
}
async function onSubmit(e: React.FormEvent) {
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
if (!transactionId || !phoneValid || loading) return;
setLoading(true);
setError(null);
setMessage(null);
setResult(null);
try {
const tenantKey = getTenantKeyFromHost();
const idempotencyKey = uuidv4();
const tenantKey = resolveTenantKeyFromHost();
idemRef.current = genIdempotencyKey();
const data = await redeemPoints({
tenantKey,
const payload: RedeemRequest = {
transactionId,
phoneDigits10: phoneDigits,
idempotencyKey,
contact: { phone: phoneDigits },
metadata: { source: "qr-landing" },
};
const res = await fetch(`/api/public/redeem`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Tenant-Key": tenantKey,
"Idempotency-Key": idemRef.current!,
},
body: JSON.stringify(payload),
cache: "no-store",
});
if (!res.ok) throw new Error((await res.text()) || `HTTP ${res.status}`);
const data: RedeemResponse = await res.json();
setResult(data);
setMessage("สะสมคะแนนสำเร็จ");
} catch (err: unknown) {
const msg = err instanceof Error ? err.message : "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้";
setError(msg);
} catch (ex: unknown) {
const err = ex as Error;
setError(err.message ?? "เกิดข้อผิดพลาด ไม่สามารถแลกคะแนนได้");
} finally {
setLoading(false);
idemRef.current = null;
}
}
@@ -187,7 +114,7 @@ export default function RedeemPage() {
Transaction: <span className="font-mono">{transactionId || "—"}</span>
</p>
{/* Card — เรียบแต่เนี๊ยบขึ้น */}
{/* 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">
@@ -197,14 +124,10 @@ export default function RedeemPage() {
<form onSubmit={onSubmit} className="space-y-5">
<div>
<label className="block text-sm font-medium text-neutral-800">
เบอร์โทรศัพท์
</label>
<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"
phoneError ? "border-red-400 focus:ring-red-200" : "border-neutral-300 focus:ring-neutral-200"
}`}
placeholder="เช่น 0812345678"
value={phoneDigits}
@@ -241,7 +164,6 @@ export default function RedeemPage() {
</button>
</form>
{/* Banners */}
{message && (
<div className="mt-5 rounded-xl border border-neutral-200 bg-neutral-50 p-3 text-sm text-neutral-800">
สะสมคะแนนสำเร็จ