// screens-feed.jsx — feed store (المتجر): products list, product detail, cart, + orders (طلباتي)
(function(){
const { useState } = React;
const Icon = window.Icon;
const { Header, Badge, Segmented, ProductThumb, KV, SectionTitle, SecureNote } = window;
const fmt = (n)=> Number(n).toFixed(3);
// ── cart button for headers (with live count) ──
function CartButton({ count, onClick }){
return (
);
}
// ── quantity stepper ──
function Stepper({ value, onChange, min=1 }){
return (
{value}
);
}
/* ───────────────────────── STORE (products list) ───────────────────────── */
function ProductCard({ id, p, onOpen, onAdd }){
return (
{p.name}
{p.note} · {p.weight}
{fmt(p.price)} د.ك
);
}
function FeedListScreen({ go, cart, addToCart }){
const D = window.DATA;
const [cat,setCat] = useState('الكل');
const count = cart.reduce((s,c)=>s+c.qty,0);
const keys = Object.keys(D.products).filter(k=> cat==='الكل' ? true : D.products[k].cat===cat);
const cats = D.shopCats.map(c=>({ id:c, label:c }));
return (
go('cart')} />} />
{/* search (decorative) */}
{/* category chips */}
{/* products grid */}
{keys.map(k=>(
go('product',{id:k})}
onAdd={()=>addToCart(k,1)} />
))}
);
}
/* ───────────────────────── PRODUCT DETAIL ───────────────────────── */
function ProductDetailScreen({ back, params, go, cart, addToCart }){
const D = window.DATA;
const id = params.id;
const p = D.products[id];
const [qty,setQty] = useState(1);
const count = cart.reduce((s,c)=>s+c.qty,0);
return (
go('cart')} />} />
{/* hero image */}
{/* title row */}
{/* price + spec chips */}
{fmt(p.price)} د.ك
/ {p.unit}
{p.weight}
{p.cat}
{/* description */}
{/* quantity */}
الكمية
);
}
/* ───────────────────────── CART ───────────────────────── */
function CartScreen({ back, go, cart, setQty, removeItem, clearCart }){
const D = window.DATA;
const [placed,setPlaced] = useState(false);
const sub = cart.reduce((s,c)=> s + D.products[c.id].price*c.qty, 0);
const ship = cart.length ? (sub>=20 ? 0 : 2) : 0;
const total = sub + ship;
if(placed){
return (
تم استلام طلبك!
سيتم تجهيز طلبك وتوصيله في أقرب وقت. يمكنك متابعة حالته من طلباتي.
);
}
if(!cart.length){
return (
سلتك فارغة
أضف بعض الأعلاف لتبدأ طلبك
);
}
return (
} />
{/* items */}
{cart.map((c,i)=>{
const p = D.products[c.id];
return (
{p.name}
{p.weight}
{fmt(p.price*c.qty)} د.ك
setQty(c.id,q)}/>
);
})}
{/* summary */}
ملخص الطلب
{sub<20 && أضف {fmt(20-sub)} د.ك للحصول على توصيل مجاني
}
);
}
/* ───────────────────────── ORDERS (now under المزيد) ───────────────────────── */
const FILTERS = [
{ id:'all', label:'الكل' },
{ id:'preparing', label:'قيد التجهيز' },
{ id:'delivering', label:'قيد التوصيل' },
{ id:'delivered', label:'تم التوصيل' },
{ id:'cancelled', label:'ملغي' },
];
function OrderCard({ o, onOpen }){
const D = window.DATA;
return (
{o.items.slice(0,3).map((it,i)=>(
))}
{o.place}
{o.date} · {o.time}
);
}
function OrdersScreen({ go, back }){
const D = window.DATA;
const [filter,setFilter] = useState('all');
const list = D.orders.filter(o=> filter==='all' ? true : o.status===filter);
const totalAll = D.orders.reduce((s,o)=> s + parseFloat(o.total), 0).toFixed(3);
return (
} />
{/* summary strip */}
{D.orders.length} طلبات
إجمالي الطلبات
{totalAll} د.ك
{list.length ? list.map(o=>(
go('feedDetail',{order:ord})}/>))
: لا توجد طلبات في هذه الحالة
}
);
}
function FeedDetailScreen({ back, params }){
const D = window.DATA;
const o = params.order;
return (
} />
{/* order head */}
{o.id}
{o.date} · {o.time}
{/* status timeline */}
حالة الطلب
{o.track.map((s,i)=>(
))}
{/* products */}
المنتجات
{o.items.map((it,i)=>{
const p = D.products[it.p];
return (
{p.name}
{p.note} · {it.unit}
{it.price} د.ك × {it.qty}
{it.total} د.ك
);
})}
{/* summary */}
ملخص الطلب
طريقة الدفع: {o.pay}
{/* delivery */}
معلومات التوصيل
{o.place}
شارع 52 - منزل 10
موعد التوصيل: {o.date} - 02:00 م
);
}
Object.assign(window, { FeedListScreen, ProductDetailScreen, CartScreen, OrdersScreen, FeedDetailScreen });
})();