Switch to version 3: modified src/i18n.ts

Merge version_4 into main

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #000000;
-  --card: #f9f9f9;
+  --card: #0c0c0c;
-  --foreground: #000612e6;
+  --foreground: #ffffff;
-  --primary-cta: #15479c;
+  --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #000000;
   --secondary-cta-text: #ffffff;
-  --accent: #e2e2e2;
+  --accent: #535353;
-  --background-accent: #c4c4c4;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/cardStack/hooks/useDepth3DAnimation.ts

@@ -1,88 +1,118 @@
-import { useEffect } from 'react';
+import { useEffect, useState, useRef, RefObject } from "react";
-import { useMotionValue, useSpring, useTransform } from 'framer-motion';
-import { Variants } from '@/types/AnimatePresence';
 
-interface Depth3DAnimationProps {
+const MOBILE_BREAKPOINT = 768;
-  perspective?: number;
+const ANIMATION_SPEED = 0.05;
-  depthFactor?: number;
+const ROTATION_SPEED = 0.1;
-  hoverScale?: number;
+const MOUSE_MULTIPLIER = 0.5;
-  transition?: {
+const ROTATION_MULTIPLIER = 0.25;
-    duration?: number;
+
-    ease?: string;
+interface UseDepth3DAnimationProps {
-  };
+  itemRefs: RefObject<(HTMLElement | null)[]>;
-  springOptions?: {
+  containerRef: RefObject<HTMLDivElement | null>;
-    stiffness?: number;
+  perspectiveRef?: RefObject<HTMLDivElement | null>;
-    damping?: number;
+  isEnabled: boolean;
-    mass?: number;
-  };
-  rotationXRange?: number[];
-  rotationYRange?: number[];
 }
 
 export const useDepth3DAnimation = ({
-  perspective = 2000,
+  itemRefs,
-  depthFactor = 20,
+  containerRef,
-  hoverScale = 1.05,
+  perspectiveRef,
-  transition = { duration: 0.8, ease: [0.6, 0.01, -0.05, 0.9] },
+  isEnabled,
-  springOptions = { stiffness: 400, damping: 10, mass: 1 },
+}: UseDepth3DAnimationProps) => {
-  rotationXRange = [-10, 10],
+  const [isMobile, setIsMobile] = useState(false);
-  rotationYRange = [-10, 10],
-}: Depth3DAnimationProps) => {
-  const x = useMotionValue(0);
-  const y = useMotionValue(0);
-
-  const mouseXSpring = useSpring(x, springOptions);
-  const mouseYSpring = useSpring(y, springOptions);
-
-  const rotateX = useTransform(
-    mouseYSpring,
-    [-0.5, 0.5],
-    rotationXRange as Variants<number[]>,
-  );
-  const rotateY = useTransform(
-    mouseXSpring,
-    [-0.5, 0.5],
-    rotationYRange as Variants<number[]>,
-  );
-  const scale = useTransform(mouseXSpring, [-0.5, 0.5], [1, hoverScale]);
-
-  const handleMouseMove = (event: React.MouseEvent) => {
-    const rect = (event.target as HTMLElement).getBoundingClientRect();
-    const width = rect.width;
-    const height = rect.height;
-    const mouseX = event.clientX - rect.left;
-    const mouseY = event.clientY - rect.top;
-    const xPct = mouseX / width - 0.5;
-    const yPct = mouseY / height - 0.5;
-    x.set(xPct);
-    y.set(yPct);
-  };
-
-  const handleMouseLeave = () => {
-    x.set(0);
-    y.set(0);
-  };
 
+  // Detect mobile viewport
   useEffect(() => {
-    // Cleanup function if needed, though Framer Motion handles many subscriptions internally.
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+
     return () => {
-      // No explicit cleanup for motion values in this simple case, but good to keep in mind.
+      window.removeEventListener("resize", checkMobile);
     };
   }, []);
 
-  return {
+  // 3D mouse-tracking effect (desktop only)
-    style: {
+  useEffect(() => {
-      perspective: perspective + 'px',
+    if (!isEnabled || isMobile) return;
-      transformStyle: 'preserve-3d',
+
-      rotateX,
+    let animationFrameId: number;
-      rotateY,
+    let isAnimating = true;
-      scale,
+
-      transition: transition as Variants<typeof transition>,
+    // Apply perspective to the perspective ref (grid) if provided, otherwise to container (section)
-      // The depth effect is implicitly handled by the perspective and rotation transform
+    const perspectiveElement = perspectiveRef?.current || containerRef.current;
-      // Additional translateZ can be added for more explicit depth if needed
+    if (perspectiveElement) {
-      translateZ: depthFactor + 'px',
+      perspectiveElement.style.perspective = "1200px";
-    },
+      perspectiveElement.style.transformStyle = "preserve-3d";
-    onMouseMove: handleMouseMove,
+    }
-    onMouseLeave: handleMouseLeave,
+
+    let mouseX = 0;
+    let mouseY = 0;
+    let isMouseInSection = false;
+
+    let currentX = 0;
+    let currentY = 0;
+    let currentRotationX = 0;
+    let currentRotationY = 0;
+
+    const handleMouseMove = (event: MouseEvent): void => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        isMouseInSection =
+          event.clientX >= rect.left &&
+          event.clientX <= rect.right &&
+          event.clientY >= rect.top &&
+          event.clientY <= rect.bottom;
+      }
+
+      if (isMouseInSection) {
+        mouseX = (event.clientX / window.innerWidth) * 100 - 50;
+        mouseY = (event.clientY / window.innerHeight) * 100 - 50;
+      }
     };
+
+    const animate = (): void => {
+      if (!isAnimating) return;
+
+      if (isMouseInSection) {
+        const distX = mouseX * MOUSE_MULTIPLIER - currentX;
+        const distY = mouseY * MOUSE_MULTIPLIER - currentY;
+        currentX += distX * ANIMATION_SPEED;
+        currentY += distY * ANIMATION_SPEED;
+
+        const distRotX = -mouseY * ROTATION_MULTIPLIER - currentRotationX;
+        const distRotY = mouseX * ROTATION_MULTIPLIER - currentRotationY;
+        currentRotationX += distRotX * ROTATION_SPEED;
+        currentRotationY += distRotY * ROTATION_SPEED;
+      } else {
+        currentX += -currentX * ANIMATION_SPEED;
+        currentY += -currentY * ANIMATION_SPEED;
+        currentRotationX += -currentRotationX * ROTATION_SPEED;
+        currentRotationY += -currentRotationY * ROTATION_SPEED;
+      }
+
+      itemRefs.current?.forEach((ref) => {
+        if (!ref) return;
+        ref.style.transform = `translate(${currentX}px, ${currentY}px) rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
+      });
+
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    animate();
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      isAnimating = false;
+    };
+  }, [isEnabled, isMobile, itemRefs, containerRef]);
+
+  return { isMobile };
 };

src/config.ts

@@ -1 +1,16 @@
-export const config = {};
+
+
+export const locales = ['en', 'ar'] as const;
+export const defaultLocale = 'ar'; // Set default to Arabic as current content is Arabic
+
+// Use 'always' to ensure the locale is always in the URL (e.g., /en, /ar)
+export const localePrefix = 'always';
+
+// Define pathnames for internationalized routes if applicable
+// For a single-page app with sections, pathnames might not be strictly necessary for section IDs,
+// but useful if you plan to have separate pages later (e.g., /en/about vs /ar/about)
+export const pathnames = {
+  '/': '/',
+};
+
+export type AppPathnames = keyof typeof pathnames;

src/hooks/useProductCatalog.ts

@@ -1,34 +1,115 @@
-import { useState, useEffect } from 'react';
+"use client";
-import { fetchProducts } from '@/lib/api/product';
 
-interface UseProductCatalogProps {
+import { useState, useMemo, useCallback } from "react";
-  initialProducts?: Product[];
+import { useRouter } from "next/navigation";
-  category?: string;
+import { useProducts } from "./useProducts";
-  limit?: number;
+import type { Product } from "@/lib/api/product";
+import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
+import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
+
+export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
+
+interface UseProductCatalogOptions {
+    basePath?: string;
 }
 
-export const useProductCatalog = ({ initialProducts, category, limit }: UseProductCatalogProps) => {
+export function useProductCatalog(options: UseProductCatalogOptions = {}) {
-  const [products, setProducts] = useState<Product[]>(initialProducts || []);
+    const { basePath = "/shop" } = options;
-  const [loading, setLoading] = useState(false);
+    const router = useRouter();
-  const [error, setError] = useState<string | null>(null);
+    const { products: fetchedProducts, isLoading } = useProducts();
 
-  useEffect(() => {
+    const [search, setSearch] = useState("");
-    const loadProducts = async () => {
+    const [category, setCategory] = useState("All");
-      setLoading(true);
+    const [sort, setSort] = useState<SortOption>("Newest");
-      setError(null);
+
-      try {
+    const handleProductClick = useCallback((productId: string) => {
-        const fetchedProducts = await fetchProducts({ category, limit });
+        router.push(`${basePath}/${productId}`);
-        setProducts(fetchedProducts);
+    }, [router, basePath]);
-      } catch (err) {
+
-        setError('Failed to fetch products');
+    const catalogProducts: CatalogProduct[] = useMemo(() => {
+        if (fetchedProducts.length === 0) return [];
+
+        return fetchedProducts.map((product) => ({
+            id: product.id,
+            name: product.name,
+            price: product.price,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt || product.name,
+            rating: product.rating || 0,
+            reviewCount: product.reviewCount,
+            category: product.brand,
+            onProductClick: () => handleProductClick(product.id),
+        }));
+    }, [fetchedProducts, handleProductClick]);
+
+    const categories = useMemo(() => {
+        const categorySet = new Set<string>();
+        catalogProducts.forEach((product) => {
+            if (product.category) {
+                categorySet.add(product.category);
             }
-      setLoading(false);
+        });
+        return Array.from(categorySet).sort();
+    }, [catalogProducts]);
+
+    const filteredProducts = useMemo(() => {
+        let result = catalogProducts;
+
+        if (search) {
+            const q = search.toLowerCase();
+            result = result.filter(
+                (p) =>
+                    p.name.toLowerCase().includes(q) ||
+                    (p.category?.toLowerCase().includes(q) ?? false)
+            );
+        }
+
+        if (category !== "All") {
+            result = result.filter((p) => p.category === category);
+        }
+
+        if (sort === "Price: Low-High") {
+            result = [...result].sort(
+                (a, b) =>
+                    parseFloat(a.price.replace("$", "").replace(",", "")) -
+                    parseFloat(b.price.replace("$", "").replace(",", ""))
+            );
+        } else if (sort === "Price: High-Low") {
+            result = [...result].sort(
+                (a, b) =>
+                    parseFloat(b.price.replace("$", "").replace(",", "")) -
+                    parseFloat(a.price.replace("$", "").replace(",", ""))
+            );
+        }
+
+        return result;
+    }, [catalogProducts, search, category, sort]);
+
+    const filters: ProductVariant[] = useMemo(() => [
+        {
+            label: "Category",
+            options: ["All", ...categories],
+            selected: category,
+            onChange: setCategory,
+        },
+        {
+            label: "Sort",
+            options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
+            selected: sort,
+            onChange: (value) => setSort(value as SortOption),
+        },
+    ], [categories, category, sort]);
+
+    return {
+        products: filteredProducts,
+        isLoading,
+        search,
+        setSearch,
+        category,
+        setCategory,
+        sort,
+        setSort,
+        filters,
+        categories,
     };
-
-    if (!initialProducts || initialProducts.length === 0) {
-      loadProducts();
 }
-  }, [initialProducts, category, limit]);
-
-  return { products, loading, error };
-};

src/hooks/useProductDetail.ts

@@ -1,32 +1,196 @@
-import { useState, useEffect } from 'react';
+"use client";
-import { fetchProductById } from '@/lib/api/product';
 
-interface UseProductDetailProps {
+import { useState, useMemo, useCallback } from "react";
-  productId: string;
+import { useProduct } from "./useProduct";
+import type { Product } from "@/lib/api/product";
+import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
+import type { ExtendedCartItem } from "./useCart";
+
+interface ProductImage {
+    src: string;
+    alt: string;
 }
 
-export const useProductDetail = ({ productId }: UseProductDetailProps) => {
+interface ProductMeta {
-  const [product, setProduct] = useState<Product | null>(null);
+    salePrice?: string;
-  const [loading, setLoading] = useState(false);
+    ribbon?: string;
-  const [error, setError] = useState<string | null>(null);
+    inventoryStatus?: string;
+    inventoryQuantity?: number;
+    sku?: string;
+}
 
-  useEffect(() => {
+export function useProductDetail(productId: string) {
-    const loadProduct = async () => {
+    const { product, isLoading, error } = useProduct(productId);
-      setLoading(true);
+    const [selectedQuantity, setSelectedQuantity] = useState(1);
-      setError(null);
+    const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
+
+    const images = useMemo<ProductImage[]>(() => {
+        if (!product) return [];
+
+        if (product.images && product.images.length > 0) {
+            return product.images.map((src, index) => ({
+                src,
+                alt: product.imageAlt || `${product.name} - Image ${index + 1}`,
+            }));
+        }
+        return [{
+            src: product.imageSrc,
+            alt: product.imageAlt || product.name,
+        }];
+    }, [product]);
+
+    const meta = useMemo<ProductMeta>(() => {
+        if (!product?.metadata) return {};
+
+        const metadata = product.metadata;
+
+        let salePrice: string | undefined;
+        const onSaleValue = metadata.onSale;
+        const onSale = String(onSaleValue) === "true" || onSaleValue === 1 || String(onSaleValue) === "1";
+        const salePriceValue = metadata.salePrice;
+
+        if (onSale && salePriceValue !== undefined && salePriceValue !== null) {
+            if (typeof salePriceValue === 'number') {
+                salePrice = `$${salePriceValue.toFixed(2)}`;
+            } else {
+                const salePriceStr = String(salePriceValue);
+                salePrice = salePriceStr.startsWith('$') ? salePriceStr : `$${salePriceStr}`;
+            }
+        }
+
+        let inventoryQuantity: number | undefined;
+        if (metadata.inventoryQuantity !== undefined) {
+            const qty = metadata.inventoryQuantity;
+            inventoryQuantity = typeof qty === 'number' ? qty : parseInt(String(qty), 10);
+        }
+
+        return {
+            salePrice,
+            ribbon: metadata.ribbon ? String(metadata.ribbon) : undefined,
+            inventoryStatus: metadata.inventoryStatus ? String(metadata.inventoryStatus) : undefined,
+            inventoryQuantity,
+            sku: metadata.sku ? String(metadata.sku) : undefined,
+        };
+    }, [product]);
+
+    const variants = useMemo<ProductVariant[]>(() => {
+        if (!product) return [];
+
+        const variantList: ProductVariant[] = [];
+
+        if (product.metadata?.variantOptions) {
             try {
-        const fetchedProduct = await fetchProductById(productId);
+                const variantOptionsStr = String(product.metadata.variantOptions);
-        setProduct(fetchedProduct);
+                const parsedOptions = JSON.parse(variantOptionsStr);
-      } catch (err) {
-        setError('Failed to fetch product details');
-      }
-      setLoading(false);
-    };
 
-    if (productId) {
+                if (Array.isArray(parsedOptions)) {
-      loadProduct();
+                    parsedOptions.forEach((option: any) => {
-    }
+                        if (option.name && option.values) {
-  }, [productId]);
+                            const values = typeof option.values === 'string'
+                                ? option.values.split(',').map((v: string) => v.trim())
+                                : Array.isArray(option.values)
+                                    ? option.values.map((v: any) => String(v).trim())
+                                    : [String(option.values)];
 
-  return { product, loading, error };
+                            if (values.length > 0) {
+                                const optionLabel = option.name;
+                                const currentSelected = selectedVariants[optionLabel] || values[0];
+
+                                variantList.push({
+                                    label: optionLabel,
+                                    options: values,
+                                    selected: currentSelected,
+                                    onChange: (value) => {
+                                        setSelectedVariants((prev) => ({
+                                            ...prev,
+                                            [optionLabel]: value,
+                                        }));
+                                    },
+                                });
+                            }
+                        }
+                    });
+                }
+            } catch (error) {
+                console.warn("Failed to parse variantOptions:", error);
+            }
+        }
+
+        if (variantList.length === 0 && product.brand) {
+            variantList.push({
+                label: "Brand",
+                options: [product.brand],
+                selected: product.brand,
+                onChange: () => { },
+            });
+        }
+
+        if (variantList.length === 0 && product.variant) {
+            const variantOptions = product.variant.includes('/')
+                ? product.variant.split('/').map(v => v.trim())
+                : [product.variant];
+
+            const variantLabel = "Variant";
+            const currentSelected = selectedVariants[variantLabel] || variantOptions[0];
+
+            variantList.push({
+                label: variantLabel,
+                options: variantOptions,
+                selected: currentSelected,
+                onChange: (value) => {
+                    setSelectedVariants((prev) => ({
+                        ...prev,
+                        [variantLabel]: value,
+                    }));
+                },
+            });
+        }
+
+        return variantList;
+    }, [product, selectedVariants]);
+
+    const quantityVariant = useMemo<ProductVariant>(() => ({
+        label: "Quantity",
+        options: Array.from({ length: 10 }, (_, i) => String(i + 1)),
+        selected: String(selectedQuantity),
+        onChange: (value) => setSelectedQuantity(parseInt(value, 10)),
+    }), [selectedQuantity]);
+
+    const createCartItem = useCallback((): ExtendedCartItem | null => {
+        if (!product) return null;
+
+        const variantStrings = Object.entries(selectedVariants).map(
+            ([label, value]) => `${label}: ${value}`
+        );
+
+        if (variantStrings.length === 0 && product.variant) {
+            variantStrings.push(`Variant: ${product.variant}`);
+        }
+
+        const variantId = Object.values(selectedVariants).join('-') || 'default';
+
+        return {
+            id: `${product.id}-${variantId}-${selectedQuantity}`,
+            productId: product.id,
+            name: product.name,
+            variants: variantStrings,
+            price: product.price,
+            quantity: selectedQuantity,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt || product.name,
         };
+    }, [product, selectedVariants, selectedQuantity]);
+
+    return {
+        product,
+        isLoading,
+        error,
+        images,
+        meta,
+        variants,
+        quantityVariant,
+        selectedQuantity,
+        selectedVariants,
+        createCartItem,
+    };
+}

src/i18n.ts

@@ -1,27 +1,5 @@
-// @ts-expect-error Missing declaration file
-import i18n from 'i18next';
-// @ts-expect-error Missing declaration file
-import Backend from 'i18next-http-backend';
-// @ts-expect-error Missing declaration file
-import LanguageDetector from 'i18next-browser-languagedetector';
-// @ts-expect-error Missing declaration file
-import { initReactI18next } from 'react-i18next';
 
-i18n
-  .use(Backend)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    fallbackLng: 'en',
-    debug: false,
-    interpolation: {
-      escapeValue: false,
-    },
-    backend: {
-      loadPath: '/locales/{{lng}}/{{ns}}.json',
-    },
-    ns: ['common', 'home'],
-    defaultNS: 'common',
-  });
 
-export default i18n;
+import { locales } from './config';
+
+