feature/IO-3225-Notifications-1.5: checkpoint

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

@@ -1,27 +1,52 @@
-// 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 }) {
+export default function ShopInfoNotificationsAutoadd({ bodyshop }) {
   const { t } = useTranslation();
 
-  const employeeOptions = bodyshop?.employees?.filter((e) => e.active && e.id) || [];
+  // Filter employee options to ensure active employees with valid IDs
+  const employeeOptions = bodyshop?.employees?.filter((e) => e.active && e.id && typeof e.id === "string") || [];
 
   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") }]}>
+        <Form.Item
+          name="notification_followers"
+          rules={[
+            {
+              type: "array",
+              message: t("general.validation.array")
+            },
+            {
+              validator: async (_, value) => {
+                if (!value || value.length === 0) {
+                  return Promise.resolve(); // Allow empty array
+                }
+                const hasInvalid = value.some((id) => id == null || typeof id !== "string" || id.trim() === "");
+                if (hasInvalid) {
+                  return Promise.reject(new Error(t("bodyshop.fields.notifications.invalid_followers")));
+                }
+                return Promise.resolve();
+              }
+            }
+          ]}
+        >
           <EmployeeSearchSelectComponent
             style={{ minWidth: "100%" }}
             mode="multiple"
             options={employeeOptions}
             placeholder={t("bodyshop.fields.notifications.placeholder")}
+            showEmail={true}
+            onChange={(value) => {
+              // Filter out null or invalid values before passing to Form
+              const cleanedValue = value?.filter((id) => id != null && typeof id === "string" && id.trim() !== "");
+              return cleanedValue;
+            }}
           />
         </Form.Item>
       ) : (