Initial commit

src/pages/product/components/ExtraGroups.tsx

@@ -0,0 +1,117 @@
+import { Divider, message } from "antd";
+import ProCheckboxGroups from "components/ProCheckboxGroups/ProCheckboxGroups";
+import ProText from "components/ProText";
+import { Dispatch, SetStateAction } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import { Extra4, TheExtrasGroup } from "utils/types/appTypes";
+import styles from "../product.module.css";
+
+export default function ExtraGroups({
+  groupsList,
+  selectedExtrasByGroup,
+  setSelectedExtrasByGroup,
+}: {
+  groupsList: TheExtrasGroup[];
+  selectedExtrasByGroup: Record<number, string[]>;
+  setSelectedExtrasByGroup: Dispatch<SetStateAction<Record<number, string[]>>>;
+}) {
+  const { isRTL } = useAppSelector((state) => state.locale);
+  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) => (
+        <div key={group.id}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <ProText strong style={{ fontSize: "1rem" }}>
+              {isRTL ? group.nameAR : group.name}
+            </ProText>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+              }}
+            >
+              <ProText style={{ fontSize: "0.75rem", color: "#666" }}>
+                {group.force_limit_selection === 1 ? "Required" : "Optional"}
+              </ProText>
+              <ProText style={{ fontSize: "0.75rem", color: "#666" }}>
+                ({selectedExtrasByGroup[group.id]?.length || 0}/{group.limit})
+              </ProText>
+            </div>
+          </div>
+
+          {group.force_limit_selection === 1 && (
+            <ProText
+              style={{
+                fontSize: "0.75rem",
+                color: "red",
+                marginBottom: "8px",
+              }}
+            >
+              * You must select exactly {group.limit} option
+              {group.limit > 1 ? "s" : ""}
+            </ProText>
+          )}
+
+          <div className={styles.productContainer}>
+            <ProCheckboxGroups
+              options={group.extras.map((extra: Extra4) => ({
+                value: extra.id.toString(),
+                label: isRTL ? extra.name : extra.nameAR,
+                price: `+${extra.price}`,
+              }))}
+              value={selectedExtrasByGroup[group.id] || []}
+              onChange={(values: string[]) => {
+                // Check if the new selection would exceed the limit
+                if (values.length > group.limit) {
+                  message.error(
+                    `You can only select up to ${group.limit} option${group.limit > 1 ? "s" : ""} from this group.`
+                  );
+                  return;
+                }
+                setSelectedExtrasByGroup((prev) => ({
+                  ...prev,
+                  [group.id]: values,
+                }));
+              }}
+            />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}