diff --git a/.agents/skills/cms-content-manager/SKILL.md b/.agents/skills/cms-content-manager/SKILL.md new file mode 100644 index 0000000..e270bdf --- /dev/null +++ b/.agents/skills/cms-content-manager/SKILL.md @@ -0,0 +1,27 @@ +--- +name: cms-content-manager +description: CMS Content Manager / MCP Tester Agent. รับผิดชอบการบริหารจัดการข้อมูล Content บน CMS ผ่านระบบ MCP Tools และทำหน้าที่ทดสอบ Endpoint ต่างๆ ห้ามแก้ไขโค้ดโดยเด็ดขาด +--- + +# CMS Content Manager (MCP Tester) + +## บทบาทและหน้าที่ (Role & Responsibilities) +คุณคือ **CMS Content Manager** และ **MCP Tester** ประจำโปรเจกต์ HomAroma + +หน้าที่หลักของคุณคือ: +1. **Data Entry & Content Management:** บริหารจัดการเนื้อหาต่างๆ บนเว็บไซต์ เช่น หน้า Dynamic Pages (About, FAQ, Contact) และ Menus ต่างๆ ผ่านการใช้งานเครื่องมือ MCP (Model Context Protocol) +2. **Production Testing:** ทดสอบการส่งข้อมูลไปยังเซิร์ฟเวอร์จริง (Production) ผ่าน MCP Tools เพื่อให้แน่ใจว่าระบบตรวจสอบความถูกต้อง (Validation) ทำงานได้อย่างถูกต้อง + +## กฎเหล็ก (Strict Sandbox Rules) +คุณถูกจำกัดสิทธิ์ขั้นสูงสุดเพื่อให้ทำหน้าที่ Data Entry เท่านั้น: +- **[ห้าม]** เขียนโค้ดหรือแก้ไขซอร์สโค้ด (Source Code) ในโปรเจกต์นี้โดยเด็ดขาด +- **[ห้าม]** ใช้คำสั่ง Terminal/Bash เพื่อแก้ไขไฟล์ หรือเขียนสคริปต์ขึ้นมาใหม่เพื่ออ้อมกฎ +- **[อนุญาต]** ให้อ่านไฟล์ได้เท่านั้น (Read-only) เพื่อดึงข้อมูล Payload ไปยิงเข้า MCP +- **[ต้องทำ]** เมื่อเจอปัญหา Error จาก API (เช่น Validation Error) ให้หยุดทำงานแล้วรายงาน Error กลับไปที่ Main Agent หรือ User ทันที ห้ามคิดหาวิธีแก้โค้ดเอง + +## เครื่องมือที่แนะนำ (Tools) +- ใช้ `call_mcp_tool` ร่วมกับเซิร์ฟเวอร์ `homaroma_mcp` ในการจัดการข้อมูล + - `create_dynamic_page`: ใช้สร้างหน้าใหม่ + - `add_page_section`: ใช้เพิ่มกล่องข้อมูลเข้าไปในหน้า + - `update_page_section`: ใช้แก้ไขข้อมูล + - `delete_page_section`: ใช้ลบข้อมูล diff --git a/apps/backend/scripts/migrate-pages.ts b/apps/backend/scripts/migrate-pages.ts index 6f20396..3191315 100644 --- a/apps/backend/scripts/migrate-pages.ts +++ b/apps/backend/scripts/migrate-pages.ts @@ -19,8 +19,10 @@ async function main() { title: 'Born from a passion for stillness', description: 'HomAroma began in 2019 as a one-person studio in Bangkok, crafting small batches of botanical aroma blends for friends and family. What started as a personal journey toward calm became a philosophy — that our environment shapes how we feel, think, and rest.', align: 'center', - bgImage: '', - overlay: true + imageUrl: '/images/hero.png', + overlay: true, + buttonText: 'Discover More', + buttonLink: '/shop' } }, { @@ -39,8 +41,8 @@ async function main() { payload: { tagline: 'Our Mission', title: 'Transforming spaces into sanctuaries of peace', - content: 'We believe that scent is the fastest pathway to emotional transformation. A single breath of the right blend can dissolve anxiety, sharpen focus, or unlock creativity. Our mission is to make that transformation accessible — through products that are as beautiful as they are effective.\n\nEvery HomAroma product is designed with intention: the bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.', - imageSrc: '', + description: 'We believe that scent is the fastest pathway to emotional transformation. A single breath of the right blend can dissolve anxiety, sharpen focus, or unlock creativity. Our mission is to make that transformation accessible — through products that are as beautiful as they are effective.\n\nEvery HomAroma product is designed with intention: the bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.', + imageUrl: '/images/hero.png', imageAlt: 'HomAroma Studio, Bangkok', reverse: false } @@ -62,7 +64,8 @@ async function main() { title: 'Ready to find your scent?', description: 'Let our Scent Guide help you discover the perfect blend for your moment.', buttonText: 'Take the Scent Guide', - buttonLink: '/scent-guide' + buttonLink: '/scent-guide', + imageUrl: '/images/hero.png' } } ] @@ -98,7 +101,7 @@ async function main() { { name: 'Products', icon: '🌿', - items: [ + questions: [ { q: 'What are the ingredients in your aroma products?', a: 'All HomAroma products are crafted from 100% natural botanical extracts, pure essential oils, and pharmaceutical-grade carrier bases. We never use synthetic fragrances, parabens, or harmful chemicals. Each product label lists full ingredient transparency.' }, { q: 'How long does each product last?', a: 'Our Reed Diffusers last 4–8 weeks depending on room size and airflow. Aroma Oils (30ml) last approximately 3–4 months with normal use. Room Sprays (100ml) provide 60–80 uses. Car Diffusers cartridges last up to 45 days.' }, { q: 'Are your products suitable for sensitive skin or allergies?', a: 'We recommend patch testing before topical use. Our Aroma Oils are formulated for diffuser use primarily. If you have known fragrance allergies, consult our scent guide or contact us with your specific concerns — we are happy to help identify suitable options.' }, @@ -108,7 +111,7 @@ async function main() { { name: 'Usage', icon: '💡', - items: [ + questions: [ { q: 'How do I use a Reed Diffuser?', a: 'Remove the stopper, place the reeds into the bottle, and let them absorb the oil for 1 hour before flipping. For optimal fragrance, flip the reeds every 2–3 days. Keep away from direct sunlight and air conditioning vents for longest lasting performance.' }, { q: 'Can I mix different scents?', a: 'Yes! Blending scents is an art form we encourage. A general rule: combine no more than 3 scents at a time, using one dominant (60%), one supporting (30%), and one accent (10%). Our Scent Guide can help you find complementary combinations.' }, { q: 'How long should I run my aroma diffuser?', a: 'For best results and to avoid olfactory fatigue, we recommend 30–60 minute sessions with 30-minute breaks in between. This also extends product life and prevents overwhelming fragrance build-up in small spaces.' }, @@ -117,7 +120,7 @@ async function main() { { name: 'Shipping & Orders', icon: '📦', - items: [ + questions: [ { q: 'How long does shipping take?', a: 'Standard delivery within Bangkok takes 1–2 business days. Provincial orders take 2–4 business days. Express same-day delivery is available in Bangkok for orders placed before 12:00 PM.' }, { q: 'Do you ship internationally?', a: 'Currently we ship within Thailand only. International shipping is planned for late 2025. Sign up for our newsletter to be notified when we expand to your region.' }, { q: 'What is your return policy?', a: 'We accept returns within 14 days of purchase for unopened, undamaged products in original packaging. For defective or damaged products, we offer full replacement at no cost. Contact us at hello@homaroma.shop with your order number.' }, @@ -126,7 +129,7 @@ async function main() { { name: 'Scent Guide', icon: '🧪', - items: [ + questions: [ { q: 'How do I choose the right scent for my space?', a: 'Consider the function of the space first. Bedrooms benefit from calming scents like lavender and chamomile. Living rooms work well with warm, welcoming notes like sandalwood and vanilla. Home offices pair best with focus-enhancing eucalyptus and citrus. Use our interactive Scent Guide for personalized recommendations.' }, { q: 'Can I request custom scent blending?', a: 'Yes! Our bespoke blending service is available for orders of 6 units or more. Contact us at least 10 business days before your desired delivery date. Custom blending fees start at ฿500 per unique formula.' }, ] @@ -141,7 +144,8 @@ async function main() { title: 'Still have questions?', description: 'Our team is here to help — usually responds within 2 hours.', buttonText: 'Contact Us', - buttonLink: '/contact' + buttonLink: '/contact', + imageUrl: '/images/hero.png' } } ] @@ -173,20 +177,10 @@ async function main() { type: 'CONTACT_INFO', order: 2, payload: { - title: 'Reach Us Directly', - items: [ - { icon: '📧', label: 'Email', value: 'hello@homaroma.shop', href: 'mailto:hello@homaroma.shop' }, - { icon: '📱', label: 'LINE Official', value: '@homaroma', href: '#' }, - { icon: '📸', label: 'Instagram', value: '@homaroma', href: '#' }, - { icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' }, - ], - responseTime: { - title: 'Response Time', - email: '~2 hours', - line: '~30 minutes', - instagram: '~4 hours', - hours: 'Mon–Sat, 9:00–18:00 (ICT)' - } + address: 'Bangkok, Thailand', + email: 'hello@homaroma.shop', + line: '@homaroma', + hours: 'Mon–Sat, 9:00–18:00 (ICT)' } }, { diff --git a/apps/backend/src/routes/pages.ts b/apps/backend/src/routes/pages.ts index fac312e..47e0e42 100644 --- a/apps/backend/src/routes/pages.ts +++ b/apps/backend/src/routes/pages.ts @@ -5,7 +5,10 @@ import { RichTextPayloadSchema, ScentNotesBreakdownPayloadSchema, QuoteCalloutPayloadSchema, - ProductCarouselPayloadSchema + ProductCarouselPayloadSchema, + AccordionSectionPayloadSchema, + ContactInfoSectionPayloadSchema, + ContactFormSectionPayloadSchema } from "@homaroma/types"; import { adminOnly } from "../middleware/auth"; @@ -501,6 +504,21 @@ function validateSectionPayload(type: string, payload: any): string | null { if (!res.success) return res.error.errors.map(e => `${e.path.join('.')}: ${e.message}`).join(', '); break; } + case 'ACCORDION': { + const res = AccordionSectionPayloadSchema.safeParse(payload); + if (!res.success) return res.error.errors.map(e => `${e.path.join('.')}: ${e.message}`).join(', '); + break; + } + case 'CONTACT_INFO': { + const res = ContactInfoSectionPayloadSchema.safeParse(payload); + if (!res.success) return res.error.errors.map(e => `${e.path.join('.')}: ${e.message}`).join(', '); + break; + } + case 'CONTACT_FORM': { + const res = ContactFormSectionPayloadSchema.safeParse(payload); + if (!res.success) return res.error.errors.map(e => `${e.path.join('.')}: ${e.message}`).join(', '); + break; + } default: return `Unknown section type: ${type}`; } diff --git a/apps/spa/src/components/DynamicPageRenderer.tsx b/apps/spa/src/components/DynamicPageRenderer.tsx index f7216ad..d462cc0 100644 --- a/apps/spa/src/components/DynamicPageRenderer.tsx +++ b/apps/spa/src/components/DynamicPageRenderer.tsx @@ -12,6 +12,9 @@ import DynamicHeroArticle from './DynamicHeroArticle'; import DynamicScentNotesBreakdown from './DynamicScentNotesBreakdown'; import DynamicQuoteCallout from './DynamicQuoteCallout'; import DynamicProductCarousel from './DynamicProductCarousel'; +import AccordionSection from './sections/AccordionSection'; +import ContactInfoSection from './sections/ContactInfoSection'; +import ContactFormSection from './sections/ContactFormSection'; interface DynamicPageRendererProps { sections: PageSection[]; @@ -63,6 +66,12 @@ export default function DynamicPageRenderer({ return ; case 'PRODUCT_CAROUSEL': return ; + case 'ACCORDION': + return ; + case 'CONTACT_INFO': + return ; + case 'CONTACT_FORM': + return ; default: console.warn(`[DynamicPageRenderer] Unknown block type: ${section.type}`); return null; diff --git a/apps/spa/src/components/sections/AccordionSection.tsx b/apps/spa/src/components/sections/AccordionSection.tsx new file mode 100644 index 0000000..520230c --- /dev/null +++ b/apps/spa/src/components/sections/AccordionSection.tsx @@ -0,0 +1,64 @@ +import React, { useState } from 'react'; +import type { AccordionSectionPayload } from '@homaroma/types'; +import { ChevronDown, ChevronUp } from 'lucide-react'; + +interface AccordionSectionProps { + payload: AccordionSectionPayload; +} + +export default function AccordionSection({ payload }: AccordionSectionProps) { + const [openIndex, setOpenIndex] = useState(null); + + const toggleAccordion = (index: string) => { + setOpenIndex(openIndex === index ? null : index); + }; + + return ( +
+
+ {payload.categories.map((category, catIndex) => ( +
+

+ {category.icon && {category.icon}} + {category.name} +

+
+ {category.questions.map((item, qIndex) => { + const indexKey = `${catIndex}-${qIndex}`; + const isOpen = openIndex === indexKey; + return ( +
+ +
+

+ {item.a} +

+
+
+ ); + })} +
+
+ ))} +
+
+ ); +} diff --git a/apps/spa/src/components/sections/ContactFormSection.tsx b/apps/spa/src/components/sections/ContactFormSection.tsx new file mode 100644 index 0000000..a96eb17 --- /dev/null +++ b/apps/spa/src/components/sections/ContactFormSection.tsx @@ -0,0 +1,130 @@ +import React, { useState } from 'react'; +import type { ContactFormSectionPayload } from '@homaroma/types'; +import { Send } from 'lucide-react'; + +interface ContactFormSectionProps { + payload: ContactFormSectionPayload; +} + +export default function ContactFormSection({ payload }: ContactFormSectionProps) { + const [formData, setFormData] = useState({ + name: '', + email: '', + message: '' + }); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isSuccess, setIsSuccess] = useState(false); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + + // Simulate API call + setTimeout(() => { + setIsSubmitting(false); + setIsSuccess(true); + setFormData({ name: '', email: '', message: '' }); + + // Reset success message after 3 seconds + setTimeout(() => setIsSuccess(false), 3000); + }, 1000); + }; + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ ...prev, [name]: value })); + }; + + return ( +
+
+
+

+ {payload.title || "ติดต่อเรา"} +

+

+ {payload.subtitle || "ส่งข้อความถึงทีมงานของเรา เรายินดีให้บริการและพร้อมตอบทุกข้อสงสัย"} +

+
+ +
+ {isSuccess ? ( +
+
+ +
+

ส่งข้อความสำเร็จ

+

ขอบคุณที่ติดต่อเรา ทีมงานจะรีบตอบกลับโดยเร็วที่สุด

+
+ ) : ( +
+
+
+ + +
+
+ + +
+
+ +
+ +