admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-06-21 01:03:29 -04:00
1 parent c365add07f
commit c449de2482
28 files changed
+694 -300
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/website/src/app/[lang]/coupons/page.tsx
+3 -2
View File
@@ -4,6 +4,7 @@ import { generateSeoMetadata } from '@/lib/seo'
import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
import { getActiveCouponsResult, getCategoriesResult, getCmsPageResult } from '@/lib/cms'
import { splitCmsLayoutSections } from '@/lib/cms-sections'
import { toneClass } from '@/lib/theme'
// lang is extracted from params
function formatDiscount(type: string, value: number) {
@@ -62,7 +63,7 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
<div className="mx-auto max-w-6xl px-6 pb-24">
{!couponsResult.ok ? (
<div className="ui-panel border border-rose-100 px-6 py-20 text-center">
<div className={`ui-panel px-6 py-20 text-center ${toneClass('error')}`}>
<Ticket className="mx-auto mb-4 h-16 w-16 text-rose-200" />
<h2 className="mb-2 text-xl font-semibold text-text-main">ไม่สามารถโหลดคูปองได้</h2>
<p className="text-sm text-rose-500">{couponsResult.error}</p>
@@ -92,7 +93,7 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
<Ticket className="h-6 w-6" />
</div>
{coupon.expiresAt && (
<span className="rounded-md bg-amber-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-amber-600">
<span className={`rounded-md px-2 py-1 text-[10px] font-bold uppercase tracking-wider ${toneClass('warning')}`}>
หมดเขต {new Date(coupon.expiresAt).toLocaleDateString('th-TH')}
</span>
)}
apps/website/src/app/[lang]/order/[id]/page.tsx
+4 -11
View File
@@ -9,6 +9,7 @@ import { formatPrice } from '@homaroma/types'
import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
import { getCategoriesResult, getCmsPageResult, getOrderResult } from '@/lib/cms'
import { splitCmsLayoutSections } from '@/lib/cms-sections'
import { orderStatusBadgeClass, toneClass } from '@/lib/theme'
// lang is extracted from params
function orderLabel(id: number) {
@@ -28,14 +29,6 @@ function statusLabel(status: string) {
return labels[status] ?? status.replaceAll('_', ' ')
}
function statusTone(status: string) {
if (status === 'PENDING_PAYMENT') return 'bg-brand-warm/15 text-amber-700 border-amber-100'
if (status === 'PAID' || status === 'PROCESSING') return 'bg-brand-success/20 text-emerald-700 border-emerald-100'
if (status === 'SHIPPED' || status === 'DELIVERED') return 'bg-brand-cool/40 text-sky-700 border-sky-100'
if (status === 'CANCELLED') return 'bg-rose-50 text-rose-700 border-rose-100'
return 'bg-surface-page text-muted-text border-line-primary/20'
}
export async function generateMetadata({ params }: { params: Promise<{ id: string, lang: string }> }): Promise<Metadata> {
const { id, lang } = await params
const result = await getOrderResult(id)
@@ -74,7 +67,7 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
<section className="mx-auto max-w-3xl px-6 py-24 text-center">
<div className="ui-panel border border-rose-100 p-10">
<div className={`ui-panel p-10 ${toneClass('error')}`}>
<h1 className="text-2xl font-semibold text-text-main">ไม่สามารถโหลดคำสั่งซื้อนี้ได้</h1>
<p className="mt-3 text-sm text-rose-500">{orderResult.error}</p>
<Link href="/track" className="mt-6 inline-flex font-semibold text-brand-primary">กลับไปค้นหาคำสั่งซื้อ</Link>
@@ -116,7 +109,7 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
<article className="ui-panel p-6">
<PackageCheck className="mb-4 h-6 w-6 text-brand-primary" />
<p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Status</p>
<span className={`mt-3 inline-flex rounded-full border px-3 py-1 text-xs font-bold uppercase tracking-[0.14em] ${statusTone(order.status)}`}>
<span className={`mt-3 inline-flex rounded-full px-3 py-1 text-xs font-bold uppercase tracking-[0.14em] ${orderStatusBadgeClass(order.status)}`}>
{statusLabel(order.status)}
</span>
</article>
@@ -177,7 +170,7 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
</section>
{order.status === 'PENDING_PAYMENT' && (
<section className="rounded-3xl border border-amber-100 bg-brand-warm/15 p-6 text-amber-800">
<section className={toneClass('warning')}>
<h2 className="font-semibold">คำสั่งซื้อนี้ยังรอการชำระเงิน</h2>
<p className="mt-2 text-sm leading-relaxed">
หน้านี้รองรับการตรวจสอบสถานะคำสั่งซื้อแล้ว ส่วนการชำระเงินและอัปโหลดสลิปบน website จะย้ายมาในรอบถัดไป เพื่อไม่ทำ workaround ที่เสี่ยงกับ payment flow
apps/website/src/app/globals.css
+248 -7
View File
@@ -1,10 +1,6 @@
@import "tailwindcss";
@theme {
--font-body: var(--font-body-active, var(--font-body-locale, ui-sans-serif)), system-ui, sans-serif;
--font-display: var(--font-display-active, var(--font-display-locale, var(--font-body-locale, ui-sans-serif))), system-ui, sans-serif;
--font-sans: var(--font-body);
--color-brand-primary: #FF6B6B;
--color-brand-primary-hover: #FF4500;
--color-brand-accent: #FFF200;
@@ -47,8 +43,8 @@
@layer base {
:root,
html {
--font-body-locale: var(--font-sarabun, "Sarabun"), "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
--font-display-locale: var(--font-body-locale);
--font-body-locale: "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
--font-display-locale: "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
}
html[lang="en"] {
@@ -76,8 +72,12 @@
--font-display-locale: var(--font-body-locale);
}
html {
font-family: var(--font-body-locale);
}
body {
@apply bg-surface-page text-text-main font-sans antialiased;
@apply bg-surface-page text-text-main antialiased;
background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),
radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
min-height: 100vh;
@@ -85,6 +85,7 @@
h1, h2, h3, h4 {
@apply text-text-main font-semibold tracking-tight;
font-family: var(--font-display-locale);
}
}
@@ -205,6 +206,188 @@
@apply italic text-brand-accent;
}
.ui-hero-shell {
position: relative;
display: flex;
min-height: 90vh;
width: 100%;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--color-text-main);
color: #fff;
}
.ui-hero-overlay {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--color-text-main) 40%, transparent);
}
.ui-hero-overlay-strong {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
color-mix(in srgb, var(--color-text-main) 90%, transparent),
color-mix(in srgb, var(--color-text-main) 10%, transparent),
color-mix(in srgb, var(--color-text-main) 30%, transparent)
);
}
.ui-hero-title {
color: #fff;
font-family: var(--font-display-locale);
font-size: 3rem;
font-weight: 300;
line-height: 1.25;
letter-spacing: 0.025em;
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}
.ui-hero-copy {
margin-inline: auto;
max-width: 42rem;
padding-top: 1rem;
padding-bottom: 2rem;
color: rgb(255 255 255 / 0.9);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.75rem;
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}
.ui-hero-button {
border-radius: 9999px;
background: var(--color-surface-card);
padding: 1rem 2rem;
color: var(--color-text-main);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background-color 300ms ease, box-shadow 300ms ease;
}
.ui-hero-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
color: #fff;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: color 150ms ease;
}
.ui-banner-shell {
position: relative;
margin-inline: auto;
min-height: 360px;
max-width: 80rem;
overflow: hidden;
border-radius: 1.5rem;
box-shadow: var(--shadow-card);
}
.ui-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to right,
color-mix(in srgb, var(--color-text-main) 75%, transparent),
color-mix(in srgb, var(--color-text-main) 35%, transparent),
transparent
);
}
.ui-banner-content {
position: relative;
z-index: 10;
max-width: 36rem;
padding: 2rem;
color: #fff;
}
.ui-banner-content > * + * {
margin-top: 1rem;
}
.ui-section-dark {
background: var(--color-text-main);
padding: 5rem 1.5rem;
color: #fff;
}
.ui-section-dark-card {
overflow: hidden;
border-radius: 1.5rem;
border: 1px solid color-mix(in srgb, var(--color-line-primary) 10%, transparent);
background: color-mix(in srgb, var(--color-surface-card) 60%, transparent);
}
.ui-section-dark-card-title {
color: #fff;
font-size: 2.25rem;
font-weight: 600;
line-height: 2.5rem;
}
.ui-section-dark-card-copy {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
color: rgb(255 255 255 / 0.7);
font-size: 0.875rem;
line-height: 1.625;
}
.ui-section-dark-link {
display: inline-flex;
color: var(--color-brand-accent);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
transition: color 150ms ease;
}
@media (min-width: 768px) {
.ui-hero-shell {
aspect-ratio: 21 / 9;
min-height: 0;
}
.ui-hero-title {
font-size: 4.5rem;
line-height: 1;
}
.ui-hero-copy {
font-size: 1.25rem;
line-height: 1.75rem;
}
.ui-banner-content {
padding: 3.5rem;
}
.ui-section-dark-card-title {
font-size: 3rem;
line-height: 1;
}
}
@media (min-width: 1024px) {
.ui-hero-title {
font-size: 6rem;
line-height: 1;
}
}
.ui-panel {
@apply rounded-3xl bg-white shadow-card;
}
@@ -265,6 +448,64 @@
@apply rounded-full border px-3 py-1 text-xs font-bold;
}
.ui-status-badge-pending {
border-color: rgb(254 243 199);
background: rgb(255 251 235);
color: rgb(180 83 9);
}
.ui-status-badge-active {
border-color: rgb(209 250 229);
background: rgb(236 253 245);
color: rgb(4 120 87);
}
.ui-status-badge-shipped {
border-color: rgb(224 242 254);
background: rgb(240 249 255);
color: rgb(3 105 161);
}
.ui-status-badge-cancelled {
border-color: rgb(255 228 230);
background: rgb(255 241 242);
color: rgb(190 18 60);
}
.ui-status-badge-neutral {
border-color: color-mix(in srgb, var(--color-line-primary) 20%, transparent);
background: var(--color-surface-page);
color: color-mix(in srgb, var(--color-text-main) 80%, transparent);
}
.ui-tone-warning {
border-radius: 1rem;
border: 1px solid rgb(254 243 199);
background: rgb(255 251 235);
color: rgb(146 64 14);
}
.ui-tone-success {
border-radius: 1rem;
border: 1px solid rgb(209 250 229);
background: rgb(236 253 245);
color: rgb(4 120 87);
}
.ui-tone-error {
border-radius: 1rem;
border: 1px solid rgb(255 228 230);
background: rgb(255 241 242);
color: rgb(190 18 60);
}
.ui-tone-info {
border-radius: 1rem;
border: 1px solid rgb(224 242 254);
background: rgb(240 249 255);
color: rgb(3 105 161);
}
.ui-avatar-shell {
@apply flex h-20 w-20 items-center justify-center overflow-hidden rounded-full border border-brand-primary/20 bg-surface-page;
}