feautre/IO-3377-Add-Notification-Tone-For-Messaging - Complete

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

@@ -1,5 +1,5 @@
-import { Button, Card, Col, Form, Input } from "antd";
-import { LockOutlined } from "@ant-design/icons";
+import { Button, Card, Col, Form, Input, Space, Switch, Tooltip, Typography } from "antd";
+import { AudioMutedOutlined, LockOutlined, SoundOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -10,6 +10,8 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import NotificationSettingsForm from "../notification-settings/notification-settings-form.component.jsx";
+import { useMutation, useQuery } from "@apollo/client";
+import { QUERY_ACTIVE_ASSOCIATION_SOUND, UPDATE_NEW_MESSAGE_SOUND } from "../../graphql/user.queries.js";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
@@ -48,6 +50,28 @@ export default connect(
     }
   };
 
+  // ---- Notification sound (associations.new_message_sound) ----
+  const email = currentUser?.email;
+  const { data: assocData, loading: assocLoading } = useQuery(QUERY_ACTIVE_ASSOCIATION_SOUND, {
+    variables: { email },
+    skip: !email,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "cache-first"
+  });
+  const association = assocData?.associations?.[0];
+  // Treat null/undefined as ON for backward-compat
+  const soundEnabled = association?.new_message_sound === true;
+
+  const [updateNewMessageSound, { loading: updatingSound }] = useMutation(UPDATE_NEW_MESSAGE_SOUND, {
+    update(cache, { data }) {
+      const updated = data?.update_associations_by_pk;
+      if (!updated) return;
+      cache.modify({
+        id: cache.identify({ __typename: "associations", id: updated.id }),
+        fields: { new_message_sound: () => updated.new_message_sound }
+      });
+    }
+  });
   return (
     <>
       <Col span={24}>
@@ -80,6 +104,7 @@ export default connect(
           </Card>
         </Form>
       </Col>
+
       <Col span={24}>
         <Form onFinish={handleChangePassword} autoComplete={"no"} initialValues={currentUser} layout="vertical">
           <Card
@@ -119,6 +144,52 @@ export default connect(
           </Card>
         </Form>
       </Col>
+
+      {association && (
+        <Col span={24}>
+          <Card title={t("user.labels.notification_sound")}>
+            <Space align="center" size="large">
+              <Typography.Text>{t("user.labels.play_sound_for_new_messages")}</Typography.Text>
+              <Tooltip
+                title={soundEnabled ? t("user.labels.notification_sound_on") : t("user.labels.notification_sound_off")}
+              >
+                <Switch
+                  checkedChildren={<SoundOutlined />}
+                  unCheckedChildren={<AudioMutedOutlined />}
+                  checked={!!soundEnabled}
+                  loading={assocLoading || updatingSound}
+                  onChange={(checked) => {
+                    updateNewMessageSound({
+                      variables: { id: association.id, value: checked },
+                      optimisticResponse: {
+                        update_associations_by_pk: {
+                          __typename: "associations",
+                          id: association.id,
+                          new_message_sound: checked
+                        }
+                      }
+                    })
+                      .then(() => {
+                        notification.success({
+                          message: checked
+                            ? t("user.labels.notification_sound_enabled")
+                            : t("user.labels.notification_sound_disabled")
+                        });
+                      })
+                      .catch((e) => {
+                        notification.error({ message: e.message || "Failed to update setting" });
+                      });
+                  }}
+                />
+              </Tooltip>
+            </Space>
+            <Typography.Paragraph type="secondary" style={{ marginTop: 8 }}>
+              {t("user.labels.notification_sound_help")}
+            </Typography.Paragraph>
+          </Card>
+        </Col>
+      )}
+
       {scenarioNotificationsOn && (
         <Col span={24}>
           <NotificationSettingsForm />