This commit is contained in:
Your Name committed 2026-10-08 08:08:37 +07:00
1 parent d13dedd215
commit dba82b26a8
17 files changed
+427 -71

No files matched your search

+24 -21
View File
@@ -20,7 +20,7 @@ function orderLabel(id: number) {
export async function generateMetadata({ params }: { params: Promise<{ id: string, lang: string }> }): Promise<Metadata> {
const { id, lang } = await params
const [result, settings] = await Promise.all([
getOrderResult(id),
getOrderResult(id, lang),
getStoreSettings(lang),
])
@@ -45,7 +45,7 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
const { id, lang } = await params
const t = getServerTranslations(lang)
const [orderResult, categoriesResult, cmsLayoutResult, settings] = await Promise.all([
getOrderResult(id),
getOrderResult(id, lang),
getCategoriesResult(lang),
getCmsPageResult('order-success-layout', lang),
getStoreSettings(lang),
@@ -132,26 +132,29 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
{t.order.items.title}
</h2>
<div className="mt-6 space-y-4">
{order.items.map((item) => (
<div key={item.id} className="flex items-center gap-4 rounded-2xl bg-surface-page p-4">
<div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-surface-card">
<Image
src={item.productImage || '/images/fallback-product.svg'}
alt={item.productName}
fill
unoptimized
className="h-full w-full object-cover"
/>
{order.items.map((item) => {
const displayName = (item.translations as any)?.name?.[lang] || item.productName
return (
<div key={item.id} className="flex items-center gap-4 rounded-2xl bg-surface-page p-4">
<div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-surface-card">
<Image
src={item.productImage || '/images/fallback-product.svg'}
alt={displayName}
fill
unoptimized
className="h-full w-full object-cover"
/>
</div>
<div className="min-w-0 flex-1">
<p className="font-semibold text-text-main">{displayName}</p>
<p className="text-sm text-muted-text">
{item.variantName ? `${item.variantName} · ` : ''}x {item.quantity}
</p>
</div>
<p className="font-bold text-brand-primary">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
</div>
<div className="min-w-0 flex-1">
<p className="font-semibold text-text-main">{item.productName}</p>
<p className="text-sm text-muted-text">
{item.variantName ? `${item.variantName} · ` : ''}x {item.quantity}
</p>
</div>
<p className="font-bold text-brand-primary">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
</div>
))}
)
})}
</div>
<div className="mt-6 space-y-3 border-t border-line-primary/20 pt-5 text-sm">
+13 -8
View File
@@ -5,18 +5,19 @@ import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
import TrackOrderClient from '@/components/TrackOrderClient'
import { getCategoriesResult, getCmsPageResult, getStoreSettings } from '@/lib/cms'
import { splitCmsLayoutSections } from '@/lib/cms-sections'
import { getServerTranslations } from '@/lib/translations'
// lang is extracted from params
export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }) {
const { lang } = await params;
const settings = await getStoreSettings(lang);
const t = getServerTranslations(lang);
const brandName = settings?.brandName || '';
const description = brandName
? `ตรวจสอบสถานะคำสั่งซื้อ ${brandName} ด้วยหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์ที่ใช้สั่งซื้อ`
: 'ตรวจสอบสถานะคำสั่งซื้อ ด้วยหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์ที่ใช้สั่งซื้อ';
const baseDesc = t.track?.seoDescription || 'ตรวจสอบสถานะคำสั่งซื้อ ด้วยหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์ที่ใช้สั่งซื้อ';
const description = brandName ? `${baseDesc} - ${brandName}` : baseDesc;
return generateSeoMetadata({
title: 'ติดตามคำสั่งซื้อ',
title: t.track?.seoTitle || 'ติดตามคำสั่งซื้อ',
description,
path: '/track',
lang,
@@ -30,6 +31,7 @@ export default async function TrackPage({ params }: { params: Promise<{ lang: st
getCategoriesResult(lang),
getCmsPageResult('track-order-layout', lang),
])
const t = getServerTranslations(lang)
const categories = categoriesResult.ok ? categoriesResult.data : []
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
@@ -51,16 +53,18 @@ export default async function TrackPage({ params }: { params: Promise<{ lang: st
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-card">
<MapPin className="h-8 w-8" />
</div>
<p className="ui-eyebrow">Track Order</p>
<h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">Track Your Status</h1>
<p className="ui-eyebrow">{t.track?.hero?.eyebrow || 'Track Order'}</p>
<h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">
{t.track?.hero?.title || 'Track Your Status'}
</h1>
<p className="mx-auto mt-4 max-w-2xl text-muted-text">
กรอกหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์เพื่อตรวจสอบสถานะสินค้า หรือกลับมาดูคำสั่งซื้อที่เคยค้นหาบนอุปกรณ์นี้
{t.track?.hero?.description || 'กรอกหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์เพื่อตรวจสอบสถานะสินค้า หรือกลับมาดูคำสั่งซื้อที่เคยค้นหาบนอุปกรณ์นี้'}
</p>
</section>
)}
<section className="mx-auto max-w-5xl px-6 py-14 md:py-20">
<TrackOrderClient />
<TrackOrderClient lang={lang} />
</section>
{bottomSections.length > 0 && (
@@ -69,3 +73,4 @@ export default async function TrackPage({ params }: { params: Promise<{ lang: st
</main>
)
}