Product page: use url instead of local storage

src/pages/product/page.tsx

@@ -17,19 +17,35 @@ import ExtraComponent from "./components/Extra";
 import ProductFooter from "./components/ProductFooter";
 import Variants from "./components/Variants";
 import styles from "./product.module.css";
+import { useParams } from "react-router-dom";
+import { useGetMenuQuery } from "redux/api/others.ts";
 
 export default function ProductDetailPage({
   onClose,
 }: {
   onClose?: () => void;
 }) {
+  const { productId } = useParams();
+
   const { isRTL } = useAppSelector((state) => state.locale);
+  const { restaurant } = useAppSelector((state) => state.order);
   const { isDesktop } = useBreakPoint();
   const [quantity, setQuantity] = useState(1);
 
-  const product = JSON.parse(
-    localStorage.getItem("product") || "null",
-  ) as Product;
+  // Get menu data
+  const { data: menuData } = useGetMenuQuery(restaurant?.restautantId, {
+    skip: !restaurant?.restautantId,
+  });
+
+  // Find product from menu data
+  const product: Product = useMemo(() => {
+    if (!menuData?.products || !productId) return null;
+
+    // Find the product with matching IDs
+    return menuData.products.find(
+      (p: Product) => p.id.toString() === productId,
+    );
+  }, [menuData, productId]);
 
   // State for variant selections
   const [selectedVariants, setSelectedVariants] = useState<
@@ -123,7 +139,7 @@ export default function ProductDetailPage({
     );
 
     // Check if all required extra groups are satisfied
-    const allRequiredExtraGroupsSatisfied = product.theExtrasGroups.every(
+    const allRequiredExtraGroupsSatisfied = product?.theExtrasGroups.every(
       (group) => {
         if (group.force_limit_selection === 1) {
           const selectedCount = selectedExtrasByGroup[group.id]?.length || 0;
@@ -142,7 +158,7 @@ export default function ProductDetailPage({
   const hasCustomizationOptions = useMemo(() => {
     const hasVariants =
       product?.variants?.length > 0 && variantLevels.length > 0;
-    const hasExtras = getExtras().length > 0;
+    const hasExtras = getExtras()?.length > 0;
     const hasExtraGroups = product?.theExtrasGroups?.length > 0;
 
     return hasVariants || hasExtras || hasExtraGroups;