ProBottomSheet: enhance UI

src/pages/menu/components/MenuList/ProductCard.tsx

@@ -44,6 +44,11 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
     // }
   };
 
+  const hasOptions =
+    (item.extras && item.extras.length > 0) ||
+    (item.variants && item.variants.length > 0) ||
+    (item.theExtrasGroups && item.theExtrasGroups.length > 0);
+
   return (
     <>
       <div
@@ -206,22 +211,24 @@ export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
               </Badge>
             </div>
           </div>
-          <ProText
-            style={{
-              fontWeight: 400,
-              fontStyle: "Regular",
-              fontSize: "12px",
-              lineHeight: "140%",
-              letterSpacing: "0%",
-              textAlign: "center",
-              position: "absolute",
-              bottom: 19,
-              [isRTL ? "left" : "right"]: 26,
-              color: "#A4A3AA",
-            }}
-          >
-            {t("menu.customizable")}
-          </ProText>
+          {hasOptions && (
+            <ProText
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: "12px",
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+                position: "absolute",
+                bottom: 19,
+                [isRTL ? "left" : "right"]: 26,
+                color: "#A4A3AA",
+              }}
+            >
+              {t("menu.customizable")}
+            </ProText>
+          )}
         </Card>
       </div>