Merge pull request #49 from navikt/dev-language-update

Amirhlotfi · web-flow · commit 77c60ec8bbe7 · 2023-03-24T15:23:29.000+01:00
Lytte på språk og oversette tekst til spesifisert språk
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "dayjs": "1.11.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-intl": "6.0.5",
     "react-query": "3.39.2",
     "rollup-plugin-terser": "7.0.2",
     "vite-plugin-css-injected-by-js": "1.4.0",
diff --git a/src/Mikrofrontend.jsx b/src/Mikrofrontend.jsx
@@ -1,6 +1,6 @@
 import { QueryClientProvider } from "react-query";
 import { initializeAmplitude } from "./utils/amplitude";
-import LanguageProvider from "./utils/LanguageProvider";
+import LanguageProvider from "./provider/LanguageProvider";
 import queryClient from "./utils/query";
 import App from "./App";
 import "./App.module.css";
@@ -9,7 +9,7 @@ const Mikrofrontend = () => {
   initializeAmplitude();
 
   return (
-    <LanguageProvider defaultSprak="nb">
+    <LanguageProvider>
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
diff --git a/src/components/emptyVarselList/EmptyVarselList.jsx b/src/components/emptyVarselList/EmptyVarselList.jsx
@@ -1,23 +1,25 @@
 import { BodyLong, Heading, Link } from "@navikt/ds-react";
-import { useIntl } from "react-intl";
 import IngenVarslerKatt from "../../assets/IngenVarslerKatt";
 import style from "./EmptyVarselList.module.css";
 import globalStyle from "../../App.module.css";
 import { minSideUrl } from "../../api/urls";
+import text from "../../language/text";
+import { useContext } from "react";
+import { LanguageContext } from "../../provider/LanguageProvider";
 
 const EmptyVarselList = () => {
-  const translate = useIntl();
+  const language = useContext(LanguageContext);
   return (
     <div className={style.wrapper}>
       <div className={`${style.innerWrapper} ${globalStyle.tekstInnhold}`}>
         <IngenVarslerKatt />
         <div className={style.ingenVarslerTekstWrapper}>
           <Heading level="2" className={style.header} size={"small"}>
-            {translate.formatMessage({ id: "ingen-tidligere-varsler-header" })}
+            {text["ingenTidligereVarslerHeader"][language]}
           </Heading>
-          <BodyLong className={style.body}>{translate.formatMessage({ id: "ingen-tidligere-varsler-body" })}</BodyLong>
+          <BodyLong className={style.body}>{text["ingenTidligereVarslerbody"][language]} </BodyLong>
           <Link href={minSideUrl} className={style.link}>
-            {translate.formatMessage({ id: "gaa-til-min-side" })}
+            {text["gaaTilMinSide"][language]}
           </Link>
         </div>
       </div>
diff --git a/src/components/filter/searchField/SearchField.jsx b/src/components/filter/searchField/SearchField.jsx
@@ -1,18 +1,19 @@
-import SearchIkon from "../../../assets/SearchIkon";
-import { TextField, Search } from "@navikt/ds-react";
+import { Search } from "@navikt/ds-react";
 import style from "./SearchField.module.css";
 import useStore from "../../../store/store";
 import { updateSearch } from "../../../store/selectors";
-import { useIntl } from "react-intl";
+import text from "../../../language/text";
+import { useContext } from "react";
+import { LanguageContext } from "../../../provider/LanguageProvider";
 
 const SearchField = () => {
   const sok = useStore(updateSearch);
-  const translate = useIntl();
+  const language = useContext(LanguageContext);
 
   return (
     <Search
       className={style.searchField}
-      label={translate.formatMessage({ id: "sokefelt.label" })}
+      label={text["sokefeltLabel"][language]}
       variant="simple"
       hideLabel={false}
       onChange={(obj) => {
diff --git a/src/components/filter/toggleNotifikasjon/ToggleNotifikasjon.jsx b/src/components/filter/toggleNotifikasjon/ToggleNotifikasjon.jsx
@@ -1,25 +1,27 @@
 import { ToggleGroup } from "@navikt/ds-react";
 import style from "./ToggleNotifikasjon.module.css";
 import useStore from "../../../store/store";
-import { useIntl } from "react-intl";
 import { selectAlle, selectBeskjed, selectOppgave } from "../../../store/selectors";
+import { useContext } from "react";
+import { LanguageContext } from "../../../provider/LanguageProvider";
+import text from "../../../language/text";
 
 const ToggleNotifikasjon = () => {
   const alle = useStore(selectAlle);
   const oppgave = useStore(selectOppgave);
   const beskjed = useStore(selectBeskjed);
-  const translate = useIntl();
+  const language = useContext(LanguageContext);
 
   return (
     <ToggleGroup className={style.toggleNotifikasjon} size="medium" defaultValue="alle">
       <ToggleGroup.Item value="alle" onClick={alle}>
-        {translate.formatMessage({ id: "filter.toggle-item.alle" })}
+        {text["filterToggleItemAlle"][language]}
       </ToggleGroup.Item>
       <ToggleGroup.Item value="oppgave" onClick={oppgave}>
-        {translate.formatMessage({ id: "filter.toggle-item.oppgave" })}
+        {text["filterToggleItemOppgave"][language]}
       </ToggleGroup.Item>
       <ToggleGroup.Item value="beskjed" onClick={beskjed}>
-        {translate.formatMessage({ id: "filter.toggle-item.beskjed" })}
+        {text["filterToggleItemBeskjed"][language]}
       </ToggleGroup.Item>
     </ToggleGroup>
   );
diff --git a/src/components/tidligereVarsler/TidligereVarsler.jsx b/src/components/tidligereVarsler/TidligereVarsler.jsx
@@ -1,6 +1,5 @@
-import { useIntl } from "react-intl";
 import { useQuery } from "react-query";
-import { useMemo } from "react";
+import { useMemo, useContext } from "react";
 import { Heading, Alert } from "@navikt/ds-react";
 import EmptyVarselList from "../emptyVarselList/EmptyVarselList";
 import Filter from "../filter/Filter";
@@ -12,9 +11,11 @@ import { selectSearch, selectType } from "../../store/selectors";
 import useStore from "../../store/store";
 import style from "./TidligereVarsler.module.css";
 import globalStyle from "../../App.module.css";
+import text from "../../language/text";
+import { LanguageContext } from "../../provider/LanguageProvider";
 
 const VarslingerPage = () => {
-  const translate = useIntl();
+  const language = useContext(LanguageContext);
   const { data: varsler, isSuccess } = useQuery(inaktiveVarslerApiUrl, fetcher);
 
   const filterType = useStore(selectType);
@@ -32,10 +33,10 @@ const VarslingerPage = () => {
   return (
     <div className={style.mainWrapper}>
       <div className={`${style.tidligereVarslerHeading} ${globalStyle.tekstInnhold}`}>
-        <Heading size={"large"}>{translate.formatMessage({ id: "tidligere-varsler.overskrift" })}</Heading>
+        <Heading size={"large"}>{text["tidligereVarslerOverskrift"][language]}</Heading>
         {hasMaskedVarsel && (
           <Alert className={style.hoyereSikkerhetsnivaaAlert} variant="info">
-            {translate.formatMessage({ id: "hoyere-sikkerhetnivaa" })}
+            {text["hoyereSikkerhetsnivaa"][language]}
           </Alert>
         )}
       </div>
diff --git a/src/components/varsel/Varsel.jsx b/src/components/varsel/Varsel.jsx
@@ -1,29 +1,29 @@
 import React from "react";
-import { Heading, Ingress, BodyShort, Tag, BodyLong } from "@navikt/ds-react";
+import { Heading, BodyLong } from "@navikt/ds-react";
 import style from "./Varsel.module.css";
-import VarselTag from "../varselTag/VarselTag";
 import { formatToReadableDate } from "../../utils/date";
-import { useIntl } from "react-intl";
+import { useContext } from "react";
+import { LanguageContext } from "../../provider/LanguageProvider";
+import text from "../../language/text";
 
-const getVarsletPaa = (kanaler) => {
-  const translate = useIntl();
+const getVarsletPaa = (kanaler, language) => {
   if (kanaler.includes("SMS") && kanaler.includes("EPOST")) {
-    return translate.formatMessage({ id: "varsel.varslet-paa-epost-sms" });
+    return text["varselEksterntVarsletEpostOgSMS"][language];
   } else if (kanaler.includes("SMS")) {
-    return translate.formatMessage({ id: "varsel.varslet-paa-sms" });
+    return text["varselEksterntVarsletSMS"][language];
   } else if (kanaler.includes("EPOST")) {
-    return translate.formatMessage({ id: "varsel.varslet-paa-epost" });
+    return text["varselEksterntVarsletEpost"][language];
   }
 };
 
 function Varsel({ varselData }) {
   const isOppgave = varselData.type === "OPPGAVE";
-  const varselMottatt = isOppgave ? "varsel.oppgave-mottatt" : "varsel.beskjed-mottatt";
-  const translate = useIntl();
+  const varselMottatt = isOppgave ? "varselOppgaveMottatt" : "varselBeskjedMottatt";
+  const language = useContext(LanguageContext);
   const maskedText = "** ******* ******* *** * ***** ******** ******** *** ** ***********************";
   const maskedAriaLabel = "Tekst ikke synlig";
 
-  const eksternVarslingStatus = getVarsletPaa(varselData.eksternVarslingKanaler);
+  const eksternVarslingStatus = getVarsletPaa(varselData.eksternVarslingKanaler, language);
 
   return (
     <div className={style.varselWrapper}>
@@ -39,7 +39,7 @@ function Varsel({ varselData }) {
       </Heading>
 
       <BodyLong size="small" className={style.varselDate}>
-        {`${translate.formatMessage({ id: varselMottatt })} ${formatToReadableDate(varselData.forstBehandlet)}`}
+        {`${text[varselMottatt][language]} ${formatToReadableDate(varselData.forstBehandlet)}`}
 
         {eksternVarslingStatus && <span className={style.eksternVarslingStatus}>{eksternVarslingStatus}</span>}
       </BodyLong>
diff --git a/src/components/varselTag/VarselTag.jsx b/src/components/varselTag/VarselTag.jsx
@@ -1,7 +1,6 @@
 import style from "./VarselTag.module.css";
 import { Tag } from "@navikt/ds-react";
 import "@navikt/ds-css";
-import { useIntl } from "react-intl";
 
 const VarselTag = ({ dato, varselType, arkivertAvNAV }) => {
   let tagClassName;
diff --git a/src/language/en.json b/src/language/en.json
diff --git a/src/language/nb.json b/src/language/nb.json
diff --git a/src/language/text.jsx b/src/language/text.jsx
@@ -0,0 +1,114 @@
+const text = {
+  tidligereVarslerOverskrift: {
+    nb: "Tidligere varsler",
+    nn: "Tidlegare varsel",
+    en: "Past notifications",
+  },
+  hoyereSikkerhetsnivaa: {
+    nb: "Du må logge inn med BankID, Buypass eller Commfides for å se alle varslene.",
+    nn: "Du må logge inn med BankID, Buypass eller Commfides for å sjå alle varsla.",
+    en: "Please log in with BankID, Buypass or Commfides to see all notifications.",
+  },
+  sokefeltLabel: {
+    nb: "Søk i varsler",
+    nn: "Søk i varsel",
+    en: "Search notifications",
+  },
+  filterToggleItemAlle: {
+    nb: "Alle",
+    nn: "Alle",
+    en: "All",
+  },
+  filterToggleItemOppgave: {
+    nb: "Oppgave",
+    nn: "Oppgåve",
+    en: "Task",
+  },
+  filterToggleItemBeskjed: {
+    nb: "Beskjed",
+    nn: "Beskjed",
+    en: "Message",
+  },
+  filterToggleItemInnboks: {
+    nb: "Innboks",
+    nn: "Innboks",
+    en: "Inbox",
+  },
+  varslerListTittelNyeVarsler: {
+    nb: "Nye varsler",
+    nn: "Nye varsel",
+    en: "New notifications",
+  },
+  varslerListTittelTidligereVarsler: {
+    nb: "Tidligere varsler",
+    nn: "Tidlegare varsel",
+    en: "Past notifications",
+  },
+  beskjedArkiverButtonLabel: {
+    nb: "Arkiver",
+    nn: "Arkiver",
+    en: "Archive",
+  },
+  beskjedMaskedTitle: {
+    nb: "Du har fått en beskjed, logg inn med høyere sikkerhetsnivå for å se meldingen.",
+    nn: "Du har fått ein beskjed, logg inn med høgare sikkerheitsnivå for å sjå beskjeden.",
+    en: "You have a message, please log in with a higher security level to read the message.",
+  },
+  oppgaveMaskedTitle: {
+    nb: "Du har fått en oppgave, logg inn med høyere sikkerhetsnivå for å se oppgaven.",
+    nn: "Du har fått ei oppgåve, logg inn med høgare sikkerheitsnivå for å sjå oppgåva.",
+    en: "You have a task, please log in with a higher security level to see the task.",
+  },
+  varslerIngenNyeVarsler: {
+    nb: "Du har ingen nye varsler",
+    nn: "Du har ingen nye varsel",
+    en: "You have no new messages.",
+  },
+  varslerViVarslerDeg: {
+    nb: "Vi varsler deg når noe skjer",
+    nn: "Vi varslar deg når noko skjer",
+    en: "We will notify you when something happens.",
+  },
+  ingenTidligereVarslerHeader: {
+    nb: "Du har ingen tidligere varsler",
+    nn: "Du har ingen tidlegare varsel",
+    en: "You have no past notifications",
+  },
+  ingenTidligereVarslerbody: {
+    nb: "Når du har gjort en oppgave eller lest en beskjed havner de her. Nye oppgaver og beskjeder finner du i varsler øverst på siden, eller under navnet ditt på Min side.",
+    nn: "Når du har gjort ei oppgåve eller lest ein beskjed ligg dei her. Nye oppgåver eller beskjedar finn du i varsel øvst på sida, eller under namnet ditt på Mi side.",
+    en: "When you have completed a task or read a message, you will find them here. You will find new tasks or messages on top of the page, or underneath your name on My page.",
+  },
+  varselOppgaveMottatt: {
+    nb: "Oppgave mottatt",
+    nn: "Oppgave motteke",
+    en: "Task received",
+  },
+  varselBeskjedMottatt: {
+    nb: "Beskjed mottatt",
+    nn: "Beskjed motteke",
+    en: "Message received",
+  },
+  gaaTilMinSide: {
+    nb: "Gå til Min side",
+    nn: "Gå til Mi Side",
+    en: "Go to My page",
+  },
+  varselEksterntVarsletSMS: {
+    nb: "Varslet på SMS",
+    nn: "Varslet på SMS",
+    en: "Notified by SMS",
+  },
+  varselEksterntVarsletEpost: {
+    nb: "Varslet på e-post",
+    nn: "Varslet på e-post",
+    en: "Notified by e-mail",
+  },
+  varselEksterntVarsletEpostOgSMS: {
+    nb: "Varslet på e-post og SMS",
+    nn: "Varslet på e-post og SMS",
+    en: "Notified by e-mail and SMS",
+  },
+};
+
+export default text;
diff --git a/src/provider/LanguageProvider.jsx b/src/provider/LanguageProvider.jsx
@@ -0,0 +1,17 @@
+import { useEffect, useState, createContext } from "react";
+
+const defaultLanguage = sessionStorage.getItem("language") ?? "nb";
+export const LanguageContext = createContext(defaultLanguage);
+
+const LanguageProvider = ({ children }) => {
+  const [language, setLanguage] = useState(defaultLanguage);
+  useEffect(() => {
+    window.addEventListener("storage", () => {
+      setLanguage(sessionStorage.getItem("language") ?? "nb");
+    });
+  }, []);
+
+  return <LanguageContext.Provider value={language}>{children}</LanguageContext.Provider>;
+};
+
+export default LanguageProvider;
diff --git a/src/utils/LanguageProvider.jsx b/src/utils/LanguageProvider.jsx
