extra & variant fixes

src/pages/product/components/Extra.tsx

@@ -27,6 +27,7 @@ export default function Extra({
             style={{
               display: "flex",
               justifyContent: "space-between",
+              margin: "0 0 16px 0",
             }}
           >
             <ProText style={{ fontSize: "1.25rem" }}>
@@ -57,6 +58,7 @@ export default function Extra({
                   extrasList.filter((o) => values?.includes(o.id.toString())),
                 )
               }
+              showPrice
             />
           </div>
         </div>

src/pages/product/components/ExtraGroupsContainer.tsx

@@ -28,6 +28,7 @@ export default function ExtraGroupsContainer({
             style={{
               display: "flex",
               justifyContent: "space-between",
+              margin: "0 0 16px 0",
             }}
           >
             <ProText style={{ fontSize: "1.25rem" }}>

src/pages/product/components/Variants.tsx

@@ -26,7 +26,7 @@ export default function Variants({
     if (!variantsList || variantsList.length === 0) return [];
 
     const maxOptionsLength = Math.max(
-      ...variantsList.map((v) => v.options.length)
+      ...variantsList.map((v) => v.options.length),
     );
     const levels: Array<{
       level: number;
@@ -45,7 +45,7 @@ export default function Variants({
             variantsList
               .filter((v) => v.options[i]?.option === optionKey)
               .map((v) => v.options[i]?.value)
-              .filter(Boolean)
+              .filter(Boolean),
           ),
         ];
 
@@ -112,28 +112,10 @@ export default function Variants({
         <>
           {!isDesktop && <Divider style={{ margin: "0 0 10px 0" }} />}
           <div>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-              }}
-            >
-              <ProText style={{ fontSize: "1.25rem" }}>
-                {t("menu.youMightAlsoLike")}
-              </ProText>
-
-              <div style={{ display: "flex", alignItems: "center" }}>
-                <ProText strong style={{ fontSize: "0.75rem", color: "red" }}>
-                  <span style={{ color: "red", fontSize: "0.75rem" }}>*</span>
-                  {t("menu.required")}
-                </ProText>
-              </div>
-            </div>
-
             {variantLevels.map((level, index) => {
               const filteredVariants = getFilteredVariants(index);
               const availableValues = level.availableValues.filter((value) =>
-                filteredVariants.some((v) => v.options[index]?.value === value)
+                filteredVariants.some((v) => v.options[index]?.value === value),
               );
 
               // Only show this level if there are available values and previous levels are selected
@@ -155,20 +137,40 @@ export default function Variants({
 
               return (
                 <div key={level.level} style={{ marginBottom: "16px" }}>
-                  <ProText strong style={{ fontSize: "1rem" }}>
-                    {isRTL ? level.optionKeyAR : level.optionKey}
-                  </ProText>
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                    }}
+                  >
+                    <ProText strong style={{ fontSize: "1rem" }}>
+                      {isRTL ? level.optionKeyAR : level.optionKey}
+                    </ProText>
+                    <div style={{ display: "flex", alignItems: "center" }}>
+                      <ProText
+                        strong
+                        style={{ fontSize: "0.75rem", color: "red" }}
+                      >
+                        <span style={{ color: "red", fontSize: "0.75rem" }}>
+                          *
+                        </span>
+                        {t("menu.required")}
+                      </ProText>
+                    </div>
+                  </div>
 
                   <div className={styles.productContainer}>
                     <ProRatioGroups
                       options={availableValues.map((value) => {
                         const variant = filteredVariants.find(
-                          (v) => v.options[index]?.value === value
+                          (v) => v.options[index]?.value === value,
                         );
                         return {
                           value: value,
                           label: value,
-                          price: variant ? `+${Number(variant.price).toFixed(2)}` : "",
+                          price: variant
+                            ? `+${Number(variant.price).toFixed(2)}`
+                            : "",
                         };
                       })}
                       value={selectedVariants[index] || ""}

src/pages/product/page.tsx

@@ -158,12 +158,14 @@ export default function ProductDetailPage({
   }, [product?.variants, selectedVariants]);
 
   const getExtras = useCallback(() => {
-    const finalSelectedVariant = getFinalSelectedVariant();
-    if (!finalSelectedVariant) return [];
-    const selectedVariant = product?.variants?.find(
+    /*    const finalSelectedVariant = getFinalSelectedVariant();
+    if (!finalSelectedVariant) return []; */
+    /*    const selectedVariant = product?.variants?.find(
       (variant) => variant.id === finalSelectedVariant.id,
-    );
-    return selectedVariant?.extras || [];
+    ); */
+    //don't show v
+    if (product?.variants && product.variants.length > 0) return [];
+    return product?.extras || [];
   }, [product?.variants, getFinalSelectedVariant]);
 
   // Validation function to check if all required selections are made
@@ -215,8 +217,9 @@ export default function ProductDetailPage({
   return (
     <div
       style={{
-        height:
-        isBottomSheetView ? "calc(90vh - 285px)" : viewportHeight > 0
+        height: isBottomSheetView
+          ? "calc(90vh - 285px)"
+          : viewportHeight > 0
             ? `${viewportHeight - 195}px`
             : "calc(100dvh - 195px)",
         overflow: "auto",
@@ -364,13 +367,14 @@ export default function ProductDetailPage({
                   />
                 )}
 
-                {getExtras()?.length > 0 && (
-                  <ExtraComponent
-                    extrasList={getExtras()}
-                    selectedExtras={selectedExtras}
-                    setSelectedExtras={setSelectedExtras}
-                  />
-                )}
+                {product.theExtrasGroups.length === 0 &&
+                  getExtras()?.length > 0 && (
+                    <ExtraComponent
+                      extrasList={getExtras()}
+                      selectedExtras={selectedExtras}
+                      setSelectedExtras={setSelectedExtras}
+                    />
+                  )}
               </Space>
             </div>
           )}