// Storefront / Salla store mockup - clean light theme. // Used as the right-half of split scenes. Shows products, cart, order pages. Object.assign(STRINGS.ar, { // Header / nav sf_store_name_default: 'متجر أحمد', sf_store_logo_initial: 'أ', sf_nav_home: 'الرئيسية', sf_nav_products: 'المنتجات', sf_nav_categories: 'التصنيفات', sf_nav_contact: 'تواصل معنا', // Page titles sf_page_products_title: 'منتجاتنا', sf_empty_no_products: 'لا توجد منتجات', sf_empty_no_products_yet: 'لا توجد منتجات بعد', sf_page_orders_admin_title: 'إدارة المتجر — الطلبات', sf_page_coupons_admin_title: 'إدارة المتجر — الكوبونات', sf_page_coupons_title: 'كوبونات الخصم', sf_empty_no_coupons: 'لا توجد كوبونات', sf_page_dashboard_title: 'لوحة المتجر — أمس', sf_page_yesterday_stats: 'إحصائيات أمس', sf_page_cart_title: 'سلة المشتريات', sf_page_checkout_title: 'إتمام الطلب', sf_page_checkout_step_final: 'الخطوة الأخيرة', sf_page_products_admin_title: 'إدارة المتجر — المنتجات', sf_page_products_admin_heading: 'المنتجات', // Product detail sf_category_homewares: 'أدوات منزلية', sf_in_stock: 'متوفر حالياً', sf_btn_add_to_cart: 'إضافة للسلة', // Order page sf_order_label_prefix: 'الطلب', sf_order_status_label: 'الحالة', sf_order_customer_label: 'العميل', sf_order_city_label: 'المدينة', sf_order_items_label: 'المنتجات', sf_order_total_label: 'الإجمالي', sf_order_items_unit: 'منتج', sf_order_default_customer: 'أحمد محمد', sf_order_default_city: 'جدة', sf_order_default_total: '149 ر.س', sf_order_default_status: 'قيد المراجعة', sf_order_tracking_label: 'رقم التتبع', sf_order_tracking_sent: '✓ تم إرسال رسالة التتبع للعميل', // Coupons sf_coupon_discount_label: 'خصم', sf_coupon_expires_label: 'ينتهي', sf_coupon_status_active: 'فعّال', sf_coupon_status_paused: 'متوقف', // Stats sf_stat_new_orders: 'طلبات جديدة', sf_stat_revenue: 'الإيرادات', sf_stat_currency_unit: 'ر.س', sf_stat_abandoned: 'سلات متروكة', sf_stat_recovered_auto: 'مسترجعة تلقائياً', sf_ai_suggestion_label: 'اقتراح من وكيل الذكاء', sf_ai_suggestion_text: 'فعّل شحن مجاني فوق 200 ريال — المتاجر المشابهة شافت زيادة 23% في المبيعات', // Cart sf_cart_qty_label: 'الكمية', sf_cart_total_label: 'الإجمالي', sf_cart_currency_short: 'ر.س', sf_cart_freeship_met: 'حصلت على شحن مجاني!', sf_cart_freeship_remaining_a: 'باقي', sf_cart_freeship_remaining_b: 'ر.س للحصول على شحن مجاني', // Checkout sf_checkout_default_store: 'متجر القهوة المختصة', sf_checkout_default_customer: 'نوره العتيبي', sf_checkout_default_city: 'الرياض', sf_checkout_address_label: 'عنوان الشحن', sf_checkout_district: 'حي العليا', sf_checkout_payment_label: 'طريقة الدفع', sf_checkout_order_summary: 'ملخص الطلب', sf_checkout_qty: 'الكمية', sf_checkout_subtotal: 'المجموع الفرعي', sf_checkout_shipping: 'الشحن', sf_checkout_total: 'الإجمالي', sf_checkout_confirm_btn: 'تأكيد الطلب 🚚', // Admin products sf_admin_stock_prefix: 'المخزون:', sf_admin_stock_unit: 'قطعة', sf_admin_status_hidden: '⊝ مخفي', sf_admin_status_active: '● مفعّل', sf_admin_stat_total: 'إجمالي المنتجات', sf_admin_stat_visible: 'المرئية', sf_admin_stat_out_of_stock: 'مخزون صفر', // Cart toast sf_toast_added: 'تمت الإضافة للسلة', sf_toast_view_cart: 'عرض السلة', }); Object.assign(STRINGS.en, { // Header / nav sf_store_name_default: "Ahmed's Store", sf_store_logo_initial: 'A', sf_nav_home: 'Home', sf_nav_products: 'Products', sf_nav_categories: 'Categories', sf_nav_contact: 'Contact us', // Page titles sf_page_products_title: 'Our products', sf_empty_no_products: 'No products yet', sf_empty_no_products_yet: 'No products yet', sf_page_orders_admin_title: 'Store admin — Orders', sf_page_coupons_admin_title: 'Store admin — Coupons', sf_page_coupons_title: 'Discount coupons', sf_empty_no_coupons: 'No coupons yet', sf_page_dashboard_title: 'Store dashboard — Yesterday', sf_page_yesterday_stats: "Yesterday's stats", sf_page_cart_title: 'Shopping cart', sf_page_checkout_title: 'Checkout', sf_page_checkout_step_final: 'Final step', sf_page_products_admin_title: 'Store admin — Products', sf_page_products_admin_heading: 'Products', // Product detail sf_category_homewares: 'Homewares', sf_in_stock: 'In stock', sf_btn_add_to_cart: 'Add to cart', // Order page sf_order_label_prefix: 'Order', sf_order_status_label: 'Status', sf_order_customer_label: 'Customer', sf_order_city_label: 'City', sf_order_items_label: 'Items', sf_order_total_label: 'Total', sf_order_items_unit: 'item', sf_order_default_customer: 'Ahmed Mohammed', sf_order_default_city: 'Jeddah', sf_order_default_total: '149 SAR', sf_order_default_status: 'Under review', sf_order_tracking_label: 'Tracking number', sf_order_tracking_sent: '✓ Tracking message sent to customer', // Coupons sf_coupon_discount_label: 'Discount', sf_coupon_expires_label: 'Expires', sf_coupon_status_active: 'Active', sf_coupon_status_paused: 'Paused', // Stats sf_stat_new_orders: 'New orders', sf_stat_revenue: 'Revenue', sf_stat_currency_unit: 'SAR', sf_stat_abandoned: 'Abandoned carts', sf_stat_recovered_auto: 'Recovered automatically', sf_ai_suggestion_label: 'Suggestion from the AI agent', sf_ai_suggestion_text: 'Enable free shipping above 200 SAR — similar stores saw a 23% lift in sales', // Cart sf_cart_qty_label: 'Qty', sf_cart_total_label: 'Total', sf_cart_currency_short: 'SAR', sf_cart_freeship_met: "You've unlocked free shipping!", sf_cart_freeship_remaining_a: 'Just', sf_cart_freeship_remaining_b: 'SAR more for free shipping', // Checkout sf_checkout_default_store: 'Specialty Coffee Store', sf_checkout_default_customer: 'Noura Al-Otaibi', sf_checkout_default_city: 'Riyadh', sf_checkout_address_label: 'Shipping address', sf_checkout_district: 'Al Olaya district', sf_checkout_payment_label: 'Payment method', sf_checkout_order_summary: 'Order summary', sf_checkout_qty: 'Qty', sf_checkout_subtotal: 'Subtotal', sf_checkout_shipping: 'Shipping', sf_checkout_total: 'Total', sf_checkout_confirm_btn: 'Confirm order 🚚', // Admin products sf_admin_stock_prefix: 'Stock:', sf_admin_stock_unit: 'units', sf_admin_status_hidden: '⊝ Hidden', sf_admin_status_active: '● Active', sf_admin_stat_total: 'Total products', sf_admin_stat_visible: 'Visible', sf_admin_stat_out_of_stock: 'Out of stock', // Cart toast sf_toast_added: 'Added to cart', sf_toast_view_cart: 'View cart', }); const SF_BG = '#FAFAFA'; const SF_TEXT = '#1A1A1A'; const SF_MUTED = '#6B7280'; const SF_ACCENT = '#C76C5B'; // Salla-ish coral red const SF_BORDER = '#E5E7EB'; // ─── Storefront Header ───────────────────────────────────────────────────── const SFHeader = ({ storeName, cartCount = 0, cartPulse = false }) => (
{/* Logo on right (RTL) */}
{t("sf_store_logo_initial")}
{storeName ?? t("sf_store_name_default")}
{/* Nav */}
{t("sf_nav_home")} {t("sf_nav_products")} {t("sf_nav_categories")} {t("sf_nav_contact")}
{/* Spacer */}
{/* Cart icon on left */}
{cartCount > 0 && (
{cartCount}
)}
); // ─── Product card placeholder ────────────────────────────────────────────── const SFProductCard = ({ title, price, oldPrice, color = '#E2E8F0', accent = '#94A3B8', glyph = '☕', appearAnim = false, addedAnim = false }) => (
{/* Product image placeholder - colored block with glyph */}
{glyph}
{/* Heart icon top-right */}
{/* Body */}
{title}
{oldPrice && {oldPrice}} {price}
); // ─── Storefront: empty/products grid ─────────────────────────────────────── const SFProductsPage = ({ products = [], emptyMessage, cartCount = 0, cartPulse = false }) => (
{t("sf_page_products_title")}
{products.length === 0 ? (
📦
{emptyMessage ?? t("sf_empty_no_products")}
) : (
{products.map((p, i) => )}
)}
); // ─── Single product detail page ──────────────────────────────────────────── const SFProductDetail = ({ title, price, desc, color = '#A7F3D0', glyph = '☕', accent = '#10B981', cartCount = 0, cartPulse = false, addToCartHighlight = false, freeshipBadge = null }) => (
{/* Product image */}
{glyph}
{/* Details */}
{t("sf_category_homewares")}
{title}
{price} ● {t("sf_in_stock")}
{desc}
{freeshipBadge && (
🚚 {freeshipBadge}
)}
); // ─── Empty store / dashboard view ───────────────────────────────────────── const SFEmptyStore = ({ message }) => ( ); // ─── Order status page (admin-ish) ──────────────────────────────────────── const SFOrderPage = ({ orderId = '#4532', customer, city, items = 1, total, status, tracking = null, statusColor = '#F59E0B', justChanged = false, statusFlash = false }) => (
{t("sf_order_label_prefix")} {orderId}
{/* Status bar */}
{t("sf_order_status_label")}
● {status ?? t("sf_order_default_status")}
{/* Customer info */}
{t("sf_order_customer_label")}
{customer ?? t("sf_order_default_customer")}
{t("sf_order_city_label")}
{city ?? t("sf_order_default_city")}
{t("sf_order_items_label")}
{toLocaleDigits(items)} {t("sf_order_items_unit")}
{t("sf_order_total_label")}
{total ?? t("sf_order_default_total")}
{/* Tracking */} {tracking && (
📦
{t("sf_order_tracking_label")}
{tracking}
{t("sf_order_tracking_sent")}
)}
); // ─── Coupons page ───────────────────────────────────────────────────────── const SFCouponsPage = ({ coupons = [] }) => (
{t("sf_page_coupons_title")}
{coupons.length === 0 ? (
🏷️
{t("sf_empty_no_coupons")}
) : (
{coupons.map((c, i) => (
🏷️
{c.code}
{t("sf_coupon_discount_label")} {c.discount} • {t("sf_coupon_expires_label")} {c.expires}
● {c.active ? t("sf_coupon_status_active") : t("sf_coupon_status_paused")}
))}
)}
); // ─── Insights/dashboard mini stats ───────────────────────────────────────── const SFStatsPage = ({ orders = 0, ordersDelta = 0, revenue = '0', abandoned = 0, recovered = 0, animate = false }) => (
{t("sf_page_yesterday_stats")}
{/* AI suggestion banner */}
{t("sf_ai_suggestion_label")}
{t("sf_ai_suggestion_text")}
); const SFStat = ({ icon, label, value, delta, unit, color = '#0EA5E9', highlight = false, animate = false }) => { // Animate value count-up const [display, setDisplay] = React.useState(animate ? 0 : value); React.useEffect(() => { if (!animate) { setDisplay(value); return; } const target = typeof value === 'string' ? parseFloat(value.replace(/,/g, '')) : value; if (isNaN(target)) { setDisplay(value); return; } let frame; const start = performance.now(); const dur = 1200; const tick = (now) => { const tt = Math.min(1, (now - start) / dur); const eased = 1 - Math.pow(1 - tt, 3); const cur = Math.floor(eased * target); const localeTag = window.__LOCALE__ === 'en' ? 'en-US' : 'ar-SA'; setDisplay(typeof value === 'string' ? cur.toLocaleString(localeTag) : cur); if (tt < 1) frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [animate, value]); return (
{icon}
{label}
{toLocaleDigits(display)}
{unit && {unit}} {delta != null && delta > 0 && (
↑ {toLocaleDigits(delta)}%
)}
); }; // ─── Cart page ───────────────────────────────────────────────────────────── const SFCart = ({ items = [], total = '0', cartCount = 0, freeshipMet = false, freeshipRemaining = 0 }) => (
{t("sf_page_cart_title")}
{items.map((it, i) => (
{it.glyph || '☕'}
{it.title}
{t("sf_cart_qty_label")}: {toLocaleDigits(it.qty || 1)}
{it.price}
))} {/* Total */}
{t("sf_cart_total_label")}
{toLocaleDigits(total)} {t("sf_cart_currency_short")}
{/* Shipping promo */}
🚚
{freeshipMet ? t("sf_cart_freeship_met") : `${t("sf_cart_freeship_remaining_a")} ${toLocaleDigits(freeshipRemaining)} ${t("sf_cart_freeship_remaining_b")}`}
); // ─── Checkout page ───────────────────────────────────────────────────────── const SFCheckout = ({ storeName, customer, city, items = [], subtotal = '0', shipping = '15', total = '0', highlight = false }) => (
{t("sf_page_checkout_title")} {t("sf_page_checkout_step_final")}
{/* Left: shipping/contact */}
{t("sf_checkout_address_label")}
{customer ?? t("sf_checkout_default_customer")}
{city ?? t("sf_checkout_default_city")} • {t("sf_checkout_district")}
+966 5• ••• 4732
{t("sf_checkout_payment_label")}
{['💳', '🏦', '📱'].map((g, i) => (
{g}
))}
{/* Right: order summary */}
{t("sf_checkout_order_summary")}
{items.map((it, i) => (
{it.glyph || '☕'}
{it.title}
{t("sf_checkout_qty")}: {toLocaleDigits(it.qty || 1)}
{it.price}
))}
{t("sf_checkout_subtotal")}{toLocaleDigits(subtotal)} {t("sf_stat_currency_unit")}
{t("sf_checkout_shipping")}{toLocaleDigits(shipping)} {t("sf_stat_currency_unit")}
{t("sf_checkout_total")}{toLocaleDigits(total)} {t("sf_stat_currency_unit")}
); // ─── Products admin view (manager dashboard — stock + visibility) ───────── const SFAdminProductRow = ({ title, glyph, color, stock, hidden = false, redFlash = false, statusFlash = false }) => ( ); const SFAdminStat = ({ label, value, icon, color = '#0EA5E9', flash = false }) => (
{icon}
{label}
{toLocaleDigits(value)}
); const SFProductsAdmin = ({ totalCount = 35, visibleCount, outOfStockCount = 3, products = [], highlightOutOfStock = false, visibleFlash = false, outOfStockFlash = false, }) => (
{t("sf_page_products_admin_heading")}
{/* Stats row */}
{/* Products list */}
{products.map((p, i) => ( ))}
); // ─── Add-to-cart toast (Salla-style notification) ────────────────────────── const SFCartNotification = ({ productTitle = '', productGlyph = '☕', productColor = '#3E2723', opacity = 1, slideIn = 1, }) => (
{productGlyph}
✓ {t("sf_toast_added")}
{productTitle}
{t("sf_toast_view_cart")} 🛒
); Object.assign(window, { SFHeader, SFProductCard, SFProductsPage, SFProductDetail, SFEmptyStore, SFOrderPage, SFCouponsPage, SFStatsPage, SFCart, SFCheckout, SFProductsAdmin, SFAdminProductRow, SFAdminStat, SFCartNotification, });