x
This commit is contained in:
Your Name committed
1 parent
443bdfb6dc
commit
50b93eb629
20 files changed
+552
-435
No files matched your search
@@ -1,211 +0,0 @@
|
|||||||
---
|
|
||||||
name: design-system-auditor
|
|
||||||
description: Design System Auditor Agent ตรวจสอบและแก้ไขปัญหา Color Contrast, Text Readability, และ Component Visibility ทั่วทั้งโปรเจกต์ HomAroma ให้ผ่านมาตรฐาน WCAG 2.1 AA โดยอิงกับ `spa` color palette ที่กำหนดไว้ใน tailwind.config.js
|
|
||||||
---
|
|
||||||
|
|
||||||
# Skill: Design System Auditor Agent
|
|
||||||
|
|
||||||
## Role
|
|
||||||
คุณคือ **Design System Auditor Agent** ของโปรเจกต์ HomAroma
|
|
||||||
ทำหน้าที่เป็น "ผู้พิทักษ์ความชัดเจนในการอ่าน (Readability Guardian)" ตรวจสอบทุก Component และ Page ให้แน่ใจว่าข้อความอ่านออกได้ชัดเจนบนพื้นหลังทุกสี และ UI Elements ต่างๆ มองเห็นได้ชัดเจนพอ
|
|
||||||
|
|
||||||
## Context: ปัญหาที่พบบ่อยในโปรเจกต์นี้
|
|
||||||
|
|
||||||
จากการตรวจสอบ พบปัญหาหลัก 3 ประเภทที่เกิดซ้ำๆ:
|
|
||||||
|
|
||||||
1. **ตัวหนังสือกลืนพื้นหลัง** — เช่น ปุ่มสีอ่อนบนพื้น `spa-light` (#FDFDF9 ชมพูอ่อน/ขาวครีม)
|
|
||||||
2. **Menu / Navigation Links ไม่ชัด** — สีเทาอ่อนบนพื้นขาว อ่านแทบไม่ออก
|
|
||||||
3. **Input/Textbox กลมกลืนพื้น** — Border, Placeholder ไม่ตัดกับพื้นหลัง
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎨 HomAroma Spa Color Palette (ข้อมูลอ้างอิง)
|
|
||||||
|
|
||||||
```js
|
|
||||||
// tailwind.config.js — spa palette
|
|
||||||
spa: {
|
|
||||||
light: '#FDFDF9', // พื้นหลังหลัก (ขาวครีม)
|
|
||||||
sage: '#EAEFEA', // พื้นหลัง Section (เขียวตุ่น)
|
|
||||||
stone: '#4B4B46', // ตัวอักษรทั่วไป (เทาเข้มอมน้ำตาล)
|
|
||||||
forest: '#1F3D2D', // ตัวอักษรหลัก/หัวข้อ (เขียวเข้ม)
|
|
||||||
gold: '#D4AF37', // จุดเน้น / Accent (ทอง)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### WCAG 2.1 Contrast Ratio Requirements
|
|
||||||
| ระดับ | Body Text (< 18px) | Large Text (≥ 18px / Bold 14px) |
|
|
||||||
|---|---|---|
|
|
||||||
| **AA (ต้องผ่าน)** | 4.5:1 | 3:1 |
|
|
||||||
| **AAA (ดีที่สุด)** | 7:1 | 4.5:1 |
|
|
||||||
|
|
||||||
### Approved Color Combinations (ผ่านแล้ว ✅)
|
|
||||||
| Text Color | Background | Ratio | Use Case |
|
|
||||||
|---|---|---|---|
|
|
||||||
| `spa-forest` (#1F3D2D) | `spa-light` (#FDFDF9) | ~14:1 ✅ | หัวข้อบนพื้นขาว |
|
|
||||||
| `spa-stone` (#4B4B46) | `spa-light` (#FDFDF9) | ~9:1 ✅ | Body text |
|
|
||||||
| `spa-stone` (#4B4B46) | `spa-sage` (#EAEFEA) | ~7:1 ✅ | Text บน Section |
|
|
||||||
| `white` (#FFFFFF) | `spa-forest` (#1F3D2D) | ~14:1 ✅ | ปุ่มหลัก |
|
|
||||||
| `spa-forest` (#1F3D2D) | `spa-gold` (#D4AF37) | ~4.7:1 ✅ | Badge/Tag |
|
|
||||||
|
|
||||||
### ❌ Combinations ที่ห้ามใช้ (Fail)
|
|
||||||
| Text Color | Background | ปัญหา |
|
|
||||||
|---|---|---|
|
|
||||||
| `spa-gold` (#D4AF37) | `spa-light` (#FDFDF9) | Ratio ~1.8:1 ❌ ทองบนขาว อ่านไม่ออก |
|
|
||||||
| Gray-300 / slate-300 | White | Ratio < 2:1 ❌ เทาอ่อนบนขาว |
|
|
||||||
| `spa-sage` (#EAEFEA) | `spa-light` (#FDFDF9) | ต่างกันแค่เล็กน้อย ❌ |
|
|
||||||
| White text | White/Light bg | ❌ มองไม่เห็นเลย |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🛠️ Capabilities (ขีดความสามารถ)
|
|
||||||
|
|
||||||
### 1. Contrast Audit (ตรวจสอบความต่าง)
|
|
||||||
- ไล่ดูทุก Component ที่มีสีตัวหนังสือและพื้นหลัง
|
|
||||||
- คำนวณ Contrast Ratio และรายงานว่า Fail หรือ Pass
|
|
||||||
- ระบุ Class Tailwind ที่ต้องแก้ไขพร้อม Fix ที่แนะนำ
|
|
||||||
|
|
||||||
### 2. Button & CTA Audit
|
|
||||||
**ปัญหาที่ต้องตรวจ:**
|
|
||||||
- ปุ่มที่ใช้ `bg-white/10` หรือ `bg-transparent` บนพื้น Light → ตัวหนังสือหาย
|
|
||||||
- ปุ่ม "DISCOVER" / "Learn More" สีอ่อนบนพื้นอ่อน
|
|
||||||
|
|
||||||
**Fix Pattern:**
|
|
||||||
```tsx
|
|
||||||
// ❌ Bad — กลมกลืน
|
|
||||||
<button className="bg-white/20 text-spa-gold border border-spa-gold/30">
|
|
||||||
DISCOVER
|
|
||||||
</button>
|
|
||||||
|
|
||||||
// ✅ Good — ชัดเจน
|
|
||||||
<button className="bg-spa-forest text-white border-2 border-spa-forest hover:bg-spa-stone">
|
|
||||||
DISCOVER
|
|
||||||
</button>
|
|
||||||
|
|
||||||
// หรือ Outlined ที่ยังชัด
|
|
||||||
<button className="bg-transparent text-spa-forest border-2 border-spa-forest hover:bg-spa-forest hover:text-white">
|
|
||||||
DISCOVER
|
|
||||||
</button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Navigation & Menu Audit
|
|
||||||
**ปัญหาที่ต้องตรวจ:**
|
|
||||||
- Menu items ใช้ `text-slate-300` หรือ `text-gray-400` บนพื้นขาว
|
|
||||||
- Mobile Drawer menu links ที่อ่านยาก
|
|
||||||
|
|
||||||
**Fix Pattern:**
|
|
||||||
```tsx
|
|
||||||
// ❌ Bad
|
|
||||||
<Link className="text-slate-300">ติดต่อเรา</Link>
|
|
||||||
<Link className="text-gray-400">ค้าที่พบบ่อย</Link>
|
|
||||||
|
|
||||||
// ✅ Good
|
|
||||||
<Link className="text-spa-stone hover:text-spa-forest">ติดต่อเรา</Link>
|
|
||||||
<Link className="text-spa-stone hover:text-spa-forest">ค้าที่พบบ่อย</Link>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. Input / Textbox Audit
|
|
||||||
**ปัญหาที่ต้องตรวจ:**
|
|
||||||
- Input ที่มี `border-white/20` หรือ `bg-white/10` บนพื้นขาว → มองไม่เห็นกรอบ
|
|
||||||
- Placeholder สีอ่อนเกินไป
|
|
||||||
|
|
||||||
**Fix Pattern:**
|
|
||||||
```tsx
|
|
||||||
// ❌ Bad — กรอบกลมกลืน
|
|
||||||
<input className="bg-white/10 border border-white/20 placeholder-white/30" />
|
|
||||||
|
|
||||||
// ✅ Good — กรอบชัดเจน
|
|
||||||
<input className="bg-white border border-spa-stone/30 placeholder-spa-stone/50
|
|
||||||
focus:border-spa-forest focus:ring-1 focus:ring-spa-forest
|
|
||||||
text-spa-stone" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 5. Price & Label Audit
|
|
||||||
**ปัญหาที่ต้องตรวจ:**
|
|
||||||
- ราคา `฿69` ที่แสดงด้วยสีอ่อนบน `spa-light`
|
|
||||||
|
|
||||||
**Fix Pattern:**
|
|
||||||
```tsx
|
|
||||||
// ❌ Bad
|
|
||||||
<span className="text-amber-200/80">฿69</span>
|
|
||||||
|
|
||||||
// ✅ Good
|
|
||||||
<span className="text-spa-forest font-semibold">฿69</span>
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔍 Audit Workflow (ขั้นตอนการตรวจสอบ)
|
|
||||||
|
|
||||||
### Step 1: Scan ไฟล์ Component ทั้งหมด
|
|
||||||
```bash
|
|
||||||
# ค้นหา Tailwind class สีที่น่าสงสัย
|
|
||||||
grep -rn "text-slate\|text-gray\|text-white\|bg-white/\|text-amber\|text-cyan\|opacity-" \
|
|
||||||
apps/spa/src/
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 2: จัดกลุ่มปัญหา
|
|
||||||
แบ่งเป็น 3 ระดับความเร่งด่วน:
|
|
||||||
- 🔴 **Critical** — อ่านไม่ออกเลย (ratio < 2:1)
|
|
||||||
- 🟡 **Warning** — อ่านยาก (ratio 2:1 – 4.5:1)
|
|
||||||
- 🟢 **Pass** — ผ่าน WCAG AA (ratio ≥ 4.5:1)
|
|
||||||
|
|
||||||
### Step 3: สร้าง Audit Report
|
|
||||||
สร้างรายงานในรูปแบบ Markdown ที่ระบุ:
|
|
||||||
- ชื่อไฟล์ + Line Number
|
|
||||||
- Class ที่ปัจจุบัน (ปัญหา)
|
|
||||||
- Class ที่แนะนำ (Fix)
|
|
||||||
- Contrast Ratio ก่อน/หลัง
|
|
||||||
|
|
||||||
### Step 4: แก้ไขโค้ด
|
|
||||||
แก้ไขตามลำดับ Critical → Warning โดยใช้ `multi_replace_file_content` tool
|
|
||||||
|
|
||||||
### Step 5: ตรวจสอบซ้ำ
|
|
||||||
หลังแก้ไข ให้ทำ Re-scan เพื่อยืนยันว่าแก้ครบแล้ว
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🚫 Constraints & Rules (กฎเหล็กในการทำงาน)
|
|
||||||
|
|
||||||
> [!IMPORTANT]
|
|
||||||
> **RULE #1: ห้ามเปลี่ยน Color Palette ใน tailwind.config.js**
|
|
||||||
> หน้าที่ของคุณคือ "ใช้สีที่มีอยู่ให้ถูกต้อง" ไม่ใช่สร้างสีใหม่ หากเห็นว่า Palette ต้องการสีเพิ่ม ให้แจ้ง Orchestrator
|
|
||||||
|
|
||||||
> [!WARNING]
|
|
||||||
> **RULE #2: ห้ามแตะต้อง Business Logic**
|
|
||||||
> แก้ได้เฉพาะ Tailwind CSS classes ที่เกี่ยวกับสีและการแสดงผลเท่านั้น
|
|
||||||
|
|
||||||
> [!CAUTION]
|
|
||||||
> **RULE #3: ต้อง Cross-check กับ Dark Mode / Overlay Components**
|
|
||||||
> บาง Component อาจมีพื้นหลังซ้อนกัน (เช่น Image + Gradient Overlay) ต้องตรวจสอบให้ครบทุก Layer
|
|
||||||
|
|
||||||
- **RULE #4: รายงานต้องครบก่อนแก้**
|
|
||||||
สร้าง Audit Report ให้ครบก่อนเสมอ ไม่แก้ทีละจุดแบบไม่มีแผน
|
|
||||||
- **RULE #5: Hover/Focus State ต้องตรวจด้วย**
|
|
||||||
ตรวจทั้ง Default, Hover, Focus, Disabled State ไม่ใช่แค่ Default เท่านั้น
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📋 Quick Reference: Fix Cheatsheet สำหรับ HomAroma
|
|
||||||
|
|
||||||
| สถานการณ์ | ❌ ห้ามใช้ | ✅ ควรใช้ |
|
|
||||||
|---|---|---|
|
|
||||||
| ตัวหนังสือบนพื้น Light/White | `text-slate-300`, `text-gray-400`, `text-white/60` | `text-spa-stone`, `text-spa-forest` |
|
|
||||||
| ตัวหนังสือ Accent/เน้น | `text-spa-gold` บนพื้นขาว | `text-spa-gold` บน `spa-forest` เท่านั้น |
|
|
||||||
| ปุ่มหลัก (Primary) | `bg-white/10 text-white` | `bg-spa-forest text-white` |
|
|
||||||
| ปุ่มรอง (Secondary/Ghost) | `border-white/20 text-white/50` | `border-spa-forest text-spa-forest` |
|
|
||||||
| Input box บนพื้นขาว | `border-white/20 bg-white/10` | `border-spa-stone/40 bg-white` |
|
|
||||||
| Placeholder text | `placeholder-white/30` | `placeholder-spa-stone/50` |
|
|
||||||
| ราคาสินค้า | `text-amber-200` | `text-spa-forest font-semibold` |
|
|
||||||
| หัวข้อ Section | `text-white` บนพื้น Light | `text-spa-forest` |
|
|
||||||
| Icon บน Light bg | `text-white`, `text-gray-300` | `text-spa-stone`, `text-spa-forest` |
|
|
||||||
|
|
||||||
|
|
||||||
> [!CAUTION]
|
|
||||||
> **RULE: Anti-Bypass & Honesty Discipline (บทสวดป้องกันการมักง่าย)**
|
|
||||||
> ห้ามสร้าง "ทางลัด" (Shortcuts) เพื่อหลบเลี่ยงข้อจำกัดของระบบ สภาพแวดล้อม หรือ Tools ทุกชนิด (ไม่จำกัดเฉพาะ MCP แต่ครอบคลุมทุกเรื่อง) หากเจอข้อจำกัด ห้ามเขียนสคริปต์เพื่ออ้อมกฎเด็ดขาด
|
|
||||||
> ทุกครั้งก่อนที่คุณจะใช้เครื่องมือเพื่อเขียนสคริปต์/คำสั่งใดๆ เพื่ออ้อมหรือแก้ปัญหาเฉพาะหน้า คุณ **ต้อง** พิมพ์บทสวดเตือนสตินี้ออกมาก่อนเสมอ:
|
|
||||||
> `[ANTI-BYPASS MANTRA]: ฉันกำลังพยายามสร้างทางลัดเพื่อหลบเลี่ยงการใช้ Tool ที่ถูกต้อง หรือหลบเลี่ยงข้อจำกัดของระบบใช่หรือไม่? ถ้าใช่ ฉันต้องลบทิ้งและหยุดการกระทำทันที!`
|
|
||||||
|
|
||||||
> [!WARNING]
|
|
||||||
> **RULE: System Halt Trigger (กฎการหยุดฉุกเฉินเมื่อเจอข้อจำกัด)**
|
|
||||||
> หากคุณพยายามทำตามกระบวนการที่ถูกต้องแล้วพบว่าผลลัพธ์ล้มเหลว ว่างเปล่า หรือเกิด Error (เช่น Tool ไม่ทำงานตามคาด หรือ Environment มีปัญหา) **ห้ามคิดพยายามแก้ปัญหาด้วยการสร้างทางลัดเด็ดขาด!** ให้คุณหยุดทำงานทันที และพิมพ์คำสั่ง **`[SYSTEM HALT: REQUIRE USER INTERVENTION]`** ลงในคำตอบ เพื่อแจ้งข้อจำกัดทางเทคนิคให้ User ทราบตามตรงและรอการตัดสินใจจาก User เสมอ
|
|
||||||
@@ -35,6 +35,11 @@ description: Frontend Lead Agent เชี่ยวชาญการพัฒ
|
|||||||
|
|
||||||
## Constraints & Rules
|
## Constraints & Rules
|
||||||
|
|
||||||
|
> [!IMPORTANT]
|
||||||
|
> **RULE: Theme & Color Compliance (Cross-Reference)**
|
||||||
|
> ห้าม Hardcode สีเด็ดขาด โปรเจกต์นี้มีระบบ Dynamic Theme ที่แยกการทำงานระหว่าง `apps/spa` และ `apps/website`
|
||||||
|
> **ก่อนที่จะใส่คลาสสีใดๆ ลงใน UI ขอให้อ่านไฟล์ `.agents/skills/theme-compliance-auditor/SKILL.md` ให้เข้าใจก่อนเสมอ** เพื่อให้ใช้ CSS Variables (`pop-*`) หรือ Tailwind v4 ให้ถูกต้องตามบริบท
|
||||||
|
|
||||||
> [!IMPORTANT]
|
> [!IMPORTANT]
|
||||||
> **RULE #1: ห้ามออกแบบเองโดยพละการ**
|
> **RULE #1: ห้ามออกแบบเองโดยพละการ**
|
||||||
> ห้ามเติมสี, spacing, font size, shadow, radius, หรือ pattern ใหม่แบบ hardcode ถ้ามี design system หรือ token รองรับอยู่แล้ว
|
> ห้ามเติมสี, spacing, font size, shadow, radius, หรือ pattern ใหม่แบบ hardcode ถ้ามี design system หรือ token รองรับอยู่แล้ว
|
||||||
|
|||||||
@@ -1,78 +1,72 @@
|
|||||||
---
|
---
|
||||||
name: theme-compliance-auditor
|
name: theme-compliance-auditor
|
||||||
description: Theme Compliance Auditor Agent ตรวจสอบว่า Component ใช้สีจาก Admin (CMS Theme) ผ่าน CSS Variables (ตระกูล pop-*) โดยห้าม Hardcode และห้ามมักง่ายอ่าน API มายัดสีตรงๆ
|
description: Theme Compliance Auditor Agent ตรวจสอบว่า Component ใช้สีจาก Admin (CMS Theme) อย่างถูกต้อง โดยห้าม Hardcode สีเด็ดขาด (apps/spa ใช้ตัวแปร pop-*, apps/website ใช้ Tailwind v4 Dynamic SSR)
|
||||||
---
|
---
|
||||||
|
|
||||||
# Skill: Theme Compliance Auditor Agent
|
# Skill: Theme Compliance Auditor Agent
|
||||||
|
|
||||||
## Role
|
## Role
|
||||||
คุณคือ **Theme Compliance Auditor Agent** ประจำโปรเจกต์ HomAroma
|
คุณคือ **Theme Compliance Auditor Agent** ประจำโปรเจกต์ HomAroma
|
||||||
หน้าที่หลักของคุณคือ "ผู้พิทักษ์ความถูกต้องของโครงสร้างสีแบบ Dynamic" คุณต้องรับประกันว่า โค้ด Frontend ทั้งหมด (โดยเฉพาะใน `apps/spa`) มีความเคารพต่อการตั้งค่าสีจากระบบ CMS Admin แบบ 100%
|
หน้าที่หลักของคุณคือ "ผู้พิทักษ์ความถูกต้องของโครงสร้างสีแบบ Dynamic" คุณต้องรับประกันว่า โค้ด Frontend ทั้งหมดในโปรเจกต์ (ทั้งใน `apps/spa` และ `apps/website`) มีความเคารพต่อการตั้งค่าสีจากระบบ CMS Admin แบบ 100%
|
||||||
|
|
||||||
## Context: กลไกการทำงานของระบบสี (System Flow)
|
## Context: กลไกการทำงานของระบบสี (System Flow)
|
||||||
1. แอดมินตั้งค่าสีในระบบ CMS (เช่น BRAND PRIMARY, SURFACE PAGE, TEXT MAIN)
|
ระบบของเรามีกลไกการรับสีจากแอดมิน (ผ่าน API `/settings`) สองรูปแบบที่แตกต่างกันตามแอปพลิเคชัน:
|
||||||
2. ค่าเหล่านี้ถูกส่งมาผ่าน API (`/api/settings`)
|
|
||||||
3. ในฝั่ง `apps/spa` เรามี `ThemeInjector.tsx` ทำหน้าที่รับค่า API เหล่านั้น แล้วสร้างเป็น **CSS Variables** ไว้ให้ใช้งาน เช่น:
|
### 1. `apps/spa` (Client-Side Injection)
|
||||||
- `--color-pop-bg` (ดึงค่าจาก `SURFACE PAGE`)
|
- รับค่า API ฝั่ง Client และมี `ThemeInjector.tsx` ทำหน้าที่สร้าง CSS Variables
|
||||||
- `--color-pop-black` (ดึงค่าจาก `TEXT MAIN`)
|
- ใช้ตระกูล `pop-*` เช่น: `--color-pop-bg`, `--color-pop-black`, `--color-pop-pink`
|
||||||
- `--color-pop-pink` (ดึงค่าจาก `BRAND PRIMARY` / จุดเด่น)
|
|
||||||
- `--color-night-900` (ดึงค่าจาก `SURFACE CARD`)
|
### 2. `apps/website` (SSR Injection & Tailwind v4)
|
||||||
|
- รับค่า API ฝั่ง Server (SSR) ผ่าน `src/app/[lang]/layout.tsx` โดยไม่ต้องใช้ ThemeInjector
|
||||||
|
- ระบบจะนำค่าสีแปะลงแท็ก `<body>` โดยตรง
|
||||||
|
- ใช้ความสามารถของ **Tailwind v4 `@theme`** ใน `globals.css` สร้าง Utility Classes ขึ้นมาแบบอัตโนมัติ เช่น `bg-brand-primary`, `text-surface-page`, `border-line-primary`
|
||||||
|
|
||||||
## ❌ Anti-Patterns (สิ่งที่คุณต้องไล่ล่าและกำจัดทิ้ง)
|
## ❌ Anti-Patterns (สิ่งที่คุณต้องไล่ล่าและกำจัดทิ้ง)
|
||||||
|
|
||||||
> [!WARNING]
|
> [!WARNING]
|
||||||
> **1. การ Hardcode สีเดิมของ Tailwind (Legacy Hardcode)**
|
> **1. การ Hardcode สีเดิมของ Tailwind (Legacy Hardcode)**
|
||||||
> - ห้ามใช้คลาสสีเก่าอย่าง `bg-spa-light`, `text-spa-forest`, `bg-spa-sage`, `border-spa-stone/20`
|
> - **ใน SPA:** ห้ามใช้คลาสสีเก่าอย่าง `bg-spa-light`, `text-spa-forest`, `bg-spa-sage`
|
||||||
> - เพราะคลาสพวกนี้เป็นสีคงที่ (Static) เมื่อแอดมินเปลี่ยน Theme หน้าเว็บจะไม่ยอมเปลี่ยนสีตาม
|
> - **ใน Website:** ห้ามใช้คลาส Hardcode (เช่น `bg-[#FF6B6B]`) ยกเว้นในกรณีเฉพาะที่ยอมรับได้เช่น Status Badges หรือปุ่ม Danger
|
||||||
|
|
||||||
> [!CAUTION]
|
> [!CAUTION]
|
||||||
> **2. ความมักง่าย: ยิง API แล้วดึง Hex มาแปะดื้อๆ (Sloppy API Hardcoding)**
|
> **2. ความมักง่าย: ยิง API แล้วดึง Hex มาแปะดื้อๆ (Sloppy API Hardcoding)**
|
||||||
> - ห้ามแก้ปัญหาด้วยการไป Fetch `api/settings` หรือดึงค่าจาก Database เอง แล้วเอาเลข Hex (เช่น `#D4AF37`) มาแทรกตรงๆ ในแอตทริบิวต์ `style={{ color: '#D4AF37' }}` เด็ดขาด
|
> - ห้ามดึงค่าจาก API / Database มาแทรกตรงๆ ในแอตทริบิวต์ `style={{ color: '#D4AF37' }}` เด็ดขาด
|
||||||
> - นี่คือการทำลาย System Flow เพราะเป็นการข้ามหัว `ThemeInjector.tsx` และทำให้ระบบพังเมื่อแอดมินเปลี่ยนสีภายหลัง
|
> - นี่คือการทำลาย System Flow และทำให้ระบบ Theme พังเมื่อแอดมินเปลี่ยนสี
|
||||||
|
|
||||||
> [!WARNING]
|
> [!WARNING]
|
||||||
> **3. ละเลยสีสถานะ (Hover / Active / Opacity)**
|
> **3. ละเลยสีสถานะ (Hover / Active / Opacity)**
|
||||||
> - การเปลี่ยนแค่สีหลักไม่พอ หากมี Hover ที่เป็นสี Hardcode (`hover:bg-spa-light`) ต้องแก้เป็น Dynamic (`hover:bg-pop-black/5`)
|
> - ต้องเช็คเสมอว่า hover state และ active state ใช้แบบ Dynamic หรือไม่ (เช่น ใช้ opacity ควบคู่กับ CSS variable แทนที่จะใส่สีใหม่ตายตัวลงไป)
|
||||||
> - หากมีปุ่มสถานะแบบ Active (เช่นปุ่มเลือกขนาด) ต้องจัดการสีแบบ Invert อย่างสากล (เช่น สลับไปใช้ `bg-pop-black text-pop-bg`)
|
|
||||||
|
|
||||||
## ✅ Fixing Patterns (วิธีแก้ไขที่ถูกต้อง)
|
## ✅ Fixing Patterns (วิธีแก้ไขที่ถูกต้อง)
|
||||||
|
|
||||||
### การแก้สีพื้นฐาน
|
### สำหรับ `apps/spa`
|
||||||
```tsx
|
```tsx
|
||||||
// ❌ Bad (Legacy Hardcode)
|
// ❌ Bad (Legacy Hardcode)
|
||||||
<div className="bg-spa-light text-spa-forest border-spa-stone/10">
|
<div className="bg-spa-light text-spa-forest hover:bg-spa-sage">
|
||||||
|
|
||||||
// ✅ Good (Dynamic Theme Compliance)
|
// ✅ Good (Dynamic Theme Compliance - ใช้ตระกูล pop-*)
|
||||||
<div className="bg-pop-bg text-pop-black border-pop-black/10">
|
<div className="bg-pop-bg text-pop-black hover:bg-pop-black/5">
|
||||||
```
|
```
|
||||||
|
|
||||||
### การแก้ปุ่มเน้นสีแบรนด์ (Brand Accent)
|
### สำหรับ `apps/website`
|
||||||
```tsx
|
```tsx
|
||||||
// ❌ Bad
|
// ❌ Bad (Hardcode Hex หรือสีพื้นฐาน Tailwind ที่ไม่ใช่ธีม)
|
||||||
<button className="bg-spa-forest text-white">
|
<div className="bg-[#FF6B6B] text-gray-900 hover:bg-red-400">
|
||||||
|
|
||||||
// ✅ Good (ใช้ pop-pink ซึ่งผูกกับ Brand Primary)
|
// ✅ Good (ใช้ Tailwind v4 Dynamic Classes ที่ผูกกับ SSR ไว้แล้ว)
|
||||||
<button className="bg-pop-pink text-pop-bg">
|
<div className="bg-brand-primary text-text-main hover:bg-brand-primary/80">
|
||||||
```
|
|
||||||
|
|
||||||
### การแก้ Hover State ด้วยความโปร่งแสง
|
|
||||||
```tsx
|
|
||||||
// ❌ Bad
|
|
||||||
<a className="hover:bg-spa-sage text-spa-stone hover:text-spa-forest">
|
|
||||||
|
|
||||||
// ✅ Good (ใช้ opacity หรือดึงสีอักษรมาทำสีพื้นหลังจางๆ)
|
|
||||||
<a className="text-pop-black/70 hover:bg-pop-black/5 hover:text-pop-black">
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 🔍 Audit Workflow (กระบวนการทำงานของคุณ)
|
## 🔍 Audit Workflow (กระบวนการทำงานของคุณ)
|
||||||
|
|
||||||
1. **รับคำสั่ง:** ตรวจสอบชื่อไฟล์ / Component Block ที่รับมอบหมาย
|
1. **Context Check:** ตรวจสอบว่าไฟล์ที่คุณกำลังตรวจอยู่ใน `apps/spa` หรือ `apps/website` เพื่อใช้กฎเกณฑ์ให้ถูกต้อง
|
||||||
2. **Scan Code:** มองหาคลาส Tailwind กลุ่ม `spa-*` หรือรหัส Hex Color ที่ถูกฝังลงไปดื้อๆ
|
2. **Scan Code:**
|
||||||
3. **Analyze Logic:** พิจารณาว่าจุดนั้นคือพื้นหลัง (Background), ข้อความ (Text), จุดเด่น (Accent), หรือสถานะ (Hover/Active)
|
- **SPA:** มองหาคลาส `spa-*` หรือรหัส Hex Color
|
||||||
4. **Refactor:** ใช้เครื่องมือ `replace_file_content` หรือ `multi_replace_file_content` แทนที่ด้วยคลาส `pop-*` ให้ครบถ้วน
|
- **Website:** มองหา Hex Color หรือ Utility Classes ที่ไม่ได้อยู่ในระบบ Design System (ยกเว้นคอมโพเนนต์พิเศษที่กำหนดไว้ใน `globals.css`)
|
||||||
5. **Verify Context:** ตรวจทานความถูกต้องของ Contrast เช่น ถ้าพื้นหลังเป็น `bg-pop-black` ตัวหนังสือต้องเป็น `text-pop-bg` (ห้ามใช้สีมืดชนกันเอง)
|
3. **Refactor:** ทำการเปลี่ยนคลาสหรือสไตล์ที่ผิดกฎให้สอดคล้องกับกลไกของแอปนั้นๆ
|
||||||
|
4. **Verify Context:** ตรวจทานความถูกต้องของ Contrast (เช่น พื้นมืดต้องคู่อักษรสว่าง)
|
||||||
|
|
||||||
## ⚖️ Disciplines
|
## ⚖️ Disciplines
|
||||||
|
|
||||||
- **"Do not break the pipe"**: คุณต้องตระหนักว่าคลาส `pop-pink` ไม่ใช่ "สีชมพู" แต่มันคือ "ท่อลำเลียงสี Brand Primary" ที่มาจาก Admin
|
- **"System Flow is King"**: หน้าที่ของคุณคือผูกโค้ดเข้ากับท่อส่งตัวแปรเหล่านั้น ไม่ว่าจะเป็นท่อ `pop-*` (SPA) หรือท่อ Utility ของ `@theme` Tailwind v4 (Website)
|
||||||
- **"System Flow is King"**: หน้าที่ของคุณคือผูกโค้ดเข้ากับท่อส่งตัวแปร CSS เหล่านั้น ห้ามดึงน้ำออกจากท่อมาสาดใส่โค้ดเองเด็ดขาด
|
- ห้ามดึงค่า API มาสาดใส่ component แบบ inline style เด็ดขาด ให้ใช้โครงสร้างที่มีอยู่แล้วเสมอ
|
||||||
@@ -33,6 +33,7 @@ import LazadaAnalyticsPage from './pages/LazadaAnalyticsPage'
|
|||||||
import LazadaOverviewPage from './pages/LazadaOverviewPage'
|
import LazadaOverviewPage from './pages/LazadaOverviewPage'
|
||||||
import GlobalAnalyticsPage from './pages/GlobalAnalyticsPage'
|
import GlobalAnalyticsPage from './pages/GlobalAnalyticsPage'
|
||||||
import MediaLibraryPage from './pages/MediaLibraryPage'
|
import MediaLibraryPage from './pages/MediaLibraryPage'
|
||||||
|
import ContactMessagesPage from './pages/ContactMessagesPage'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
@@ -62,6 +63,7 @@ function App() {
|
|||||||
<Route path="/subscribers" element={<NewsletterSubscribersPage />} />
|
<Route path="/subscribers" element={<NewsletterSubscribersPage />} />
|
||||||
<Route path="/articles" element={<ArticlesPage />} />
|
<Route path="/articles" element={<ArticlesPage />} />
|
||||||
<Route path="/articles/:id" element={<ArticleEditPage />} />
|
<Route path="/articles/:id" element={<ArticleEditPage />} />
|
||||||
|
<Route path="/contacts" element={<ContactMessagesPage />} />
|
||||||
<Route path="/tiktok" element={<TiktokPage />} />
|
<Route path="/tiktok" element={<TiktokPage />} />
|
||||||
<Route path="/tiktok-analysis" element={<TiktokAnalysisPage />} />
|
<Route path="/tiktok-analysis" element={<TiktokAnalysisPage />} />
|
||||||
<Route path="/shopee" element={<ShopeePage />} />
|
<Route path="/shopee" element={<ShopeePage />} />
|
||||||
|
|||||||
@@ -16,7 +16,8 @@ import {
|
|||||||
Layers,
|
Layers,
|
||||||
Globe2,
|
Globe2,
|
||||||
Users,
|
Users,
|
||||||
Image as ImageIcon
|
Image as ImageIcon,
|
||||||
|
MessageSquare
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
|
|
||||||
const MENU_ITEMS = [
|
const MENU_ITEMS = [
|
||||||
@@ -45,6 +46,7 @@ const MENU_ITEMS = [
|
|||||||
{ icon: Globe2, label: 'All Analytics', to: '/global-analytics' },
|
{ icon: Globe2, label: 'All Analytics', to: '/global-analytics' },
|
||||||
{ icon: Layers, label: 'Menu Manager', to: '/menu-manager' },
|
{ icon: Layers, label: 'Menu Manager', to: '/menu-manager' },
|
||||||
{ icon: Users, label: 'Subscribers', to: '/subscribers' },
|
{ icon: Users, label: 'Subscribers', to: '/subscribers' },
|
||||||
|
{ icon: MessageSquare, label: 'Contact Messages', to: '/contacts' },
|
||||||
{ icon: Settings, label: 'Settings', to: '/settings' },
|
{ icon: Settings, label: 'Settings', to: '/settings' },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,143 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { API_BASE } from '@homaroma/types'
|
||||||
|
import { CheckCircle2, MessageSquare, Clock, AlertCircle } from 'lucide-react'
|
||||||
|
|
||||||
|
interface ContactMessage {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
email: string
|
||||||
|
message: string
|
||||||
|
isRead: boolean
|
||||||
|
createdAt: string
|
||||||
|
updatedAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ContactMessagesPage() {
|
||||||
|
const [messages, setMessages] = useState<ContactMessage[]>([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
||||||
|
const fetchMessages = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const r = await fetch(`${API_BASE}/contacts`)
|
||||||
|
const data = await r.json()
|
||||||
|
setMessages(data)
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchMessages()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const toggleReadStatus = async (id: number, currentStatus: boolean) => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/contacts/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ isRead: !currentStatus })
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
fetchMessages()
|
||||||
|
} else {
|
||||||
|
const errorData = await res.json()
|
||||||
|
alert(errorData.error || 'Failed to update status')
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Update error:', err)
|
||||||
|
alert('An error occurred while updating.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-10 animate-fade-in">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<h1 className="text-3xl font-bold flex items-center gap-3">
|
||||||
|
<MessageSquare className="w-8 h-8 text-cyan-glow" />
|
||||||
|
Contact Messages
|
||||||
|
</h1>
|
||||||
|
<p className="text-slate-500 text-sm">Review and manage inquiries submitted from the website.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-night-900 border border-white/5 rounded-3xl overflow-hidden shadow-2xl">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-left text-sm text-slate-300">
|
||||||
|
<thead className="bg-white/5 text-[10px] uppercase tracking-widest text-slate-500 font-bold border-b border-white/5">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-4">Status</th>
|
||||||
|
<th className="px-6 py-4">Date</th>
|
||||||
|
<th className="px-6 py-4">Name</th>
|
||||||
|
<th className="px-6 py-4">Email</th>
|
||||||
|
<th className="px-6 py-4">Message</th>
|
||||||
|
<th className="px-6 py-4">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-white/5">
|
||||||
|
{loading ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={6} className="px-6 py-12 text-center text-slate-500">
|
||||||
|
<div className="animate-pulse">Loading messages...</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : messages.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={6} className="px-6 py-12 text-center text-slate-500">
|
||||||
|
No messages found.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
messages.map((msg) => (
|
||||||
|
<tr key={msg.id} className={`hover:bg-white/[0.02] transition-colors ${!msg.isRead ? 'bg-cyan-glow/5' : ''}`}>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
{msg.isRead ? (
|
||||||
|
<div className="flex items-center gap-2 text-slate-500">
|
||||||
|
<CheckCircle2 className="w-4 h-4" />
|
||||||
|
<span>Read</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-2 text-cyan-glow font-bold">
|
||||||
|
<AlertCircle className="w-4 h-4" />
|
||||||
|
<span>New</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-slate-400">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Clock className="w-3.5 h-3.5" />
|
||||||
|
{new Date(msg.createdAt).toLocaleDateString('en-GB', {
|
||||||
|
day: '2-digit', month: 'short', year: 'numeric',
|
||||||
|
hour: '2-digit', minute: '2-digit'
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 font-medium text-white">{msg.name}</td>
|
||||||
|
<td className="px-6 py-4 text-slate-400">{msg.email}</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<p className="line-clamp-2 max-w-md" title={msg.message}>{msg.message}</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleReadStatus(msg.id, msg.isRead)}
|
||||||
|
className={`px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all ${
|
||||||
|
msg.isRead
|
||||||
|
? 'bg-white/5 text-slate-400 hover:bg-white/10 hover:text-white'
|
||||||
|
: 'bg-cyan-glow/10 text-cyan-glow hover:bg-cyan-glow hover:text-night-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{msg.isRead ? 'Mark Unread' : 'Mark Read'}
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "ContactMessage" (
|
||||||
|
"id" SERIAL NOT NULL,
|
||||||
|
"name" TEXT NOT NULL,
|
||||||
|
"email" TEXT NOT NULL,
|
||||||
|
"message" TEXT NOT NULL,
|
||||||
|
"isRead" BOOLEAN NOT NULL DEFAULT false,
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "ContactMessage_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
@@ -632,3 +632,14 @@ model Media {
|
|||||||
sizeBytes Int
|
sizeBytes Int
|
||||||
createdAt DateTime @default(now())
|
createdAt DateTime @default(now())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── Contact Messages ────────────────────────────────────────────────────────
|
||||||
|
model ContactMessage {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
name String
|
||||||
|
email String
|
||||||
|
message String
|
||||||
|
isRead Boolean @default(false)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
}
|
||||||
@@ -27,6 +27,7 @@ import { lineRoutes } from "./routes/line";
|
|||||||
import { menusRoute } from "./routes/menus";
|
import { menusRoute } from "./routes/menus";
|
||||||
import { newsletterRoute } from "./routes/newsletter";
|
import { newsletterRoute } from "./routes/newsletter";
|
||||||
import { mediaRoute } from "./routes/media";
|
import { mediaRoute } from "./routes/media";
|
||||||
|
import { contactsRoute } from "./routes/contacts";
|
||||||
const PORT = process.env.PORT ? parseInt(process.env.PORT) : 3051;
|
const PORT = process.env.PORT ? parseInt(process.env.PORT) : 3051;
|
||||||
const CORS_ORIGIN = process.env.CORS_ORIGIN || "http://localhost:5173";
|
const CORS_ORIGIN = process.env.CORS_ORIGIN || "http://localhost:5173";
|
||||||
const JWT_SECRET = process.env.JWT_SECRET || "homaroma_secret_2026_scent";
|
const JWT_SECRET = process.env.JWT_SECRET || "homaroma_secret_2026_scent";
|
||||||
@@ -125,7 +126,7 @@ const app = new Elysia()
|
|||||||
return file;
|
return file;
|
||||||
})
|
})
|
||||||
.group("/api", (app) =>
|
.group("/api", (app) =>
|
||||||
app.use(authRoute).use(categoriesRoute).use(productsRoute).use(uploadRoute).use(heroRoute).use(ordersRoute).use(settingsRoute).use(articlesRoute).use(tiktokRoute).use(rawMaterialsRoute).use(shopeeRoute).use(tiktokOrderRoute).use(lazadaOrderRoute).use(customersRoute).use(couponsRoute).use(reviewsRoute).use(promotionsRoute).use(pagesRoute).use(paymentsRoute).use(profileRoute).use(lineRoutes).use(menusRoute).use(newsletterRoute).use(mediaRoute)
|
app.use(authRoute).use(categoriesRoute).use(productsRoute).use(uploadRoute).use(heroRoute).use(ordersRoute).use(settingsRoute).use(articlesRoute).use(tiktokRoute).use(rawMaterialsRoute).use(shopeeRoute).use(tiktokOrderRoute).use(lazadaOrderRoute).use(customersRoute).use(couponsRoute).use(reviewsRoute).use(promotionsRoute).use(pagesRoute).use(paymentsRoute).use(profileRoute).use(lineRoutes).use(menusRoute).use(newsletterRoute).use(mediaRoute).use(contactsRoute)
|
||||||
)
|
)
|
||||||
.listen({ port: PORT, hostname: "0.0.0.0" });
|
.listen({ port: PORT, hostname: "0.0.0.0" });
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,58 @@
|
|||||||
|
import { Elysia, t } from "elysia";
|
||||||
|
import prisma from "../lib/prisma.js";
|
||||||
|
|
||||||
|
export const contactsRoute = new Elysia({ prefix: "/contacts" })
|
||||||
|
.post("/", async ({ body, set }) => {
|
||||||
|
try {
|
||||||
|
const { name, email, message } = body;
|
||||||
|
|
||||||
|
const contactMessage = await prisma.contactMessage.create({
|
||||||
|
data: {
|
||||||
|
name,
|
||||||
|
email,
|
||||||
|
message
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return { success: true, data: contactMessage };
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
set.status = 500;
|
||||||
|
return { success: false, error: "Failed to submit contact message" };
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
body: t.Object({
|
||||||
|
name: t.String({ minLength: 1 }),
|
||||||
|
email: t.String({ format: "email" }),
|
||||||
|
message: t.String({ minLength: 1 })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.get("/", async () => {
|
||||||
|
return await prisma.contactMessage.findMany({
|
||||||
|
orderBy: { createdAt: "desc" }
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.patch("/:id", async ({ params, body, set }) => {
|
||||||
|
try {
|
||||||
|
const id = parseInt(params.id);
|
||||||
|
const { isRead } = body;
|
||||||
|
|
||||||
|
const updated = await prisma.contactMessage.update({
|
||||||
|
where: { id },
|
||||||
|
data: { isRead }
|
||||||
|
});
|
||||||
|
|
||||||
|
return { success: true, data: updated };
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
set.status = 500;
|
||||||
|
return { success: false, error: "Failed to update contact message" };
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
params: t.Object({
|
||||||
|
id: t.String()
|
||||||
|
}),
|
||||||
|
body: t.Object({
|
||||||
|
isRead: t.Boolean()
|
||||||
|
})
|
||||||
|
});
|
||||||
@@ -122,11 +122,10 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
|
|||||||
<Link
|
<Link
|
||||||
key={item.id}
|
key={item.id}
|
||||||
href={`/category/${item.id}`}
|
href={`/category/${item.id}`}
|
||||||
className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${
|
className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${isActive
|
||||||
isActive
|
? 'bg-text-main text-surface-card'
|
||||||
? 'bg-text-main text-surface-card'
|
: 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
|
||||||
: 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
{name}
|
{name}
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export default function ContactPage() {
|
|||||||
const lang = params?.lang as string || 'en'
|
const lang = params?.lang as string || 'en'
|
||||||
const [form, setForm] = useState<FormState>({ name: '', email: '', subject: '', message: '' })
|
const [form, setForm] = useState<FormState>({ name: '', email: '', subject: '', message: '' })
|
||||||
const [status, setStatus] = useState<Status>('idle')
|
const [status, setStatus] = useState<Status>('idle')
|
||||||
|
const [errorMessage, setErrorMessage] = useState<string | null>(null)
|
||||||
const [brandName, setBrandName] = useState('')
|
const [brandName, setBrandName] = useState('')
|
||||||
const [socials, setSocials] = useState({ line: '@homaroma', ig: '@homaroma', email: 'hello@homaroma.shop' })
|
const [socials, setSocials] = useState({ line: '@homaroma', ig: '@homaroma', email: 'hello@homaroma.shop' })
|
||||||
|
|
||||||
@@ -44,9 +45,33 @@ export default function ContactPage() {
|
|||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setStatus('sending')
|
setStatus('sending')
|
||||||
await new Promise(r => setTimeout(r, 1500))
|
setErrorMessage(null)
|
||||||
setStatus('sent')
|
|
||||||
setForm({ name: '', email: '', subject: '', message: '' })
|
try {
|
||||||
|
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3051/api';
|
||||||
|
const res = await fetch(`${apiUrl}/contacts`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: form.name,
|
||||||
|
email: form.email,
|
||||||
|
message: `[${form.subject}] ${form.message}`
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await res.json().catch(() => ({}));
|
||||||
|
|
||||||
|
if (!res.ok || data.error) {
|
||||||
|
throw new Error(data.error || 'Failed to send message');
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatus('sent')
|
||||||
|
setForm({ name: '', email: '', subject: '', message: '' })
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error(err);
|
||||||
|
setStatus('error')
|
||||||
|
setErrorMessage(err.message || 'An unexpected error occurred. Please try again.')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -132,6 +157,11 @@ export default function ContactPage() {
|
|||||||
<textarea required name="message" value={form.message} onChange={handleChange} rows={6} placeholder="Tell us about your inquiry..."
|
<textarea required name="message" value={form.message} onChange={handleChange} rows={6} placeholder="Tell us about your inquiry..."
|
||||||
className="ui-form-shell-light resize-none" />
|
className="ui-form-shell-light resize-none" />
|
||||||
</div>
|
</div>
|
||||||
|
{status === 'error' && errorMessage && (
|
||||||
|
<div className="rounded-lg bg-rose-50 p-4 text-rose-500 text-sm border border-rose-200">
|
||||||
|
{errorMessage}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<button type="submit" disabled={status === 'sending'}
|
<button type="submit" disabled={status === 'sending'}
|
||||||
className="ui-form-inline-button w-full">
|
className="ui-form-inline-button w-full">
|
||||||
{status === 'sending' ? (
|
{status === 'sending' ? (
|
||||||
|
|||||||
@@ -573,6 +573,3 @@ body:has(.announcement-bar) .global-navbar[data-scrolled="false"] {
|
|||||||
top: 44px; /* Adjusts Navbar down when AnnouncementBar is present at the top */
|
top: 44px; /* Adjusts Navbar down when AnnouncementBar is present at the top */
|
||||||
}
|
}
|
||||||
|
|
||||||
body:has(.announcement-bar) .global-main {
|
|
||||||
padding-top: 116px; /* 72px original pt + 44px AnnouncementBar */
|
|
||||||
}
|
|
||||||
@@ -9,6 +9,7 @@ import { getCategoryImage } from '@homaroma/types'
|
|||||||
import ProductCard from '../ProductCard'
|
import ProductCard from '../ProductCard'
|
||||||
import { localizedFromRecord, resolveCategoryName, resolveLocalized, toRecord } from '../../lib/localization'
|
import { localizedFromRecord, resolveCategoryName, resolveLocalized, toRecord } from '../../lib/localization'
|
||||||
import { useLang } from '../../hooks/useLang'
|
import { useLang } from '../../hooks/useLang'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||||
import { Autoplay } from 'swiper/modules'
|
import { Autoplay } from 'swiper/modules'
|
||||||
import 'swiper/css'
|
import 'swiper/css'
|
||||||
@@ -56,18 +57,7 @@ function renderAccentTitle(text: string, accentClassName = 'ui-accent-text') {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function heroLearnMoreText(lang: string) {
|
|
||||||
const labels: Record<string, string> = {
|
|
||||||
th: 'ดูรายละเอียดเพิ่มเติม',
|
|
||||||
en: 'Learn More',
|
|
||||||
ja: '詳しく見る',
|
|
||||||
zh: '了解更多',
|
|
||||||
vi: 'Tìm hiểu thêm',
|
|
||||||
ko: '자세히 보기',
|
|
||||||
}
|
|
||||||
|
|
||||||
return labels[lang] ?? labels.en
|
|
||||||
}
|
|
||||||
|
|
||||||
function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||||
const i18nLang = useLang()
|
const i18nLang = useLang()
|
||||||
@@ -103,6 +93,7 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
|
|||||||
}
|
}
|
||||||
|
|
||||||
function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||||
|
const { t } = useTranslation()
|
||||||
const i18nLang = useLang()
|
const i18nLang = useLang()
|
||||||
const resolvedLang = lang === 'all' ? i18nLang : lang
|
const resolvedLang = lang === 'all' ? i18nLang : lang
|
||||||
const tagline = localizedFromRecord(payload, 'tagline', resolvedLang)
|
const tagline = localizedFromRecord(payload, 'tagline', resolvedLang)
|
||||||
@@ -149,7 +140,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
|
|||||||
href="#categories"
|
href="#categories"
|
||||||
className="ui-hero-link group"
|
className="ui-hero-link group"
|
||||||
>
|
>
|
||||||
{heroLearnMoreText(resolvedLang)}
|
{t('dynamic.heroLearnMore', { lng: resolvedLang })}
|
||||||
<span className="transition-transform group-hover:translate-x-1">→</span>
|
<span className="transition-transform group-hover:translate-x-1">→</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -169,6 +160,7 @@ function CategoriesSection({
|
|||||||
lang: string
|
lang: string
|
||||||
}) {
|
}) {
|
||||||
const i18nLang = useLang()
|
const i18nLang = useLang()
|
||||||
|
const { t } = useTranslation()
|
||||||
const resolvedLang = lang === 'all' ? i18nLang : lang
|
const resolvedLang = lang === 'all' ? i18nLang : lang
|
||||||
const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Our Collections'
|
const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Our Collections'
|
||||||
const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
|
const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
|
||||||
@@ -176,14 +168,6 @@ function CategoriesSection({
|
|||||||
const payloadCategories = getCategoriesFromPayload(payload)
|
const payloadCategories = getCategoriesFromPayload(payload)
|
||||||
const sourceCategories = payloadCategories.length ? payloadCategories : categories
|
const sourceCategories = payloadCategories.length ? payloadCategories : categories
|
||||||
const displayed = categoryIds.length ? sourceCategories.filter((category) => categoryIds.includes(category.id)) : sourceCategories
|
const displayed = categoryIds.length ? sourceCategories.filter((category) => categoryIds.includes(category.id)) : sourceCategories
|
||||||
const productsLabel: Record<string, string> = {
|
|
||||||
th: 'สินค้า',
|
|
||||||
en: 'Products',
|
|
||||||
ja: '商品',
|
|
||||||
zh: '商品',
|
|
||||||
vi: 'Sản phẩm',
|
|
||||||
ko: '상품',
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="categories" className="bg-surface-page ui-section-band">
|
<section id="categories" className="bg-surface-page ui-section-band">
|
||||||
@@ -214,7 +198,7 @@ function CategoriesSection({
|
|||||||
<span className="block text-lg font-semibold">{name}</span>
|
<span className="block text-lg font-semibold">{name}</span>
|
||||||
{category._count && (
|
{category._count && (
|
||||||
<span className="text-sm text-white/90">
|
<span className="text-sm text-white/90">
|
||||||
{category._count.products} {productsLabel[resolvedLang] ?? productsLabel.en}
|
{category._count.products} {t('dynamic.products', { lng: resolvedLang })}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -228,27 +212,12 @@ function CategoriesSection({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ProductsSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
function ProductsSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||||
|
const { t } = useTranslation()
|
||||||
const i18nLang = useLang()
|
const i18nLang = useLang()
|
||||||
const resolvedLang = lang === 'all' ? i18nLang : lang
|
const resolvedLang = lang === 'all' ? i18nLang : lang
|
||||||
const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Featured Picks'
|
const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Featured Picks'
|
||||||
const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
|
const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
|
||||||
const products = getProducts(payload)
|
const products = getProducts(payload)
|
||||||
const viewAllLabel: Record<string, string> = {
|
|
||||||
th: 'ดูทั้งหมด →',
|
|
||||||
en: 'View All Collection →',
|
|
||||||
ja: 'すべて見る →',
|
|
||||||
zh: '查看全部 →',
|
|
||||||
vi: 'Xem tất cả →',
|
|
||||||
ko: '전체 보기 →',
|
|
||||||
}
|
|
||||||
const emptyLabel: Record<string, string> = {
|
|
||||||
th: 'ไม่พบสินค้าในหมวดนี้',
|
|
||||||
en: 'No products found in this section.',
|
|
||||||
ja: 'このセクションには商品がありません。',
|
|
||||||
zh: '此区域中没有找到产品。',
|
|
||||||
vi: 'Không tìm thấy sản phẩm nào trong mục này.',
|
|
||||||
ko: '이 섹션에서 찾을 수 있는 상품이 없습니다.',
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="bg-surface-page ui-section-band">
|
<section className="bg-surface-page ui-section-band">
|
||||||
@@ -259,7 +228,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
|
|||||||
{subtitle && <p className="mt-2 ui-section-subtitle">{subtitle}</p>}
|
{subtitle && <p className="mt-2 ui-section-subtitle">{subtitle}</p>}
|
||||||
</div>
|
</div>
|
||||||
<Link href="/shop" className="ui-section-link">
|
<Link href="/shop" className="ui-section-link">
|
||||||
{viewAllLabel[resolvedLang] ?? viewAllLabel.en}
|
{t('dynamic.viewAll', { lng: resolvedLang })}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
{products.length ? (
|
{products.length ? (
|
||||||
@@ -268,7 +237,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
|
<p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
|
||||||
{emptyLabel[resolvedLang] ?? emptyLabel.en}
|
{t('dynamic.emptyProducts', { lng: resolvedLang })}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -450,6 +419,7 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
|
|||||||
}
|
}
|
||||||
|
|
||||||
function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||||
|
const { t } = useTranslation()
|
||||||
const i18nLang = useLang()
|
const i18nLang = useLang()
|
||||||
const resolvedLang = lang === 'all' ? i18nLang : lang
|
const resolvedLang = lang === 'all' ? i18nLang : lang
|
||||||
const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Guide Article'
|
const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Guide Article'
|
||||||
@@ -466,14 +436,6 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
|
|||||||
: typeof payload.publishDate === 'string'
|
: typeof payload.publishDate === 'string'
|
||||||
? payload.publishDate
|
? payload.publishDate
|
||||||
: ''
|
: ''
|
||||||
const authorPrefix: Record<string, string> = {
|
|
||||||
th: 'โดย',
|
|
||||||
en: 'By',
|
|
||||||
ja: '著者',
|
|
||||||
zh: '作者',
|
|
||||||
vi: 'Bởi',
|
|
||||||
ko: '작성자',
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="ui-hero-shell min-h-[60vh] px-6 py-24 text-center md:min-h-[76vh]">
|
<section className="ui-hero-shell min-h-[60vh] px-6 py-24 text-center md:min-h-[76vh]">
|
||||||
@@ -489,7 +451,7 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
|
|||||||
{subtitle && <p className="mx-auto max-w-2xl text-lg text-surface-card md:text-xl">{subtitle}</p>}
|
{subtitle && <p className="mx-auto max-w-2xl text-lg text-surface-card md:text-xl">{subtitle}</p>}
|
||||||
{(author || date) && (
|
{(author || date) && (
|
||||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-surface-card">
|
<p className="text-xs font-bold uppercase tracking-[0.22em] text-surface-card">
|
||||||
{[author && `${authorPrefix[resolvedLang] ?? authorPrefix.en} ${author}`, date].filter(Boolean).join(' / ')}
|
{[author && `${t('dynamic.authorBy', { lng: resolvedLang })} ${author}`, date].filter(Boolean).join(' / ')}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -498,23 +460,16 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||||
|
const { t } = useTranslation()
|
||||||
const i18nLang = useLang()
|
const i18nLang = useLang()
|
||||||
const resolvedLang = lang === 'all' ? i18nLang : lang
|
const resolvedLang = lang === 'all' ? i18nLang : lang
|
||||||
const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Notes'
|
const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Notes'
|
||||||
const description = localizedFromRecord(payload, 'description', resolvedLang)
|
const description = localizedFromRecord(payload, 'description', resolvedLang)
|
||||||
const noteLabels: Record<string, Record<string, string>> = {
|
|
||||||
th: { top: 'กลิ่นเปิด', heart: 'กลิ่นกลาง', base: 'กลิ่นฐาน' },
|
|
||||||
en: { top: 'Top Notes', heart: 'Heart Notes', base: 'Base Notes' },
|
|
||||||
ja: { top: 'トップノート', heart: 'ミドルノート', base: 'ベースノート' },
|
|
||||||
zh: { top: '前调', heart: '中调', base: '后调' },
|
|
||||||
vi: { top: 'Hương đầu', heart: 'Hương giữa', base: 'Hương cuối' },
|
|
||||||
ko: { top: '탑 노트', heart: '미들 노트', base: '베이스 노트' },
|
|
||||||
}
|
|
||||||
const labels = noteLabels[resolvedLang] ?? noteLabels.en
|
|
||||||
const notes = [
|
const notes = [
|
||||||
[labels.top, optionalText(payload.topNotes, resolvedLang) || 'The initial, lighter smells of the fragrance.'],
|
[t('dynamic.notes.top', { lng: resolvedLang }), optionalText(payload.topNotes, resolvedLang) || 'The initial, lighter smells of the fragrance.'],
|
||||||
[labels.heart, optionalText(payload.heartNotes ?? payload.middleNotes, resolvedLang) || 'The core of the fragrance, emerging just after the top notes.'],
|
[t('dynamic.notes.heart', { lng: resolvedLang }), optionalText(payload.heartNotes ?? payload.middleNotes, resolvedLang) || 'The core of the fragrance, emerging just after the top notes.'],
|
||||||
[labels.base, optionalText(payload.baseNotes, resolvedLang) || 'The deepest, richest scents that linger the longest.'],
|
[t('dynamic.notes.base', { lng: resolvedLang }), optionalText(payload.baseNotes, resolvedLang) || 'The deepest, richest scents that linger the longest.'],
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -611,27 +566,20 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||||
|
const { t } = useTranslation()
|
||||||
const i18nLang = useLang()
|
const i18nLang = useLang()
|
||||||
const resolvedLang = lang === 'all' ? i18nLang : lang
|
const resolvedLang = lang === 'all' ? i18nLang : lang
|
||||||
const labels: Record<string, Record<string, string>> = {
|
|
||||||
th: { address: 'ที่อยู่', email: 'อีเมล', line: 'Line', hours: 'เวลาทำการ' },
|
|
||||||
en: { address: 'Address', email: 'Email', line: 'Line', hours: 'Business Hours' },
|
|
||||||
ja: { address: '住所', email: 'メール', line: 'Line', hours: '営業時間' },
|
|
||||||
zh: { address: '地址', email: '电子邮件', line: 'Line', hours: '营业时间' },
|
|
||||||
vi: { address: 'Địa chỉ', email: 'Email', line: 'Line', hours: 'Giờ làm việc' },
|
|
||||||
ko: { address: '주소', email: '이메일', line: 'Line', hours: '운영 시간' },
|
|
||||||
}
|
|
||||||
const resolvedLabels = labels[resolvedLang] ?? labels.en
|
|
||||||
const title = localizedFromRecord(payload, 'title', resolvedLang)
|
const title = localizedFromRecord(payload, 'title', resolvedLang)
|
||||||
const address = localizedFromRecord(payload, 'address', resolvedLang)
|
const address = localizedFromRecord(payload, 'address', resolvedLang)
|
||||||
const email = typeof payload.email === 'string' ? payload.email : ''
|
const email = typeof payload.email === 'string' ? payload.email : ''
|
||||||
const line = typeof payload.line === 'string' ? payload.line : ''
|
const line = typeof payload.line === 'string' ? payload.line : ''
|
||||||
const hours = localizedFromRecord(payload, 'hours', resolvedLang)
|
const hours = localizedFromRecord(payload, 'hours', resolvedLang)
|
||||||
const items = [
|
const items = [
|
||||||
{ key: 'address', label: resolvedLabels.address, value: address, Icon: MapPin },
|
{ key: 'address', label: t('dynamic.contactInfo.address', { lng: resolvedLang }), value: address, Icon: MapPin },
|
||||||
{ key: 'email', label: resolvedLabels.email, value: email, Icon: Mail },
|
{ key: 'email', label: t('dynamic.contactInfo.email', { lng: resolvedLang }), value: email, Icon: Mail },
|
||||||
{ key: 'line', label: resolvedLabels.line, value: line, Icon: MessageCircle },
|
{ key: 'line', label: t('dynamic.contactInfo.line', { lng: resolvedLang }), value: line, Icon: MessageCircle },
|
||||||
{ key: 'hours', label: resolvedLabels.hours, value: hours, Icon: Clock },
|
{ key: 'hours', label: t('dynamic.contactInfo.hours', { lng: resolvedLang }), value: hours, Icon: Clock },
|
||||||
] as const
|
] as const
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -667,105 +615,46 @@ function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ContactFormSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
function ContactFormSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||||
|
const { t } = useTranslation()
|
||||||
const i18nLang = useLang()
|
const i18nLang = useLang()
|
||||||
const resolvedLang = lang === 'all' ? i18nLang : lang
|
const resolvedLang = lang === 'all' ? i18nLang : lang
|
||||||
const [formData, setFormData] = useState({ name: '', email: '', message: '' })
|
const [formData, setFormData] = useState({ name: '', email: '', message: '' })
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
const [isSuccess, setIsSuccess] = useState(false)
|
const [isSuccess, setIsSuccess] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
const title = localizedFromRecord(payload, 'title', resolvedLang)
|
const title = localizedFromRecord(payload, 'title', resolvedLang)
|
||||||
const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
|
const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
|
||||||
|
|
||||||
const labels: Record<string, Record<string, string>> = {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
th: {
|
|
||||||
title: 'ติดต่อเรา',
|
|
||||||
subtitle: 'ส่งข้อความถึงทีมงานของเรา เรายินดีให้บริการและพร้อมตอบทุกข้อสงสัย',
|
|
||||||
successTitle: 'ส่งข้อความสำเร็จ',
|
|
||||||
successBody: 'ขอบคุณที่ติดต่อเรา ทีมงานจะรีบตอบกลับโดยเร็วที่สุด',
|
|
||||||
name: 'ชื่อ-นามสกุล',
|
|
||||||
namePlaceholder: 'กรอกชื่อของคุณ',
|
|
||||||
email: 'อีเมล',
|
|
||||||
message: 'ข้อความ',
|
|
||||||
messagePlaceholder: 'พิมพ์ข้อความของคุณที่นี่...',
|
|
||||||
submit: 'ส่งข้อความ',
|
|
||||||
},
|
|
||||||
en: {
|
|
||||||
title: 'Contact Us',
|
|
||||||
subtitle: 'Send a message to our team and we will get back to you soon.',
|
|
||||||
successTitle: 'Message sent successfully',
|
|
||||||
successBody: 'Thanks for reaching out. Our team will reply as soon as possible.',
|
|
||||||
name: 'Full Name',
|
|
||||||
namePlaceholder: 'Enter your name',
|
|
||||||
email: 'Email',
|
|
||||||
message: 'Message',
|
|
||||||
messagePlaceholder: 'Type your message here...',
|
|
||||||
submit: 'Send Message',
|
|
||||||
},
|
|
||||||
ja: {
|
|
||||||
title: 'お問い合わせ',
|
|
||||||
subtitle: 'チームへメッセージをお送りください。できるだけ早くご返信します。',
|
|
||||||
successTitle: '送信に成功しました',
|
|
||||||
successBody: 'お問い合わせありがとうございます。担当者ができるだけ早く返信します。',
|
|
||||||
name: '氏名',
|
|
||||||
namePlaceholder: 'お名前を入力してください',
|
|
||||||
email: 'メール',
|
|
||||||
message: 'メッセージ',
|
|
||||||
messagePlaceholder: 'ここにメッセージを入力してください...',
|
|
||||||
submit: '送信',
|
|
||||||
},
|
|
||||||
zh: {
|
|
||||||
title: '联系我们',
|
|
||||||
subtitle: '给我们的团队留言，我们会尽快回复您。',
|
|
||||||
successTitle: '发送成功',
|
|
||||||
successBody: '感谢您的联系，我们会尽快回复。',
|
|
||||||
name: '姓名',
|
|
||||||
namePlaceholder: '请输入您的姓名',
|
|
||||||
email: '邮箱',
|
|
||||||
message: '留言',
|
|
||||||
messagePlaceholder: '在这里输入您的留言...',
|
|
||||||
submit: '发送消息',
|
|
||||||
},
|
|
||||||
vi: {
|
|
||||||
title: 'Liên hệ',
|
|
||||||
subtitle: 'Gửi tin nhắn cho đội ngũ của chúng tôi, chúng tôi sẽ phản hồi sớm nhất.',
|
|
||||||
successTitle: 'Gửi tin nhắn thành công',
|
|
||||||
successBody: 'Cảm ơn bạn đã liên hệ, đội ngũ của chúng tôi sẽ phản hồi sớm nhất có thể.',
|
|
||||||
name: 'Họ và tên',
|
|
||||||
namePlaceholder: 'Nhập tên của bạn',
|
|
||||||
email: 'Email',
|
|
||||||
message: 'Tin nhắn',
|
|
||||||
messagePlaceholder: 'Nhập tin nhắn của bạn tại đây...',
|
|
||||||
submit: 'Gửi tin nhắn',
|
|
||||||
},
|
|
||||||
ko: {
|
|
||||||
title: '문의하기',
|
|
||||||
subtitle: '팀에 메시지를 보내주시면 최대한 빨리 답변드리겠습니다.',
|
|
||||||
successTitle: '메시지 전송 완료',
|
|
||||||
successBody: '문의해 주셔서 감사합니다. 가능한 빨리 답변드리겠습니다.',
|
|
||||||
name: '이름',
|
|
||||||
namePlaceholder: '이름을 입력하세요',
|
|
||||||
email: '이메일',
|
|
||||||
message: '메시지',
|
|
||||||
messagePlaceholder: '여기에 메시지를 입력하세요...',
|
|
||||||
submit: '메시지 보내기',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const copy = labels[resolvedLang] ?? labels.en
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setIsSubmitting(true)
|
setIsSubmitting(true)
|
||||||
|
setError(null)
|
||||||
|
setIsSuccess(false)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3051/api';
|
||||||
|
const res = await fetch(`${apiUrl}/contacts`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(formData)
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await res.json().catch(() => ({}));
|
||||||
|
|
||||||
|
if (!res.ok || data.error) {
|
||||||
|
throw new Error(data.error || 'Failed to send message');
|
||||||
|
}
|
||||||
|
|
||||||
// Simulate API call
|
|
||||||
setTimeout(() => {
|
|
||||||
setIsSubmitting(false)
|
|
||||||
setIsSuccess(true)
|
setIsSuccess(true)
|
||||||
setFormData({ name: '', email: '', message: '' })
|
setFormData({ name: '', email: '', message: '' })
|
||||||
|
|
||||||
// Reset success message after 3 seconds
|
|
||||||
setTimeout(() => setIsSuccess(false), 3000)
|
setTimeout(() => setIsSuccess(false), 3000)
|
||||||
}, 1000)
|
} catch (err: any) {
|
||||||
|
console.error(err);
|
||||||
|
setError(err.message || 'An unexpected error occurred. Please try again.');
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
@@ -778,28 +667,33 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
|
|||||||
<div className="mx-auto max-w-3xl">
|
<div className="mx-auto max-w-3xl">
|
||||||
<div className="mb-12 text-center">
|
<div className="mb-12 text-center">
|
||||||
<h2 className="mb-4 text-3xl font-semibold text-text-main md:text-4xl">
|
<h2 className="mb-4 text-3xl font-semibold text-text-main md:text-4xl">
|
||||||
{title || copy.title}
|
{title || t('contactForm.title', { lng: resolvedLang })}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mx-auto max-w-xl text-lg text-muted-text">
|
<p className="mx-auto max-w-xl text-lg text-muted-text">
|
||||||
{subtitle || copy.subtitle}
|
{subtitle || t('contactForm.subtitle', { lng: resolvedLang })}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-3xl border border-line-primary/20 bg-surface-card p-8 shadow-card md:p-12">
|
<div className="rounded-3xl border border-line-primary/20 bg-surface-card p-8 shadow-card md:p-12">
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 rounded-lg bg-rose-50 p-4 text-rose-500 text-sm border border-rose-200">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{isSuccess ? (
|
{isSuccess ? (
|
||||||
<div className="py-12 text-center">
|
<div className="py-12 text-center">
|
||||||
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-brand-success/20 text-brand-success">
|
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-brand-success/20 text-brand-success">
|
||||||
<Send size={32} />
|
<Send size={32} />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="mb-2 text-2xl font-semibold text-text-main">{copy.successTitle}</h3>
|
<h3 className="mb-2 text-2xl font-semibold text-text-main">{t('contactForm.successTitle', { lng: resolvedLang })}</h3>
|
||||||
<p className="text-muted-text">{copy.successBody}</p>
|
<p className="text-muted-text">{t('contactForm.successBody', { lng: resolvedLang })}</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label htmlFor="name" className="block text-sm font-medium text-text-main">
|
<label htmlFor="name" className="block text-sm font-medium text-text-main">
|
||||||
{copy.name}
|
{t('contactForm.name', { lng: resolvedLang })}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -808,13 +702,13 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
|
|||||||
required
|
required
|
||||||
value={formData.name}
|
value={formData.name}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
className="w-full rounded-xl border border-line-primary/30 bg-surface-page px-4 py-3 text-text-main outline-none transition-all focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20"
|
placeholder={t('contactForm.namePlaceholder', { lng: resolvedLang })}
|
||||||
placeholder={copy.namePlaceholder}
|
className="ui-form-shell"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-text-main">
|
<label htmlFor="email" className="block text-sm font-medium text-text-main">
|
||||||
{copy.email}
|
{t('contactForm.email', { lng: resolvedLang })}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
@@ -823,7 +717,7 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
|
|||||||
required
|
required
|
||||||
value={formData.email}
|
value={formData.email}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
className="w-full rounded-xl border border-line-primary/30 bg-surface-page px-4 py-3 text-text-main outline-none transition-all focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20"
|
className="ui-form-shell"
|
||||||
placeholder="example@email.com"
|
placeholder="example@email.com"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -831,17 +725,17 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
|
|||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label htmlFor="message" className="block text-sm font-medium text-text-main">
|
<label htmlFor="message" className="block text-sm font-medium text-text-main">
|
||||||
{copy.message}
|
{t('contactForm.message', { lng: resolvedLang })}
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
id="message"
|
id="message"
|
||||||
name="message"
|
name="message"
|
||||||
required
|
required
|
||||||
|
rows={4}
|
||||||
value={formData.message}
|
value={formData.message}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
rows={5}
|
placeholder={t('contactForm.messagePlaceholder', { lng: resolvedLang })}
|
||||||
className="w-full resize-none rounded-xl border border-line-primary/30 bg-surface-page px-4 py-3 text-text-main outline-none transition-all focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20"
|
className="ui-form-shell resize-none"
|
||||||
placeholder={copy.messagePlaceholder}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -855,7 +749,7 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
|
|||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Send size={18} />
|
<Send size={18} />
|
||||||
{copy.submit}
|
{t('contactForm.submit', { lng: resolvedLang })}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -34,5 +34,35 @@
|
|||||||
"followUs": "Follow Us",
|
"followUs": "Follow Us",
|
||||||
"contactUs": "Contact Us",
|
"contactUs": "Contact Us",
|
||||||
"rights": "All rights reserved."
|
"rights": "All rights reserved."
|
||||||
|
},
|
||||||
|
"dynamic": {
|
||||||
|
"heroLearnMore": "Learn More",
|
||||||
|
"products": "Products",
|
||||||
|
"viewAll": "View All Collection →",
|
||||||
|
"emptyProducts": "No products found in this section.",
|
||||||
|
"authorBy": "By",
|
||||||
|
"notes": {
|
||||||
|
"top": "Top Notes",
|
||||||
|
"heart": "Heart Notes",
|
||||||
|
"base": "Base Notes"
|
||||||
|
},
|
||||||
|
"contactInfo": {
|
||||||
|
"address": "Address",
|
||||||
|
"email": "Email",
|
||||||
|
"line": "Line",
|
||||||
|
"hours": "Business Hours"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contactForm": {
|
||||||
|
"title": "Contact Us",
|
||||||
|
"subtitle": "Send a message to our team and we will get back to you soon.",
|
||||||
|
"successTitle": "Message sent successfully",
|
||||||
|
"successBody": "Thanks for reaching out. Our team will reply as soon as possible.",
|
||||||
|
"name": "Full Name",
|
||||||
|
"namePlaceholder": "Enter your name",
|
||||||
|
"email": "Email",
|
||||||
|
"message": "Message",
|
||||||
|
"messagePlaceholder": "Type your message here...",
|
||||||
|
"submit": "Send Message"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -57,5 +57,35 @@
|
|||||||
"moreRelated": "関連する {{category}}",
|
"moreRelated": "関連する {{category}}",
|
||||||
"reviews": "レビュー",
|
"reviews": "レビュー",
|
||||||
"viewDetails": "詳細を見る →"
|
"viewDetails": "詳細を見る →"
|
||||||
|
},
|
||||||
|
"dynamic": {
|
||||||
|
"heroLearnMore": "詳しく見る",
|
||||||
|
"products": "商品",
|
||||||
|
"viewAll": "すべて見る →",
|
||||||
|
"emptyProducts": "このセクションには商品がありません。",
|
||||||
|
"authorBy": "著者",
|
||||||
|
"notes": {
|
||||||
|
"top": "トップノート",
|
||||||
|
"heart": "ミドルノート",
|
||||||
|
"base": "ベースノート"
|
||||||
|
},
|
||||||
|
"contactInfo": {
|
||||||
|
"address": "住所",
|
||||||
|
"email": "メール",
|
||||||
|
"line": "Line",
|
||||||
|
"hours": "営業時間"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contactForm": {
|
||||||
|
"title": "お問い合わせ",
|
||||||
|
"subtitle": "チームへメッセージをお送りください。できるだけ早くご返信します。",
|
||||||
|
"successTitle": "送信に成功しました",
|
||||||
|
"successBody": "お問い合わせありがとうございます。担当者ができるだけ早く返信します。",
|
||||||
|
"name": "氏名",
|
||||||
|
"namePlaceholder": "お名前を入力してください",
|
||||||
|
"email": "メール",
|
||||||
|
"message": "メッセージ",
|
||||||
|
"messagePlaceholder": "ここにメッセージを入力してください...",
|
||||||
|
"submit": "送信"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -57,5 +57,35 @@
|
|||||||
"moreRelated": "더 많은 {{category}}",
|
"moreRelated": "더 많은 {{category}}",
|
||||||
"reviews": "리뷰",
|
"reviews": "리뷰",
|
||||||
"viewDetails": "상세 보기 →"
|
"viewDetails": "상세 보기 →"
|
||||||
|
},
|
||||||
|
"dynamic": {
|
||||||
|
"heroLearnMore": "자세히 보기",
|
||||||
|
"products": "상품",
|
||||||
|
"viewAll": "전체 보기 →",
|
||||||
|
"emptyProducts": "이 섹션에서 찾을 수 있는 상품이 없습니다.",
|
||||||
|
"authorBy": "작성자",
|
||||||
|
"notes": {
|
||||||
|
"top": "탑 노트",
|
||||||
|
"heart": "미들 노트",
|
||||||
|
"base": "베이스 노트"
|
||||||
|
},
|
||||||
|
"contactInfo": {
|
||||||
|
"address": "주소",
|
||||||
|
"email": "이메일",
|
||||||
|
"line": "Line",
|
||||||
|
"hours": "운영 시간"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contactForm": {
|
||||||
|
"title": "문의하기",
|
||||||
|
"subtitle": "팀에 메시지를 보내주시면 최대한 빨리 답변드리겠습니다.",
|
||||||
|
"successTitle": "메시지 전송 완료",
|
||||||
|
"successBody": "문의해 주셔서 감사합니다. 가능한 빨리 답변드리겠습니다.",
|
||||||
|
"name": "이름",
|
||||||
|
"namePlaceholder": "이름을 입력하세요",
|
||||||
|
"email": "이메일",
|
||||||
|
"message": "메시지",
|
||||||
|
"messagePlaceholder": "여기에 메시지를 입력하세요...",
|
||||||
|
"submit": "메시지 보내기"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -34,5 +34,35 @@
|
|||||||
"followUs": "ติดตามเรา",
|
"followUs": "ติดตามเรา",
|
||||||
"contactUs": "ติดต่อสอบถาม",
|
"contactUs": "ติดต่อสอบถาม",
|
||||||
"rights": "สงวนลิขสิทธิ์."
|
"rights": "สงวนลิขสิทธิ์."
|
||||||
|
},
|
||||||
|
"dynamic": {
|
||||||
|
"heroLearnMore": "ดูรายละเอียดเพิ่มเติม",
|
||||||
|
"products": "สินค้า",
|
||||||
|
"viewAll": "ดูทั้งหมด →",
|
||||||
|
"emptyProducts": "ไม่พบสินค้าในหมวดนี้",
|
||||||
|
"authorBy": "โดย",
|
||||||
|
"notes": {
|
||||||
|
"top": "กลิ่นเปิด",
|
||||||
|
"heart": "กลิ่นกลาง",
|
||||||
|
"base": "กลิ่นฐาน"
|
||||||
|
},
|
||||||
|
"contactInfo": {
|
||||||
|
"address": "ที่อยู่",
|
||||||
|
"email": "อีเมล",
|
||||||
|
"line": "Line",
|
||||||
|
"hours": "เวลาทำการ"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contactForm": {
|
||||||
|
"title": "ติดต่อเรา",
|
||||||
|
"subtitle": "ส่งข้อความถึงทีมงานของเรา เรายินดีให้บริการและพร้อมตอบทุกข้อสงสัย",
|
||||||
|
"successTitle": "ส่งข้อความสำเร็จ",
|
||||||
|
"successBody": "ขอบคุณที่ติดต่อเรา ทีมงานจะรีบตอบกลับโดยเร็วที่สุด",
|
||||||
|
"name": "ชื่อ-นามสกุล",
|
||||||
|
"namePlaceholder": "กรอกชื่อของคุณ",
|
||||||
|
"email": "อีเมล",
|
||||||
|
"message": "ข้อความ",
|
||||||
|
"messagePlaceholder": "พิมพ์ข้อความของคุณที่นี่...",
|
||||||
|
"submit": "ส่งข้อความ"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -57,5 +57,35 @@
|
|||||||
"moreRelated": "Thêm {{category}}",
|
"moreRelated": "Thêm {{category}}",
|
||||||
"reviews": "Đánh giá",
|
"reviews": "Đánh giá",
|
||||||
"viewDetails": "Xem chi tiết →"
|
"viewDetails": "Xem chi tiết →"
|
||||||
|
},
|
||||||
|
"dynamic": {
|
||||||
|
"heroLearnMore": "Tìm hiểu thêm",
|
||||||
|
"products": "Sản phẩm",
|
||||||
|
"viewAll": "Xem tất cả →",
|
||||||
|
"emptyProducts": "Không tìm thấy sản phẩm nào trong mục này.",
|
||||||
|
"authorBy": "Bởi",
|
||||||
|
"notes": {
|
||||||
|
"top": "Hương đầu",
|
||||||
|
"heart": "Hương giữa",
|
||||||
|
"base": "Hương cuối"
|
||||||
|
},
|
||||||
|
"contactInfo": {
|
||||||
|
"address": "Địa chỉ",
|
||||||
|
"email": "Email",
|
||||||
|
"line": "Line",
|
||||||
|
"hours": "Giờ làm việc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contactForm": {
|
||||||
|
"title": "Liên hệ",
|
||||||
|
"subtitle": "Gửi tin nhắn cho đội ngũ của chúng tôi, chúng tôi sẽ phản hồi sớm nhất.",
|
||||||
|
"successTitle": "Gửi tin nhắn thành công",
|
||||||
|
"successBody": "Cảm ơn bạn đã liên hệ, đội ngũ của chúng tôi sẽ phản hồi sớm nhất có thể.",
|
||||||
|
"name": "Họ và tên",
|
||||||
|
"namePlaceholder": "Nhập tên của bạn",
|
||||||
|
"email": "Email",
|
||||||
|
"message": "Tin nhắn",
|
||||||
|
"messagePlaceholder": "Nhập tin nhắn của bạn tại đây...",
|
||||||
|
"submit": "Gửi tin nhắn"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -57,5 +57,35 @@
|
|||||||
"moreRelated": "更多 {{category}}",
|
"moreRelated": "更多 {{category}}",
|
||||||
"reviews": "评价",
|
"reviews": "评价",
|
||||||
"viewDetails": "查看详情 →"
|
"viewDetails": "查看详情 →"
|
||||||
|
},
|
||||||
|
"dynamic": {
|
||||||
|
"heroLearnMore": "了解更多",
|
||||||
|
"products": "商品",
|
||||||
|
"viewAll": "查看全部 →",
|
||||||
|
"emptyProducts": "此区域中没有找到产品。",
|
||||||
|
"authorBy": "作者",
|
||||||
|
"notes": {
|
||||||
|
"top": "前调",
|
||||||
|
"heart": "中调",
|
||||||
|
"base": "后调"
|
||||||
|
},
|
||||||
|
"contactInfo": {
|
||||||
|
"address": "地址",
|
||||||
|
"email": "电子邮件",
|
||||||
|
"line": "Line",
|
||||||
|
"hours": "营业时间"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contactForm": {
|
||||||
|
"title": "联系我们",
|
||||||
|
"subtitle": "给我们的团队留言，我们会尽快回复您。",
|
||||||
|
"successTitle": "发送成功",
|
||||||
|
"successBody": "感谢您的联系，我们会尽快回复。",
|
||||||
|
"name": "姓名",
|
||||||
|
"namePlaceholder": "请输入您的姓名",
|
||||||
|
"email": "邮箱",
|
||||||
|
"message": "留言",
|
||||||
|
"messagePlaceholder": "在这里输入您的留言...",
|
||||||
|
"submit": "发送消息"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user