addd. tx for next ui components

micro-frontends/public/i18n/locale_en.json

@@ -18,5 +18,13 @@
   "EDIT_FORM_ERROR_MESSAGE": "Please enter a value in the mandatory fields or correct the value in the highlighted fields to proceed",
   "ACKNOWLEDGEMENT":"Acknowledge",
   "ENTER_NOTES": "Enter Notes",
-  "NOTE": "Note"
+  "NOTE": "Note",
+  "ALLERGY_SAVED_SUCCESS":"Allergy saved successfully",
+  "ERROR_SAVING_ALLERGY":"Error saving allergy",
+  "ACKNOWLEDGEMENT_REQUIRED_TEXT": "Acknowledgement required",
+  "MALE":"Male",
+  "FEMALE": "Female",
+  "OTHER": "Other",
+  "ADDITIONAL_COMMENT_ALLERGY": "Additional comments such as onset date etc.",
+  "ALLERGEN_SEARCH_PLACEHOLDER": "Type to search Allergen"
 }

micro-frontends/public/i18n/locale_fr.json

@@ -1,22 +1,30 @@
 {
-    "NO_FORM": "Aucun formulaire trouvé pour ce patient....",
-    "DASHBOARD_TITLE_FORMS_2_DISPLAY_CONTROL_KEY": "Formulaires d'observations",
-    "LOADING_MESSAGE": "Chargement... Veuillez patienter",
-    "NO_ALLERGIES": "Aucune allergie enregistrée pour ce patient.",
-    "BACK_TO_ALLERGEN": "Retour à Allergies",
-    "ALLERGIES_HEADING": "Allergies et réactions",
-    "ALLERGIES_DISPLAY_CONTROL_HEADING": "Allergies",
-    "SEVERITY": "Gravité",
-    "SAVE": "Sauvegarder",
-    "CANCEL": "Annuler",
-    "NO_ALLERGENS_FOUND": "Aucun allergène trouvé",
-    "SEARCH_ALLERGEN": "Rechercher un allergène",
-    "REACTIONS": "Réaction(s)",
-    "SEARCH_REACTION": "Réaction à la recherche",
-    "COMMON_REACTIONS": "Réactions courantes",
-    "ALLERGEN": "Allergène",
-    "EDIT_FORM_ERROR_MESSAGE": "Veuillez saisir une valeur dans les champs obligatoires ou corriger la valeur dans les champs en surbrillance pour continuer",
-    "ACKNOWLEDGEMENT": "Reconnaître",
-    "ENTER_NOTES": "Saisir des notes",
-    "NOTE": "Note"
+  "NO_FORM": "Aucun formulaire trouvé pour ce patient....",
+  "DASHBOARD_TITLE_FORMS_2_DISPLAY_CONTROL_KEY": "Formulaires d'observations",
+  "LOADING_MESSAGE": "Chargement... Veuillez patienter",
+  "NO_ALLERGIES": "Aucune allergie enregistrée pour ce patient.",
+  "BACK_TO_ALLERGEN": "Retour à Allergies",
+  "ALLERGIES_HEADING": "Allergies et réactions",
+  "ALLERGIES_DISPLAY_CONTROL_HEADING": "Allergies",
+  "SEVERITY": "Gravité",
+  "SAVE": "Sauvegarder",
+  "CANCEL": "Annuler",
+  "NO_ALLERGENS_FOUND": "Aucun allergène trouvé",
+  "SEARCH_ALLERGEN": "Rechercher un allergène",
+  "REACTIONS": "Réaction(s)",
+  "SEARCH_REACTION": "Réaction à la recherche",
+  "COMMON_REACTIONS": "Réactions courantes",
+  "ALLERGEN": "Allergène",
+  "EDIT_FORM_ERROR_MESSAGE": "Veuillez saisir une valeur dans les champs obligatoires ou corriger la valeur dans les champs en surbrillance pour continuer",
+  "ACKNOWLEDGEMENT": "Reconnaître",
+  "ENTER_NOTES": "Saisir des notes",
+  "NOTE": "Note",
+  "ALLERGY_SAVED_SUCCESS": "Allergie enregistrée avec succès",
+  "ERROR_SAVING_ALLERGY": "Erreur lors de l'enregistrement de l'allergie",
+  "ACKNOWLEDGEMENT_REQUIRED_TEXT": "Accusé de réception requis",
+  "MALE": "Homme",
+  "FEMALE": "Femme",
+  "OTHER": "Autre",
+  "ADDITIONAL_COMMENT_ALLERGY": "Commentaires supplémentaires tels que la date d'apparition, etc.",
+  "ALLERGEN_SEARCH_PLACEHOLDER": "Saisissez pour rechercher un allergène"
 }

micro-frontends/src/next-ui/Components/AddAllergy/AddAllergy.jsx

@@ -121,7 +121,10 @@ export function AddAllergy(props) {
                   <span className={"red-text"}>&nbsp;*</span>
                 </div>
                 <RadioButtonGroup
-                  name={"severity"}
+                  name={<FormattedMessage
+                    id={"SEVERITY"}
+                    defaultMessage={"Severity"}
+                  />}
                   key={"Severity"}
                   onChange={(e) => {
                     setSeverity(e);
@@ -131,6 +134,7 @@ export function AddAllergy(props) {
                   {severityOptions.map((option) => {
                     return (
                       <RadioButton
+                        key={option.uuid}
                         labelText={option.name}
                         value={option.uuid}
                       ></RadioButton>
@@ -139,7 +143,11 @@ export function AddAllergy(props) {
                 </RadioButtonGroup>
                 <TextArea
                   labelText={""}
-                  placeholder={"Additional comments such as onset date etc."}
+                  placeholder={
+                    <FormattedMessage
+                    id={"SEVERITY"}
+                    defaultMessage={"Additional comments such as onset date etc."}
+                  />}
                   onBlur={(e) => {
                     setNotes(e.target.value);
                   }}

micro-frontends/src/next-ui/Components/EditObservationForm/EditObservationForm.jsx

@@ -135,7 +135,10 @@ EditObservationForm.propTypes = {
     encounterUuid: PropTypes.string.isRequired,
     consultationMapper: PropTypes.object.isRequired,
     handleSave: PropTypes.func.isRequired,
-    handleSaveError: PropTypes.func.isRequired
+    handleSaveError: PropTypes.func.isRequired,
+    handleEditSave: PropTypes.func.isRequired,
+    editErrorMessage: PropTypes.string.isRequired,
+    setEditFormLoading: PropTypes.func.isRequired
 };
 
 export default EditObservationForm;

micro-frontends/src/next-ui/Components/ErrorNotification/ErrorNotification.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import "./ErrorNotification.scss";
 import { I18nProvider } from '../i18n/I18nProvider';
 import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
 
 const ErrorNotification = ({setEditError, editErrorMessage}) => {
     const errorMessage = editErrorMessage ? editErrorMessage : <FormattedMessage
@@ -24,4 +25,9 @@ const ErrorNotification = ({setEditError, editErrorMessage}) => {
   )
 }
 
+ErrorNotification.propTypes = {
+    setEditError: PropTypes.func,
+    editErrorMessage: PropTypes.string
+}
+
 export default ErrorNotification;

micro-frontends/src/next-ui/Components/SearchAllergen/SearchAllergen.jsx

@@ -59,7 +59,7 @@ export function SearchAllergen(props) {
       <div>
         <Search
           id={"allergen-search"}
-          placeholder={"Type to search Allergen"}
+          placeholder={ <FormattedMessage id={"ALLERGEN_SEARCH_PLACEHOLDER"} defaultMessage="Type to search Allergen"/>}
           onChange={(e) => {
             search(e.target.value);
           }}

micro-frontends/src/next-ui/Components/ViewAllergiesAndReactions/ViewAllergiesAndReactions.jsx

@@ -22,7 +22,7 @@ export const ViewAllergiesAndReactions = (props) => {
                         <div>{allergy.reactions.join(", ")}</div>
                         <div className={"capitalize"}>{allergy.severity}</div>
                     </div>
-                    return (<Accordion>
+                    return (<Accordion key={index}>
                         <AccordionItem title={title}>
                             <div className={"allergies-accordion-item"}>
                                 <div>

micro-frontends/src/next-ui/Containers/patientAlergies/PatientAlergiesControl.jsx

@@ -241,8 +241,8 @@ export function PatientAlergiesControl(props) {
               }}
             />
           )}
-          <NotificationCarbon messageDuration={3000} onClose={()=>{setShowSuccessPopup(false); window.location.reload()}} showMessage={showSuccessPopup} kind={"success"} title={"Allergy saved successfully"} hideCloseButton={true}/>
-          <NotificationCarbon messageDuration={3000} onClose={()=>{setShowErrorPopup(false);}} showMessage={showErrorPopup} kind={"error"} title={allergyError[error?.trim()] ?? "Error saving allergy"} hideCloseButton={true}/>
+          <NotificationCarbon messageDuration={3000} onClose={()=>{setShowSuccessPopup(false); window.location.reload()}} showMessage={showSuccessPopup} kind={"success"} title={<FormattedMessage id={"ALLERGY_SAVED_SUCCESS"} defaultMessage="Allergy saved successfully"/>} hideCloseButton={true}/>
+          <NotificationCarbon messageDuration={3000} onClose={()=>{setShowErrorPopup(false);}} showMessage={showErrorPopup} kind={"error"} title={allergyError[error?.trim()] ?? <FormattedMessage id={"ERROR_SAVING_ALLERGY"} defaultMessage="Error saving allergy"/>} hideCloseButton={true}/>
         </div>
       )}
       </I18nProvider>

micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.jsx

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import PatientsList from '../../Components/ProviderNotificationPatients/PatientsList';
 
-export function ProviderNotifications(props) {
-    const acknowledgementRequiredText = <FormattedMessage id="AKNOWLEDGEMENT_REQUIRED_TEXT" defaultMessage="Acknowledgement required" />;
+export function ProviderNotifications() {
+    const acknowledgementRequiredText = <FormattedMessage id="ACKNOWLEDGEMENT_REQUIRED_TEXT" defaultMessage="Acknowledgement required" />;
 
 
     return (

micro-frontends/src/next-ui/utils/utils.js

@@ -1,5 +1,7 @@
+import React from "react";
 import moment from "moment";
 import { defaultDateTimeFormat } from "../constants";
+import { FormattedMessage } from "react-intl";
 
 export const formatDate = (value, format = defaultDateTimeFormat) => {
   return value ? moment(value).format(format) : value;
@@ -19,11 +21,11 @@ export const formatGender = (gender) => {
   let formattedGender;
 
   if (gender === "M") {
-    formattedGender = "Male";
+    formattedGender = <FormattedMessage id={"MALE"} defaultMessage="Male"/>;
   } else if (gender === "F") {
-    formattedGender = "Female";
+    formattedGender = <FormattedMessage id={"FEMALE"} defaultMessage="Female"/>;
   } else {
-    formattedGender = "Other";
+    formattedGender = <FormattedMessage id={"OTHER"} defaultMessage="Other"/>;
   }
 
   return formattedGender;