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

src/components/ActionsButtons/ActionsButtons.module.css

@@ -22,7 +22,7 @@
 }
 
 .quantityButton {
-  padding: 0px;
+  padding: 0;
   width: 25px;
   height: 32px;
   display: flex;
@@ -41,7 +41,7 @@
 }
 
 .removeButton {
-  padding: 4px 0px;
+  padding: 4px 0;
   height: 32px;
   display: flex;
   align-items: center;

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}

src/utils/types/appTypes.ts

@@ -201,7 +201,6 @@ export type FilterColumn =
   | "created_at"
   | "warehouse_id"
   | "filters[send_datetime][$eq]"
-  | "warehouse_id"
   | "account_id"
   | "customer_id"
   | "currency_id"
@@ -350,12 +349,12 @@ export interface ApiResponse<T> {
 }
 
 export interface DiscountResultType {
-  value: number
-  is_on_category: boolean
-  id: number
-  isDiscount: boolean
-  isGift: boolean
-  categories: any[]
+  value: number;
+  is_on_category: boolean;
+  id: number;
+  isDiscount: boolean;
+  isGift: boolean;
+  categories: any[];
 }
 
 export interface Restaurant {
@@ -565,14 +564,14 @@ export interface Product {
   theExtrasGroups: TheExtrasGroup[];
 }
 
-export interface Variant {
-  id: number;
+export type Variant = {
+  id: string;
   price: number;
   available: string;
   options: Option[];
   optionsAR: Option[];
   extras: Extra[];
-}
+};
 
 export interface Option {
   option: string;