product page: get selected variant price instead of main product price

src/pages/product/components/ProductFooter.tsx

@@ -7,13 +7,13 @@ import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors, ProBlack2 } from "ThemeConstants";
-import { Product } from "utils/types/appTypes";
+import { Product, Variant } from "utils/types/appTypes";
 import styles from "../product.module.css";
 
 export default function ProductFooter({
   product,
   isValid = true,
-  variantId,
+  selectedVariant,
   selectedExtras,
   selectedGroups,
   quantity,
@@ -21,7 +21,7 @@ export default function ProductFooter({
 }: {
   product: Product;
   isValid?: boolean;
-  variantId: string;
+  selectedVariant?: Variant;
   selectedExtras: string[];
   selectedGroups: string[];
   quantity: number;
@@ -60,11 +60,11 @@ export default function ProductFooter({
           item: {
             id: product?.id,
             name: product?.name,
-            price: product?.price,
+            price: selectedVariant?.price || product?.price,
             image: product?.image,
             description: product?.description,
             comment: specialRequest,
-            variant: variantId,
+            variant: selectedVariant?.id,
             extras: selectedExtras,
             extrasgroup: selectedGroups,
             isHasLoyalty: product?.isHasLoyalty,

src/pages/product/page.tsx

@@ -88,34 +88,32 @@ export default function ProductDetailPage({
   }, [product?.variants]);
 
   // Get the final selected variant ID (the variant that matches all current selections)
-  const getFinalSelectedVariantId = useCallback(() => {
+  const getFinalSelectedVariant = useCallback(() => {
     if (!product?.variants || Object.keys(selectedVariants).length === 0)
-      return "";
+      return undefined;
 
     // Find the variant that matches all current selections
-    const matchingVariant = product.variants.find((variant) => {
+    // Convert to string only if defined, otherwise return empty string
+    return product.variants.find((variant) => {
       return Object.entries(selectedVariants).every(([level, value]) => {
         const levelNum = parseInt(level);
         return variant.options[levelNum]?.value === value;
       });
     });
-
-    // Convert to string only if defined, otherwise return empty string
-    return matchingVariant?.id?.toString() || "";
   }, [product?.variants, selectedVariants]);
 
   const getExtras = useCallback(() => {
-    const finalSelectedVariantId = getFinalSelectedVariantId();
-    if (finalSelectedVariantId) {
+    const finalSelectedVariant = getFinalSelectedVariant();
+    if (finalSelectedVariant) {
       const variant = product?.variants?.find(
-        (variant) => variant.id === Number(finalSelectedVariantId),
+        (variant) => variant.id === finalSelectedVariant.id,
       );
       if (variant?.extras?.length && variant.extras.length > 0) {
         return variant.extras;
       }
     }
     return product?.extras;
-  }, [product?.variants, product?.extras, getFinalSelectedVariantId]);
+  }, [product?.variants, product?.extras, getFinalSelectedVariant]);
 
   // Validation function to check if all required selections are made
   const validateRequiredSelections = () => {
@@ -277,7 +275,7 @@ export default function ProductDetailPage({
               <ProductFooter
                 product={product}
                 isValid={isValid}
-                variantId={getFinalSelectedVariantId()}
+                selectedVariant={getFinalSelectedVariant()}
                 selectedExtras={selectedExtras}
                 selectedGroups={Object.values(selectedExtrasByGroup).flat()}
                 quantity={quantity}
@@ -326,7 +324,7 @@ export default function ProductDetailPage({
           <ProductFooter
             product={product}
             isValid={isValid}
-            variantId={getFinalSelectedVariantId()}
+            selectedVariant={getFinalSelectedVariant()}
             selectedExtras={selectedExtras}
             selectedGroups={Object.values(selectedExtrasByGroup).flat()}
             quantity={quantity}