feature/IO-3096-GlobalNotifications - Check-point

client/src/components/profile-my/notification-settings.component.jsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@apollo/client";
-import React, { useEffect, useState } from "react";
-import { Button, Card, Col, Form, Row, Switch } from "antd";
+import { useEffect, useState } from "react";
+import { Button, Card, Col, Form, Row } from "antd";
 import { useTranslation } from "react-i18next";
 
 import { connect } from "react-redux";
@@ -8,9 +8,34 @@ import { createStructuredSelector } from "reselect";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import { QUERY_NOTIFICATION_SETTINGS, UPDATE_NOTIFICATION_SETTINGS } from "../../graphql/user.queries.js";
-import notificationScenarios from "../../utils/jobNotificationScenarios.js";
+import { notificationScenarios, notificationChannels } from "../../utils/jobNotificationScenarios.js";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
 
+const NotificationMethodButtonGroup = ({ value = {}, onChange }) => {
+  const { t } = useTranslation();
+  const toggleMethod = (method) => {
+    const newValue = { ...value, [method]: !value[method] };
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  return (
+    <Button.Group>
+      {notificationChannels.map((method) => (
+        <Button
+          disabled={method === "fcm"}
+          key={method}
+          type={value[method] ? "primary" : "default"}
+          onClick={() => toggleMethod(method)}
+        >
+          {t(`notifications.channels.${method}`)}
+        </Button>
+      ))}
+    </Button.Group>
+  );
+};
+
 function NotificationSettingsForm({ currentUser }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
@@ -31,8 +56,10 @@ function NotificationSettingsForm({ currentUser }) {
   useEffect(() => {
     if (data?.associations?.length > 0) {
       const settings = data.associations[0].notification_settings || {};
+      // For each scenario, expect an object with keys { app, email, fcm }.
+      // If not present in the fetched data, default to all false.
       const formattedValues = notificationScenarios.reduce((acc, scenario) => {
-        acc[scenario] = settings[scenario] ?? false;
+        acc[scenario] = settings[scenario] ?? { app: false, email: false, fcm: false };
         return acc;
       }, {});
 
@@ -45,6 +72,7 @@ function NotificationSettingsForm({ currentUser }) {
   const handleSave = async (values) => {
     if (data?.associations?.length > 0) {
       const userId = data.associations[0].id;
+      // `values` now contains, for each scenario, an object with keys { app, email, fcm }
       await updateNotificationSettings({ variables: { id: userId, ns: values } });
       setInitialValues(values);
       setIsDirty(false);
@@ -88,8 +116,8 @@ function NotificationSettingsForm({ currentUser }) {
         <Row gutter={[16, 16]}>
           {notificationScenarios.map((scenario) => (
             <Col xs={24} sm={12} md={8} key={scenario}>
-              <Form.Item name={scenario} label={t(`notifications.scenarios.${scenario}`)} valuePropName="checked">
-                <Switch />
+              <Form.Item name={scenario} label={t(`notifications.scenarios.${scenario}`)}>
+                <NotificationMethodButtonGroup />
               </Form.Item>
             </Col>
           ))}