Add english links to frontend

Resolves: GREG-200

frontend/.env

@@ -6,6 +6,7 @@ REACT_APP_GUEST_CONSENT_STEP_ENABLED=true
 REACT_APP_SUPPORT_MAIL=test@example.org
 REACT_APP_INST=uio
 REACT_APP_SUPPORT_URL=https://example.org
+REACT_APP_SUPPORT_URL_EN=https://example.org/en
 
 REACT_APP_RESPONSIBLE_ORGANIZATION='Seksjon for integrasjon og elektroniske identiteter (INT)'
-REACT_APP_RESPONSIBLE_ORGANIZATION_LINK='https://www.usit.uio.no/om/organisasjon/bnt/usitint/'
\ No newline at end of file
+REACT_APP_RESPONSIBLE_ORGANIZATION_LINK='https://www.usit.uio.no/om/organisasjon/bnt/usitint/'

frontend/src/appConfig.ts

@@ -28,13 +28,26 @@ export const guestConsentStepEnabled: boolean =
   env.REACT_APP_GUEST_CONSENT_STEP_ENABLED === 'true'
 
 /* Footer content */
+export const responsibleOrganization: string =
+  env.REACT_APP_RESPONSIBLE_ORGANIZATION as string
+
+/* no links */
 export const itRulesLink: string = env.REACT_APP_IT_RULES_LINK as string
 export const privacyPolicyLink: string =
   env.REACT_APP_PRIVACY_POLICY_LINK as string
 export const technicalSupportLink: string = env.REACT_APP_SUPPORT_URL as string
 export const documentationLink: string =
   env.REACT_APP_DOCUMENTATION_LINK as string
-export const responsibleOrganization: string =
-  env.REACT_APP_RESPONSIBLE_ORGANIZATION as string
 export const responsibleOrganizationLink: string =
   env.REACT_APP_RESPONSIBLE_ORGANIZATION_LINK as string
+
+/* en links */
+export const itRulesLinkEn: string = env.REACT_APP_IT_RULES_LINK_EN as string
+export const privacyPolicyLinkEn: string =
+  env.REACT_APP_PRIVACY_POLICY_LINK_EN as string
+export const technicalSupportLinkEn: string =
+  env.REACT_APP_SUPPORT_URL_EN as string
+export const documentationLinkEn: string =
+  env.REACT_APP_DOCUMENTATION_LINK_EN as string
+export const responsibleOrganizationLinkEn: string =
+  env.REACT_APP_RESPONSIBLE_ORGANIZATION_LINK_EN as string

frontend/src/routes/components/footer.tsx

@@ -5,10 +5,15 @@ import { Link } from '@mui/material'
 import {
   responsibleOrganization,
   responsibleOrganizationLink,
+  responsibleOrganizationLinkEn,
   itRulesLink,
+  itRulesLinkEn,
   privacyPolicyLink,
+  privacyPolicyLinkEn,
   technicalSupportLink,
+  technicalSupportLinkEn,
   documentationLink,
+  documentationLinkEn,
 } from 'appConfig'
 
 import { getFooterLogo } from './logos'
@@ -70,7 +75,26 @@ StyledLink.defaultProps = {
 const LogoContainer = styled('div')({})
 
 function Footer() {
-  const { t } = useTranslation(['common', 'footer'])
+  const { t, i18n } = useTranslation(['common', 'footer'])
+  const getLink = (enLink: string | null, noLink: string | null) => {
+    let link
+    if (i18n.language === 'en') {
+      link = enLink || noLink
+    } else {
+      link = noLink || enLink
+    }
+    return link || ''
+  }
+
+  const getItRulesLink = () => getLink(itRulesLinkEn, itRulesLink)
+  const getTechnicalSupportLink = () =>
+    getLink(technicalSupportLinkEn, technicalSupportLink)
+  const getPrivacyPolicyLink = () =>
+    getLink(privacyPolicyLinkEn, privacyPolicyLink)
+  const getDocumentationLink = () =>
+    getLink(documentationLinkEn, documentationLink)
+  const getResponsibleOrganizationLink = () =>
+    getLink(responsibleOrganizationLinkEn, responsibleOrganizationLink)
   return (
     <FooterWrapper>
       <InfoSection>
@@ -79,20 +103,20 @@ function Footer() {
         <LinkContainer>
           <LinkSection>
             <LinkHeader>{t('footer:link.terms.header')}</LinkHeader>
-            <StyledLink href={itRulesLink}>
+            <StyledLink href={getItRulesLink()}>
               {t('footer:link.terms.ITRules')}
             </StyledLink>
-            <StyledLink href={privacyPolicyLink}>
+            <StyledLink href={getPrivacyPolicyLink()}>
               {t('footer:link.terms.privacy')}
             </StyledLink>
           </LinkSection>
 
           <LinkSection>
             <LinkHeader>{t('footer:link.help.header')}</LinkHeader>
-            <StyledLink href={technicalSupportLink}>
+            <StyledLink href={getTechnicalSupportLink()}>
               {t('footer:link.help.contact')}
             </StyledLink>
-            <StyledLink href={documentationLink}>
+            <StyledLink href={getDocumentationLink()}>
               {t('footer:link.help.doc')}
             </StyledLink>
           </LinkSection>
@@ -101,7 +125,7 @@ function Footer() {
             <LinkHeader>
               {t('footer:link.responsibleOrganization.header')}
             </LinkHeader>
-            <StyledLink href={responsibleOrganizationLink}>
+            <StyledLink href={getResponsibleOrganizationLink()}>
               {responsibleOrganization}
             </StyledLink>
           </LinkSection>