@portnet/ui 5.0.15 → 5.0.17

package/dist/api/reclamationApi.js

@@ -78,6 +78,12 @@ const reclamationApi = axiosInstance => ({
       var _error$response4;
       throw (error === null || error === void 0 || (_error$response4 = error.response) === null || _error$response4 === void 0 ? void 0 : _error$response4.data) || new Error("Impossible de charger les réclamations");
     }
-  }
+  },
+  cloturerReclamation: id => axiosInstance.patch("/reclamation/".concat(id, "/cloturer")).then(r => r.data),
+  reourrirReclamation: (id, formData) => axiosInstance.patch("/reclamation/".concat(id, "/reouvrir"), formData, {
+    headers: {
+      "Content-Type": "multipart/form-data"
+    }
+  }).then(r => r.data)
 });
 exports.reclamationApi = reclamationApi;

package/dist/components/widgets/PuiHelpWidget.js

@@ -1,6 +1,5 @@
 "use strict";
 
-require("core-js/modules/esnext.iterator.for-each.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,6 +18,7 @@ require("core-js/modules/es.typed-array.sort.js");
 require("core-js/modules/es.typed-array.to-locale-string.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/web.url.js");
@@ -1499,8 +1499,7 @@ const ReclamationFormModal = _ref4 => {
                   })]
                 })
               })),
-              PopperComponent: CustomPopper // 👈 forces it to stay inside modal
-              ,
+              PopperComponent: CustomPopper,
               noOptionsText: "Aucun service trouv\xE9",
               className: "service-autocomplete"
             })]
@@ -1512,18 +1511,7 @@ const ReclamationFormModal = _ref4 => {
           timeout: 500,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
             className: "step-content details-step",
-            children: [error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
-              ref: errorRef,
-              severity: "error",
-              onClose: () => setError(null),
-              style: {
-                marginBottom: "15px",
-                maxWidth: 400,
-                marginLeft: "auto",
-                marginRight: "auto"
-              },
-              children: error
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
               variant: "h5",
               className: "step-title",
               gutterBottom: true,
@@ -1583,6 +1571,14 @@ const ReclamationFormModal = _ref4 => {
                     fullWidth: true,
                     children: "Joindre des fichiers (optionnel)"
                   })
+                }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
+                  ref: errorRef,
+                  severity: "error",
+                  onClose: () => setError(null),
+                  style: {
+                    marginTop: "12px"
+                  },
+                  children: error
                 }), formData.files.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
                   sx: {
                     mt: 2,
@@ -1716,6 +1712,9 @@ const ReclamationFormModal = _ref4 => {
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
       className: "modal-content",
+      style: {
+        overflow: activeStep === 1 ? "visible" : "auto"
+      },
       children: renderStepContent()
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       className: "modal-footer",
@@ -1751,7 +1750,7 @@ const ReclamationFormModal = _ref4 => {
   });
 };
 const ReclamationsList = _ref5 => {
-  var _selectedReclamation$, _selectedReclamation$2;
+  var _selectedReclamation$, _selectedReclamation$2, _selectedReclamation$3;
   let {
     onClose
   } = _ref5;
@@ -1761,6 +1760,27 @@ const ReclamationsList = _ref5 => {
   const [page, setPage] = (0, _react.useState)(1);
   const [search, setSearch] = (0, _react.useState)();
   const [searchKey, setSearchKey] = (0, _react.useState)("");
+  const STATUT_REPONDUE = "REPONDUE";
+  const STATUT_COLOR_MAP = {
+    EN_ATTENTE: "#2196F3",
+    EN_COURS: "#FF9800",
+    REPONDUE: "#9C27B0",
+    REOUVERTE: "#FF5722",
+    CLOTUREE: "#4CAF50",
+    TRAITE: "#4CAF50"
+  };
+  const STATUT_ICON_MAP = {
+    EN_ATTENTE: "🕐",
+    EN_COURS: "⚙️",
+    REPONDUE: "💬",
+    REOUVERTE: "🔄",
+    CLOTUREE: "🔒"
+  };
+  const getStatusColorByCode = code => STATUT_COLOR_MAP[(code || "").toUpperCase()] || "#757575";
+  const [reouvreDialogOpen, setReouvreDialogOpen] = (0, _react.useState)(false);
+  const [reouvreDescription, setReouvreDescription] = (0, _react.useState)("");
+  const [reouvreFiles, setReouvreFiles] = (0, _react.useState)([]);
+  const reouvreFileInputRef = (0, _react.useRef)(null);
   const {
     data: reclamations,
     isFetching,
@@ -1771,14 +1791,27 @@ const ReclamationsList = _ref5 => {
     isLoading: isDownloading,
     error: errorDownloadDocument
   } = (0, _useReclamation.useDownloadDocument)();
+  const {
+    mutate: clotureReclamation,
+    isLoading: isCloturing
+  } = (0, _useReclamation.useClotureReclamation)();
+  const {
+    mutate: reouvreReclamation,
+    isLoading: isReouvring
+  } = (0, _useReclamation.useReouvreReclamation)();
   const getStatusColor = statut => {
-    switch (statut.toLowerCase()) {
+    switch ((statut || "").toLowerCase()) {
       case "traité":
+      case "cloturee":
         return "#4CAF50";
       case "en cours":
         return "#FF9800";
       case "en attente":
         return "#2196F3";
+      case "repondue":
+        return "#9C27B0";
+      case "reouverte":
+        return "#FF5722";
       default:
         return "#757575";
     }
@@ -1791,6 +1824,61 @@ const ReclamationsList = _ref5 => {
     setDetailsDialogOpen(false);
     setSelectedReclamation(null);
   };
+  const handleCloturer = () => {
+    if (!(selectedReclamation !== null && selectedReclamation !== void 0 && selectedReclamation.id)) return;
+    clotureReclamation(selectedReclamation.id, {
+      onSuccess: () => {
+        queryClient.invalidateQueries("reclamations");
+        handleCloseDetails();
+        _reactToastify.toast.success("Réclamation clôturée avec succès.");
+      },
+      onError: err => {
+        var _err$response$data$me2, _err$response2;
+        const msg = (_err$response$data$me2 = (_err$response2 = err.response) === null || _err$response2 === void 0 || (_err$response2 = _err$response2.data) === null || _err$response2 === void 0 ? void 0 : _err$response2.message) !== null && _err$response$data$me2 !== void 0 ? _err$response$data$me2 : "Une erreur est survenue lors de la clôture.";
+        _reactToastify.toast.error(msg);
+      }
+    });
+  };
+  const handleOpenReouvreDialog = () => {
+    setReouvreDescription("");
+    setReouvreFiles([]);
+    setReouvreDialogOpen(true);
+  };
+  const handleCloseReouvreDialog = () => {
+    setReouvreDialogOpen(false);
+    setReouvreDescription("");
+    setReouvreFiles([]);
+  };
+  const handleReouvreFileSelect = e => {
+    const selected = Array.from(e.target.files);
+    setReouvreFiles(prev => [...prev, ...selected]);
+    e.target.value = "";
+  };
+  const handleRemoveReouvreFile = index => {
+    setReouvreFiles(prev => prev.filter((_, i) => i !== index));
+  };
+  const handleSubmitReouvreture = () => {
+    if (!(selectedReclamation !== null && selectedReclamation !== void 0 && selectedReclamation.id) || !reouvreDescription.trim()) return;
+    const formData = new FormData();
+    formData.append("description", reouvreDescription.trim());
+    reouvreFiles.forEach(file => formData.append("files", file));
+    reouvreReclamation({
+      id: selectedReclamation.id,
+      formData
+    }, {
+      onSuccess: () => {
+        queryClient.invalidateQueries("reclamations");
+        handleCloseReouvreDialog();
+        handleCloseDetails();
+        _reactToastify.toast.success("Réclamation réouverte avec succès.");
+      },
+      onError: err => {
+        var _err$response$data$me3, _err$response3;
+        const msg = (_err$response$data$me3 = (_err$response3 = err.response) === null || _err$response3 === void 0 || (_err$response3 = _err$response3.data) === null || _err$response3 === void 0 ? void 0 : _err$response3.message) !== null && _err$response$data$me3 !== void 0 ? _err$response$data$me3 : "Une erreur est survenue lors de la réouverture.";
+        _reactToastify.toast.error(msg);
+      }
+    });
+  };
   const formatDate = dateString => {
     const date = new Date(dateString);
     return date.toLocaleDateString("fr-FR", {
@@ -1839,7 +1927,8 @@ const ReclamationsList = _ref5 => {
         flex: 1,
         display: "flex",
         flexDirection: "column",
-        backgroundColor: "#f5f5f5"
+        backgroundColor: "#f5f5f5",
+        minHeight: 0
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         style: {
@@ -1956,7 +2045,8 @@ const ReclamationsList = _ref5 => {
         style: {
           flex: 1,
           overflowY: "auto",
-          padding: "8px"
+          padding: "8px",
+          minHeight: 0
         },
         children: isFetching ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: {
@@ -2300,41 +2390,6 @@ const ReclamationsList = _ref5 => {
               },
               children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.description
             })]
-          }), (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.response) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-              component: "div",
-              sx: {
-                fontSize: "11px",
-                color: "#999",
-                fontWeight: "500",
-                marginBottom: "6px",
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
-                fontFamily: WIDGET_FONT,
-                display: "flex",
-                alignItems: "center",
-                gap: "6px"
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                icon: _freeSolidSvgIcons.faReply,
-                style: {
-                  color: "#6c757d",
-                  fontSize: "12px"
-                }
-              }), "R\xE9ponse"]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              style: {
-                fontSize: "14px",
-                color: "#333",
-                lineHeight: "1.6",
-                backgroundColor: "#f5f6f7",
-                padding: "12px",
-                borderRadius: "8px",
-                border: "2px solid #6c757d",
-                whiteSpace: "pre-line"
-              },
-              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.response
-            })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
               component: "div",
@@ -2446,17 +2501,454 @@ const ReclamationsList = _ref5 => {
                 })]
               }, document.id || index))
             })]
+          }), (selectedReclamation === null || selectedReclamation === void 0 || (_selectedReclamation$3 = selectedReclamation.statusHistories) === null || _selectedReclamation$3 === void 0 ? void 0 : _selectedReclamation$3.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              style: {
+                fontSize: "11px",
+                color: "#999",
+                fontWeight: "600",
+                marginBottom: "16px",
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                fontFamily: WIDGET_FONT
+              },
+              children: "Historique des statuts"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              style: {
+                position: "relative",
+                paddingLeft: "24px"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                style: {
+                  position: "absolute",
+                  left: "8px",
+                  top: "6px",
+                  bottom: "6px",
+                  width: "2px",
+                  backgroundColor: "#e0e0e0"
+                }
+              }), selectedReclamation.statusHistories.map((entry, index) => {
+                var _entry$documents;
+                const color = getStatusColorByCode(entry.statutApresCode);
+                const isLast = index === selectedReclamation.statusHistories.length - 1;
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  style: {
+                    position: "relative",
+                    marginBottom: isLast ? 0 : "20px"
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    style: {
+                      position: "absolute",
+                      left: "-20px",
+                      top: "4px",
+                      width: "12px",
+                      height: "12px",
+                      borderRadius: "50%",
+                      backgroundColor: color,
+                      border: "2px solid white",
+                      boxShadow: "0 0 0 2px ".concat(color)
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                    style: {
+                      backgroundColor: "#f8f9fa",
+                      borderRadius: "8px",
+                      border: "1px solid ".concat(color, "22"),
+                      padding: "12px"
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "flex-start",
+                        marginBottom: entry.commentaire ? "10px" : 0
+                      },
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "6px",
+                            marginBottom: "2px"
+                          },
+                          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                            style: {
+                              fontSize: "11px"
+                            },
+                            children: STATUT_ICON_MAP[entry.statutApresCode] || "📋"
+                          }), entry.statutAvantCode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                              style: {
+                                fontSize: "11px",
+                                color: getStatusColorByCode(entry.statutAvantCode),
+                                fontWeight: "600",
+                                fontFamily: WIDGET_FONT
+                              },
+                              children: entry.statutAvantLibelle
+                            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                              style: {
+                                fontSize: "11px",
+                                color: "#999"
+                              },
+                              children: "\u2192"
+                            })]
+                          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                            style: {
+                              fontSize: "11px",
+                              color,
+                              fontWeight: "700",
+                              fontFamily: WIDGET_FONT
+                            },
+                            children: entry.statutApresLibelle
+                          })]
+                        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                          style: {
+                            fontSize: "11px",
+                            color: "#999",
+                            fontFamily: WIDGET_FONT
+                          },
+                          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                            children: [entry.changedByNom ? entry.changedByNom : "Service Odoo", " \xB7 "]
+                          }), formatDate(entry.dateChangement)]
+                        })]
+                      })
+                    }), entry.commentaire && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      style: {
+                        fontSize: "13px",
+                        color: "#333",
+                        lineHeight: "1.5",
+                        fontFamily: WIDGET_FONT,
+                        backgroundColor: "white",
+                        padding: "8px 10px",
+                        borderRadius: "6px",
+                        border: "1px solid #e0e0e0",
+                        whiteSpace: "pre-line"
+                      },
+                      children: entry.commentaire
+                    }), entry.reponse && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                      style: {
+                        marginTop: "8px",
+                        fontSize: "13px",
+                        color: "#333",
+                        lineHeight: "1.5",
+                        fontFamily: WIDGET_FONT,
+                        backgroundColor: "#f0f4ff",
+                        padding: "8px 10px",
+                        borderRadius: "6px",
+                        border: "1px solid #c5d0f0",
+                        whiteSpace: "pre-line"
+                      },
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        style: {
+                          fontSize: "11px",
+                          fontWeight: "600",
+                          color: "#555",
+                          display: "block",
+                          marginBottom: "4px"
+                        },
+                        children: "\uD83D\uDCAC R\xE9ponse"
+                      }), entry.reponse]
+                    }), ((_entry$documents = entry.documents) === null || _entry$documents === void 0 ? void 0 : _entry$documents.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      style: {
+                        marginTop: "8px",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "6px"
+                      },
+                      children: entry.documents.map((doc, di) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "8px",
+                          padding: "6px 10px",
+                          backgroundColor: "white",
+                          borderRadius: "6px",
+                          border: "1px solid #e0e0e0",
+                          cursor: isDownloading ? "not-allowed" : "pointer",
+                          opacity: isDownloading ? 0.6 : 1
+                        },
+                        onClick: () => !isDownloading && handleDownload(doc.documentGuid, doc.documentName),
+                        onMouseEnter: e => {
+                          if (!isDownloading) e.currentTarget.style.backgroundColor = "#f0f0f0";
+                        },
+                        onMouseLeave: e => {
+                          if (!isDownloading) e.currentTarget.style.backgroundColor = "white";
+                        },
+                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                          icon: _freeSolidSvgIcons.faPaperclip,
+                          style: {
+                            color: "var(--primary-color, #222f67)",
+                            fontSize: "12px"
+                          }
+                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                          style: {
+                            flex: 1,
+                            fontSize: "12px",
+                            color: "#333",
+                            fontFamily: WIDGET_FONT
+                          },
+                          children: doc.documentName
+                        }), isDownloading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+                          size: 12,
+                          style: {
+                            color: "var(--primary-color, #222f67)"
+                          }
+                        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                          icon: _freeSolidSvgIcons.faDownload,
+                          style: {
+                            color: "var(--primary-color, #222f67)",
+                            fontSize: "12px"
+                          }
+                        })]
+                      }, doc.id || di))
+                    })]
+                  })]
+                }, entry.id || index);
+              })]
+            })]
           })]
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogActions, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
         sx: {
           padding: "16px 24px",
           borderTop: "1px solid #e0e0e0",
-          backgroundColor: "#f8f9fa"
+          backgroundColor: "#f8f9fa",
+          gap: "8px"
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
           onClick: handleCloseDetails,
+          variant: "outlined",
+          sx: {
+            color: "var(--primary-color, #222f67)",
+            borderColor: "var(--primary-color, #222f67)",
+            padding: "5.5px 23px",
+            borderRadius: "6px",
+            fontWeight: "500",
+            fontSize: "14px",
+            textTransform: "none",
+            boxShadow: "none",
+            "&:hover": {
+              borderColor: "var(--primary-color, #222f67)",
+              backgroundColor: "rgba(34, 47, 103, 0.05)",
+              boxShadow: "none"
+            }
+          },
+          children: "Fermer"
+        }), (selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.statutCode) === STATUT_REPONDUE && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "contained",
+            onClick: handleCloturer,
+            disabled: isCloturing,
+            sx: {
+              backgroundColor: "#e53935",
+              color: "white",
+              padding: "5.5px 23px",
+              borderRadius: "6px",
+              fontWeight: "500",
+              fontSize: "14px",
+              textTransform: "none",
+              boxShadow: "none",
+              "&:hover": {
+                backgroundColor: "#c62828",
+                boxShadow: "none"
+              },
+              "&:disabled": {
+                backgroundColor: "#ef9a9a",
+                boxShadow: "none"
+              }
+            },
+            children: isCloturing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+              size: 16,
+              sx: {
+                color: "white"
+              }
+            }) : "Clôturer"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "contained",
+            onClick: handleOpenReouvreDialog,
+            sx: {
+              backgroundColor: "var(--primary-color, #222f67)",
+              color: "white",
+              padding: "5.5px 23px",
+              borderRadius: "6px",
+              fontWeight: "500",
+              fontSize: "14px",
+              textTransform: "none",
+              boxShadow: "none",
+              "&:hover": {
+                backgroundColor: "var(--secondary-color, #2d3d7f)",
+                boxShadow: "none"
+              }
+            },
+            children: "R\xE9ouverture"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open: reouvreDialogOpen,
+      onClose: handleCloseReouvreDialog,
+      maxWidth: "sm",
+      fullWidth: true,
+      PaperProps: {
+        sx: {
+          borderRadius: 3,
+          boxShadow: "0 8px 32px rgba(0,0,0,0.12)"
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogTitle, {
+        sx: {
+          backgroundColor: "#f8f9fa",
+          borderBottom: "1px solid #e0e0e0",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "20px 24px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "12px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faReply,
+            style: {
+              color: "var(--primary-color, #222f67)",
+              fontSize: "18px"
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                fontWeight: "700",
+                fontSize: "16px",
+                margin: 0
+              },
+              children: "R\xE9ouverture de la r\xE9clamation"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "div",
+              sx: {
+                color: "#666",
+                fontSize: "12px",
+                marginTop: "3px"
+              },
+              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.reference
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          onClick: handleCloseReouvreDialog,
+          size: "small",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {
+            fontSize: "small"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogContent, {
+        sx: {
+          padding: "24px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "20px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+          label: "Description",
+          placeholder: "D\xE9crivez la raison de la r\xE9ouverture...",
+          value: reouvreDescription,
+          onChange: e => setReouvreDescription(e.target.value),
+          multiline: true,
+          rows: 5,
+          fullWidth: true,
+          required: true,
+          variant: "outlined",
+          inputProps: {
+            maxLength: 500
+          },
+          sx: {
+            mt: 1,
+            "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: "var(--primary-color, #222f67)"
+            },
+            "& .MuiInputLabel-root.Mui-focused": {
+              color: "var(--primary-color, #222f67)"
+            }
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            type: "file",
+            ref: reouvreFileInputRef,
+            style: {
+              display: "none"
+            },
+            onChange: handleReouvreFileSelect,
+            accept: ".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif",
+            multiple: true
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "outlined",
+            startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.AttachFile, {}),
+            onClick: () => {
+              var _reouvreFileInputRef$;
+              return (_reouvreFileInputRef$ = reouvreFileInputRef.current) === null || _reouvreFileInputRef$ === void 0 ? void 0 : _reouvreFileInputRef$.click();
+            },
+            sx: {
+              borderRadius: "8px",
+              border: "2px dashed var(--primary-color, #222f67)",
+              color: "var(--primary-color, #222f67)",
+              fontWeight: "600",
+              textTransform: "none",
+              width: "100%",
+              "&:hover": {
+                backgroundColor: "rgba(34, 47, 103, 0.05)",
+                borderStyle: "solid"
+              }
+            },
+            children: "Pi\xE8ces jointes (optionnel)"
+          }), reouvreFiles.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              mt: 1,
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 1
+            },
+            children: reouvreFiles.map((file, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.AttachFile, {}),
+              label: file.name,
+              onDelete: () => handleRemoveReouvreFile(index),
+              sx: {
+                borderRadius: "8px"
+              },
+              color: "primary",
+              variant: "outlined"
+            }, index))
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogActions, {
+        sx: {
+          padding: "16px 24px",
+          borderTop: "1px solid #e0e0e0",
+          backgroundColor: "#f8f9fa",
+          gap: "8px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: handleCloseReouvreDialog,
+          variant: "outlined",
+          sx: {
+            color: "var(--primary-color, #222f67)",
+            borderColor: "var(--primary-color, #222f67)",
+            padding: "5.5px 23px",
+            borderRadius: "6px",
+            fontWeight: "500",
+            fontSize: "14px",
+            textTransform: "none",
+            boxShadow: "none",
+            "&:hover": {
+              borderColor: "var(--primary-color, #222f67)",
+              backgroundColor: "rgba(34, 47, 103, 0.05)",
+              boxShadow: "none"
+            }
+          },
+          children: "Annuler"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
           variant: "contained",
+          onClick: handleSubmitReouvreture,
+          disabled: !reouvreDescription.trim() || isReouvring,
           sx: {
             backgroundColor: "var(--primary-color, #222f67)",
             color: "white",
@@ -2464,16 +2956,24 @@ const ReclamationsList = _ref5 => {
             borderRadius: "6px",
             fontWeight: "500",
             fontSize: "14px",
-            fontFamily: WIDGET_FONT,
             textTransform: "none",
             boxShadow: "none",
             "&:hover": {
               backgroundColor: "var(--secondary-color, #2d3d7f)",
               boxShadow: "none"
+            },
+            "&:disabled": {
+              backgroundColor: "rgba(34, 47, 103, 0.4)",
+              boxShadow: "none"
             }
           },
-          children: "Fermer"
-        })
+          children: isReouvring ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+            size: 16,
+            sx: {
+              color: "white"
+            }
+          }) : "Confirmer la réouverture"
+        })]
       })]
     })]
   });
@@ -2512,7 +3012,7 @@ const TijariaChatbot = selectedConversation => {
     return () => iframe.removeEventListener("load", handleLoad);
   }, []);
   (0, _react.useEffect)(() => {
-    console.log("selectedConversation", selectedConversation);
+    // console.log("selectedConversation", selectedConversation);
     const iframe = iframeRef.current;
     const handleSelect = () => {
       iframe.contentWindow.postMessage({
@@ -3200,8 +3700,16 @@ const PuiHelpWidget = _ref7 => {
     },
   },*/
   {
+    icon: _freeSolidSvgIcons.faCommentDots,
+    title: "TijarIA",
+    id: "tijaria",
+    action: () => {
+      setViewingTijariaHistory(false);
+      setViewingReclamations(false);
+    }
+  }, {
     icon: _freeSolidSvgIcons.faComments,
-    title: "Mes Conversations",
+    title: "Historique TijarIA",
     id: "mes-conversations",
     action: () => {
       setViewingTijariaHistory(true);
@@ -3532,52 +4040,11 @@ const PuiHelpWidget = _ref7 => {
             "aria-hidden": "true"
           })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           padding: "8px"
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-          onClick: handleContactClick,
-          onKeyDown: e => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleContactClick();
-            }
-          },
-          tabIndex: 0,
-          sx: {
-            borderRadius: 1,
-            mb: 0.5,
-            py: 1.5,
-            "&:hover": {
-              backgroundColor: "var(--primary-alpha-8, rgba(34, 47, 103, 0.08))"
-            },
-            "&:focus": {
-              backgroundColor: "var(--primary-alpha-8, rgba(34, 47, 103, 0.08))",
-              outline: "2px solid var(--primary-color, #222f67)",
-              outlineOffset: "2px"
-            }
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Email, {
-              fontSize: "small",
-              sx: {
-                color: "var(--primary-color, #222f67)"
-              },
-              "aria-hidden": "true"
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-            primary: "Contacter le support",
-            secondary: "Envoyez-nous un email",
-            primaryTypographyProps: {
-              fontSize: "14px",
-              fontWeight: "500"
-            },
-            secondaryTypographyProps: {
-              fontSize: "12px"
-            }
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
           onClick: () => {
             window.open("tel:+212520473100", "_self");
             handleContactUsMenuClose();
@@ -3622,7 +4089,7 @@ const PuiHelpWidget = _ref7 => {
               fontSize: "12px"
             }
           })]
-        })]
+        })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ReclamationFormModal, {
       open: reclamationModalOpen,

package/dist/hooks/useReclamation.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useListServiceReclamation = exports.useListReclamation = exports.useDownloadDocument = exports.useCreateReclamation = void 0;
+exports.useReouvreReclamation = exports.useListServiceReclamation = exports.useListReclamation = exports.useDownloadDocument = exports.useCreateReclamation = exports.useClotureReclamation = void 0;
 var _reactQuery = require("react-query");
 var _PuiHelpWidgetContext = require("../components/common/PuiHelpWidgetContext");
 const useListReclamation = (page, search) => {
@@ -65,4 +65,24 @@ const useListServiceReclamation = () => {
     refetchOnReconnect: false
   });
 };
-exports.useListServiceReclamation = useListServiceReclamation;
+exports.useListServiceReclamation = useListServiceReclamation;
+const useClotureReclamation = () => {
+  const {
+    reclamationApi
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  return (0, _reactQuery.useMutation)(id => reclamationApi.cloturerReclamation(id));
+};
+exports.useClotureReclamation = useClotureReclamation;
+const useReouvreReclamation = () => {
+  const {
+    reclamationApi
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  return (0, _reactQuery.useMutation)(_ref => {
+    let {
+      id,
+      formData
+    } = _ref;
+    return reclamationApi.reourrirReclamation(id, formData);
+  });
+};
+exports.useReouvreReclamation = useReouvreReclamation;

package/dist/styles/ReclamationFormModal.css

@@ -14,6 +14,7 @@
 
 .reclamation-modal .MuiPaper-root {
   margin: 0;
+  overflow: visible !important;
 }
 
 
@@ -100,7 +101,7 @@
   min-height: 300px;
   background-color: white;
   flex: 1 1 auto;
-  overflow-y: auto;
+  overflow: hidden;
   overflow-x: hidden;
   display: flex;
   justify-content: center;
@@ -109,6 +110,8 @@
 .reclamation-modal .step-content {
   max-width: 600px;
   margin: 0 auto;
+  overflow: visible;
+  max-height: 100%; 
 }
 
 .reclamation-modal .step-title {
@@ -163,7 +166,6 @@
 .reclamation-modal .service-autocomplete {
   width: 384px !important;
   max-width: 100%;
-  height: 230px;
 }
 
 .reclamation-modal .service-autocomplete .MuiOutlinedInput-root {
@@ -192,7 +194,6 @@
   border-width: 2px;
 }
 
-/* --- Listbox (Dropdown) Styling --- */
 .reclamation-modal .service-listbox {
   max-height: 300px;
   border-radius: 12px;
@@ -206,6 +207,11 @@
   right: 0 !important;
 }
 
+.reclamation-modal .service-autocomplete .MuiAutocomplete-listbox {
+  max-height: 160px; 
+  overflow-y: auto; 
+}
+
 /* --- Option Items --- */
 .reclamation-modal .service-option {
   padding: 14px 16px;
@@ -218,10 +224,8 @@
 
 .reclamation-modal .service-option .MuiTypography-root {
   display: -webkit-box;
-  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
   word-break: break-word;
 }
 
@@ -462,7 +466,7 @@
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   margin: 24px 0;
   border: 2px solid #cccc;
-  box-shadow:none;
+  box-shadow: none;
 }
 
 .success-modal .reference-number {
@@ -545,6 +549,11 @@
   align-items: center !important;
   gap: 8px !important;
   transition: background-color 0.2s !important;
+  min-height: 48px !important;
+  margin-bottom: 4px  !important; 
+  line-height: 1.8 !important;
+  border-bottom: 1px solid #f0f0f0 !important;
+
 }
 
 .MuiAutocomplete-popper .MuiAutocomplete-option:hover {
@@ -566,4 +575,55 @@
   border-radius: 50%;
   background-color: var(--primary-color, #222f67);
   flex-shrink: 0;
+}
+
+/* Responsive mobile - fix centrage uniquement */
+@media (max-width: 576px) {
+
+  .reclamation-modal .modal-header {
+    padding: 16px !important;
+  }
+
+  .reclamation-modal .header-title {
+    font-size: 16px !important;
+  }
+
+  .reclamation-modal .progress-section {
+    padding: 12px 16px !important;
+  }
+
+  .reclamation-modal .stepper .MuiStepLabel-label {
+    font-size: 10px !important;
+  }
+
+  .reclamation-modal .modal-content {
+    padding: 16px !important;
+  }
+
+  .reclamation-modal .step-title {
+    font-size: 18px !important;
+  }
+
+  /* Fix centrage autocomplete */
+  .reclamation-modal .service-autocomplete {
+    width: 100% !important;
+    height: auto !important;
+  }
+
+  .reclamation-modal .step-content {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .reclamation-modal .modal-footer {
+    padding: 12px 16px !important;
+  }
+
+  .reclamation-modal .next-button,
+  .reclamation-modal .submit-button {
+    padding: 10px 20px !important;
+  }
+}
+.MuiAutocomplete-popper .MuiAutocomplete-option:last-child {
+  border-bottom: none !important;
 }

package/dist/styles/help-widget.css

@@ -98,7 +98,7 @@
   .help-widget-sidebar {
     width: 100vw;
     right: -100vw;
-    overflow-y: auto; 
+    overflow: hidden;
   }
   .help-widget-sidebar.open {
     right: 0;
@@ -449,7 +449,7 @@
     width: 100vw;
     right: -100vw;
     border-radius: 0;
-    overflow-y: auto; 
+    overflow: hidden;
   }
   
   .help-widget-sidebar.open {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "5.0.15",
+  "version": "5.0.17",
   "description": "Portnet UI",
   "keywords": [
     "react",