feature/IO-3225-Notifications-1.5: Finish

client/src/components/employee-search-select/employee-search-select.component.jsx

@@ -22,11 +22,11 @@ const EmployeeSearchSelect = ({ options, ...props }) => {
         ? options.map((o) => (
             <Option key={o.id} value={o.id} search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}>
               <Space>
-                {`${o.employee_number}  ${o.first_name} ${o.last_name}`}
-
+                {`${o.employee_number ?? ""}  ${o.first_name} ${o.last_name}`}
                 <Tag color="green">
                   {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
                 </Tag>
+                {o.user_email ? <Tag color="blue">{o.user_email}</Tag> : null}
               </Space>
             </Option>
           ))

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

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { useEffect, useState } from "react";
-import { Button, Card, Checkbox, Form, Space, Switch, Table } from "antd";
+import { 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";
@@ -199,6 +199,8 @@ const NotificationSettingsForm = ({ currentUser }) => {
         }
       >
         <Table dataSource={dataSource} columns={columns} pagination={false} bordered rowKey="key" />
+        <Divider />
+        <Typography.Paragraph type="secondary">{t("notifications.labels.auto-add-description")}</Typography.Paragraph>
       </Card>
     </Form>
   );

client/src/components/shop-info/shop-info.component.jsx

@@ -1,4 +1,3 @@
-
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Tabs } from "antd";
 import React from "react";
@@ -24,6 +23,8 @@ import ShopInfoRoGuard from "./shop-info.roguard.component";
 import ShopInfoIntellipay from "./shop-intellipay-config.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import ShopInfoNotificationsAutoadd from "./shop-info.notifications-autoadd.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -41,6 +42,7 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
     names: ["CriticalPartsScanning", "Enhanced_Payroll"],
     splitKey: bodyshop.imexshopid
   });
+  const { scenarioNotificationsOn } = useSocket();
 
   const { t } = useTranslation();
   const history = useNavigate();
@@ -137,9 +139,21 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
 
     {
       key: "intellipay",
-      label: InstanceRenderManager({ rome: t("bodyshop.labels.romepay"), imex: t("bodyshop.labels.imexpay") }),
+      label: InstanceRenderManager({
+        rome: t("bodyshop.labels.romepay"),
+        imex: t("bodyshop.labels.imexpay")
+      }),
       children: <ShopInfoIntellipay form={form} />
-    }
+    },
+    ...(scenarioNotificationsOn
+      ? [
+          {
+            key: "notifications_autoadd",
+            label: t("bodyshop.labels.notifications.followers"),
+            children: <ShopInfoNotificationsAutoadd form={form} bodyshop={bodyshop} />
+          }
+        ]
+      : [])
   ];
   return (
     <Card

client/src/components/shop-info/shop-info.notifications-autoadd.component.jsx

@@ -0,0 +1,32 @@
+// shop-info.notifications-autoadd.component.jsx
+import React from "react";
+import { Form, Typography } from "antd";
+import { useTranslation } from "react-i18next";
+import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component.jsx";
+
+const { Text, Paragraph } = Typography;
+
+export default function ShopInfoNotificationsAutoadd({ form, bodyshop }) {
+  const { t } = useTranslation();
+
+  const employeeOptions = bodyshop?.employees?.filter((e) => e.active && e.id) || [];
+
+  return (
+    <div>
+      <Paragraph>{t("bodyshop.fields.notifications.description")}</Paragraph>
+      <Text type="secondary">{t("bodyshop.labels.notifications.followers")}</Text>
+      {employeeOptions.length > 0 ? (
+        <Form.Item name="notification_followers" rules={[{ type: "array", message: t("general.validation.array") }]}>
+          <EmployeeSearchSelectComponent
+            style={{ minWidth: "100%" }}
+            mode="multiple"
+            options={employeeOptions}
+            placeholder={t("bodyshop.fields.notifications.placeholder")}
+          />
+        </Form.Item>
+      ) : (
+        <Text type="secondary">{t("bodyshop.fields.no_employees_available")}</Text>
+      )}
+    </div>
+  );
+}