Rename ssr to website, website to spa, add spa nginx config
This commit is contained in:
Your Name committed
1 parent
fc6bf0218e
commit
8514342c2f
103 files changed
+801
-768
No files matched your search
@@ -0,0 +1,184 @@
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useEffect } from 'react'
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom'
|
||||
import ScrollToTop from './components/ScrollToTop'
|
||||
import { initLiff } from './lib/liff'
|
||||
import HomePage from './pages/HomePage'
|
||||
import ShopPage from './pages/ShopPage'
|
||||
import CategoryPage from './pages/CategoryPage'
|
||||
import ProductDetailPage from './pages/ProductDetailPage'
|
||||
import SearchPage from './pages/SearchPage'
|
||||
import FaqPage from './pages/FaqPage'
|
||||
import ScentGuidePage from './pages/ScentGuidePage'
|
||||
import ArticleReaderPage from './pages/ArticleReaderPage'
|
||||
import ContactPage from './pages/ContactPage'
|
||||
import AboutPage from './pages/AboutPage'
|
||||
import NotFoundPage from './pages/NotFoundPage'
|
||||
import CheckoutPage from './pages/CheckoutPage'
|
||||
import CouponsPage from './pages/CouponsPage'
|
||||
import OrderSuccessPage from './pages/OrderSuccessPage'
|
||||
import TrackOrderPage from './pages/TrackOrderPage'
|
||||
import CartDrawer from './components/CartDrawer'
|
||||
|
||||
function App() {
|
||||
useEffect(() => {
|
||||
const liffId = import.meta.env.VITE_LIFF_ID;
|
||||
if (liffId) {
|
||||
initLiff(liffId);
|
||||
} else {
|
||||
console.warn("VITE_LIFF_ID is not defined in environment variables. LINE Login won't work.");
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<ScrollToTop />
|
||||
<CartDrawer />
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/shop" element={<ShopPage />} />
|
||||
<Route path="/category/:id" element={<CategoryPage />} />
|
||||
<Route path="/products/:id" element={<ProductDetailPage />} />
|
||||
<Route path="/coupons" element={<CouponsPage />} />
|
||||
<Route path="/checkout" element={<CheckoutPage />} />
|
||||
<Route path="/order/:id" element={<OrderSuccessPage />} />
|
||||
<Route path="/track" element={<TrackOrderPage />} />
|
||||
<Route path="/search" element={<SearchPage />} />
|
||||
<Route path="/faq" element={<FaqPage />} />
|
||||
<Route path="/scent-guide" element={<ScentGuidePage />} />
|
||||
<Route path="/article/:slug" element={<ArticleReaderPage />} />
|
||||
<Route path="/contact" element={<ContactPage />} />
|
||||
<Route path="/about" element={<AboutPage />} />
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="usLine truncated
|
||||
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,214 @@
|
||||
import React from 'react'
|
||||
import { X, ShoppingBag, Plus, Minus, Trash2, Tag, ArrowRight } from 'lucide-react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useCartStore } from '../store/cartStore'
|
||||
import { formatPrice } from '@homaroma/types'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { API_BASE } from '../types'
|
||||
|
||||
export default function CartDrawer() {
|
||||
const { t } = useTranslation()
|
||||
const { isCartOpen, toggleCart, items, updateQuantity, removeFromCart, getCartTotal } = useCartStore()
|
||||
|
||||
if (!isCartOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] flex justify-end">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-night-950/80 backdrop-blur-sm animate-fade-in"
|
||||
onClick={() => toggleCart(false)}
|
||||
/>
|
||||
|
||||
{/* Drawer */}
|
||||
<div className="relative w-full max-w-md h-full bg-night-900 shadow-2xl flex flex-col border-l border-white/10 animate-slide-left">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-white/10 flex items-center justify-between bg-night-950/50">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
<ShoppingBag className="w-5 h-5 text-cyan-glow" />
|
||||
{t('cart.title')}
|
||||
<span className="text-sm font-normal text-slate-400 bg-white/5 px-2 py-0.5 rounded-full ml-2">
|
||||
{t('cart.items', { count: items.length })}
|
||||
</span>
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => toggleCart(false)}
|
||||
className="p-2 hover:bg-white/5 rounded-full transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5 text-slate-400 hover:text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Cart Items */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-4">
|
||||
{items.length === 0 ? (
|
||||
<div className="h-full flex flex-col items-center justify-center text-slate-500 space-y-4">
|
||||
<ShoppingBag className="w-16 h-16 opacity-20" />
|
||||
<p>{t('cart.empty')}</p>
|
||||
<button
|
||||
onClick={() => toggleCart(false)}
|
||||
className="text-cyan-glow hover:underline tracking-widest uppercase text-xs font-bold"
|
||||
>
|
||||
{t('cart.continueShopping')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
items.map((item) => (
|
||||
<div key={item.cartItemId} className="flex gap-4 p-4 rounded-2xl bg-white/5 border border-white/5 group relative">
|
||||
<div className="w-18 h-22 rounded-lg bg-night-950 overflow-hidden flex-shrink-0" style={{ width: '72px', height: '88px' }}>
|
||||
<img
|
||||
src={item.productImage || '/images/oil_ozone.png'}
|
||||
alt={item.productName}
|
||||
className="w-full h-full object-cover opacity-80"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col pt-1 space-y-1 relative min-w-0">
|
||||
<h3 className="font-bold text-sm leading-tight pr-6 truncate">{item.productName}</h3>
|
||||
{item.variantSize && (
|
||||
<p className="text-xs text-slate-500">{item.variantSize}</p>
|
||||
)}
|
||||
|
||||
{/* Price row */}
|
||||
<div className="flex items-baseline gap-1.5 mt-0.5">
|
||||
<span className="text-xs text-slate-500">{formatPrice(item.price)}</span>
|
||||
<span className="text-xs text-slate-600">×</span>
|
||||
<span className="text-xs text-slate-500">{item.quantity}</span>
|
||||
<span className="text-xs text-slate-600">=</span>
|
||||
<span className="text-sm font-bold text-cyan-glow">{formatPrice(item.price * item.quantity)}</span>
|
||||
</div>
|
||||
|
||||
{/* Quantity controls */}
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<div className="flex items-center gap-2 bg-night-950/70 rounded-lg border border-white/5">
|
||||
<button
|
||||
onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)}
|
||||
className="p-1.5 hover:text-cyan-glow transition-colors"
|
||||
>
|
||||
<Minus className="w-3 h-3" />
|
||||
</button>
|
||||
<span className="w-5 text-center text-xs font-bold">{item.quantity}</span>
|
||||
<button
|
||||
onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)}
|
||||
className="p-1.5 hover:text-cyan-glow transition-colors"
|
||||
>
|
||||
<Plus className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => removeFromCart(item.cartItemId)}
|
||||
className="absolute top-0 right-0 p-1.5 text-slate-600 hover:text-rose-500 transition-colors"
|
||||
title="Remove item"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{items.length > 0 && (
|
||||
<CartDrawerFooter subtotal={getCartTotal()} onClose={() => toggleCart(false)} t={t} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CartDrawerFooter({ subtotal, onClose }: { subtotal: number; onClose: () => void; t?: any }) {
|
||||
const [savedCoupon, setSavedCoupon] = React.useState<string | null>(null)
|
||||
const [discountAmount, setDiscountAmount] = React.useState<number>(0)
|
||||
const [isFreeShipping, setIsFreeShipping] = React.useState<boolean>(false)
|
||||
const [couponValid, setCouponValid] = React.useState<boolean>(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
const code = localStorage.getItem('irelax_active_coupon')
|
||||
setSavedCoupon(code)
|
||||
if (code && subtotal > 0) {
|
||||
fetch(`${API_BASE}/coupons/validate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code, cartTotal: subtotal })
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.valid) {
|
||||
setCouponValid(true)
|
||||
setDiscountAmount(data.discountAmount || 0)
|
||||
setIsFreeShipping(data.isFreeShipping || false)
|
||||
} else {
|
||||
setCouponValid(false)
|
||||
}
|
||||
})
|
||||
.catch(() => setCouponValid(false))
|
||||
}
|
||||
}, [subtotal])
|
||||
|
||||
const removeCoupon = () => {
|
||||
localStorage.removeItem('irelax_active_coupon')
|
||||
setSavedCoupon(null)
|
||||
setDiscountAmount(0)
|
||||
setIsFreeShipping(false)
|
||||
setCouponValid(false)
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="p-5 border-t border-white/10 bg-night-950/60 space-y-4">
|
||||
|
||||
{/* Totals */}
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between text-slate-400">
|
||||
<span>ราคาสินค้า</span>
|
||||
<span>{formatPrice(subtotal)}</span>
|
||||
</div>
|
||||
{(discountAmount > 0 || isFreeShipping) && savedCoupon && (
|
||||
<div className="flex justify-between text-cyan-glow">
|
||||
<span className="flex items-center gap-1.5">
|
||||
ส่วนลดคูปอง
|
||||
<span className="text-[10px] font-bold bg-cyan-glow/15 px-1.5 py-0.5 rounded tracking-widest">
|
||||
{savedCoupon}
|
||||
</span>
|
||||
<button onClick={removeCoupon} className="text-slate-500 hover:text-rose-400 transition-colors" title="ยกเลิก">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
<span>{isFreeShipping ? 'ส่งฟรี' : `- ${formatPrice(discountAmount)}`}</span>
|
||||
</div>
|
||||
)}
|
||||
{savedCoupon && !couponValid && (
|
||||
<div className="flex justify-between text-amber-400 text-xs">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Tag className="w-3 h-3" />
|
||||
คูปอง <span className="font-bold tracking-widest">{savedCoupon}</span> (ยังไม่ถึงยอดขั้นต่ำ)
|
||||
<button onClick={removeCoupon} className="text-slate-500 hover:text-rose-400 transition-colors">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between font-bold text-base pt-2 border-t border-white/10">
|
||||
<span>รวมสุทธิ</span>
|
||||
<span className="text-cyan-glow">{formatPrice(Math.max(0, subtotal - discountAmount))}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Checkout button */}
|
||||
<Link
|
||||
to="/checkout"
|
||||
onClick={onClose}
|
||||
className="flex items-center justify-center gap-2 w-full py-4 bg-white text-night-900 font-bold rounded-xl uppercase tracking-widest text-sm hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 group"
|
||||
>
|
||||
<ShoppingBag className="w-4 h-4" />
|
||||
ดำเนินการชำระเงิน
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import type { Category } from '../types'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
interface FooterProps {
|
||||
categories?: Category[]
|
||||
}
|
||||
|
||||
export default function Footer({ categories = [] }: FooterProps) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<footer className="bg-black py-20 px-6 border-t border-white/5">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
|
||||
<div className="space-y-6">
|
||||
<div className="text-2xl font-bold tracking-widest">
|
||||
iRelax <span className="text-cyan-glow text-sm font-light italic">Essential</span>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm leading-relaxed">
|
||||
{t('footer.catchphrase')}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
{['IG', 'FB', 'TW', 'YT'].map((s) => (
|
||||
<a key={s} href="#" className="glass w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold hover:bg-cyan-glow hover:text-night-900 transition-all duration-300">
|
||||
{s}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('footer.explore')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-slate-400">
|
||||
<Link to="/" className="hover:text-white transition-colors">{t('nav.home')}</Link>
|
||||
<Link to="/shop" className="hover:text-white transition-colors">{t('nav.shop')}</Link>
|
||||
<Link to="/scent-guide" className="hover:text-white transition-colors">{t('nav.scentGuide')}</Link>
|
||||
<Link to="/about" className="hover:text-white transition-colors">{t('nav.about')}</Link>
|
||||
<Link to="/contact" className="hover:text-white transition-colors">{t('nav.contact')}</Link>
|
||||
<Link to="/faq" className="hover:text-white transition-colors">{t('nav.faq')}</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('nav.collections')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-slate-400">
|
||||
{categories.map((c) => (
|
||||
<Link key={c.id} to={`/category/${c.id}`} className="hover:text-white transition-colors">
|
||||
{c.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-white">Newsletter</h4>
|
||||
<p className="text-xs text-slate-500">Subscribe for exclusive releases and sensory wisdom.</p>
|
||||
<div className="flex bg-white/5 border border-white/10 p-1 rounded-sm">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email"
|
||||
className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-600"
|
||||
/>
|
||||
<button className="bg-white text-black px-4 py-2 font-bold text-xs uppercase hover:bg-cyan-glow transition-colors shrink-0">
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-600 uppercase tracking-widest">
|
||||
© {new Date().getFullYear()} iRelax Essential. {t('footer.rights')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
import { Link, NavLink, useNavigate } from 'react-router-dom'
|
||||
import { useState, useEffect } from 'react'
|
||||
import type { Category } from '../types'
|
||||
import { ShoppingBag, MapPin } from 'lucide-react'
|
||||
import { useCartStore } from '../store/cartStore'
|
||||
import { useAuthStore } from '../store/authStore'
|
||||
import { logoutLiff, loginLiff } from '../lib/liff'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
interface NavbarProps {
|
||||
categories?: Category[]
|
||||
}
|
||||
|
||||
export default function Navbar({ categories = [] }: NavbarProps) {
|
||||
const [searchOpen, setSearchOpen] = useState(false)
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [scrolled, setScrolled] = useState(false)
|
||||
const [localOrdersCount, setLocalOrdersCount] = useState(0)
|
||||
const navigate = useNavigate()
|
||||
|
||||
const { toggleCart, getCartCount } = useCartStore()
|
||||
const cartCount = getCartCount()
|
||||
const { customer } = useAuthStore()
|
||||
const { t, i18n } = useTranslation()
|
||||
|
||||
const toggleLanguage = () => {
|
||||
const newLang = i18n.language.startsWith('en') ? 'th' : 'en'
|
||||
i18n.changeLanguage(newLang)
|
||||
localStorage.setItem('irelax_lang', newLang)
|
||||
}
|
||||
|
||||
// Detect scroll for navbar bg change
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 20)
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
|
||||
// Check local orders periodically (or just on mount)
|
||||
const stored = localStorage.getItem('irelax_local_orders')
|
||||
if (stored) {
|
||||
try { setLocalOrdersCount(JSON.parse(stored).length) } catch (e) {}
|
||||
}
|
||||
|
||||
return () => window.removeEventListener('scroll', onScroll)
|
||||
}, [])
|
||||
|
||||
// Close mobile menu on route change
|
||||
useEffect(() => { setMobileOpen(false) }, [navigate])
|
||||
// Prevent body scroll when overlays open
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = (searchOpen || mobileOpen) ? 'hidden' : ''
|
||||
return () => { document.body.style.overflow = '' }
|
||||
}, [searchOpen, mobileOpen])
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (searchQuery.trim()) {
|
||||
navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
|
||||
setSearchOpen(false)
|
||||
setMobileOpen(false)
|
||||
setSearchQuery('')
|
||||
}
|
||||
}
|
||||
|
||||
const navLinkClass = ({ isActive }: { isActive: boolean }) =>
|
||||
isActive ? 'text-cyan-glow' : 'text-slate-300 hover:text-white transition-colors'
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── NAVBAR BAR ── */}
|
||||
<nav
|
||||
className={`fixed top-0 w-full z-50 transition-all duration-300 px-4 md:px-6 py-3.5 md:py-4 flex justify-between items-center ${
|
||||
scrolled ? 'bg-night-900/95 backdrop-blur-xl border-b border-white/10 shadow-xl' : 'glass backdrop-blur-xl border-b border-white/5'
|
||||
}`}
|
||||
>
|
||||
{/* Logo */}
|
||||
<Link to="/" onClick={() => setMobileOpen(false)} className="text-xl md:text-2xl font-bold tracking-widest text-white uppercase italic shrink-0">
|
||||
iRelax <span className="hidden md:inline text-cyan-glow text-xs md:text-sm not-italic font-light opacity-60 ml-1">Essential</span>
|
||||
</Link>
|
||||
|
||||
{/* ── DESKTOP NAV ── */}
|
||||
<div className="hidden md:flex space-x-7 text-sm font-medium tracking-wide uppercase">
|
||||
<NavLink to="/" end className={navLinkClass}>{t('nav.home')}</NavLink>
|
||||
<NavLink to="/shop" className={navLinkClass}>{t('nav.shop')}</NavLink>
|
||||
<NavLink to="/coupons" className={navLinkClass}>🔥 {t('nav.promotions') || 'Promotions'}</NavLink>
|
||||
|
||||
{/* Collections dropdown */}
|
||||
{categories.length > 0 && (
|
||||
<div className="relative group">
|
||||
<button className="text-slate-300 hover:text-white transition-colors flex items-center gap-1 uppercase text-sm font-medium tracking-wide">
|
||||
{t('nav.collections')}
|
||||
<svg className="w-3 h-3 opacity-50 transition-transform duration-300 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-4 w-52 bg-night-900/95 backdrop-blur-xl border border-white/10 rounded-xl overflow-hidden opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300 shadow-2xl">
|
||||
<div className="p-2 space-y-0.5">
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
to={`/category/${cat.id}`}
|
||||
className="flex items-center justify-between px-4 py-2.5 text-xs uppercase tracking-widest rounded-lg hover:bg-white/10 hover:text-cyan-glow transition-colors"
|
||||
>
|
||||
{cat.name}
|
||||
<svg className="w-3 h-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<NavLink to="/scent-guide" className={navLinkClass}>{t('nav.scentGuide')}</NavLink>
|
||||
<NavLink to="/about" className={navLinkClass}>{t('nav.about')}</NavLink>
|
||||
</div>
|
||||
|
||||
{/* ── DESKTOP RIGHT ACTIONS ── */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<Link
|
||||
to="/track"
|
||||
className="relative glass p-2.5 rounded-full hover:bg-white/10 transition-all group"
|
||||
aria-label="Track Orders"
|
||||
title="Track Orders"
|
||||
>
|
||||
<MapPin className="w-4 h-4 group-hover:text-cyan-glow transition-colors" />
|
||||
{localOrdersCount > 0 && (
|
||||
<span className="absolute top-0 right-0 w-2 h-2 bg-rose-500 rounded-full animate-pulse" />
|
||||
)}
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="glass p-2.5 rounded-full hover:bg-white/10 transition-all group"
|
||||
aria-label="Search"
|
||||
>
|
||||
<svg className="w-4 h-4 group-hover:text-cyan-glow transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => toggleCart(true)}
|
||||
className="relative glass p-2.5 rounded-full hover:bg-white/10 transition-all group"
|
||||
aria-label="Cart"
|
||||
>
|
||||
<ShoppingBag className="w-4 h-4 group-hover:text-cyan-glow transition-colors" />
|
||||
{cartCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 bg-cyan-glow text-night-900 text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
|
||||
{cartCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<Link
|
||||
to="/shop"
|
||||
className="glass px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-cyan-glow hover:text-night-900 transition-all duration-300"
|
||||
>
|
||||
{t('nav.shopNow')}
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="glass px-3 py-2 rounded-full text-xs font-bold hover:bg-white/10 transition-all text-cyan-glow border border-cyan-glow/20"
|
||||
>
|
||||
{i18n.language.startsWith('en') ? 'EN' : 'TH'}
|
||||
</button>
|
||||
|
||||
{customer ? (
|
||||
<div className="relative group flex items-center">
|
||||
<img
|
||||
src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`}
|
||||
alt="Profile"
|
||||
className="w-9 h-9 rounded-full border-2 border-cyan-glow/50 cursor-pointer object-cover"
|
||||
/>
|
||||
<div className="absolute top-full right-0 mt-4 w-32 bg-night-900/95 backdrop-blur-xl border border-white/10 rounded-xl overflow-hidden opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300 shadow-2xl">
|
||||
<div className="p-1">
|
||||
<div className="px-3 py-2 border-b border-white/10 mb-1">
|
||||
<p className="text-[10px] text-slate-400 uppercase tracking-widest leading-tight truncate">Signed in as</p>
|
||||
<p className="text-xs text-white font-bold truncate">{customer.displayName}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={logoutLiff}
|
||||
className="w-full text-left px-3 py-2 text-xs uppercase tracking-widest text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 rounded-lg transition-colors"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={loginLiff}
|
||||
className="glass px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-[#00B900] hover:text-white transition-all duration-300 border border-[#00B900]/50 text-[#00B900]"
|
||||
>
|
||||
LINE Login
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── MOBILE RIGHT ACTIONS ── */}
|
||||
<div className="flex md:hidden items-center gap-1.5">
|
||||
{customer ? (
|
||||
<div className="relative">
|
||||
<img
|
||||
src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`}
|
||||
alt="Profile"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
className="w-7 h-7 rounded-full border-2 border-cyan-glow/50 object-cover cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={loginLiff}
|
||||
className="p-1.5 rounded-full glass hover:bg-[#00B900]/20 transition-all border border-[#00B900]/50 text-[#00B900]"
|
||||
aria-label="LINE Login"
|
||||
>
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M24 10.304c0-5.369-5.383-9.738-12-9.738-6.616 0-12 4.369-12 9.738 0 4.814 3.932 8.946 9.539 9.615.375.056 1.155.176 1.321.603.149.387.049.991.023 1.258-.035.342-.165 1.011 1.05 1.503 1.216.492 4.417-2.602 6.012-4.423C21.841 16.208 24 13.524 24 10.304z"/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<Link
|
||||
to="/track"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="relative p-1.5 rounded-full glass hover:bg-white/10 transition-all"
|
||||
aria-label="Track Orders"
|
||||
>
|
||||
<MapPin className="w-4 h-4" />
|
||||
{localOrdersCount > 0 && (
|
||||
<span className="absolute top-0 right-0 w-2 h-2 bg-rose-500 rounded-full" />
|
||||
)}
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => { setSearchOpen(true); setMobileOpen(false) }}
|
||||
className="p-1.5 rounded-full glass hover:bg-white/10 transition-all"
|
||||
aria-label="Search"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => { toggleCart(true); setMobileOpen(false) }}
|
||||
className="relative p-1.5 rounded-full glass hover:bg-white/10 transition-all"
|
||||
aria-label="Cart"
|
||||
>
|
||||
<ShoppingBag className="w-4 h-4" />
|
||||
{cartCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 bg-cyan-glow text-night-900 text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
|
||||
{cartCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{/* Hamburger */}
|
||||
<button
|
||||
onClick={() => setMobileOpen(prev => !prev)}
|
||||
className="p-1.5 rounded-full glass hover:bg-white/10 transition-all"
|
||||
aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
|
||||
>
|
||||
<div className="w-4 h-4 flex flex-col justify-center gap-[4px] relative">
|
||||
<span className={`block w-4 h-0.5 bg-white rounded-full transition-all duration-300 ${mobileOpen ? 'absolute rotate-45' : ''}`} />
|
||||
<span className={`block h-0.5 bg-white rounded-full transition-all duration-300 ${mobileOpen ? 'opacity-0 w-0' : 'w-3'}`} />
|
||||
<span className={`block h-0.5 bg-white rounded-full transition-all duration-300 ${mobileOpen ? 'absolute -rotate-45 w-4' : 'w-4'}`} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* ── MOBILE DRAWER ── */}
|
||||
<div
|
||||
className={`fixed inset-0 z-40 md:hidden transition-all duration-300 ${mobileOpen ? 'visible' : 'invisible'}`}
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-night-900/80 backdrop-blur-sm transition-opacity duration-300 ${mobileOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
/>
|
||||
{/* Drawer */}
|
||||
<div
|
||||
className={`absolute top-0 right-0 h-full w-72 bg-night-900/98 backdrop-blur-2xl border-l border-white/10 flex flex-col transition-transform duration-300 ${mobileOpen ? 'translate-x-0' : 'translate-x-full'}`}
|
||||
>
|
||||
{/* Drawer Header */}
|
||||
<div className="flex items-center justify-between px-6 py-5 border-b border-white/5">
|
||||
<span className="text-sm font-bold uppercase tracking-widest text-slate-300">{t('nav.menu')}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
{customer && (
|
||||
<img src={customer.pictureUrl || ''} className="w-6 h-6 rounded-full border border-cyan-glow/50" />
|
||||
)}
|
||||
<button onClick={toggleLanguage} className="glass px-2.5 py-1 rounded-md text-[10px] font-bold text-cyan-glow border border-cyan-glow/20 uppercase">
|
||||
{i18n.language.startsWith('en') ? 'EN' : 'TH'}
|
||||
</button>
|
||||
<button onClick={() => setMobileOpen(false)} className="p-1.5 rounded-full glass hover:bg-white/10 transition-all">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drawer Nav Links */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-6 space-y-1">
|
||||
{[
|
||||
{ to: '/', label: t('nav.home'), end: true },
|
||||
{ to: '/shop', label: t('nav.shop') },
|
||||
{ to: '/coupons', label: `🔥 ${t('nav.promotions') || 'Promotions'}` },
|
||||
{ to: '/scent-guide', label: `✨ ${t('nav.scentGuide')}` },
|
||||
{ to: '/about', label: t('nav.about') },
|
||||
{ to: '/faq', label: t('nav.faq') },
|
||||
{ to: '/contact', label: t('nav.contact') },
|
||||
].map(item => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.end}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={({ isActive }) =>
|
||||
`block px-4 py-3 rounded-xl text-sm font-medium tracking-wide transition-all duration-200 ${
|
||||
isActive ? 'bg-cyan-glow/10 text-cyan-glow border border-cyan-glow/20' : 'hover:bg-white/5 text-slate-300 hover:text-white'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{item.label}
|
||||
</NavLink>
|
||||
))}
|
||||
|
||||
{/* Collections sub-section */}
|
||||
{categories.length > 0 && (
|
||||
<div className="pt-4">
|
||||
<p className="text-[10px] uppercase tracking-widest text-slate-600 px-4 pb-2">{t('nav.collections')}</p>
|
||||
{categories.map(cat => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
to={`/category/${cat.id}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center justify-between px-4 py-2.5 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
|
||||
>
|
||||
{cat.name}
|
||||
<svg className="w-3 h-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Drawer Footer CTA */}
|
||||
<div className="px-4 pb-8 pt-4 border-t border-white/5 space-y-3">
|
||||
<Link
|
||||
to="/shop"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block w-full py-3 bg-white text-night-900 font-bold text-center rounded-xl text-xs uppercase tracking-widest hover:bg-cyan-glow transition-colors duration-300"
|
||||
>
|
||||
{t('nav.shopNow')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/scent-guide"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block w-full py-3 glass text-center rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-white/10 transition-colors border border-white/10"
|
||||
>
|
||||
{t('nav.findMyScent')}
|
||||
</Link>
|
||||
|
||||
{customer ? (
|
||||
<button
|
||||
onClick={() => { logoutLiff(); setMobileOpen(false); }}
|
||||
className="block w-full py-3 glass text-center rounded-xl text-xs font-bold uppercase tracking-widest text-rose-400 hover:bg-rose-500/10 transition-colors border border-rose-500/20 mt-2"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => { loginLiff(); setMobileOpen(false); }}
|
||||
className="block w-full py-3 glass text-center rounded-xl text-xs font-bold uppercase tracking-widest text-[#00B900] hover:bg-[#00B900]/10 transition-colors border border-[#00B900]/50 mt-2"
|
||||
>
|
||||
Login with LINE
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── SEARCH OVERLAY ── */}
|
||||
{searchOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] bg-night-900/95 backdrop-blur-xl flex flex-col items-center pt-24 md:pt-32 px-4 md:px-6"
|
||||
onClick={(e) => { if (e.target === e.currentTarget) setSearchOpen(false) }}
|
||||
>
|
||||
<div className="w-full max-w-2xl space-y-6 animate-fade-in">
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="text-slate-400 text-xs uppercase tracking-widest">{t('nav.search.title')}</p>
|
||||
<button onClick={() => setSearchOpen(false)} className="glass p-2 rounded-full hover:bg-white/10 transition-all">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSearch}>
|
||||
<div className="flex glass border border-white/20 focus-within:border-cyan-glow/50 rounded-2xl overflow-hidden transition-colors">
|
||||
<svg className="w-5 h-5 text-slate-400 m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search scents, categories..."
|
||||
className="bg-transparent border-none outline-none text-lg md:text-xl p-4 pl-0 w-full text-white placeholder-slate-600"
|
||||
autoFocus
|
||||
/>
|
||||
<button type="submit" className="bg-cyan-glow text-night-900 px-4 md:px-6 font-bold text-xs uppercase tracking-widest shrink-0 hover:bg-white transition-colors">
|
||||
Go
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-widest mb-3">Quick Links</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
...categories.map(c => ({ label: c.name, to: `/category/${c.id}` })),
|
||||
{ label: '✨ Scent Guide', to: '/scent-guide' },
|
||||
{ label: 'All Products', to: '/shop' },
|
||||
].map(item => (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
onClick={() => setSearchOpen(false)}
|
||||
className="glass px-4 py-1.5 rounded-full text-xs font-medium hover:bg-white/10 hover:text-cyan-glow transition-all border border-white/5"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import type { Product } from '../types'
|
||||
import { getCategoryImage, formatPrice } from '../types'
|
||||
|
||||
interface ProductCardProps {
|
||||
product: Product
|
||||
}
|
||||
|
||||
export default function ProductCard({ product }: ProductCardProps) {
|
||||
return (
|
||||
<div className="glass glass-hover rounded-2xl overflow-hidden flex flex-col group p-1.5 md:p-2">
|
||||
<div className="h-40 md:h-64 overflow-hidden rounded-xl relative">
|
||||
<img
|
||||
src={product.images?.[0]?.url || getCategoryImage(product.category.name)}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
alt={product.scent.name}
|
||||
/>
|
||||
{/* Category badge */}
|
||||
<div className="absolute top-4 left-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest text-cyan-glow">
|
||||
{product.category.name}
|
||||
</div>
|
||||
{/* Available badge */}
|
||||
<div className="hidden md:block absolute top-4 right-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">
|
||||
Available
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 md:p-6 space-y-2 md:space-y-4 flex flex-col flex-1">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-start gap-1">
|
||||
<div>
|
||||
<h3 className="text-sm md:text-xl font-bold leading-tight line-clamp-1">
|
||||
{product.scent.name}
|
||||
</h3>
|
||||
<p className="text-[10px] md:text-xs text-slate-400 mt-0.5 md:mt-1 uppercase tracking-widest line-clamp-1">
|
||||
{product.category.name}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-cyan-glow font-bold text-xs md:text-lg">
|
||||
{formatPrice(product.variants[0]?.price)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Variants (sizes) */}
|
||||
<div className="hidden md:flex flex-wrap gap-1.5 md:gap-2">
|
||||
{product.variants.map((v) => (
|
||||
<div key={v.id} className="glass px-1.5 py-0.5 md:px-2.5 md:py-1 rounded-lg text-[8px] md:text-[10px] uppercase tracking-wider">
|
||||
{v.size}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<Link
|
||||
to={`/products/${product.id}`}
|
||||
className="block w-full py-2 md:py-3 text-center bg-white/10 hover:bg-white text-white hover:text-night-900 rounded-lg font-bold uppercase tracking-widest text-[10px] md:text-xs transition-all duration-300"
|
||||
>
|
||||
Discover
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useEffect } from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
|
||||
/**
|
||||
* Scrolls window to top on every route change.
|
||||
* Place this inside <BrowserRouter> so it has access to location context.
|
||||
*/
|
||||
export default function ScrollToTop() {
|
||||
const { pathname } = useLocation()
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: 'instant' })
|
||||
}, [pathname])
|
||||
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import i18n from 'i18next'
|
||||
import { initReactI18next } from 'react-i18next'
|
||||
|
||||
import enTranslation from './locales/en/translation.json'
|
||||
import thTranslation from './locales/th/translation.json'
|
||||
|
||||
// Retrieve default lang from localStorage if set
|
||||
const savedLang = localStorage.getItem('irelax_lang') || 'th'
|
||||
|
||||
i18n
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources: {
|
||||
en: { translation: enTranslation },
|
||||
th: { translation: thTranslation },
|
||||
},
|
||||
lng: savedLang, // default language (Thai)
|
||||
fallbackLng: 'en',
|
||||
interpolation: {
|
||||
escapeValue: false, // react already safes from xss
|
||||
},
|
||||
})
|
||||
|
||||
export default i18n
|
||||
@@ -0,0 +1,84 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* Night Luxury color palette */
|
||||
--color-night-900: #0B0C10;
|
||||
--color-night-800: #1F2833;
|
||||
--color-night-700: #45A29E;
|
||||
--color-cyan-glow: #66FCF1;
|
||||
--color-silver-metallic: #C5C6C7;
|
||||
|
||||
/* Custom animations */
|
||||
--animate-fade-in: fade-in 1.2s ease-out forwards;
|
||||
--animate-float: float 3s ease-in-out infinite;
|
||||
|
||||
@keyframes fade-in {
|
||||
0% { opacity: 0; transform: translateY(10px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-night-900 text-silver-metallic font-sans antialiased;
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, rgba(31, 40, 51, 0.5) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(11, 12, 16, 1) 0px, transparent 50%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
@apply text-white tracking-tight leading-none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.glass {
|
||||
@apply bg-white/5 backdrop-blur-lg border border-white/10;
|
||||
}
|
||||
|
||||
.glass-hover {
|
||||
@apply transition-all duration-300 hover:bg-white/10 hover:border-white/20;
|
||||
}
|
||||
|
||||
.text-glow {
|
||||
text-shadow: 0 0 15px rgba(102, 252, 241, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-night-900;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-night-800 rounded-full border-2 border-night-900;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-night-700;
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Product Editorial Image Overrides (for ReactQuill Content) */
|
||||
.product-editorial img {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 2rem auto;
|
||||
display: block;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import liff from "@line/liff";
|
||||
import { useAuthStore } from "../store/authStore";
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000/api";
|
||||
|
||||
export const initLiff = async (liffId: string) => {
|
||||
try {
|
||||
await liff.init({ liffId });
|
||||
useAuthStore.getState().setLiffInitialized(true);
|
||||
|
||||
if (liff.isLoggedIn()) {
|
||||
const profile = await liff.getProfile();
|
||||
await authenticateWithBackend(profile);
|
||||
} else if (liff.isInClient()) {
|
||||
// เปิดเว็บผ่านเบราว์เซอร์ของ LINE (In-App Browser) แต่ยังไม่ได้ล็อกอิน
|
||||
// ส่ง redirectUri: window.location.href เพื่อให้หลัง login แล้วกลับมาที่หน้าเดิม
|
||||
liff.login({ redirectUri: window.location.href });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("LIFF Initialization failed", error);
|
||||
}
|
||||
};
|
||||
|
||||
const authenticateWithBackend = async (profile: any) => {
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/auth/line`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
lineUserId: profile.userId,
|
||||
displayName: profile.displayName,
|
||||
pictureUrl: profile.pictureUrl,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.success && data.token) {
|
||||
useAuthStore.getState().setAuth(data.token, data.customer);
|
||||
}
|
||||
} else {
|
||||
console.error("Backend authentication failed");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error authenticating with backend", error);
|
||||
}
|
||||
};
|
||||
|
||||
export const loginLiff = () => {
|
||||
if (!liff.isLoggedIn()) {
|
||||
// ส่ง redirectUri เพื่อกลับมาที่หน้าเดิมหลัง login
|
||||
liff.login({ redirectUri: window.location.href });
|
||||
}
|
||||
};
|
||||
|
||||
export const logoutLiff = () => {
|
||||
if (liff.isLoggedIn()) {
|
||||
liff.logout();
|
||||
useAuthStore.getState().logout();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Home",
|
||||
"shop": "Shop",
|
||||
"collections": "Collections",
|
||||
"scentGuide": "Scent Guide",
|
||||
"about": "About",
|
||||
"menu": "Menu",
|
||||
"faq": "FAQ",
|
||||
"contact": "Contact",
|
||||
"shopNow": "Shop Now",
|
||||
"findMyScent": "Find My Scent ✨",
|
||||
"search": {
|
||||
"title": "Search Collection",
|
||||
"placeholder": "Search scents, categories...",
|
||||
"quickLinks": "Quick Links",
|
||||
"allProducts": "All Products"
|
||||
}
|
||||
},
|
||||
"cart": {
|
||||
"title": "Your Sanctuary",
|
||||
"items": "{{count}} items",
|
||||
"empty": "Your cart is empty.",
|
||||
"continueShopping": "Continue Shopping",
|
||||
"subtotal": "Subtotal",
|
||||
"shippingNote": "Shipping and taxes calculated at checkout.",
|
||||
"proceed": "Proceed to Checkout"
|
||||
},
|
||||
"footer": {
|
||||
"catchphrase": "Elevate your space with premium fragrances.",
|
||||
"explore": "Explore",
|
||||
"support": "Support",
|
||||
"followUs": "Follow Us",
|
||||
"contactUs": "Contact Us",
|
||||
"rights": "All rights reserved."
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "หน้าหลัก",
|
||||
"shop": "ร้านค้า",
|
||||
"collections": "คอลเลกชัน",
|
||||
"scentGuide": "คลาสแนะนำกลิ่น",
|
||||
"about": "เกี่ยวกับเรา",
|
||||
"menu": "เมนู",
|
||||
"faq": "คำถามที่พบบ่อย",
|
||||
"contact": "ติดต่อเรา",
|
||||
"shopNow": "ช้อปเลย",
|
||||
"findMyScent": "ค้นหากลิ่นของคุณ ✨",
|
||||
"search": {
|
||||
"title": "ค้นหาสินค้า",
|
||||
"placeholder": "ค้นหากลิ่น, คอลเลกชัน...",
|
||||
"quickLinks": "ลิงก์ด่วน",
|
||||
"allProducts": "สินค้าทั้งหมด"
|
||||
}
|
||||
},
|
||||
"cart": {
|
||||
"title": "ตะกร้าสินค้า",
|
||||
"items": "{{count}} รายการ",
|
||||
"empty": "ตะกร้าสินค้าของคุณว่างเปล่า",
|
||||
"continueShopping": "เลือกซื้อสินค้าต่อ",
|
||||
"subtotal": "ยอดรวมยอด",
|
||||
"shippingNote": "ค่าจัดส่งและภาษีจะถูกคำนวณท้ายสุด",
|
||||
"proceed": "ดำเนินการชำระเงิน"
|
||||
},
|
||||
"footer": {
|
||||
"catchphrase": "ยกระดับพื้นที่ของคุณด้วยน้ำหอมระดับพรีเมียม",
|
||||
"explore": "สำรวจ",
|
||||
"support": "ช่วยเหลือ",
|
||||
"followUs": "ติดตามเรา",
|
||||
"contactUs": "ติดต่อสอบถาม",
|
||||
"rights": "สงวนลิขสิทธิ์."
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import './i18n'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,144 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { API_BASE, type Category } from '../types'
|
||||
|
||||
const PILLARS = [
|
||||
{
|
||||
icon: '🌱',
|
||||
title: 'Pure Origins',
|
||||
desc: 'Every extract is sourced directly from certified organic farms in Northern Thailand, Vietnam, and Southern France. We work exclusively with small-batch artisan growers.',
|
||||
},
|
||||
{
|
||||
icon: '⚗️',
|
||||
title: 'Artisan Craft',
|
||||
desc: 'Each formula is cold-extracted and hand-blended in our Bangkok studio. No heat processing means every aromatic molecule remains intact and therapeutically potent.',
|
||||
},
|
||||
{
|
||||
icon: '♾️',
|
||||
title: 'Zero Compromise',
|
||||
desc: 'No synthetic fragrance. No parabens. No animal testing. Our commitment to clean formulation is absolute — what touches your senses should honour your wellbeing.',
|
||||
},
|
||||
]
|
||||
|
||||
const STATS = [
|
||||
{ value: '45+', label: 'Unique Scents' },
|
||||
{ value: '5', label: 'Product Lines' },
|
||||
{ value: '2019', label: 'Founded' },
|
||||
{ value: '100%', label: 'Natural Extracts' },
|
||||
]
|
||||
|
||||
export default function AboutPage() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Hero */}
|
||||
<section className="relative min-h-[60vh] flex items-center justify-center overflow-hidden pt-24">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-night-800/60 via-night-900 to-night-900" />
|
||||
<div className="absolute inset-0 opacity-10"
|
||||
style={{ backgroundImage: 'radial-gradient(circle at 30% 50%, rgba(102,252,241,0.3) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(69,162,158,0.2) 0%, transparent 50%)' }}
|
||||
/>
|
||||
<div className="relative z-10 text-center px-6 max-w-3xl mx-auto space-y-6 animate-fade-in">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Our Story</p>
|
||||
<h1 className="text-6xl font-bold leading-tight">
|
||||
Born from a passion for <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-glow to-night-700 italic font-serif">stillness</span>
|
||||
</h1>
|
||||
<p className="text-slate-300 text-lg leading-relaxed">
|
||||
iRelax 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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Band */}
|
||||
<section className="py-12 px-6 bg-white/3 border-y border-white/5">
|
||||
<div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||||
{STATS.map(s => (
|
||||
<div key={s.label} className="space-y-1">
|
||||
<div className="text-4xl font-bold text-cyan-glow">{s.value}</div>
|
||||
<div className="text-xs uppercase tracking-widest text-slate-400">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mission Section */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-6">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">Our Mission</p>
|
||||
<h2 className="text-4xl font-bold leading-tight">
|
||||
Transforming spaces into sanctuaries of peace
|
||||
</h2>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
<p className="text-slate-400 leading-relaxed text-sm">
|
||||
Every iRelax product is designed with intention: the glass bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative h-80 rounded-2xl overflow-hidden glass border border-white/5">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-teal-900/30 via-night-800/30 to-purple-900/20" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center space-y-3">
|
||||
<div className="text-7xl">🌿</div>
|
||||
<p className="text-white/30 text-sm uppercase tracking-widest">iRelax Studio, Bangkok</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Three Pillars */}
|
||||
<section className="py-24 px-6 bg-night-800/20 border-y border-white/5">
|
||||
<div className="max-w-6xl mx-auto space-y-12">
|
||||
<div className="text-center space-y-3">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">What We Stand For</p>
|
||||
<h2 className="text-4xl font-bold">Three Pillars</h2>
|
||||
<div className="w-12 h-px bg-cyan-glow mx-auto" />
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{PILLARS.map(p => (
|
||||
<div key={p.title} className="glass rounded-2xl p-8 border border-white/5 hover:border-cyan-glow/20 transition-all duration-500 space-y-4">
|
||||
<div className="text-4xl">{p.icon}</div>
|
||||
<h3 className="text-xl font-bold">{p.title}</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">{p.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-24 px-6 text-center space-y-6">
|
||||
<h2 className="text-4xl font-bold">Ready to find your scent?</h2>
|
||||
<p className="text-slate-400 max-w-md mx-auto">
|
||||
Let our Scent Guide help you discover the perfect blend for your moment.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
|
||||
<Link
|
||||
to="/scent-guide"
|
||||
className="px-10 py-4 bg-white text-night-900 font-bold rounded-sm tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_30px_rgba(102,252,241,0.4)] transition-all duration-500"
|
||||
>
|
||||
Take the Scent Guide
|
||||
</Link>
|
||||
<Link
|
||||
to="/shop"
|
||||
className="px-10 py-4 glass text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300"
|
||||
>
|
||||
Shop All Products
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { API_BASE, type Article, type Category } from '../types'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { ArrowLeft, Loader2 } from 'lucide-react'
|
||||
|
||||
export default function ArticleReaderPage() {
|
||||
const { slug } = useParams()
|
||||
const [article, setArticle] = useState<Article | null>(null)
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
|
||||
fetch(`${API_BASE}/articles/${slug}`)
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error()
|
||||
return res.json()
|
||||
})
|
||||
.then(setArticle)
|
||||
.catch(() => setArticle(null))
|
||||
.finally(() => setLoading(false))
|
||||
}, [slug])
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-black">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-cyan-glow" />
|
||||
</div>
|
||||
)
|
||||
|
||||
if (!article) return (
|
||||
<div className="min-h-screen flex flex-col bg-black">
|
||||
<Navbar categories={categories} />
|
||||
<div className="flex-1 flex flex-col items-center justify-center px-6 text-center space-y-4">
|
||||
<h1 className="text-4xl font-bold">Article not found</h1>
|
||||
<Link to="/scent-guide" className="btn-secondary px-6 py-3">Return to Scent Guide</Link>
|
||||
</div>
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-night-950">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
<main className="flex-1 pt-24 pb-20">
|
||||
<article className="max-w-4xl mx-auto w-full animate-fade-in relative mt-8">
|
||||
|
||||
<Link to="/scent-guide" className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 glass border border-white/5 rounded-full hover:bg-white/10 transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 text-slate-300" />
|
||||
</Link>
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center px-6 py-12 space-y-6">
|
||||
<Link to="/scent-guide" className="lg:hidden text-slate-400 text-sm hover:text-white inline-flex items-center gap-2 mb-4">
|
||||
<ArrowLeft className="w-4 h-4" /> Go Back
|
||||
</Link>
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] font-bold text-xs">
|
||||
{new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight max-w-3xl mx-auto font-serif">
|
||||
{article.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Cover Image */}
|
||||
{article.coverImage && (
|
||||
<div className="w-full aspect-[16/7] bg-night-900 md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-white/5">
|
||||
<img src={article.coverImage} alt={article.title} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content Body */}
|
||||
<div className="px-6 md:px-12 prose prose-invert prose-lg prose-cyan mx-auto max-w-3xl pb-16">
|
||||
<div dangerouslySetInnerHTML={{ __html: article.content }} className="space-y-6" />
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import ProductCard from '../components/ProductCard'
|
||||
import { API_BASE, getCategoryImage, type Category, type Product } from '../types'
|
||||
|
||||
export default function CategoryPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [category, setCategory] = useState<Category | null>(null)
|
||||
const [products, setProducts] = useState<Product[]>([])
|
||||
|
||||
// Local progressive rendering
|
||||
const [displayCount, setDisplayCount] = useState(24)
|
||||
const loaderRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`)
|
||||
.then((r) => r.json())
|
||||
.then(setCategories)
|
||||
.catch(console.error)
|
||||
}, [])
|
||||
|
||||
// Reset state when category changes
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
setDisplayCount(24)
|
||||
}, [id])
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
Promise.all([
|
||||
// Fetch up to 1000 items (essentially all) in one go
|
||||
fetch(`${API_BASE}/categories/${id}/products?limit=1000`),
|
||||
fetch(`${API_BASE}/categories`),
|
||||
])
|
||||
.then(async ([catRes, allCatsRes]) => {
|
||||
if (!catRes.ok) throw new Error('Category not found')
|
||||
const catPaginated = await catRes.json()
|
||||
const allCats: Category[] = await allCatsRes.json()
|
||||
|
||||
setCategory(catPaginated.category)
|
||||
setProducts(catPaginated.data || [])
|
||||
setCategories(allCats)
|
||||
})
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [id])
|
||||
|
||||
// Intersection Observer for infinite scroll
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && products.length > displayCount) {
|
||||
setDisplayCount((prev) => Math.min(prev + 12, products.length))
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: '200px' } // Pre-load slightly before seeing the loader
|
||||
)
|
||||
|
||||
if (loaderRef.current) {
|
||||
observer.observe(loaderRef.current)
|
||||
}
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [products.length, displayCount, loading])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Hero Banner for category */}
|
||||
<div className="relative h-64 md:h-80 overflow-hidden">
|
||||
<img
|
||||
src={getCategoryImage(category?.name ?? '')}
|
||||
className="absolute inset-0 w-full h-full object-cover brightness-30 scale-105"
|
||||
alt={category?.name}
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-night-900 via-night-900/60 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 px-6 pb-10 pt-20">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400 uppercase tracking-widest mb-4">
|
||||
<Link to="/" className="hover:text-white transition-colors">Home</Link>
|
||||
<span>/</span>
|
||||
<Link to="/shop" className="hover:text-white transition-colors">Shop</Link>
|
||||
<span>/</span>
|
||||
<span className="text-cyan-glow">{category?.name ?? '...'}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold">
|
||||
{loading ? (
|
||||
<div className="h-10 w-48 bg-white/10 animate-pulse rounded-lg" />
|
||||
) : (
|
||||
category?.name
|
||||
)}
|
||||
</h1>
|
||||
{!loading && category?._count && (
|
||||
<p className="text-slate-400 mt-2">
|
||||
{category._count.products} products available
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Grid */}
|
||||
<div className="max-w-7xl mx-auto px-6 py-16 space-y-10">
|
||||
{/* Other Category Pills */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
to={`/category/${cat.id}`}
|
||||
className={`px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
cat.id === category?.id
|
||||
? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
|
||||
: 'glass hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{cat.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="text-center py-24 space-y-3">
|
||||
<p className="text-4xl">⚠️</p>
|
||||
<p className="text-slate-400">{error}</p>
|
||||
<Link to="/shop" className="text-cyan-glow text-sm hover:underline">
|
||||
Back to Shop
|
||||
</Link>
|
||||
</div>
|
||||
) : loading ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
|
||||
))}
|
||||
</div>
|
||||
) : products.length === 0 ? (
|
||||
<div className="text-center py-24 text-slate-500 space-y-3">
|
||||
<p className="text-4xl">🌿</p>
|
||||
<p>No products in this category yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{products.slice(0, displayCount).map((p) => (
|
||||
<ProductCard key={p.id} product={p} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Invisible target for IntersectionObserver */}
|
||||
{displayCount < products.length && (
|
||||
<div ref={loaderRef} className="py-12 flex justify-center">
|
||||
<div className="w-8 h-8 rounded-full border-2 border-cyan-glow border-t-transparent animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { API_BASE, formatPrice, type Category } from '../types'
|
||||
import { useCartStore } from '../store/cartStore'
|
||||
import { useAuthStore } from '../store/authStore'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const navigate = useNavigate()
|
||||
const { items, getCartTotal, clearCart } = useCartStore()
|
||||
const { customer } = useAuthStore()
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
|
||||
const [shippingFee, setShippingFee] = useState<number>(35)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [loadingSettings, setLoadingSettings] = useState(true)
|
||||
|
||||
const [couponCode, setCouponCode] = useState('')
|
||||
const [appliedCoupon, setAppliedCoupon] = useState<string | null>(null)
|
||||
const [discountAmount, setDiscountAmount] = useState<number>(0)
|
||||
const [isFreeShipping, setIsFreeShipping] = useState<boolean>(false)
|
||||
const [couponLoading, setCouponLoading] = useState(false)
|
||||
const [couponError, setCouponError] = useState('')
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: ''
|
||||
})
|
||||
|
||||
// Prefill form with LINE customer data
|
||||
useEffect(() => {
|
||||
if (customer) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
name: prev.name || customer.displayName || '',
|
||||
email: prev.email || customer.email || '',
|
||||
phone: prev.phone || customer.phone || ''
|
||||
}))
|
||||
}
|
||||
}, [customer])
|
||||
|
||||
// Load Settings (for dynamic shipping fee)
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/settings`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.shippingFee !== undefined) setShippingFee(data.shippingFee)
|
||||
})
|
||||
.catch(err => console.error("Could not load settings:", err))
|
||||
.finally(() => setLoadingSettings(false))
|
||||
|
||||
fetch(`${API_BASE}/categories`)
|
||||
.then(res => res.json())
|
||||
.then(setCategories)
|
||||
|
||||
// Check if there's an active coupon saved in localStorage
|
||||
const savedCoupon = localStorage.getItem('irelax_active_coupon')
|
||||
if (savedCoupon) {
|
||||
setCouponCode(savedCoupon)
|
||||
// We will trigger handleApplyCoupon but we need to wait for items/subtotal to be ready.
|
||||
// So we'll handle this in another effect or let the user click apply if needed.
|
||||
// Better yet, we can validate it immediately if subtotal is available.
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Kick out if cart empty
|
||||
useEffect(() => {
|
||||
if (items.length === 0) {
|
||||
navigate('/shop')
|
||||
}
|
||||
}, [items, navigate])
|
||||
|
||||
const subtotal = getCartTotal()
|
||||
const effectiveShippingFee = isFreeShipping ? 0 : shippingFee
|
||||
const total = Math.max(0, subtotal + effectiveShippingFee - discountAmount)
|
||||
|
||||
// Auto-apply saved coupon if subtotal is ready
|
||||
useEffect(() => {
|
||||
const savedCoupon = localStorage.getItem('irelax_active_coupon')
|
||||
if (savedCoupon && subtotal > 0 && !appliedCoupon && !couponError && !couponLoading) {
|
||||
setCouponCode(savedCoupon)
|
||||
// trigger fetch to validate
|
||||
fetch(`${API_BASE}/coupons/validate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code: savedCoupon, cartTotal: subtotal })
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.valid) {
|
||||
setAppliedCoupon(data.coupon.code)
|
||||
setDiscountAmount(data.discountAmount)
|
||||
setIsFreeShipping(data.isFreeShipping)
|
||||
} else {
|
||||
localStorage.removeItem('irelax_active_coupon') // Remove invalid
|
||||
}
|
||||
})
|
||||
.catch(console.error)
|
||||
}
|
||||
}, [subtotal, appliedCoupon])
|
||||
|
||||
// Re-validate applied coupon if subtotal changes
|
||||
useEffect(() => {
|
||||
if (appliedCoupon && subtotal > 0) {
|
||||
fetch(`${API_BASE}/coupons/validate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code: appliedCoupon, cartTotal: subtotal })
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.valid) {
|
||||
setDiscountAmount(data.discountAmount)
|
||||
setIsFreeShipping(data.isFreeShipping)
|
||||
} else {
|
||||
removeCoupon()
|
||||
setCouponError(data.error || 'Coupon is no longer valid for this cart')
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [subtotal, appliedCoupon])
|
||||
|
||||
const handleApplyCoupon = async () => {
|
||||
if (!couponCode.trim()) return
|
||||
setCouponLoading(true)
|
||||
setCouponError('')
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/coupons/validate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code: couponCode, cartTotal: subtotal })
|
||||
})
|
||||
const data = await res.json()
|
||||
|
||||
if (res.ok && data.valid) {
|
||||
setAppliedCoupon(data.coupon.code)
|
||||
setDiscountAmount(data.discountAmount)
|
||||
setIsFreeShipping(data.isFreeShipping)
|
||||
} else {
|
||||
setCouponError(data.error || 'Invalid coupon')
|
||||
setAppliedCoupon(null)
|
||||
setDiscountAmount(0)
|
||||
setIsFreeShipping(false)
|
||||
}
|
||||
} catch (err) {
|
||||
setCouponError('Error validating coupon')
|
||||
} finally {
|
||||
setCouponLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const removeCoupon = () => {
|
||||
setAppliedCoupon(null)
|
||||
setCouponCode('')
|
||||
setDiscountAmount(0)
|
||||
setIsFreeShipping(false)
|
||||
setCouponError('')
|
||||
localStorage.removeItem('irelax_active_coupon')
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const orderData = {
|
||||
customerId: customer ? customer.id : null,
|
||||
customerName: formData.name,
|
||||
customerEmail: formData.email,
|
||||
customerPhone: formData.phone,
|
||||
shippingAddress: formData.address,
|
||||
totalAmount: total,
|
||||
shippingFee: effectiveShippingFee,
|
||||
couponCode: appliedCoupon || undefined,
|
||||
discountAmount: discountAmount || undefined,
|
||||
items: items.map(item => ({
|
||||
productId: item.productId,
|
||||
variantId: item.variantId,
|
||||
quantity: item.quantity,
|
||||
priceAtPurchase: item.price,
|
||||
productName: item.productName,
|
||||
variantSize: item.variantSize,
|
||||
productImage: item.productImage
|
||||
}))
|
||||
}
|
||||
|
||||
const res = await fetch(`${API_BASE}/orders`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(orderData)
|
||||
})
|
||||
|
||||
const responseData = await res.json()
|
||||
|
||||
if (res.ok) {
|
||||
clearCart()
|
||||
|
||||
const existingStr = localStorage.getItem('irelax_local_orders')
|
||||
const existing = existingStr ? JSON.parse(existingStr) : []
|
||||
if (!existing.includes(responseData.id)) {
|
||||
localStorage.setItem('irelax_local_orders', JSON.stringify([responseData.id, ...existing]))
|
||||
}
|
||||
|
||||
navigate(`/order/${responseData.id}`)
|
||||
} else {
|
||||
alert(responseData.error || 'Failed to place order')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('An error occurred. Please try again.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
<main className="max-w-6xl mx-auto px-6 pt-32 pb-24">
|
||||
<h1 className="text-4xl font-bold mb-12">Checkout</h1>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-12">
|
||||
{/* Form Section */}
|
||||
<div className="flex-1 space-y-8">
|
||||
<form id="checkout-form" onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6">
|
||||
<h2 className="text-xl font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4">Shipping Information</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Full Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Phone Number *</label>
|
||||
<input
|
||||
type="tel"
|
||||
required
|
||||
value={formData.phone}
|
||||
onChange={e => setFormData({ ...formData, phone: e.target.value })}
|
||||
className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
|
||||
placeholder="0812345678"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Email Address *</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={e => setFormData({ ...formData, email: e.target.value })}
|
||||
className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
|
||||
placeholder="jane@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Shipping Address *</label>
|
||||
<textarea
|
||||
required
|
||||
rows={3}
|
||||
value={formData.address}
|
||||
onChange={e => setFormData({ ...formData, address: e.target.value })}
|
||||
className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all resize-none"
|
||||
placeholder="123 Serenity Street..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Summary Section */}
|
||||
<div className="lg:w-96 space-y-6">
|
||||
<div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 sticky top-32">
|
||||
<h2 className="text-xl font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4 mb-6">Order Summary</h2>
|
||||
|
||||
{/* Coupon Section */}
|
||||
<div className="mb-6 pb-6 border-b border-white/10">
|
||||
{!appliedCoupon ? (
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] uppercase font-bold tracking-widest text-slate-500">Discount Code</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={couponCode}
|
||||
onChange={e => setCouponCode(e.target.value.toUpperCase())}
|
||||
placeholder="e.g. SUMMER2026"
|
||||
className="flex-1 bg-night-950 border border-white/10 rounded-lg px-3 text-sm text-white focus:border-cyan-glow outline-none uppercase tracking-widest"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleApplyCoupon}
|
||||
disabled={couponLoading || !couponCode.trim()}
|
||||
className="px-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-xs font-bold uppercase tracking-widest disabled:opacity-50 transition-all"
|
||||
>
|
||||
{couponLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Apply'}
|
||||
</button>
|
||||
</div>
|
||||
{couponError && <p className="text-xs text-rose-500 mt-1">{couponError}</p>}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between bg-cyan-glow/10 border border-cyan-glow/20 rounded-lg px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-cyan-glow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span className="text-sm font-bold tracking-widest text-cyan-glow">{appliedCoupon}</span>
|
||||
</div>
|
||||
<button type="button" onClick={removeCoupon} className="text-xs text-slate-400 hover:text-rose-500 uppercase tracking-widest font-bold">Remove</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
{items.map(item => (
|
||||
<div key={item.cartItemId} className="flex justify-between items-start gap-4 text-sm">
|
||||
<div className="flex-1">
|
||||
<p className="font-bold">{item.productName}</p>
|
||||
<p className="text-slate-400 text-xs mt-0.5">{item.variantSize} x {item.quantity}</p>
|
||||
</div>
|
||||
<p className="font-medium text-cyan-glow">{formatPrice(item.price * item.quantity)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-white/10 pt-4 space-y-3 font-medium">
|
||||
<div className="flex justify-between text-sm text-slate-300">
|
||||
<span>Subtotal</span>
|
||||
<span>{formatPrice(subtotal)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-slate-300">
|
||||
<span>Shipping Fee</span>
|
||||
{loadingSettings ? <Loader2 className="w-4 h-4 animate-spin" /> :
|
||||
<span className={isFreeShipping ? "line-through text-slate-500" : ""}>{formatPrice(shippingFee)}</span>
|
||||
}
|
||||
</div>
|
||||
{isFreeShipping && (
|
||||
<div className="flex justify-between text-sm text-emerald-400">
|
||||
<span>Shipping Discount</span>
|
||||
<span>- {formatPrice(shippingFee)}</span>
|
||||
</div>
|
||||
)}
|
||||
{discountAmount > 0 && (
|
||||
<div className="flex justify-between text-sm text-cyan-glow">
|
||||
<span>Discount</span>
|
||||
<span>- {formatPrice(discountAmount)}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="border-t border-white/10 pt-3 mt-3 flex justify-between text-lg font-bold">
|
||||
<span>Total</span>
|
||||
<span className="text-cyan-glow">{formatPrice(total)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
form="checkout-form"
|
||||
type="submit"
|
||||
disabled={loading || loadingSettings}
|
||||
className="w-full mt-8 py-4 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center gap-2"
|
||||
>
|
||||
{loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { API_BASE, type Category } from '../types'
|
||||
|
||||
type FormState = { name: string; email: string; subject: string; message: string }
|
||||
type Status = 'idle' | 'sending' | 'sent' | 'error'
|
||||
|
||||
const SUBJECTS = ['Product Inquiry', 'Order Support', 'Custom Blending', 'Wholesale', 'Partnership', 'Other']
|
||||
|
||||
export default function ContactPage() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [form, setForm] = useState<FormState>({ name: '', email: '', subject: '', message: '' })
|
||||
const [status, setStatus] = useState<Status>('idle')
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
|
||||
}, [])
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setForm(prev => ({ ...prev, [e.target.name]: e.target.value }))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setStatus('sending')
|
||||
// Simulate API call (replace with real endpoint later)
|
||||
await new Promise(r => setTimeout(r, 1500))
|
||||
setStatus('sent')
|
||||
setForm({ name: '', email: '', subject: '', message: '' })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Header */}
|
||||
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Get in Touch</p>
|
||||
<h1 className="text-5xl font-bold">Contact Us</h1>
|
||||
<p className="text-slate-400 max-w-lg mx-auto">
|
||||
Have a question, custom request, or partnership idea? We'd love to hear from you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-6xl mx-auto px-6 py-16 grid md:grid-cols-5 gap-16">
|
||||
{/* Contact Info */}
|
||||
<div className="md:col-span-2 space-y-8">
|
||||
<div>
|
||||
<h2 className="font-bold text-xl mb-6">Reach Us Directly</h2>
|
||||
<div className="space-y-5">
|
||||
{[
|
||||
{ icon: '📧', label: 'Email', value: 'hello@irelax.co.th', href: 'mailto:hello@irelax.co.th' },
|
||||
{ icon: '📱', label: 'LINE Official', value: '@irelaxessential', href: '#' },
|
||||
{ icon: '📸', label: 'Instagram', value: '@irelax.essential', href: '#' },
|
||||
{ icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' },
|
||||
].map(item => (
|
||||
<a key={item.label} href={item.href} className="flex items-start gap-4 group">
|
||||
<div className="glass w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0 group-hover:bg-cyan-glow/10 transition-colors">
|
||||
{item.icon}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-widest">{item.label}</p>
|
||||
<p className="text-white text-sm font-medium group-hover:text-cyan-glow transition-colors">{item.value}</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass rounded-2xl p-6 border border-white/5 space-y-3">
|
||||
<h3 className="font-bold text-sm uppercase tracking-widest">Response Time</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">Email</span>
|
||||
<span className="text-cyan-glow font-medium">~2 hours</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">LINE</span>
|
||||
<span className="text-cyan-glow font-medium">~30 minutes</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">Instagram DM</span>
|
||||
<span className="text-cyan-glow font-medium">~4 hours</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-600 pt-2 uppercase tracking-wider">Mon–Sat, 9:00–18:00 (ICT)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div className="md:col-span-3">
|
||||
{status === 'sent' ? (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center space-y-5 py-16">
|
||||
<div className="text-6xl animate-bounce">✉️</div>
|
||||
<h2 className="text-2xl font-bold">Message Sent!</h2>
|
||||
<p className="text-slate-400">Thank you for reaching out. We'll get back to you within 2 hours.</p>
|
||||
<button
|
||||
onClick={() => setStatus('idle')}
|
||||
className="mt-4 px-8 py-3 glass border border-white/10 hover:border-cyan-glow/30 font-bold uppercase tracking-widest text-xs transition-all rounded-lg"
|
||||
>
|
||||
Send Another
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="grid md:grid-cols-2 gap-5">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Full Name *</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
name="name"
|
||||
value={form.name}
|
||||
onChange={handleChange}
|
||||
placeholder="Your name"
|
||||
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Email *</label>
|
||||
<input
|
||||
required
|
||||
type="email"
|
||||
name="email"
|
||||
value={form.email}
|
||||
onChange={handleChange}
|
||||
placeholder="your@email.com"
|
||||
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Subject *</label>
|
||||
<select
|
||||
required
|
||||
name="subject"
|
||||
value={form.subject}
|
||||
onChange={handleChange}
|
||||
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-night-900 outline-none text-sm text-white transition-colors"
|
||||
>
|
||||
<option value="" disabled>Select a subject</option>
|
||||
{SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Message *</label>
|
||||
<textarea
|
||||
required
|
||||
name="message"
|
||||
value={form.message}
|
||||
onChange={handleChange}
|
||||
rows={6}
|
||||
placeholder="Tell us about your inquiry..."
|
||||
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 resize-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === 'sending'}
|
||||
className="w-full py-4 bg-white text-night-900 font-bold uppercase tracking-widest text-sm rounded-xl hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
|
||||
>
|
||||
{status === 'sending' ? (
|
||||
<>
|
||||
<svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
Sending...
|
||||
</>
|
||||
) : 'Send Message →'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { API_BASE, type Category } from '../types'
|
||||
import { Ticket, Copy, CheckCircle2, ArrowRight } from 'lucide-react'
|
||||
|
||||
interface Coupon {
|
||||
id: number
|
||||
code: string
|
||||
type: string
|
||||
value: number
|
||||
minPurchase: number
|
||||
usageLimit: number | null
|
||||
usedCount: number
|
||||
expiresAt: string | null
|
||||
}
|
||||
|
||||
export default function CouponsPage() {
|
||||
const navigate = useNavigate()
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [coupons, setCoupons] = useState<Coupon[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [copiedCode, setCopiedCode] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`)
|
||||
.then(res => res.json())
|
||||
.then(setCategories)
|
||||
.catch(console.error)
|
||||
|
||||
fetch(`${API_BASE}/coupons/active`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// Filter out coupons that have reached their limit
|
||||
const availableCoupons = data.filter((c: Coupon) =>
|
||||
c.usageLimit === null || c.usedCount < c.usageLimit
|
||||
)
|
||||
setCoupons(availableCoupons)
|
||||
})
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
const formatDiscount = (type: string, value: number) => {
|
||||
if (type === 'PERCENTAGE') return `${value}% OFF`
|
||||
if (type === 'FIXED_AMOUNT') return `ลด ${value} ฿`
|
||||
if (type === 'FREE_SHIPPING') return `ส่งฟรี`
|
||||
return `${value}`
|
||||
}
|
||||
|
||||
const handleCopy = (code: string) => {
|
||||
navigator.clipboard.writeText(code)
|
||||
setCopiedCode(code)
|
||||
setTimeout(() => setCopiedCode(null), 2000)
|
||||
}
|
||||
|
||||
const handleUseNow = (code: string) => {
|
||||
localStorage.setItem('irelax_active_coupon', code)
|
||||
navigate('/shop')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
<main className="max-w-6xl mx-auto px-6 pt-32 pb-24 min-h-[70vh]">
|
||||
<div className="text-center space-y-4 mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-cyan-glow to-blue-500 bg-clip-text text-transparent">
|
||||
Exclusive Offers
|
||||
</h1>
|
||||
<p className="text-slate-400 max-w-2xl mx-auto">
|
||||
คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-64 bg-white/5 rounded-3xl animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : coupons.length === 0 ? (
|
||||
<div className="text-center py-20 bg-night-900/50 rounded-3xl border border-white/5">
|
||||
<Ticket className="w-16 h-16 text-slate-600 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-bold text-white mb-2">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
|
||||
<p className="text-slate-400 mb-6">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
|
||||
<button
|
||||
onClick={() => navigate('/shop')}
|
||||
className="px-8 py-3 bg-cyan-glow/10 text-cyan-glow hover:bg-cyan-glow hover:text-night-900 font-bold rounded-xl transition-all"
|
||||
>
|
||||
ไปช้อปปิ้งกันก่อน
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{coupons.map(coupon => (
|
||||
<div
|
||||
key={coupon.id}
|
||||
className="group relative bg-night-900 border border-white/10 rounded-3xl overflow-hidden hover:border-cyan-glow/50 transition-all duration-500"
|
||||
>
|
||||
{/* Decoration */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-cyan-glow/10 blur-3xl rounded-full -translate-y-1/2 translate-x-1/2" />
|
||||
|
||||
<div className="p-8 space-y-6 relative z-10">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="w-12 h-12 rounded-xl bg-cyan-glow/10 text-cyan-glow flex items-center justify-center border border-cyan-glow/20">
|
||||
<Ticket className="w-6 h-6" />
|
||||
</div>
|
||||
{coupon.expiresAt && (
|
||||
<span className="text-[10px] font-bold text-amber-400 bg-amber-500/10 px-2 py-1 rounded-md uppercase tracking-wider">
|
||||
หมดเขต {new Date(coupon.expiresAt).toLocaleDateString('th-TH')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-3xl font-black text-white mb-1">
|
||||
{formatDiscount(coupon.type, coupon.value)}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-400">
|
||||
เมื่อซื้อครบ {coupon.minPurchase} บาท
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 bg-night-950 p-1 pl-4 rounded-xl border border-white/5">
|
||||
<span className="flex-1 font-mono text-cyan-glow font-bold tracking-widest uppercase">
|
||||
{coupon.code}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleCopy(coupon.code)}
|
||||
className="p-3 hover:bg-white/5 rounded-lg text-slate-400 hover:text-white transition-all group/btn"
|
||||
title="Copy Code"
|
||||
>
|
||||
{copiedCode === coupon.code ? (
|
||||
<CheckCircle2 className="w-5 h-5 text-emerald-400" />
|
||||
) : (
|
||||
<Copy className="w-5 h-5 group-hover/btn:scale-110 transition-transform" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleUseNow(coupon.code)}
|
||||
className="w-full py-4 bg-white/5 hover:bg-cyan-glow text-white hover:text-night-900 font-bold rounded-xl flex items-center justify-center gap-2 transition-all duration-300"
|
||||
>
|
||||
ใช้คูปองนี้เลย
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Scalloped edge effect */}
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-6 h-6 bg-[#0a0a0a] rounded-full border-r border-white/10" />
|
||||
<div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-6 h-6 bg-[#0a0a0a] rounded-full border-l border-white/10" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { API_BASE, type Category } from '../types'
|
||||
|
||||
const FAQS = [
|
||||
{
|
||||
category: 'Products',
|
||||
icon: '🌿',
|
||||
items: [
|
||||
{ q: 'What are the ingredients in your aroma products?', a: 'All iRelax 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.' },
|
||||
{ q: 'What is the difference between Aroma Oil and Oil Ozone?', a: 'Aroma Oils are pure essential oil blends designed for aromatherapy diffusers and therapeutic use. Oil Ozone is our premium line featuring ozone-infused botanical extracts — designed for air purification and deeper space transformation, ideal for large rooms and commercial spaces.' },
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Usage',
|
||||
icon: '💡',
|
||||
items: [
|
||||
{ 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.' },
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Shipping & Orders',
|
||||
icon: '📦',
|
||||
items: [
|
||||
{ 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@irelax.co.th with your order number.' },
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Scent Guide',
|
||||
icon: '🧪',
|
||||
items: [
|
||||
{ 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.' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default function FaqPage() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [openItems, setOpenItems] = useState<Record<string, boolean>>({})
|
||||
const [activeCategory, setActiveCategory] = useState<string>('Products')
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
|
||||
}, [])
|
||||
|
||||
const toggle = (key: string) => setOpenItems(prev => ({ ...prev, [key]: !prev[key] }))
|
||||
|
||||
const activeFaqs = FAQS.find(f => f.category === activeCategory)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Header */}
|
||||
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p>
|
||||
<h1 className="text-5xl font-bold">Frequently Asked Questions</h1>
|
||||
<p className="text-slate-400 max-w-lg mx-auto">
|
||||
Everything you need to know about iRelax products, shipping, and care.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto px-6 py-16 space-y-10">
|
||||
{/* Category tabs */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{FAQS.map(({ category, icon }) => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setActiveCategory(category)}
|
||||
className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 ${
|
||||
activeCategory === category
|
||||
? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
|
||||
: 'glass hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<span>{icon}</span> {category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* FAQ Accordion */}
|
||||
<div className="space-y-3">
|
||||
{activeFaqs?.items.map((item, i) => {
|
||||
const key = `${activeCategory}-${i}`
|
||||
const isOpen = openItems[key]
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={`glass rounded-xl overflow-hidden border transition-all duration-300 ${isOpen ? 'border-cyan-glow/20' : 'border-white/5'}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => toggle(key)}
|
||||
className="w-full text-left px-6 py-5 flex justify-between items-start gap-4"
|
||||
>
|
||||
<span className="font-semibold text-sm md:text-base leading-snug">{item.q}</span>
|
||||
<svg
|
||||
className={`w-5 h-5 text-cyan-glow shrink-0 transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`}
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="px-6 pb-6">
|
||||
<div className="w-full h-px bg-white/5 mb-4" />
|
||||
<p className="text-slate-300 leading-relaxed text-sm">{item.a}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Still have questions? */}
|
||||
<div className="glass rounded-2xl p-8 text-center space-y-4 border border-white/5 mt-12">
|
||||
<div className="text-3xl">💬</div>
|
||||
<h3 className="font-bold text-xl">Still have questions?</h3>
|
||||
<p className="text-slate-400 text-sm">Our team is here to help — usually responds within 2 hours.</p>
|
||||
<a
|
||||
href="/contact"
|
||||
className="inline-block px-8 py-3 bg-white text-night-900 font-bold rounded-lg uppercase tracking-widest text-xs hover:bg-cyan-glow transition-colors duration-300"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import ProductCard from '../components/ProductCard'
|
||||
import { API_BASE, getCategoryImage, type Category, type Product, type Hero } from '../types'
|
||||
|
||||
export default function HomePage() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [featuredProducts, setFeaturedProducts] = useState<Product[]>([])
|
||||
const [hero, setHero] = useState<Hero | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [catRes, prodRes, heroRes] = await Promise.all([
|
||||
fetch(`${API_BASE}/categories`),
|
||||
fetch(`${API_BASE}/products?categoryId=1`),
|
||||
fetch(`${API_BASE}/hero`),
|
||||
])
|
||||
const cats: Category[] = await catRes.json()
|
||||
const prodsJson = await prodRes.json()
|
||||
const heroText = await heroRes.text()
|
||||
const heroData: Hero | null = heroText ? JSON.parse(heroText) : null
|
||||
|
||||
const prods: Product[] = prodsJson.data || []
|
||||
setCategories(cats)
|
||||
setFeaturedProducts(prods.slice(0, 3))
|
||||
setHero(heroData)
|
||||
} catch (err) {
|
||||
console.error('API error:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-video flex items-center justify-center overflow-hidden bg-night-950">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
src={hero?.imageUrl || "/images/hero.png"}
|
||||
className="w-full h-full object-cover scale-[1.02] brightness-50"
|
||||
alt="Hero Background"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none'
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-night-900 via-transparent to-night-900/50" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-center space-y-6 px-4 animate-fade-in">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-sm font-semibold opacity-80">
|
||||
{hero?.tagline || "A New Paradigm of Calm"}
|
||||
</p>
|
||||
<h1 className="text-6xl md:text-8xl font-bold max-w-4xl text-glow leading-[1.1]">
|
||||
{hero ? (
|
||||
hero.title.split('[').map((part, i) => {
|
||||
if (part.includes(']')) {
|
||||
const [accent, rest] = part.split(']')
|
||||
return (
|
||||
<span key={i}>
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-silver-metallic to-white/50 italic font-serif">
|
||||
{accent}
|
||||
</span>
|
||||
{rest}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return <span key={i}>{part}</span>
|
||||
})
|
||||
) : (
|
||||
<>
|
||||
Inhale{' '}
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-silver-metallic to-white/50 italic font-serif">
|
||||
Serenity
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</h1>
|
||||
<p className="text-slate-400 max-w-xl mx-auto text-lg md:text-xl font-light">
|
||||
{hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."}
|
||||
</p>
|
||||
<div className="pt-8 flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
to={hero?.buttonLink || "/shop"}
|
||||
className="px-10 py-4 bg-white text-night-900 font-bold rounded-sm tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_30px_rgba(102,252,241,0.5)] transition-all duration-500"
|
||||
>
|
||||
{hero?.buttonText || "Explore Collection"}
|
||||
</Link>
|
||||
<a
|
||||
href="#categories"
|
||||
className="px-10 py-4 glass text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300"
|
||||
>
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-40">
|
||||
<div className="w-px h-16 bg-gradient-to-b from-white/0 via-white to-white/0" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Categories Showcase */}
|
||||
<section id="categories" className="bg-night-900 py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto space-y-12">
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">
|
||||
Our Range
|
||||
</p>
|
||||
<h2 className="text-4xl font-bold tracking-tight uppercase">The Categories</h2>
|
||||
<div className="w-12 h-px bg-cyan-glow mx-auto mt-3" />
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-56 rounded-xl bg-white/5 animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
to={`/category/${cat.id}`}
|
||||
className="relative h-56 rounded-xl overflow-hidden group border-2 border-white/5 hover:border-cyan-glow/50 hover:shadow-[0_0_20px_rgba(102,252,241,0.15)] transition-all duration-500"
|
||||
>
|
||||
<img
|
||||
src={getCategoryImage(cat.name)}
|
||||
className="absolute inset-0 w-full h-full object-cover grayscale opacity-40 group-hover:grayscale-0 group-hover:scale-110 group-hover:opacity-70 transition-all duration-700"
|
||||
alt={cat.name}
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-night-900/90 via-night-900/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||
<span className="text-white font-bold tracking-wider uppercase text-xs block">
|
||||
{cat.name}
|
||||
</span>
|
||||
{cat._count && (
|
||||
<span className="text-cyan-glow/60 text-[10px] tracking-wider">
|
||||
{cat._count.products} products
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<svg className="w-5 h-5 text-cyan-glow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Products */}
|
||||
<section className="bg-night-900 py-24 px-6 border-t border-white/5">
|
||||
<div className="max-w-7xl mx-auto space-y-12">
|
||||
<div className="flex justify-between items-end">
|
||||
<div className="space-y-2">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">
|
||||
Top Picks
|
||||
</p>
|
||||
<h2 className="text-4xl font-bold">Featured Products</h2>
|
||||
</div>
|
||||
<Link
|
||||
to="/shop"
|
||||
className="text-cyan-glow text-sm font-bold uppercase tracking-widest hover:underline decoration-cyan-glow/30"
|
||||
>
|
||||
View All →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{featuredProducts.map((p) => (
|
||||
<ProductCard key={p.id} product={p} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export default function NotFoundPage() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center px-6 bg-night-900">
|
||||
{/* Background glow */}
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-cyan-glow/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-night-700/10 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-center space-y-8 max-w-lg">
|
||||
{/* 404 Large */}
|
||||
<div className="relative">
|
||||
<div className="text-[10rem] font-bold leading-none text-transparent bg-clip-text bg-gradient-to-b from-white/20 to-white/5 select-none">
|
||||
404
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-5xl animate-float">🌿</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h1 className="text-3xl font-bold">Page Not Found</h1>
|
||||
<p className="text-slate-400 leading-relaxed">
|
||||
The page you're looking for seems to have drifted away like morning mist. Let's guide you back to serenity.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-2">
|
||||
<Link
|
||||
to="/"
|
||||
className="px-8 py-3.5 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 text-sm"
|
||||
>
|
||||
Go Home
|
||||
</Link>
|
||||
<Link
|
||||
to="/shop"
|
||||
className="px-8 py-3.5 glass text-white font-bold rounded-lg tracking-widest uppercase hover:bg-white/10 transition-all duration-300 border border-white/10 text-sm"
|
||||
>
|
||||
Browse Products
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-white/5">
|
||||
<div className="flex justify-center gap-6 text-xs text-slate-500">
|
||||
<Link to="/scent-guide" className="hover:text-white transition-colors">Scent Guide</Link>
|
||||
<Link to="/faq" className="hover:text-white transition-colors">FAQ</Link>
|
||||
<Link to="/contact" className="hover:text-white transition-colors">Contact</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { API_BASE, formatPrice, type Order, type StoreSettings, type Category } from '../types'
|
||||
import { CheckCircle2, UploadCloud, Loader2, Copy } from 'lucide-react'
|
||||
|
||||
export default function OrderSuccessPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const [order, setOrder] = useState<Order | null>(null)
|
||||
const [settings, setSettings] = useState<StoreSettings | null>(null)
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
fetch(`${API_BASE}/orders/${id}`).then(r => r.json()),
|
||||
fetch(`${API_BASE}/settings`).then(r => r.json()),
|
||||
fetch(`${API_BASE}/categories`).then(r => r.json())
|
||||
])
|
||||
.then(([orderData, settingsData, catData]) => {
|
||||
setOrder(orderData)
|
||||
setSettings(settingsData)
|
||||
setCategories(catData)
|
||||
})
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false))
|
||||
}, [id])
|
||||
|
||||
const copyToClipboard = () => {
|
||||
if (!settings) return
|
||||
navigator.clipboard.writeText(settings.bankAccountNumber)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file || !order) return
|
||||
|
||||
setUploading(true)
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
try {
|
||||
// 1. Upload file
|
||||
const uploadRes = await fetch(`${API_BASE}/upload`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
const uploadData = await uploadRes.json()
|
||||
|
||||
if (uploadData.url) {
|
||||
// 2. Update order slip
|
||||
const updateRes = await fetch(`${API_BASE}/orders/${order.id}/slip`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ paymentSlipUrl: uploadData.url })
|
||||
})
|
||||
const updatedOrder = await updateRes.json()
|
||||
setOrder(updatedOrder)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert("Failed to upload payment slip.")
|
||||
} finally {
|
||||
setUploading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
<div className="flex items-center justify-center pt-40">
|
||||
<Loader2 className="w-8 h-8 text-cyan-glow animate-spin" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!order || (order as any).error) {
|
||||
return (
|
||||
<div className="min-h-screen text-center pt-40">
|
||||
<Navbar categories={categories} />
|
||||
<h1 className="text-2xl font-bold mb-4">Order Not Found</h1>
|
||||
<Link to="/shop" className="text-cyan-glow hover:underline">Return to Shop</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
<main className="max-w-3xl mx-auto px-6 pt-32 pb-24 space-y-12 animate-fade-in">
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-6">
|
||||
<div className="w-20 h-20 bg-cyan-glow/10 rounded-full flex items-center justify-center mx-auto border border-cyan-glow/20">
|
||||
<CheckCircle2 className="w-10 h-10 text-cyan-glow" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">Order Received</h1>
|
||||
<p className="text-slate-400 mt-2">Thank you! Your order #{order.id.toString().padStart(4, '0')} has been placed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Summary */}
|
||||
<div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4">Order Items</h2>
|
||||
<div className="space-y-4">
|
||||
{order.items.map(item => (
|
||||
<div key={item.id} className="flex items-center gap-4 text-sm">
|
||||
<div className="w-12 h-12 rounded-lg bg-white/5 flex-shrink-0 overflow-hidden">
|
||||
<img src={item.productImage || '/images/oil_ozone.png'} alt="Product" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-bold">{item.productName}</p>
|
||||
<p className="text-slate-400 text-xs mt-0.5">{item.variantSize} x {item.quantity}</p>
|
||||
</div>
|
||||
<p className="font-medium text-cyan-glow">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t border-white/10 pt-4 space-y-3 font-medium text-sm text-slate-300">
|
||||
<div className="flex justify-between">
|
||||
<span>Subtotal</span>
|
||||
<span>{formatPrice(order.totalAmount - order.shippingFee)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Shipping Fee</span>
|
||||
<span>{formatPrice(order.shippingFee)}</span>
|
||||
</div>
|
||||
<div className="border-t border-white/10 pt-3 mt-3 flex justify-between text-lg font-bold text-white">
|
||||
<span>Total</span>
|
||||
<span className="text-cyan-glow">{formatPrice(order.totalAmount)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Banking Details */}
|
||||
{settings && order.status === 'PENDING_PAYMENT' && (
|
||||
<div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 text-center space-y-6 relative overflow-hidden">
|
||||
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-cyan-glow to-transparent opacity-50" />
|
||||
|
||||
<h2 className="text-xs uppercase font-bold tracking-widest text-slate-400">Payment Required</h2>
|
||||
<div className="text-3xl font-bold text-cyan-glow">
|
||||
{formatPrice(order.totalAmount)}
|
||||
</div>
|
||||
|
||||
<div className="bg-night-950 p-6 rounded-xl border border-white/5 inline-block text-left w-full max-w-md mx-auto space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-widest">Bank</p>
|
||||
<p className="font-bold">{settings.bankName}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-widest">Account Number</p>
|
||||
<p className="font-mono text-xl font-bold tracking-widest text-cyan-glow">{settings.bankAccountNumber}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="p-2 glass rounded-lg hover:bg-white/10 transition-colors shrink-0"
|
||||
title="Copy account number"
|
||||
>
|
||||
{copied ? <CheckCircle2 className="w-5 h-5 text-emerald-400" /> : <Copy className="w-5 h-5 text-slate-300" />}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-widest">Account Name</p>
|
||||
<p className="font-bold">{settings.bankAccountName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">Please transfer the exact amount and upload your slip below.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upload Status */}
|
||||
<div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4">Payment Slip Verification</h2>
|
||||
|
||||
{order.paymentSlipUrl ? (
|
||||
<div className="flex flex-col items-center justify-center space-y-4 py-4">
|
||||
<div className="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center">
|
||||
<CheckCircle2 className="w-8 h-8 text-emerald-400" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="font-bold text-lg text-emerald-400">Slip Uploaded Successfully</p>
|
||||
<p className="text-sm text-slate-400 mt-1">Status: {order.status}</p>
|
||||
<p className="text-xs mt-2 text-slate-500">We will verify your payment and process your order shortly.</p>
|
||||
</div>
|
||||
<img src={order.paymentSlipUrl} alt="Slip" className="w-48 rounded-xl border border-white/10 mt-4 opacity-50 hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative border-2 border-dashed border-white/10 rounded-xl p-10 hover:border-cyan-glow/50 transition-colors group cursor-pointer overflow-hidden">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileUpload}
|
||||
disabled={uploading}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||||
/>
|
||||
<div className="text-center space-y-4">
|
||||
{uploading ? (
|
||||
<Loader2 className="w-12 h-12 text-cyan-glow animate-spin mx-auto" />
|
||||
) : (
|
||||
<UploadCloud className="w-12 h-12 text-slate-500 group-hover:text-cyan-glow transition-colors mx-auto" />
|
||||
)}
|
||||
<div>
|
||||
<p className="font-bold">{uploading ? 'Uploading...' : 'Click or drag to upload slip'}</p>
|
||||
<p className="text-xs text-slate-500 mt-1">Supports JPG, PNG (Max 5MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,304 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import ProductCard from '../components/ProductCard'
|
||||
import { API_BASE, getCategoryImage, formatPrice, type Category, type Product } from '../types'
|
||||
import { useCartStore } from '../store/cartStore'
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [product, setProduct] = useState<Product | null>(null)
|
||||
const [related, setRelated] = useState<Product[]>([])
|
||||
const [selectedVariant, setSelectedVariant] = useState<number>(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const { addToCart } = useCartStore()
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`)
|
||||
.then((r) => r.json())
|
||||
.then(setCategories)
|
||||
.catch(console.error)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setSelectedVariant(0)
|
||||
|
||||
fetch(`${API_BASE}/products/${id}`)
|
||||
.then(async (r) => {
|
||||
if (!r.ok) throw new Error('Product not found')
|
||||
return r.json()
|
||||
})
|
||||
.then(async (data: Product) => {
|
||||
setProduct(data)
|
||||
// Fetch related (same category, different product)
|
||||
const relRes = await fetch(`${API_BASE}/products?categoryId=${data.category.id}`)
|
||||
const relJson = await relRes.json()
|
||||
const relData: Product[] = relJson.data || []
|
||||
setRelated(relData.filter((p) => p.id !== data.id).slice(0, 6))
|
||||
})
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [id])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
<div className="pt-32 px-6 max-w-7xl mx-auto animate-pulse space-y-8">
|
||||
<div className="h-6 w-48 bg-white/5 rounded" />
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
<div className="h-96 bg-white/5 rounded-2xl" />
|
||||
<div className="space-y-4">
|
||||
<div className="h-8 w-3/4 bg-white/5 rounded" />
|
||||
<div className="h-4 w-1/2 bg-white/5 rounded" />
|
||||
<div className="h-12 w-1/3 bg-white/5 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !product) {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
<div className="pt-40 text-center space-y-4">
|
||||
<p className="text-4xl">⚠️</p>
|
||||
<p className="text-slate-400">{error ?? 'Product not found'}</p>
|
||||
<Link to="/shop" className="text-cyan-glow hover:underline text-sm">
|
||||
Back to Shop
|
||||
</Link>
|
||||
</div>
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const currentVariant = product.variants[selectedVariant]
|
||||
|
||||
const handleAddToCart = () => {
|
||||
if (!product || !currentVariant) return
|
||||
addToCart({
|
||||
productId: product.id,
|
||||
variantId: currentVariant.id,
|
||||
quantity: 1,
|
||||
price: currentVariant.price || product.price || 0,
|
||||
productName: product.scent.name,
|
||||
variantSize: currentVariant.size,
|
||||
productImage: product.images?.[0]?.url || getCategoryImage(product.category.name)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-24 md:pb-0">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 pt-32 pb-24 space-y-24">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400 uppercase tracking-widest">
|
||||
<Link to="/" className="hover:text-white transition-colors">Home</Link>
|
||||
<span>/</span>
|
||||
<Link to="/shop" className="hover:text-white transition-colors">Shop</Link>
|
||||
<span>/</span>
|
||||
<Link to={`/category/${product.category.id}`} className="hover:text-white transition-colors">
|
||||
{product.category.name}
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<span className="text-cyan-glow">{product.scent.name}</span>
|
||||
</div>
|
||||
|
||||
{/* Product Detail */}
|
||||
<div className="grid md:grid-cols-2 gap-16 items-center">
|
||||
{/* Image */}
|
||||
<div className="relative rounded-2xl overflow-hidden h-[480px] group">
|
||||
<img
|
||||
src={product.images?.[0]?.url || getCategoryImage(product.category.name)}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
alt={product.scent.name}
|
||||
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-night-900/50 to-transparent" />
|
||||
<div className="absolute top-6 left-6 glass px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest text-cyan-glow border border-cyan-glow/20">
|
||||
{product.category.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-2">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-80">
|
||||
{product.category.name}
|
||||
</p>
|
||||
<h1 className="text-5xl font-bold leading-tight">
|
||||
{product.scent.name}
|
||||
</h1>
|
||||
<p className="text-slate-400 text-sm uppercase tracking-widest">
|
||||
Premium Collection
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{product.description && (
|
||||
<p className="text-slate-300 leading-relaxed">{product.description}</p>
|
||||
)}
|
||||
|
||||
{/* Price */}
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className="text-4xl font-bold text-cyan-glow">
|
||||
{formatPrice(currentVariant?.price)}
|
||||
</span>
|
||||
{currentVariant && (
|
||||
<span className="text-slate-400 text-sm">/ {currentVariant.size}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Variant Selector */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs uppercase tracking-widest text-slate-400 font-semibold">
|
||||
Select Size
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{product.variants.map((v, i) => (
|
||||
<button
|
||||
key={v.id}
|
||||
onClick={() => setSelectedVariant(i)}
|
||||
className={`px-5 py-2.5 rounded-lg text-sm font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
selectedVariant === i
|
||||
? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.4)]'
|
||||
: 'glass hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{v.size}
|
||||
<span className={`block text-[10px] mt-0.5 ${selectedVariant === i ? 'text-night-800' : 'text-slate-400'}`}>
|
||||
{formatPrice(v.price)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="flex-1 py-4 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500"
|
||||
>
|
||||
Add to Cart
|
||||
</button>
|
||||
<button className="glass p-4 rounded-lg hover:bg-white/10 transition-all">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Meta */}
|
||||
<div className="border-t border-white/5 pt-6 grid grid-cols-2 gap-4 text-sm text-slate-400">
|
||||
<div>
|
||||
<span className="text-xs uppercase tracking-widest block mb-1">Scent</span>
|
||||
<span className="text-white font-medium">{product.scent.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs uppercase tracking-widest block mb-1">Category</span>
|
||||
<Link
|
||||
to={`/category/${product.category.id}`}
|
||||
className="text-white font-medium hover:text-cyan-glow transition-colors"
|
||||
>
|
||||
{product.category.name}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full Details Section */}
|
||||
{product.details && (
|
||||
<div className="pt-16 border-t border-white/5 space-y-6">
|
||||
<h2 className="text-3xl font-bold">Product Details</h2>
|
||||
<div
|
||||
className="prose prose-invert prose-lg max-w-4xl product-editorial"
|
||||
dangerouslySetInnerHTML={{ __html: product.details }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Related Products */}
|
||||
{related.length > 0 && (
|
||||
<div className="space-y-8 border-t border-white/5 pt-16">
|
||||
<div className="flex justify-between items-end">
|
||||
<div>
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70 mb-2">
|
||||
More {product.category.name}
|
||||
</p>
|
||||
<h2 className="text-3xl font-bold">Related Products</h2>
|
||||
</div>
|
||||
<Link
|
||||
to={`/category/${product.category.id}`}
|
||||
className="text-cyan-glow text-sm font-bold uppercase tracking-widest hover:underline"
|
||||
>
|
||||
View All →
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{related.map((p) => (
|
||||
<ProductCard key={p.id} product={p} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Footer categories={categories} />
|
||||
|
||||
{/* Mobile Sticky Add to Cart Bar */}
|
||||
<div className="md:hidden fixed bottom-0 left-0 right-0 p-4 bg-night-950/95 backdrop-blur-xl border-t border-white/10 z-40 animate-fade-in flex flex-col gap-3 shadow-[0_-10px_30px_rgba(0,0,0,0.5)]">
|
||||
|
||||
{/* Mobile Variant Selector */}
|
||||
{product.variants && product.variants.length > 1 && (
|
||||
<div className="flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
|
||||
{product.variants.map((v, i) => (
|
||||
<button
|
||||
key={`mobile-v-${v.id}`}
|
||||
onClick={() => setSelectedVariant(i)}
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all border whitespace-nowrap ${
|
||||
selectedVariant === i
|
||||
? 'bg-cyan-glow/10 border-cyan-glow text-cyan-glow'
|
||||
: 'bg-white/5 border-white/10 text-slate-400'
|
||||
}`}
|
||||
>
|
||||
{v.size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] uppercase tracking-widest text-slate-400">
|
||||
{product.variants && product.variants.length > 1 ? currentVariant?.size : 'Total Price'}
|
||||
</span>
|
||||
<span className="text-xl font-bold text-cyan-glow">
|
||||
{formatPrice(currentVariant?.price)}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="flex-1 py-3.5 bg-cyan-glow text-night-900 font-bold rounded-lg tracking-widest uppercase hover:brightness-110 shadow-[0_0_15px_rgba(102,252,241,0.3)] transition-all flex justify-center items-center gap-2"
|
||||
>
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { API_BASE, type Category, type Article } from '../types'
|
||||
|
||||
export default function ScentGuidePage() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [articles, setArticles] = useState<Article[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
|
||||
fetch(`${API_BASE}/articles?publishedOnly=true`).then(r => r.json()).then(setArticles).catch(console.error)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Header */}
|
||||
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Journal</p>
|
||||
<h1 className="text-5xl font-bold">Scent Guide</h1>
|
||||
<p className="text-slate-400 max-w-lg mx-auto">
|
||||
Explore our collection of articles, guides, and sensory knowledge.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 max-w-7xl mx-auto px-6 py-16 w-full">
|
||||
{articles.length === 0 ? (
|
||||
<div className="text-center text-slate-500 italic py-20">
|
||||
Articles coming soon. Check back later!
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{articles.map(article => (
|
||||
<Link
|
||||
key={article.id}
|
||||
to={`/article/${article.slug}`}
|
||||
className="group block bg-night-950 rounded-2xl overflow-hidden border border-white/5 hover:border-cyan-glow/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl flex flex-col"
|
||||
>
|
||||
<div className="aspect-[4/3] bg-night-900 overflow-hidden shrink-0">
|
||||
{article.coverImage ? (
|
||||
<img src={article.coverImage} alt={article.title} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500" />
|
||||
) : (
|
||||
<div className="w-full h-full bg-white/5 flex items-center justify-center">
|
||||
<span className="text-slate-600 text-sm tracking-widest uppercase">No Image</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-6 space-y-3 flex-1 flex flex-col">
|
||||
<p className="text-[10px] text-cyan-glow font-bold tracking-widest uppercase">
|
||||
{new Date(article.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
<h3 className="text-xl font-bold leading-tight group-hover:text-cyan-glow transition-colors">{article.title}</h3>
|
||||
{/* Remove HTML tags for purely excerpt preview */}
|
||||
<div className="text-slate-400 text-sm line-clamp-3" dangerouslySetInnerHTML={{ __html: article.content }} />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useSearchParams, Link } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import ProductCard from '../components/ProductCard'
|
||||
import { API_BASE, type Category, type Product } from '../types'
|
||||
|
||||
export default function SearchPage() {
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const query = searchParams.get('q') ?? ''
|
||||
|
||||
const [input, setInput] = useState(query)
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [products, setProducts] = useState<Product[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [searched, setSearched] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
|
||||
}, [])
|
||||
|
||||
const doSearch = useCallback(async (q: string) => {
|
||||
if (!q.trim()) { setProducts([]); setSearched(false); return }
|
||||
setLoading(true)
|
||||
setSearched(true)
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/products?search=${encodeURIComponent(q)}`)
|
||||
const paginated = await res.json()
|
||||
setProducts(paginated.data || [])
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Search when URL query changes
|
||||
useEffect(() => {
|
||||
setInput(query)
|
||||
doSearch(query)
|
||||
}, [query, doSearch])
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSearchParams(input.trim() ? { q: input.trim() } : {})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Search Header */}
|
||||
<div className="pt-32 pb-16 px-6 bg-night-800/20 border-b border-white/5">
|
||||
<div className="max-w-3xl mx-auto space-y-6 text-center">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">
|
||||
Discover
|
||||
</p>
|
||||
<h1 className="text-5xl font-bold">Search Products</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="relative">
|
||||
<div className="flex glass border border-white/10 rounded-2xl overflow-hidden focus-within:border-cyan-glow/40 transition-colors">
|
||||
<svg className="w-5 h-5 text-slate-400 m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Search by scent name, category..."
|
||||
className="bg-transparent border-none outline-none text-base p-4 pl-0 w-full text-white placeholder-slate-500"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-white text-night-900 px-8 font-bold text-xs uppercase tracking-widest hover:bg-cyan-glow transition-colors shrink-0"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Quick category links */}
|
||||
<div className="flex flex-wrap justify-center gap-2 pt-2">
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
to={`/search?q=${encodeURIComponent(cat.name)}`}
|
||||
className="glass px-4 py-1.5 rounded-full text-xs font-medium hover:border-cyan-glow/30 hover:text-cyan-glow transition-all duration-300"
|
||||
>
|
||||
{cat.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="max-w-7xl mx-auto px-6 py-16 space-y-8">
|
||||
{!searched && !query && (
|
||||
<div className="text-center py-20 space-y-3 text-slate-500">
|
||||
<p className="text-5xl">🔍</p>
|
||||
<p className="text-lg text-slate-400">Type something to discover our collection</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{searched && (
|
||||
<p className="text-slate-400 text-sm">
|
||||
{loading ? 'Searching...' : `${products.length} result${products.length !== 1 ? 's' : ''} for `}
|
||||
{!loading && <span className="text-white font-semibold">"{query}"</span>}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
|
||||
))}
|
||||
</div>
|
||||
) : searched && products.length === 0 ? (
|
||||
<div className="text-center py-20 space-y-4">
|
||||
<p className="text-5xl">🌿</p>
|
||||
<p className="text-xl text-slate-400">No results found</p>
|
||||
<p className="text-slate-500 text-sm">Try a different keyword or browse our categories</p>
|
||||
<Link to="/shop" className="inline-block mt-4 px-8 py-3 bg-white/10 hover:bg-white hover:text-night-900 text-white font-bold rounded-lg uppercase tracking-widest text-xs transition-all duration-300">
|
||||
Browse All Products
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{products.map((p) => <ProductCard key={p.id} product={p} />)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import ProductCard from '../components/ProductCard'
|
||||
import { API_BASE, type Category, type Product } from '../types'
|
||||
|
||||
export default function ShopPage() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [products, setProducts] = useState<Product[]>([])
|
||||
const [activeCategory, setActiveCategory] = useState<number | null>(null)
|
||||
const [searchInput, setSearchInput] = useState('')
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const location = useLocation()
|
||||
|
||||
// Local progressive rendering
|
||||
const [displayCount, setDisplayCount] = useState(24)
|
||||
const loaderRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const [totalProducts, setTotalProducts] = useState(0)
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [productsLoading, setProductsLoading] = useState(false)
|
||||
|
||||
// Handle coupon from URL
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams(location.search)
|
||||
const coupon = params.get('coupon')
|
||||
if (coupon) {
|
||||
localStorage.setItem('irelax_active_coupon', coupon)
|
||||
// Optionally clean URL
|
||||
window.history.replaceState({}, document.title, window.location.pathname)
|
||||
}
|
||||
}, [location])
|
||||
|
||||
// Fetch categories
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`)
|
||||
.then((r) => r.json())
|
||||
.then((data: Category[]) => {
|
||||
setCategories(data)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch(console.error)
|
||||
}, [])
|
||||
|
||||
// Debounce search input
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setSearchQuery(searchInput)
|
||||
}, 400)
|
||||
return () => clearTimeout(timer)
|
||||
}, [searchInput])
|
||||
|
||||
// Reset scroll and displayCount when category or search changes
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
setDisplayCount(24)
|
||||
}, [activeCategory, searchQuery])
|
||||
|
||||
// Fetch products
|
||||
useEffect(() => {
|
||||
setProductsLoading(true)
|
||||
|
||||
const params = new URLSearchParams()
|
||||
params.append('limit', '1000') // fetch all matching items locally
|
||||
if (activeCategory) params.append('categoryId', activeCategory.toString())
|
||||
if (searchQuery.trim()) params.append('search', searchQuery.trim())
|
||||
|
||||
fetch(`${API_BASE}/products?${params.toString()}`)
|
||||
.then((r) => r.json())
|
||||
.then((data: { data: Product[], meta?: any }) => {
|
||||
setProducts(data.data || [])
|
||||
if (data.meta) {
|
||||
setTotalProducts(data.meta.total || 0)
|
||||
}
|
||||
})
|
||||
.catch(console.error)
|
||||
.finally(() => setProductsLoading(false))
|
||||
}, [activeCategory, searchQuery])
|
||||
|
||||
// Intersection Observer for infinite scroll
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && products.length > displayCount) {
|
||||
setDisplayCount((prev) => Math.min(prev + 12, products.length))
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: '200px' }
|
||||
)
|
||||
|
||||
if (loaderRef.current) observer.observe(loaderRef.current)
|
||||
return () => observer.disconnect()
|
||||
}, [products.length, displayCount, productsLoading])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Page Header */}
|
||||
<div className="pt-32 pb-12 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/30">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">
|
||||
All Products
|
||||
</p>
|
||||
<h1 className="text-5xl font-bold tracking-tight">The Collection</h1>
|
||||
<p className="text-slate-400 max-w-md mx-auto">
|
||||
Browse our full range of premium aroma products — crafted to elevate every space.
|
||||
</p>
|
||||
|
||||
{/* Search */}
|
||||
<div className="max-w-md mx-auto mt-6">
|
||||
<div className="flex glass border border-white/10 rounded-xl overflow-hidden">
|
||||
<svg className="w-4 h-4 text-slate-400 m-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by scent or category..."
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 py-12 space-y-10">
|
||||
{/* Category Filter Tabs */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
onClick={() => setActiveCategory(null)}
|
||||
className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
activeCategory === null
|
||||
? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
|
||||
: 'glass hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setActiveCategory(cat.id)}
|
||||
className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
activeCategory === cat.id
|
||||
? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
|
||||
: 'glass hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{cat.name}
|
||||
{cat._count && (
|
||||
<span className="ml-2 opacity-60">({cat._count.products})</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Results count */}
|
||||
{(!loading) && (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-slate-500 text-sm">
|
||||
{productsLoading ? 'Loading...' : `${totalProducts} products`}
|
||||
</p>
|
||||
{activeCategory && (
|
||||
<Link
|
||||
to={`/category/${activeCategory}`}
|
||||
className="text-cyan-glow text-xs font-bold uppercase tracking-widest hover:underline"
|
||||
>
|
||||
View Category Page →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Products Grid */}
|
||||
{loading || productsLoading ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
|
||||
))}
|
||||
</div>
|
||||
) : products.length === 0 ? (
|
||||
<div className="text-center py-24 text-slate-500 space-y-3">
|
||||
<p className="text-4xl">🌿</p>
|
||||
<p className="text-lg">No products found</p>
|
||||
<p className="text-sm">Try adjusting your search or filter</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{products.slice(0, displayCount).map((p) => (
|
||||
<ProductCard key={p.id} product={p} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Invisible target for IntersectionObserver */}
|
||||
{displayCount < products.length && (
|
||||
<div ref={loaderRef} className="py-12 flex justify-center">
|
||||
<div className="w-8 h-8 rounded-full border-2 border-cyan-glow border-t-transparent animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate, Link } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { API_BASE, type Category } from '../types'
|
||||
import { Search, MapPin, Package, Loader2, ChevronRight } from 'lucide-react'
|
||||
|
||||
export default function TrackOrderPage() {
|
||||
const navigate = useNavigate()
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [localOrders, setLocalOrders] = useState<number[]>([])
|
||||
|
||||
const [orderId, setOrderId] = useState('')
|
||||
const [phone, setPhone] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`)
|
||||
.then(res => res.json())
|
||||
.then(setCategories)
|
||||
.catch(console.error)
|
||||
|
||||
// Load local orders
|
||||
const storedStr = localStorage.getItem('irelax_local_orders')
|
||||
if (storedStr) {
|
||||
setLocalOrders(JSON.parse(storedStr))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleTrackForm = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/orders/track`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
orderId: parseInt(orderId.replace(/[^0-9]/g, ''), 10) || 0,
|
||||
phone
|
||||
})
|
||||
})
|
||||
const data = await res.json()
|
||||
|
||||
if (res.ok && data.success) {
|
||||
// Automatically save to local history so they don't have to type it again
|
||||
if (!localOrders.includes(data.orderId)) {
|
||||
const newOrders = [data.orderId, ...localOrders]
|
||||
setLocalOrders(newOrders)
|
||||
localStorage.setItem('irelax_local_orders', JSON.stringify(newOrders))
|
||||
}
|
||||
navigate(`/order/${data.orderId}`)
|
||||
} else {
|
||||
setError(data.error || 'Failed to authenticate order details.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('An error occurred. Please check your internet connection.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
<main className="flex-1 max-w-4xl w-full mx-auto px-6 flex flex-col justify-center pt-32 pb-24 space-y-12 animate-fade-in">
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-4">
|
||||
<div className="w-16 h-16 bg-cyan-glow/10 rounded-full flex items-center justify-center mx-auto border border-cyan-glow/20">
|
||||
<MapPin className="w-8 h-8 text-cyan-glow" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold tracking-tight">Track Your Status</h1>
|
||||
<p className="text-slate-400">Enter your order details below to check shipping status or upload payment slips.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
|
||||
{/* Tracking Form */}
|
||||
<div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6 self-start">
|
||||
<h2 className="text-lg font-bold uppercase tracking-widest border-b border-white/10 pb-4 flex items-center gap-2 text-cyan-glow">
|
||||
<Search className="w-5 h-5" /> Manual Search
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleTrackForm} className="space-y-5">
|
||||
{error && (
|
||||
<div className="p-4 bg-rose-500/10 border border-rose-500/20 text-rose-400 rounded-lg text-sm text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase font-bold tracking-widest text-slate-500">Order Number (ID)</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={orderId}
|
||||
onChange={e => setOrderId(e.target.value)}
|
||||
className="w-full bg-night-950 border border-white/10 rounded-lg p-3.5 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all placeholder:text-slate-600"
|
||||
placeholder="e.g. 1024"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase font-bold tracking-widest text-slate-500">Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
required
|
||||
value={phone}
|
||||
onChange={e => setPhone(e.target.value)}
|
||||
className="w-full bg-night-950 border border-white/10 rounded-lg p-3.5 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all placeholder:text-slate-600"
|
||||
placeholder="The phone number used during checkout"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-4 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_20px_rgba(102,252,241,0.3)] transition-all duration-500 disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Find Order'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Local Order History */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-bold uppercase tracking-widest border-b border-white/10 pb-4 flex items-center gap-2 text-white">
|
||||
<Package className="w-5 h-5 text-slate-400" /> Recent Device Orders
|
||||
</h2>
|
||||
|
||||
{localOrders.length === 0 ? (
|
||||
<div className="text-center py-12 bg-white/5 rounded-2xl border border-dashed border-white/10 space-y-3">
|
||||
<p className="text-slate-500 text-sm">No recent orders found on this device.</p>
|
||||
<p className="text-[10px] uppercase text-slate-600 tracking-widest">Use manual search if you ordered elsewhere</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{localOrders.map((id) => (
|
||||
<Link
|
||||
key={id}
|
||||
to={`/order/${id}`}
|
||||
className="flex justify-between items-center p-5 bg-white/5 rounded-xl border border-white/5 hover:bg-white/10 hover:border-cyan-glow/50 transition-all group"
|
||||
>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-widest mb-1">Order</p>
|
||||
<p className="text-xl font-bold font-mono text-cyan-glow">#{id.toString().padStart(4, '0')}</p>
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full bg-night-950 flex items-center justify-center group-hover:bg-cyan-glow transition-colors">
|
||||
<ChevronRight className="w-5 h-5 text-slate-500 group-hover:text-night-900" />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { create } from "zustand";
|
||||
import { persist } from "zustand/middleware";
|
||||
|
||||
export interface Customer {
|
||||
id: number;
|
||||
lineUserId: string;
|
||||
displayName: string | null;
|
||||
pictureUrl: string | null;
|
||||
email: string | null;
|
||||
phone: string | null;
|
||||
}
|
||||
|
||||
interface AuthState {
|
||||
token: string | null;
|
||||
customer: Customer | null;
|
||||
isLiffInitialized: boolean;
|
||||
setAuth: (token: string, customer: Customer) => void;
|
||||
setLiffInitialized: (status: boolean) => void;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
export const useAuthStore = create<AuthState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
token: null,
|
||||
customer: null,
|
||||
isLiffInitialized: false,
|
||||
setAuth: (token, customer) => set({ token, customer }),
|
||||
setLiffInitialized: (isLiffInitialized) => set({ isLiffInitialized }),
|
||||
logout: () => set({ token: null, customer: null }),
|
||||
}),
|
||||
{
|
||||
name: "irelax-auth-storage",
|
||||
partialize: (state) => ({ token: state.token, customer: state.customer }), // don't persist isLiffInitialized
|
||||
}
|
||||
)
|
||||
);
|
||||
@@ -0,0 +1,78 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
import type { CartItem } from '@homaroma/types';
|
||||
|
||||
interface CartState {
|
||||
items: CartItem[];
|
||||
isCartOpen: boolean;
|
||||
addToCart: (item: Omit<CartItem, 'cartItemId'>) => void;
|
||||
removeFromCart: (cartItemId: string) => void;
|
||||
updateQuantity: (cartItemId: string, quantity: number) => void;
|
||||
clearCart: () => void;
|
||||
toggleCart: (isOpen?: boolean) => void;
|
||||
getCartTotal: () => number;
|
||||
getCartCount: () => number;
|
||||
}
|
||||
|
||||
export const useCartStore = create<CartState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
items: [],
|
||||
isCartOpen: false,
|
||||
|
||||
addToCart: (item) => set((state) => {
|
||||
// Build a unique ID for the item. If variantId exists, use it. Otherwise, use productId.
|
||||
const exactIdMatch = state.items.find(i =>
|
||||
i.productId === item.productId && i.variantId === item.variantId
|
||||
);
|
||||
|
||||
if (exactIdMatch) {
|
||||
// Increment quantity if exact match exists
|
||||
return {
|
||||
items: state.items.map(i =>
|
||||
i.cartItemId === exactIdMatch.cartItemId
|
||||
? { ...i, quantity: i.quantity + item.quantity }
|
||||
: i
|
||||
),
|
||||
isCartOpen: true
|
||||
};
|
||||
}
|
||||
|
||||
// Add new item with a generated cartItemId
|
||||
const cartItemId = crypto.randomUUID();
|
||||
return {
|
||||
items: [...state.items, { ...item, cartItemId }],
|
||||
isCartOpen: true
|
||||
};
|
||||
}),
|
||||
|
||||
removeFromCart: (cartItemId) => set((state) => ({
|
||||
items: state.items.filter(i => i.cartItemId !== cartItemId)
|
||||
})),
|
||||
|
||||
updateQuantity: (cartItemId, quantity) => set((state) => ({
|
||||
items: state.items.map(i =>
|
||||
i.cartItemId === cartItemId ? { ...i, quantity: Math.max(1, quantity) } : i
|
||||
)
|
||||
})),
|
||||
|
||||
clearCart: () => set({ items: [] }),
|
||||
|
||||
toggleCart: (isOpen) => set((state) => ({
|
||||
isCartOpen: isOpen !== undefined ? isOpen : !state.isCartOpen
|
||||
})),
|
||||
|
||||
getCartTotal: () => {
|
||||
return get().items.reduce((total, item) => total + (item.price * item.quantity), 0);
|
||||
},
|
||||
|
||||
getCartCount: () => {
|
||||
return get().items.reduce((count, item) => count + item.quantity, 0);
|
||||
}
|
||||
}),
|
||||
{
|
||||
name: 'irelax-cart-storage',
|
||||
partialize: (state) => ({ items: state.items }), // Only persist items, not UI state
|
||||
}
|
||||
)
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
export * from '@homaroma/types'
|
||||
Reference in new issue
Block a user