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

client/src/components/chat-affix/chat-affix.container.jsx

@@ -9,13 +9,13 @@ import "./chat-affix.styles.scss";
 import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
-export function ChatAffixContainer({ bodyshop, chatVisible }) {
+export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
   const { t } = useTranslation();
   const client = useApolloClient();
   const { socket } = useSocket();
 
   useEffect(() => {
-    if (!bodyshop || !bodyshop.messagingservicesid) return;
+    if (!bodyshop?.messagingservicesid) return;
 
     async function SubscribeToTopicForFCMNotification() {
       try {
@@ -35,8 +35,8 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
     SubscribeToTopicForFCMNotification();
 
     // Register WebSocket handlers
-    if (socket && socket.connected) {
-      registerMessagingHandlers({ socket, client });
+    if (socket?.connected) {
+      registerMessagingHandlers({ socket, client, currentUser });
 
       return () => {
         unregisterMessagingHandlers({ socket });
@@ -44,11 +44,11 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
     }
   }, [bodyshop, socket, t, client]);
 
-  if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
+  if (!bodyshop?.messagingservicesid) return <></>;
 
   return (
     <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      {bodyshop && bodyshop.messagingservicesid ? <ChatPopupComponent /> : null}
+      {bodyshop?.messagingservicesid ? <ChatPopupComponent /> : null}
     </div>
   );
 }

client/src/components/chat-affix/registerMessagingSocketHandlers.js

@@ -1,5 +1,7 @@
 import { CONVERSATION_LIST_QUERY, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
 import { gql } from "@apollo/client";
+import { QUERY_ACTIVE_ASSOCIATION_SOUND } from "../../graphql/user.queries"; // the query you added earlier
+import { playNewMessageSound } from "../../utils/soundManager.js";
 
 const logLocal = (message, ...args) => {
   if (import.meta.env.VITE_APP_IS_TEST || !import.meta.env.PROD) {
@@ -26,16 +28,48 @@ const enrichConversation = (conversation, isOutbound) => ({
   __typename: "conversations"
 });
 
-export const registerMessagingHandlers = ({ socket, client }) => {
+// Can be uncommonted to test the playback of the notification sound
+// window.testTone = () => {
+//   const notificationSound = new Audio(newMessageSound);
+//   notificationSound.play().catch((error) => {
+//     console.error("Error playing notification sound:", error);
+//   });
+// };
+
+export const registerMessagingHandlers = ({ socket, client, currentUser }) => {
   if (!(socket && client)) return;
 
   const handleNewMessageSummary = async (message) => {
     const { conversationId, newConversation, existingConversation, isoutbound } = message;
 
+    // True only when DB value is strictly true; falls back to true on cache miss
+    const isNewMessageSoundEnabled = (client) => {
+      try {
+        const email = currentUser?.email; // adjust if you keep email elsewhere
+        if (!email) return true; // default allow if we can't resolve user
+        const res = client.readQuery({
+          query: QUERY_ACTIVE_ASSOCIATION_SOUND,
+          variables: { email }
+        });
+        const flag = res?.associations?.[0]?.new_message_sound;
+        return flag === true; // strictly true => enabled
+      } catch {
+        // If the query hasn't been seeded in cache yet, default ON
+        return true;
+      }
+    };
+
     logLocal("handleNewMessageSummary - Start", { message, isNew: !existingConversation });
 
     const queryVariables = { offset: 0 };
 
+    if (!isoutbound) {
+      // Play notification sound for new inbound message
+      if (isNewMessageSoundEnabled(client)) {
+        playNewMessageSound();
+      }
+    }
+
     if (!existingConversation && conversationId) {
       // Attempt to read from the cache to determine if this is actually a new conversation
       try {
@@ -328,7 +362,8 @@ export const registerMessagingHandlers = ({ socket, client }) => {
           }
           break;
 
-        case "tag-added": { // Ensure `job_conversations` is properly formatted
+        case "tag-added": {
+          // Ensure `job_conversations` is properly formatted
           const formattedJobConversations = job_conversations.map((jc) => ({
             __typename: "job_conversations",
             jobid: jc.jobid || jc.job?.id,

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 />