show data in cards

src/pages/product/components/ProductFooter.tsx

@@ -85,10 +85,23 @@ export default function ProductFooter({
             comment: specialRequest,
             variant: selectedVariant,
             extras: selectedExtras,
-            extrasgroupnew: Object.keys(selectedGroups).map((key) => ({
-              groupid: key,
-              extrasid: selectedGroups[Number(key)],
-            })),
+            extrasgroupnew: Object.keys(selectedGroups).map((key) => {
+              const groupInfo = product.theExtrasGroups?.find(
+                (g) => g.id.toString() === key,
+              );
+              const selectedGroupExtrasIds = selectedGroups[Number(key)];
+
+              const extrasInfo = groupInfo?.extras.filter((e) =>
+                selectedGroupExtrasIds.includes(e.id.toString()),
+              );
+              console.log(extrasInfo);
+              return {
+                groupid: key,
+                extrasid: selectedGroupExtrasIds,
+                extrasString: `${groupInfo?.name}: ${extrasInfo?.map((e) => e.name).join(", ")}`,
+                extrasStringAR: `${groupInfo?.nameAR}: ${extrasInfo?.map((e) => e.nameAR).join(" + ")}`,
+              };
+            }),
             extrasgroup: Object.entries(selectedGroups).flatMap(
               ([groupId, extrasIds]) => {
                 if (!extrasIds || extrasIds.length === 0) {
@@ -117,7 +130,7 @@ export default function ProductFooter({
         }),
       );
       // Navigate back to menu - scroll position will be restored automatically
-      if (!isDesktop && !isBottomSheetView  ) window.history.back();
+      if (!isDesktop && !isBottomSheetView) window.history.back();
       else {
         onClose?.();
       }
@@ -175,46 +188,44 @@ export default function ProductFooter({
               width: "100%",
             }}
           >
-              <ActionsButtons
-                quantity={quantity}
-                setQuantity={setQuantity}
-                max={100}
-                min={1}
-              />
-              <Button
-                type="primary"
-                icon={<ShoppingCartOutlined />}
-                onClick={handleAddToCart}
-                disabled={!isValid}
-                style={{
-                  flex: 1,
-                  height: 48,
-                  fontSize: isMobile ? "1rem" : "16px",
-                  transition: "all 0.3s ease",
-                  width: "100%",
-                  borderRadius: 888,
-                  boxShadow: "none",
-                  backgroundColor: isValid
-                    ? colors.primary
-                    : "rgba(233, 233, 233, 1)",
-                  color: isValid ? "#FFF" : "#999",
-                  cursor: isValid ? "pointer" : "not-allowed",
-                }}
-                onMouseEnter={(e) => {
-                  if (!isMobile && isValid) {
-                    e.currentTarget.style.transform = "translateY(-2px)";
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!isMobile) {
-                    e.currentTarget.style.transform = "translateY(0)";
-                  }
-                }}
-              >
-                {isValid
-                  ? t("menu.addToCart")
-                  : t("menu.selectRequiredOptions")}
-              </Button>
+            <ActionsButtons
+              quantity={quantity}
+              setQuantity={setQuantity}
+              max={100}
+              min={1}
+            />
+            <Button
+              type="primary"
+              icon={<ShoppingCartOutlined />}
+              onClick={handleAddToCart}
+              disabled={!isValid}
+              style={{
+                flex: 1,
+                height: 48,
+                fontSize: isMobile ? "1rem" : "16px",
+                transition: "all 0.3s ease",
+                width: "100%",
+                borderRadius: 888,
+                boxShadow: "none",
+                backgroundColor: isValid
+                  ? colors.primary
+                  : "rgba(233, 233, 233, 1)",
+                color: isValid ? "#FFF" : "#999",
+                cursor: isValid ? "pointer" : "not-allowed",
+              }}
+              onMouseEnter={(e) => {
+                if (!isMobile && isValid) {
+                  e.currentTarget.style.transform = "translateY(-2px)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!isMobile) {
+                  e.currentTarget.style.transform = "translateY(0)";
+                }
+              }}
+            >
+              {isValid ? t("menu.addToCart") : t("menu.selectRequiredOptions")}
+            </Button>
           </div>
         </div>
       </Row>