-
setQuickViewMachine(machine)}
- />
-
-
-
- {machine.shortLabel}
-
-
- {machine.name}
-
-
- {machine.description}
-
-
- {machine.priceLabel}
-
-
-
-
+ {t.machines.map(machine => (
+
+
+
+
+
{machine.shortLabel}
+
{machine.name}
+
{machine.description}
{machine.priceLabel}
+
+
+
+ {commerceCopy[locale].details}
+
-
+
))}
-
-
setQuickViewMachine(null)}
- footer={null}
- centered
- title={quickViewMachine?.name}
- >
- {quickViewMachine && (
-
-
-
{quickViewMachine.description}
-
{quickViewMachine.priceLabel}
-
-
);
}
diff --git a/components/ProductDetails.tsx b/components/ProductDetails.tsx
new file mode 100644
index 0000000..48b6e21
--- /dev/null
+++ b/components/ProductDetails.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import {useState} from 'react';
+import Link from 'next/link';
+import {CheckCircleOutlined} from '@ant-design/icons';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {commerceCopy} from '@/data/commerce';
+import QuantityControl from './QuantityControl';
+
+export default function ProductDetails({id}: {id: string}) {
+ const {t, locale} = useLanguage();
+ const copy = commerceCopy[locale];
+ const machine = t.machines.find(item => item.id === id);
+ const [alternate, setAlternate] = useState(false);
+ if (!machine) return null;
+
+ return (
+
+
+
+
+ 
+
+ {[false, true].map(value => (
+
+ ))}
+
+
+ {machine.shortLabel}
+ {machine.name}
+ {machine.description}
+ {copy.model}: {machine.id.toUpperCase()}
+ {copy.specifications}
+
+ {machine.highlights.map(feature => - {feature}
)}
+
+
+
{copy.unitPrice}
+
{machine.priceLabel}
+
+
+ {copy.cartLink}
+
+
{copy.checkoutUnavailable}
+
+
+ );
+}
diff --git a/components/QuantityControl.tsx b/components/QuantityControl.tsx
new file mode 100644
index 0000000..d9db218
--- /dev/null
+++ b/components/QuantityControl.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import {Button} from 'antd';
+import {MinusOutlined, PlusOutlined} from '@ant-design/icons';
+import type {CartProduct} from '@/types/domain';
+import {useAppDispatch, useAppSelector} from '@/store/hooks';
+import {addToCart, decrementQty} from '@/store/cartSlice';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {commerceCopy} from '@/data/commerce';
+
+export default function QuantityControl({product}: {product: CartProduct}) {
+ const dispatch = useAppDispatch();
+ const {locale} = useLanguage();
+ const copy = commerceCopy[locale];
+ const quantity = useAppSelector(state => state.cart.items.find(item => item.id === product.id)?.qty ?? 0);
+
+ return (
+
+
+ );
+}
diff --git a/components/VendingCard.tsx b/components/VendingCard.tsx
index b59ac06..c6886dc 100644
--- a/components/VendingCard.tsx
+++ b/components/VendingCard.tsx
@@ -4,17 +4,15 @@
import type {Machine} from '@/types/domain';
import type {MouseEvent} from 'react';
import {useRef} from 'react';
-import {Button, message} from 'antd';
-import {ShoppingCartOutlined, EyeOutlined} from '@ant-design/icons';
-import {useAppDispatch} from '@/store/hooks';
-import {addToCart} from '@/store/cartSlice';
+import Link from 'next/link';
+import QuantityControl from './QuantityControl';
+import {commerceCopy} from '@/data/commerce';
import {useLanguage} from '@/app/context/LanguageContext';
import FloatingItems from './FloatingItems';
import {floatingSnacks} from '@/data/content';
-export default function VendingCard({machine, onQuickView}: {machine: Machine; onQuickView?: (machine: Machine) => void}) {
- const dispatch = useAppDispatch();
- const {t, dir} = useLanguage();
+export default function VendingCard({machine}: {machine: Machine}) {
+ const {t, dir, locale} = useLanguage();
const stageRef = useRef
(null);
const lensRef = useRef(null);
const revealRef = useRef(null);
@@ -38,19 +36,6 @@ export default function VendingCard({machine, onQuickView}: {machine: Machine; o
if (revealRef.current) revealRef.current.style.clipPath = 'circle(0px at 50% 50%)';
};
- const handleAddToCart = () => {
- dispatch(
- addToCart({
- id: machine.id,
- name: machine.name,
- priceNumeric: machine.priceNumeric,
- priceLabel: machine.priceLabel,
- image: machine.image,
- })
- );
- message.success(t.cart.addToast(machine.name));
- };
-
return (
@@ -103,12 +88,10 @@ export default function VendingCard({machine, onQuickView}: {machine: Machine; o
{machine.priceLabel}
- {/* */}
-
+
+
+ {commerceCopy[locale].details}
+
diff --git a/data/commerce.ts b/data/commerce.ts
new file mode 100644
index 0000000..2994808
--- /dev/null
+++ b/data/commerce.ts
@@ -0,0 +1,52 @@
+import type {Locale} from '@/types/domain';
+
+const fa = {
+ details: 'جزئیات محصول',
+ increase: 'افزایش تعداد',
+ decrease: 'کاهش تعداد',
+ quantity: 'تعداد',
+ remove: 'حذف از سبد',
+ continueShopping: 'مشاهده دستگاهها',
+ cartDescription: 'دستگاههای انتخابشده و تعداد آنها را اینجا بررسی کنید.',
+ summary: 'خلاصه سبد خرید',
+ unitPrice: 'قیمت هر دستگاه',
+ lineTotal: 'جمع این دستگاه',
+ currency: 'ریال',
+ cartLink: 'مشاهده سبد خرید',
+ specifications: 'ویژگیهای دستگاه',
+ model: 'مدل دستگاه',
+ gallery: 'تصاویر دستگاه',
+ baseImage: 'نمای اصلی',
+ alternateImage: 'نمای جایگزین',
+ developmentTitle: 'روبات مارکت در حال توسعه است',
+ developmentMessage: 'به روبات مارکت خوش آمدید. سایت در حال توسعه است و هنوز تمام بخشهای آن تکمیل نشدهاند. در حال حاضر میتوانید دستگاهها را بررسی و به سبد خرید اضافه کنید، اما ثبت نهایی سفارش و پرداخت آنلاین فعال نیست.',
+ acknowledge: 'متوجه شدم، ادامه میدهم',
+ checkoutUnavailable: 'ثبت نهایی سفارش و پرداخت آنلاین هنوز فعال نیست.',
+};
+
+export const commerceCopy: Record> = {
+ fa,
+ en: {
+ details: 'Product details',
+ increase: 'Increase quantity',
+ decrease: 'Decrease quantity',
+ quantity: 'Quantity',
+ remove: 'Remove from cart',
+ continueShopping: 'Browse machines',
+ cartDescription: 'Review your selected machines and adjust their quantities.',
+ summary: 'Cart summary',
+ unitPrice: 'Unit price',
+ lineTotal: 'Item total',
+ currency: 'Rials',
+ cartLink: 'View cart',
+ specifications: 'Machine features',
+ model: 'Machine model',
+ gallery: 'Machine images',
+ baseImage: 'Main view',
+ alternateImage: 'Alternate view',
+ developmentTitle: 'Robot Market is under development',
+ developmentMessage: 'Welcome to Robot Market. Our website is still under development and some features are not yet complete. You can explore machines and add them to your cart, but order submission and online payment are not available yet.',
+ acknowledge: 'Got it, continue',
+ checkoutUnavailable: 'Order submission and online payment are not available yet.',
+ },
+};
diff --git a/data/content.ts b/data/content.ts
index faca087..647afe5 100644
--- a/data/content.ts
+++ b/data/content.ts
@@ -138,7 +138,6 @@ export const content: Record = {
},
machineActions: {
addToCart: 'افزودن به سبد خرید',
- quickView: 'مشاهده سریع',
wishlistAdd: 'افزودن به علاقهمندیها',
wishlistRemove: 'حذف از علاقهمندیها',
hoverHint: 'نشانگر را روی دستگاه حرکت دهید',
@@ -304,7 +303,6 @@ export const content: Record = {
},
machineActions: {
addToCart: 'Add to Cart',
- quickView: 'Quick View',
wishlistAdd: 'Add to Wishlist',
wishlistRemove: 'Remove from Wishlist',
hoverHint: 'Move your cursor over the machine',
diff --git a/store/cartSlice.ts b/store/cartSlice.ts
index 7e5230a..284b743 100644
--- a/store/cartSlice.ts
+++ b/store/cartSlice.ts
@@ -1,17 +1,19 @@
import type {PayloadAction} from '@reduxjs/toolkit';
-import type {CartProduct, CartState} from '@/types/domain';
+import type {CartItem, CartProduct, CartState} from '@/types/domain';
import type {RootState} from './store';
import { createSlice } from '@reduxjs/toolkit';
const initialState: CartState = {
items: [], // { id, name, priceNumeric, priceLabel, qty, image }
- isDrawerOpen: false,
};
const cartSlice = createSlice({
name: 'cart',
initialState,
reducers: {
+ restoreCart: (state, action: PayloadAction) => {
+ state.items = action.payload;
+ },
addToCart: (state, action: PayloadAction) => {
const product = action.payload;
const existing = state.items.find((item) => item.id === product.id);
@@ -20,7 +22,6 @@ const cartSlice = createSlice({
} else {
state.items.push({ ...product, qty: 1 });
}
- state.isDrawerOpen = true;
},
removeFromCart: (state, action: PayloadAction) => {
state.items = state.items.filter((item) => item.id !== action.payload);
@@ -46,28 +47,17 @@ const cartSlice = createSlice({
clearCart: (state) => {
state.items = [];
},
- openDrawer: (state) => {
- state.isDrawerOpen = true;
- },
- closeDrawer: (state) => {
- state.isDrawerOpen = false;
- },
- toggleDrawer: (state) => {
- state.isDrawerOpen = !state.isDrawerOpen;
- },
},
});
export const {
+ restoreCart,
addToCart,
removeFromCart,
setQuantity,
incrementQty,
decrementQty,
clearCart,
- openDrawer,
- closeDrawer,
- toggleDrawer,
} = cartSlice.actions;
// Selectors
@@ -76,6 +66,5 @@ export const selectCartCount = (state: RootState) =>
state.cart.items.reduce((sum, item) => sum + item.qty, 0);
export const selectCartTotal = (state: RootState) =>
state.cart.items.reduce((sum, item) => sum + item.qty * item.priceNumeric, 0);
-export const selectIsDrawerOpen = (state: RootState) => state.cart.isDrawerOpen;
export default cartSlice.reducer;
diff --git a/types/domain.ts b/types/domain.ts
index 4c26c70..0e155d4 100644
--- a/types/domain.ts
+++ b/types/domain.ts
@@ -17,7 +17,7 @@ export interface Machine {
export type CartProduct = Pick;
export interface CartItem extends CartProduct { qty: number }
-export interface CartState { items: CartItem[]; isDrawerOpen: boolean }
+export interface CartState { items: CartItem[] }
export interface FloatingSnack {
id: string;
@@ -59,7 +59,6 @@ export interface SiteContent {
};
machineActions: {
addToCart: string;
- quickView: string;
wishlistAdd: string;
wishlistRemove: string;
hoverHint: string;