Cart: fix extras group

src/pages/product/components/ExtraGroupsContainer.tsx

@@ -0,0 +1,65 @@
+import { Divider } from "antd";
+import ProText from "components/ProText";
+import { Dispatch, SetStateAction } from "react";
+import { useTranslation } from "react-i18next";
+
+import { TheExtrasGroup } from "utils/types/appTypes";
+
+import ExtrasGroup from "pages/product/components/ExtrasGroup.tsx";
+
+export default function ExtraGroupsContainer({
+  groupsList,
+  selectedExtrasByGroup,
+  setSelectedExtrasByGroup,
+}: {
+  groupsList: TheExtrasGroup[];
+  selectedExtrasByGroup: Record<number, string[]>;
+  setSelectedExtrasByGroup: Dispatch<SetStateAction<Record<number, string[]>>>;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {groupsList.length > 0 && (
+        <div>
+          <Divider style={{ margin: "0 0 16px 0" }} />
+
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+          >
+            <ProText style={{ fontSize: "1.25rem" }}>
+              {t("menu.youMightAlsoLike")}
+            </ProText>
+
+            <ProText strong style={{ fontSize: "0.75rem" }}>
+              {t("menu.optional")}
+            </ProText>
+          </div>
+
+          {/* <ProText strong style={{ fontSize: "0.75rem" }}>
+                        {t("menu.choose1")}
+                      </ProText> */}
+        </div>
+      )}
+
+      {groupsList?.map((group: TheExtrasGroup) => (
+        <ExtrasGroup
+          group={group}
+          selectedExtras={selectedExtrasByGroup[group.id]}
+          onChange={(values) => {
+            setSelectedExtrasByGroup({
+              ...selectedExtrasByGroup,
+              [group.id]:
+                group.extras
+                  .filter((o) => values?.includes(o.id.toString()))
+                  .map((e) => e.id.toString()) || [],
+            });
+          }}
+        />
+      ))}
+    </>
+  );
+}