@portnet/ui 5.0.27 → 5.0.29

package/dist/api/reclamationApi.js

@@ -37,14 +37,31 @@ const reclamationApi = axiosInstance => ({
       throw (error === null || error === void 0 || (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.data) || new Error("Impossible de charger les réclamations");
     }
   },
+  getListNatureReclamationApi: async (portailId, serviceCode) => {
+    try {
+      const response = await axiosInstance.get("/reclamation/list-nature", {
+        params: {
+          portailId,
+          service: serviceCode || undefined
+        }
+      });
+      return response.data.body;
+    } catch (error) {
+      var _error$response2;
+      throw (error === null || error === void 0 || (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data) || new Error("Impossible de charger les natures");
+    }
+  },
   createReclamationApi: async (data, portailId) => {
     try {
+      var _data$nature;
       const formData = new FormData();
       const serviceConcerne = data.service.codigo;
       formData.append("type", data.type);
       formData.append("service", serviceConcerne);
       formData.append("objet", data.objet);
       formData.append("description", data.sujet);
+      formData.append("telephone", data.telephone);
+      formData.append("nature", ((_data$nature = data.nature) === null || _data$nature === void 0 ? void 0 : _data$nature.codigo) || "");
       if (data.files && data.files.length > 0) {
         data.files.forEach(file => {
           formData.append("files", file);
@@ -61,8 +78,8 @@ const reclamationApi = axiosInstance => ({
       });
       return response.data.body;
     } catch (error) {
-      var _error$response2;
-      throw (error === null || error === void 0 || (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data) || new Error("Impossible de create nouvelle réclamation");
+      var _error$response3;
+      throw (error === null || error === void 0 || (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.data) || new Error("Impossible de créer une nouvelle réclamation");
     }
   },
   downloadDocumentApi: async documentGuid => {
@@ -70,8 +87,8 @@ const reclamationApi = axiosInstance => ({
       const response = await axiosInstance.post("/reclamation/download?guid=".concat(documentGuid));
       return response.data.body;
     } catch (error) {
-      var _error$response3;
-      throw (error === null || error === void 0 || (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.data) || new Error("Impossible de charger les réclamations");
+      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");
     }
   },
   getListServiceReclamationApi: async () => {
@@ -79,8 +96,8 @@ const reclamationApi = axiosInstance => ({
       const response = await axiosInstance.get("/reclamation/list-service");
       return response.data.body;
     } catch (error) {
-      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");
+      var _error$response5;
+      throw (error === null || error === void 0 || (_error$response5 = error.response) === null || _error$response5 === void 0 ? void 0 : _error$response5.data) || new Error("Impossible de charger les réclamations");
     }
   },
   getListServiceReclamationByPortailApi: async portailId => {
@@ -88,8 +105,8 @@ const reclamationApi = axiosInstance => ({
       const response = await axiosInstance.get("/reclamation/list-service/".concat(portailId));
       return response.data.body;
     } catch (error) {
-      var _error$response5;
-      throw (error === null || error === void 0 || (_error$response5 = error.response) === null || _error$response5 === void 0 ? void 0 : _error$response5.data) || new Error("Impossible de charger les réclamations");
+      var _error$response6;
+      throw (error === null || error === void 0 || (_error$response6 = error.response) === null || _error$response6 === void 0 ? void 0 : _error$response6.data) || new Error("Impossible de charger les réclamations");
     }
   },
   cloturerReclamation: id => axiosInstance.patch("/reclamation/".concat(id, "/cloturer")).then(r => r.data),

package/dist/components/widgets/PuiHelpWidget.js

@@ -12,6 +12,7 @@ require("core-js/modules/es.promise.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.regexp.test.js");
 require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.replace.js");
 require("core-js/modules/es.string.split.js");
 require("core-js/modules/es.string.trim.js");
 require("core-js/modules/es.typed-array.uint8-array.js");
@@ -34,6 +35,7 @@ var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _reactToastify = require("react-toastify");
 var _reactstrap = require("reactstrap");
 var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
+var _dompurify = _interopRequireDefault(require("dompurify"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
@@ -52,6 +54,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const WIDGET_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+const PHONE_RE = /^(0|\+212|0212)[5-7]\d{8}$/;
 const ContentPanel = _ref => {
   let {
     isOpen,
@@ -1252,6 +1255,7 @@ const CustomChatInterface = _ref3 => {
   });
 };
 const ReclamationFormModal = _ref4 => {
+  var _formData$service;
   let {
     open,
     onClose
@@ -1260,8 +1264,10 @@ const ReclamationFormModal = _ref4 => {
   const [formData, setFormData] = (0, _react.useState)({
     type: "",
     service: "",
+    nature: "",
     objet: "",
     sujet: "",
+    telephone: "",
     files: []
   });
   const [submitted, setSubmitted] = (0, _react.useState)(false);
@@ -1274,6 +1280,10 @@ const ReclamationFormModal = _ref4 => {
     data: listServiceReclamation,
     isFetching: isFetchingListServiceReclamation
   } = (0, _useReclamation.useListServiceReclamation)();
+  const {
+    data: listNatureReclamation,
+    isFetching: isFetchingListNatureReclamation
+  } = (0, _useReclamation.useListNatureReclamation)((_formData$service = formData.service) === null || _formData$service === void 0 ? void 0 : _formData$service.codigo);
   const [error, setError] = (0, _react.useState)(null);
   const errorRef = (0, _react.useRef)(null);
   const CustomPopper = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popper, _objectSpread(_objectSpread({}, props), {}, {
@@ -1311,6 +1321,11 @@ const ReclamationFormModal = _ref4 => {
       }, 300);
     }
   }, [open]);
+  (0, _react.useEffect)(() => {
+    setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      nature: ""
+    }));
+  }, [formData.service]);
   (0, _react.useEffect)(() => {
     if (error && errorRef.current) {
       errorRef.current.scrollIntoView({
@@ -1391,8 +1406,8 @@ const ReclamationFormModal = _ref4 => {
     onClose();
   };
   const canProceedStep1 = formData.type !== "";
-  const canProceedStep2 = formData.service !== "";
-  const canSubmit = formData.objet && formData.sujet;
+  const canProceedStep2 = formData.service !== "" && formData.nature !== "";
+  const canSubmit = formData.objet && formData.sujet && PHONE_RE.test(formData.telephone.replace(/[\s.-]/g, ""));
   const renderStepContent = () => {
     switch (activeStep) {
       case 0:
@@ -1513,6 +1528,37 @@ const ReclamationFormModal = _ref4 => {
               PopperComponent: CustomPopper,
               noOptionsText: "Aucun service trouv\xE9",
               className: "service-autocomplete"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+              options: listNatureReclamation || [],
+              loading: isFetchingListNatureReclamation,
+              value: formData.nature || "",
+              disabled: !formData.service,
+              onChange: (e, value) => setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                nature: value
+              })),
+              getOptionLabel: option => (option === null || option === void 0 ? void 0 : option.libelle) || "",
+              renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
+                label: "Nature de la demande",
+                placeholder: formData.service ? "Commencez à taper..." : "Sélectionnez d'abord un service",
+                variant: "outlined",
+                fullWidth: true
+              })),
+              renderOption: (props, option) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, props), {}, {
+                className: "service-option",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                    className: "service-bullet"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                    children: option === null || option === void 0 ? void 0 : option.libelle
+                  })]
+                })
+              })),
+              PopperComponent: CustomPopper,
+              noOptionsText: "Aucune nature trouv\xE9e",
+              className: "service-autocomplete"
             })]
           })
         });
@@ -1537,6 +1583,18 @@ const ReclamationFormModal = _ref4 => {
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
               className: "form-fields",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+                fullWidth: true,
+                required: true,
+                label: "T\xE9l\xE9phone",
+                value: formData.telephone,
+                onChange: e => setFormData(prev => _objectSpread(_objectSpread({}, prev), {}, {
+                  telephone: e.target.value
+                })),
+                error: Boolean(formData.telephone) && !PHONE_RE.test(formData.telephone.replace(/[\s.-]/g, "")),
+                helperText: "Format : 06 61 00 00 00, +212 6 61 00 00 00 ou 0212 6 61 00 00 00.",
+                variant: "outlined",
+                className: "form-field"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
                 fullWidth: true,
                 required: true,
                 label: "Objet",
@@ -1694,7 +1752,7 @@ const ReclamationFormModal = _ref4 => {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
             variant: "h6",
             className: "header-title",
-            children: "Nouvelle r\xE9clamation"
+            children: "Nouvelle demande d'assistance"
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
             variant: "caption",
             color: "white",
@@ -1828,15 +1886,18 @@ const ReclamationsList = _ref5 => {
         return "#757575";
     }
   };
+  const URL_RE = /(https?:\/\/[^\s)]+)/g;
   const renderTextWithLinks = text => {
     if (!text) return null;
-    const parts = text.split(/(https?:\/\/[^\s)]+)/g);
+    const parts = text.split(URL_RE);
     return parts.map((part, i) => /^https?:\/\//.test(part) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       href: part,
       target: "_blank",
       rel: "noopener noreferrer",
       style: {
         color: "var(--primary-color, #222f67)",
+        fontWeight: 600,
+        textDecoration: "underline",
         wordBreak: "break-all"
       },
       children: part
@@ -1844,6 +1905,7 @@ const ReclamationsList = _ref5 => {
       children: part
     }, i));
   };
+  const isHtml = str => /<\/?[a-z][\s\S]*>/i.test(str);
   const handleReclamationClick = reclamation => {
     setSelectedReclamation(reclamation);
     setDetailsDialogOpen(true);
@@ -1991,7 +2053,7 @@ const ReclamationsList = _ref5 => {
                 margin: 0,
                 lineHeight: "normal"
               },
-              children: "Mes r\xE9clamations"
+              children: "Mes demandes d'assistance"
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
               component: "div",
               sx: {
@@ -2417,7 +2479,7 @@ const ReclamationsList = _ref5 => {
                 whiteSpace: "pre-line",
                 fontFamily: WIDGET_FONT
               },
-              children: selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.description
+              children: renderTextWithLinks(selectedReclamation === null || selectedReclamation === void 0 ? void 0 : selectedReclamation.description)
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -2636,7 +2698,7 @@ const ReclamationsList = _ref5 => {
                             fontFamily: WIDGET_FONT
                           },
                           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                            children: [entry.changedByNom ? entry.changedByNom : "Service Odoo", " \xB7 "]
+                            children: [entry.changedByNom ? entry.changedByNom : "Service Odoo", " ", "\xB7", " "]
                           }), formatDate(entry.dateChangement)]
                         })]
                       })
@@ -2652,7 +2714,7 @@ const ReclamationsList = _ref5 => {
                         border: "1px solid #e0e0e0",
                         whiteSpace: "pre-line"
                       },
-                      children: entry.commentaire
+                      children: renderTextWithLinks(entry.commentaire)
                     }), entry.reponse && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                       style: {
                         marginTop: "8px",
@@ -2675,7 +2737,19 @@ const ReclamationsList = _ref5 => {
                           marginBottom: "4px"
                         },
                         children: "\uD83D\uDCAC R\xE9ponse"
-                      }), renderTextWithLinks(entry.reponse)]
+                      }), isHtml(entry.reponse) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        style: {
+                          whiteSpace: "normal"
+                        },
+                        dangerouslySetInnerHTML: {
+                          __html: _dompurify.default.sanitize(entry.reponse)
+                        }
+                      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        style: {
+                          whiteSpace: "pre-line"
+                        },
+                        children: renderTextWithLinks(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",
@@ -3726,7 +3800,7 @@ const PuiHelpWidget = _ref7 => {
     action: handleFaqClick
   }, ...(showReclamation ? [{
     icon: _freeSolidSvgIcons.faClipboardList,
-    title: "Mes réclamations",
+    title: "Mes demandes d'assistance",
     id: "mes-reclamations",
     action: () => {
       queryClient.invalidateQueries("get_list_reclamation");
@@ -3734,7 +3808,7 @@ const PuiHelpWidget = _ref7 => {
     }
   }, {
     icon: _freeSolidSvgIcons.faBullhorn,
-    title: "Nouvelle réclamation",
+    title: "Nouvelle demande d'assistance",
     id: "nouvelle-reclamation",
     action: () => setReclamationModalOpen(true)
   }] : []), {

package/dist/hooks/useReclamation.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useReouvreReclamation = exports.useListServiceReclamation = exports.useListReclamation = exports.useDownloadDocument = exports.useCreateReclamation = exports.useClotureReclamation = void 0;
+exports.useReouvreReclamation = exports.useListServiceReclamation = exports.useListReclamation = exports.useListNatureReclamation = exports.useDownloadDocument = exports.useCreateReclamation = exports.useClotureReclamation = void 0;
 var _reactQuery = require("react-query");
 var _PuiHelpWidgetContext = require("../components/common/PuiHelpWidgetContext");
 const useListReclamation = (page, search) => {
@@ -24,6 +24,22 @@ const useListReclamation = (page, search) => {
   });
 };
 exports.useListReclamation = useListReclamation;
+const useListNatureReclamation = serviceCode => {
+  const {
+    reclamationApi,
+    portailId
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  return (0, _reactQuery.useQuery)({
+    queryKey: ["get_list_nature_reclamation", portailId, serviceCode],
+    queryFn: () => reclamationApi.getListNatureReclamationApi(portailId, serviceCode),
+    enabled: Boolean(serviceCode),
+    initialData: [],
+    retry: 1,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false
+  });
+};
+exports.useListNatureReclamation = useListNatureReclamation;
 const useCreateReclamation = () => {
   const {
     reclamationApi,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "5.0.27",
+  "version": "5.0.29",
   "description": "Portnet UI",
   "keywords": [
     "react",
@@ -30,8 +30,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.13.2",
     "bootstrap": "^5.3.2",
+    "dompurify": "^3.4.12",
     "formik": "^2.2.9",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
@@ -48,6 +48,9 @@
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
   },
+  "peerDependencies": {
+    "axios": "0.27.2"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "rimraf dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files",
@@ -100,6 +103,7 @@
     "@storybook/testing-library": "^0.2.2",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
+    "axios": "^0.27.2",
     "cross-env": "^7.0.3",
     "husky": "^4.3.8",
     "prop-types": "^15.8.1",
@@ -107,4 +111,4 @@
     "storybook": "^7.6.4",
     "webpack": "^5.75.0"
   }
-}
+}