From 747f52426d40e28c3527a5eb512b610b47e577cc Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Mon, 7 Feb 2022 12:04:32 +0100
Subject: [PATCH] Add english links to frontend
Resolves: GREG-200
---
frontend/.env | 3 +-
frontend/src/appConfig.ts | 17 +++++++++--
frontend/src/routes/components/footer.tsx | 36 +++++++++++++++++++----
3 files changed, 47 insertions(+), 9 deletions(-)
diff --git a/frontend/.env b/frontend/.env
index b519139c..cd333a26 100644
--- a/frontend/.env
+++ b/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/'
diff --git a/frontend/src/appConfig.ts b/frontend/src/appConfig.ts
index 01dc4ec2..f0ee237e 100644
--- a/frontend/src/appConfig.ts
+++ b/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
diff --git a/frontend/src/routes/components/footer.tsx b/frontend/src/routes/components/footer.tsx
index 56d4452b..70c435fc 100644
--- a/frontend/src/routes/components/footer.tsx
+++ b/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>
--
GitLab