feature/IO-3228-Notifications-1.6-and-Deprecations

- See Ticket for full details (Notifications restrictions, AntD deprecations)

client/src/components/notification-settings/notification-settings-form.component.jsx

@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { useEffect, useState } from "react";
-import { Button, Card, Checkbox, Divider, Form, Space, Switch, Table, Typography } from "antd";
+import { Alert, Button, Card, Checkbox, Divider, Form, Space, Switch, Table, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import {
   QUERY_NOTIFICATION_SETTINGS,
@@ -16,14 +16,16 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
 import PropTypes from "prop-types";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import ColumnHeaderCheckbox from "../notification-settings/column-header-checkbox.component.jsx";
+import { useIsEmployee } from "../../utils/useIsEmployee.js";
 
 /**
  * Notifications Settings Form
  * @param currentUser
+ * @param bodyshop
  * @returns {JSX.Element}
  * @constructor
  */
-const NotificationSettingsForm = ({ currentUser }) => {
+const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [initialValues, setInitialValues] = useState({});
@@ -31,6 +33,7 @@ const NotificationSettingsForm = ({ currentUser }) => {
   const [autoAddEnabled, setAutoAddEnabled] = useState(false);
   const [initialAutoAdd, setInitialAutoAdd] = useState(false);
   const notification = useNotification();
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
 
   // Fetch notification settings and notifications_autoadd
   const { loading, error, data } = useQuery(QUERY_NOTIFICATION_SETTINGS, {
@@ -199,6 +202,11 @@ const NotificationSettingsForm = ({ currentUser }) => {
           </Space>
         }
       >
+        {!isEmployee && (
+          <div style={{ width: "100%", marginBottom: "10px" }}>
+            <Alert message={t("notifications.labels.employee-notification")} type="warning" />
+          </div>
+        )}
         <Table dataSource={dataSource} columns={columns} pagination={false} bordered rowKey="key" />
         <Divider />
       </Card>
@@ -209,11 +217,13 @@ const NotificationSettingsForm = ({ currentUser }) => {
 NotificationSettingsForm.propTypes = {
   currentUser: PropTypes.shape({
     email: PropTypes.string.isRequired
-  }).isRequired
+  }).isRequired,
+  bodyshop: PropTypes.object.isRequired
 };
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
 });
 
 export default connect(mapStateToProps)(NotificationSettingsForm);