Merge pull request #113 from Som-Energia/FIX_maintenance_screen_language

🐛 set language at i18n if maintenance screen

cypress/integration/context/maintenanceScreen.spec.js

@@ -4,11 +4,10 @@ describe('Maintenance Screen', () => {
     return false
   })
 
-  beforeEach(() => {
-    cy.visit('/')
-  })
-
   describe('ping responses', function () {
+    beforeEach(() => {
+      cy.visit('/')
+    })
     it('returns an unexpected error', function () {
       cy.statusCode500()
       cy.contains('Estamos realizando tareas de mantenimiento', {
@@ -28,4 +27,37 @@ describe('Maintenance Screen', () => {
       }).should('not.exist')
     })
   })
+
+  describe('language', function () {
+    beforeEach(() => {
+      cy.statusCode500()
+    })
+    it('is set for "ca"', function () {
+      cy.visit('/ca/contract-20')
+      cy.contains('Tornem aviat', {
+        matchCase: false
+      })
+    })
+    it('is set for "es"', function () {
+      cy.visit('/es/contract-20')
+      cy.statusCode500()
+      cy.contains('Volvemos pronto', {
+        matchCase: false
+      })
+    })
+    it('is set for "gl"', function () {
+      cy.visit('/gl/contract-20')
+      cy.statusCode500()
+      cy.contains('Voltamos axiña', {
+        matchCase: false
+      })
+    })
+    it('is set for "eu"', function () {
+      cy.visit('/eu/contract-20')
+      cy.statusCode500()
+      cy.contains('Laster itzuliko gara', {
+        matchCase: false
+    })
+    })
+  })
 })

src/components/Maintenance.jsx

@@ -1,38 +1,54 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Container from '@mui/material/Container'
 
 import { useTranslation } from 'react-i18next'
 
 import manteniment from '../images/tasques-manteniment-web.svg'
 
 const Maintenance = () => {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
 
-  return <Container sx={{ flexGrow: 1, padding: 12 }}>
-    <div style={{
-      'display': 'block',
-      textAlign: 'center',
-      alignItems: 'center',
-    }}>
-      <img src={manteniment} alt="Estem en mode manteniment" />
-    </div>
-    <div style={{
-      marginTop: '15px',
-      color: '#4d4d4d',
-      fontFamily: 'Roboto, sans-serif',
-      fontSize: '4em',
-      fontWeight: 'bold',
-      textAlign: 'center',
-    }}>{t("MAINTENANCE_TEXT1")}</div>
-    <div style={{
-      marginTop: '15px',
-      color: '#96B633',
-      fontFamily: 'Roboto, sans-serif',
-      fontSize: '5em',
-      fontWeight: 'bold',
-      textAlign: 'center',
-    }}>{t("MAINTENANCE_TEXT2")}</div>
-  </Container>
+  useEffect(() => {
+    const language = window.location.pathname.split('/')[1]
+    if (['ca', 'es', 'eu', 'gl'].includes(language)) {
+      i18n.changeLanguage(language)
+    }
+  }, [])
+
+  return (
+    <Container sx={{ flexGrow: 1, padding: 12 }}>
+      <div
+        style={{
+          display: 'block',
+          textAlign: 'center',
+          alignItems: 'center'
+        }}>
+        <img src={manteniment} alt="Estem en mode manteniment" />
+      </div>
+      <div
+        style={{
+          marginTop: '15px',
+          color: '#4d4d4d',
+          fontFamily: 'Roboto, sans-serif',
+          fontSize: '4em',
+          fontWeight: 'bold',
+          textAlign: 'center'
+        }}>
+        {t('MAINTENANCE_TEXT1')}
+      </div>
+      <div
+        style={{
+          marginTop: '15px',
+          color: '#96B633',
+          fontFamily: 'Roboto, sans-serif',
+          fontSize: '5em',
+          fontWeight: 'bold',
+          textAlign: 'center'
+        }}>
+        {t('MAINTENANCE_TEXT2')}
+      </div>
+    </Container>
+  )
 }
 
 export default Maintenance