feature/IO-3096-GlobalNotifications - Code Review Part 1

2025-03-03 22:14:33 -05:00
parent b9df4c2587
commit a57abec81b
34 changed files with 124 additions and 77 deletions
--- a/client/src/App/App.jsx
+++ b/client/src/App/App.jsx
@@ -21,7 +21,7 @@ import "./App.styles.scss";
 import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
-import { SocketProvider } from "../contexts/SocketIO/socketContext.jsx";
+import { SocketProvider } from "../contexts/SocketIO/useSocket.jsx";
 import { NotificationProvider } from "../contexts/Notifications/notificationContext.jsx";

 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
--- a/client/src/components/chat-affix/chat-affix.container.jsx
+++ b/client/src/components/chat-affix/chat-affix.container.jsx
@@ -3,7 +3,7 @@ import { getToken } from "@firebase/messaging";
 import axios from "axios";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useSocket } from "../../contexts/SocketIO/socketContext";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
--- a/client/src/components/chat-archive-button/chat-archive-button.component.jsx
+++ b/client/src/components/chat-archive-button/chat-archive-button.component.jsx
@@ -3,7 +3,7 @@ import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
--- a/client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx
+++ b/client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { REMOVE_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
--- a/client/src/components/chat-conversation/chat-conversation.container.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.container.jsx
@@ -3,7 +3,7 @@ import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/socketContext";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
--- a/client/src/components/chat-label/chat-label.component.jsx
+++ b/client/src/components/chat-label/chat-label.component.jsx
@@ -4,7 +4,7 @@ import { Input, Spin, Tag, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
--- a/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
+++ b/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
--- a/client/src/components/chat-open-button/chat-open-button.component.jsx
+++ b/client/src/components/chat-open-button/chat-open-button.component.jsx
@@ -7,7 +7,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
--- a/client/src/components/chat-popup/chat-popup.component.jsx
+++ b/client/src/components/chat-popup/chat-popup.component.jsx
@@ -12,7 +12,7 @@ import ChatConversationListComponent from "../chat-conversation-list/chat-conver
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 import "./chat-popup.styles.scss";

--- a/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
+++ b/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
@@ -8,7 +8,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import { SEARCH_FOR_JOBS } from "../../graphql/jobs.queries";
 import ChatTagRo from "./chat-tag-ro.component";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { Link } from "react-router-dom";
 import { useQuery } from "@apollo/client";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import NotificationCenterContainer from "../notification-center/notification-center.container.jsx";
 import LockWrapper from "../lock-wrapper/lock-wrapper.component";
@@ -704,7 +704,11 @@ function Header({
        )}
      </div>
      {scenarioNotificationsOn && (
-        <NotificationCenterContainer visible={notificationVisible} onClose={() => setNotificationVisible(false)} />
+        <NotificationCenterContainer
+          visible={notificationVisible}
+          onClose={() => setNotificationVisible(false)}
+          unreadCount={unreadCount}
+        />
      )}
    </Layout.Header>
  );
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
--- a/client/src/components/notification-center/notification-center.component.jsx
+++ b/client/src/components/notification-center/notification-center.component.jsx
@@ -18,7 +18,8 @@ const NotificationCenterComponent = ({
  toggleUnreadOnly,
  markAllRead,
  loadMore,
-  onNotificationClick
+  onNotificationClick,
+  unreadCount
 }) => {
  const { t } = useTranslation();

@@ -61,8 +62,6 @@ const NotificationCenterComponent = ({
    );
  };

-  const hasUnread = notifications.some((n) => !n.read);
-
  return (
    <div className={`notification-center ${visible ? "visible" : ""}`}>
      <div className="notification-header">
@@ -82,9 +81,9 @@ const NotificationCenterComponent = ({
          <Tooltip title={t("notifications.labels.mark-all-read")}>
            <Button
              type="link"
-              icon={hasUnread ? <CheckCircleFilled /> : <CheckCircleOutlined />}
+              icon={!unreadCount ? <CheckCircleFilled /> : <CheckCircleOutlined />}
              onClick={markAllRead}
-              disabled={!hasUnread}
+              disabled={!unreadCount}
            />
          </Tooltip>
        </div>
--- a/client/src/components/notification-center/notification-center.container.jsx
+++ b/client/src/components/notification-center/notification-center.container.jsx
@@ -3,7 +3,7 @@ import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
-import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import day from "../../utils/day.js";
@@ -11,7 +11,7 @@ import day from "../../utils/day.js";
 // This will be used to poll for notifications when the socket is disconnected
 const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;

-export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
+export function NotificationCenterContainer({ visible, onClose, bodyshop, unreadCount }) {
  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
  const [notifications, setNotifications] = useState([]);
  const [error, setError] = useState(null);
@@ -169,6 +169,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
      markAllRead={handleMarkAllRead}
      loadMore={loadMore}
      onNotificationClick={handleNotificationClick}
+      unreadCount={unreadCount}
    />
  );
 }
--- a/client/src/components/payments-generate-link/payments-generate-link.component.jsx
+++ b/client/src/components/payments-generate-link/payments-generate-link.component.jsx
@@ -10,7 +10,7 @@ import { createStructuredSelector } from "reselect";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
--- a/client/src/components/production-board-kanban/production-board-kanban.container.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.container.jsx
@@ -12,7 +12,7 @@ import { QUERY_KANBAN_SETTINGS } from "../../graphql/user.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import ProductionBoardKanbanComponent from "./production-board-kanban.component";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
--- a/client/src/components/production-list-table/production-list-table.container.jsx
+++ b/client/src/components/production-list-table/production-list-table.container.jsx
@@ -10,7 +10,7 @@ import {
 import ProductionListTable from "./production-list-table.component";
 import _ from "lodash";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 export default function ProductionListTableContainer({ bodyshop, subscriptionType = "direct" }) {
  const client = useApolloClient();
--- a/client/src/components/profile-my/notification-settings.component.jsx
+++ b/client/src/components/profile-my/notification-settings.component.jsx
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { useEffect, useState } from "react";
-import { Button, Card, Checkbox, Form, Table } from "antd";
+import { Button, Card, Checkbox, Form, Space, Table } from "antd";
 import { useTranslation } from "react-i18next";

 import { connect } from "react-redux";
@@ -165,14 +165,15 @@ function NotificationSettingsForm({ currentUser }) {
      <Card
        title={t("notifications.labels.notificationscenarios")}
        extra={
-          <>
-            <Button type="default" onClick={handleReset} disabled={!isDirty} style={{ marginRight: 8 }}>
+          <Space>
+            <Button type="default" onClick={handleReset} disabled={!isDirty}>
              {t("general.actions.clear")}
            </Button>
+
            <Button type="primary" htmlType="submit" disabled={!isDirty} loading={saving}>
              {t("notifications.labels.save")}
            </Button>
-          </>
+          </Space>
        }
      >
        <Table dataSource={dataSource} columns={columns} pagination={false} bordered rowKey="key" />
--- a/client/src/components/profile-my/profile-my.component.jsx
+++ b/client/src/components/profile-my/profile-my.component.jsx
@@ -9,7 +9,7 @@ import { logImEXEvent, updateCurrentPassword } from "../../firebase/firebase.uti
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import NotificationSettingsForm from "./notification-settings.component.jsx";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser
--- a/client/src/contexts/SocketIO/socketContext.jsx
+++ b/client/src/contexts/SocketIO/socketContext.jsx
@@ -452,7 +452,9 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNot
    markNotificationRead,
    markAllNotificationsRead,
    navigate,
-    currentUser
+    currentUser,
+    scenarioNotificationsOn,
+    t
  ]);

  return (
--- a/client/src/graphql/jobs.queries.js
+++ b/client/src/graphql/jobs.queries.js
@@ -525,6 +525,7 @@ export const GET_JOB_BY_PK = gql`
      iouparent
      job_totals
      job_watchers {
+        id
        user_email
      }
      joblines(where: { removed: { _eq: false } }, order_by: { line_no: asc }) {
--- a/client/src/graphql/notifications.queries.js
+++ b/client/src/graphql/notifications.queries.js
@@ -12,6 +12,7 @@ export const GET_NOTIFICATIONS = gql`
      created_at
      read
      job {
+        id
        ro_number
      }
    }
--- a/client/src/pages/jobs-detail/job-watcher-toggle.component.jsx
+++ b/client/src/pages/jobs-detail/job-watcher-toggle.component.jsx
@@ -9,6 +9,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
 import EmployeeSearchSelectComponent from "../../components/employee-search-select/employee-search-select.component.jsx";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component.jsx";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";

 const { Text } = Typography;

@@ -19,6 +20,14 @@ const mapStateToProps = createStructuredSelector({

 const JobWatcherToggle = ({ job, currentUser, bodyshop }) => {
  const { t } = useTranslation();
+  const {
+    treatments: { Enhanced_Payroll }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Enhanced_Payroll"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
+
  const userEmail = currentUser.email;
  const jobid = job.id;

@@ -146,7 +155,7 @@ const JobWatcherToggle = ({ job, currentUser, bodyshop }) => {
      />
      {/* Divider for UI separation */}
      {/* Only show team selection if there are available teams */}
-      {bodyshop?.employee_teams?.length > 0 && (
+      {Enhanced_Payroll && bodyshop?.employee_teams?.length > 0 && (
        <>
          <Divider />
          <Text type="secondary">{t("notifications.labels.add-watchers-team")}</Text>
--- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
+++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
@@ -57,7 +57,7 @@ import dayjs from "../../utils/day";
 import UndefinedToNull from "../../utils/undefinedtonull";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import JobWatcherToggle from "./job-watcher-toggle.component.jsx";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -20,7 +20,7 @@ import PartnerPingComponent from "../../components/partner-ping/partner-ping.com
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
 import { requestForToken } from "../../firebase/firebase.utils";
-import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";