Refactored and updated about page (#355)

Changes: - switched about page to be functional component instead of class component - use html string for whole main about content instead of small translated pieces - updated what is said on about page's main content
City-of-Turku · Sep 27, 2024 · 6652eee · 6652eee
1 parent 6c324af
commit 6652eee
Show file tree

Hide file tree

Showing 11 changed files with 241 additions and 89 deletions.
diff --git a/app/i18n/messages/en.json b/app/i18n/messages/en.json
@@ -1,15 +1,10 @@
 {
   "AboutPage.title": " Information about the Reservation Service varaamo.turku.fi",
-  "AboutPageContent.basedOnParagraph": "The pilot use of the Reservation Service Varaamo will be carried out in a project of the Turku Group which includes developing resource reservations. It is part of the spearhead project Smart and Wise Turku. One of the goals of the spearhead project includes organizing the services in a cost-effective way by renewing the working methods of the city and by exploiting the potential of the digitalization and the data it produces. Based on this, the project aims to optimize, for example, the use of facilities and other resources, to collect and exploit the service usage information, to improve web accessibility and to reduce the operating costs by streamlining the reservation process of the City of Turku.",
   "AboutPageContent.customerRegisterHeader": "Privacy Policy",
   "AboutPageContent.customerRegisterLink": "<a href='http://www.turku.fi/en/turku-info/privacy-policy' rel='noopener noreferrer' target='_blank'>www.turku.fi/en/turku-info/privacy-policy</a>",
   "AboutPageContent.customerRegisterLinkVR": "<a href='https://rekisteri.turku.fi' rel='noopener noreferrer' target='_blank'>https://rekisteri.turku.fi</a> Please find a description (in Finnish) of the client register associated with the Reservation Service Varaamo in the following address under the title ’Varaus- ja tietokantarekisteri Varaamo ja respa’ ",
   "AboutPageContent.customerRegisterLinkSUO": "We use the Suomi.fi web service for the strong identification. Please find the privacy statement of the service in the following address <a href='https://www.suomi.fi/instructions-and-support/general-information-on-the-web-service/data-protection' rel='noopener noreferrer' target='_blank'>https://www.suomi.fi/instructions-and-support/general-information-on-the-web-service/data-protection</a>",
   "AboutPageContent.customerRegisterParagraph": "You will find information about the usage of the personal information of the City of Turku and about the privacy policy of this service in the addresses below.",
-  "AboutPageContent.defaultHeader": "Information about the varaamo.turku.fi service",
-  "AboutPageContent.defaultLead": "Reservation Service Varaamo is an online service maintained by the City of Turku for reserving public premises and workstations for private use.",
-  "AboutPageContent.defaultReservableParagraph": "In the pilot phase of the online service you can reserve the premises and devices of the Turku Main Library.",
-  "AboutPageContent.developmentParagraph": "We try to get information of the usability of the Reservation Service Varaamo by piloting and by gathering user experiences even if it is still being developed.",
   "AboutPageContent.espooHeader": "Information about the varaamo.hel.fi service",
   "AboutPageContent.espooLead": "Varaamo is an online service maintained by the City of Helsinki, which enables you to book public premises and workstations of the City of Helsinki and City of Espoo for private use.",
   "AboutPageContent.espooPartnersHeader": "Espoo is piloting Varaamo as a part of the 6Aika project.",
@@ -18,10 +13,7 @@
   "AboutPageContent.vantaaLead": "Varaamo is an online service maintained by the City of Helsinki, which enables you to book public premises and workstations for private use.",
   "AboutPageContent.vantaaPartnersHeader": "Vantaa is piloting Varaamo as a part of the 6Aika project.",
   "AboutPageContent.vantaaReservableParagraph": "During the pilot stage you can use the service to reserve the premises, workstations and equipment in the library of Tikkurila and Point. More reservable services in Vantaa will be available later. The service can also be used to reserve premises, workstations and equipment in Espoo and Helsinki.",
-  "AboutPageContent.feedbackLink": "Please feel free to give feedback through this link.",
-  "AboutPageContent.feedbackParagraph": "We wish to get feedback from the service users.",
   "AboutPageContent.goalParagraph": "The objective of the cross-administrative reservation booking system is to make the use of public premises more efficient and accessible and decrease the costs related to the use of the premises by unifying the reservation booking practices of the City.",
-  "AboutPageContent.pilotParagraph": "The system for reserving premises is in test usage. It means that the pilot version which is in use does not have all the planned features and functionalities yet.",
   "AboutPartners.aikaLogoAlt": "6aika logo",
   "AboutPartners.eakrLogoAlt": "Logo of the European Regional Development Fund",
   "AboutPartners.euVipuvoimaaLogoAlt": "Leverage from the EU logo",
@@ -561,4 +553,4 @@
   "UserReservationsPage.regularEmptyMessage": "No standard reservations",
   "UserReservationsPage.regularReservationsHeader": "Standard reservations",
   "UserReservationsPage.title": "My reservations"
-}
+}
diff --git a/app/i18n/messages/fi.json b/app/i18n/messages/fi.json
@@ -1,15 +1,10 @@
 {
   "AboutPage.title": "Tietoa palvelusta",
-  "AboutPageContent.basedOnParagraph": "Varaamon pilottikäyttö tehdään Konsernitasoinen resurssienvarausten kehittäminen projektissa, joka on osa Smart and Wise Turku kärkihanketta. Yhtenä tavoitteena kärkihankkeessa on palvelujen kustannustehokas järjestäminen uudistamalla kaupungin toimintatapoja ja hyödyntämällä digitalisaation ja sen tuottaman datan mahdollisuuksia.<br />Tähän pohjautuen projektin tavoitteena on mm. tilojen ja muiden resurssien käytön tehostaminen, käyttöastetietojen kerääminen ja hyödyntäminen, saavutettavuuden parantaminen ja käyttöön liittyvien kustannusten alentaminen kaupungin varauskäytäntöjä yhtenäistämällä.",
   "AboutPageContent.customerRegisterHeader": "Tietosuojaseloste",
   "AboutPageContent.customerRegisterLink": "<a href='http://www.turku.fi/tietosuoja' rel='noopener noreferrer' target='_blank'>www.turku.fi/tietosuoja</a>",
   "AboutPageContent.customerRegisterLinkVR": "<a href='https://rekisteri.turku.fi' rel='noopener noreferrer' target='_blank'>https://rekisteri.turku.fi</a> (Varaus- ja tietokantarekisteri Varaamo ja respa)",
   "AboutPageContent.customerRegisterLinkSUO": "Vahvaan tunnistautumiseen käytämme Suomi.fi-tunnistusta jonka tietosuojaselosteen löydät osoitteesta <a href='https://www.suomi.fi/ohjeet-ja-tuki/yleista-verkkopalvelusta/tietosuoja' rel='noopener noreferrer' target='_blank'>https://www.suomi.fi/ohjeet-ja-tuki/yleista-verkkopalvelusta/tietosuoja</a>",
   "AboutPageContent.customerRegisterParagraph": "Tietoa Turun kaupungin henkilötietojen käsittelystä sekä tämän palvelun rekisteriselosteet löydät alla olevista osoitteista.<br />",
-  "AboutPageContent.defaultHeader": "Tietoa varaamo.turku.fi –palvelusta",
-  "AboutPageContent.defaultLead": "Varaamo on Turun kaupungin ylläpitämä verkkopalvelu, jonka kautta voi varata kaupungin julkisia tiloja sekä työpisteitä yksityiseen käyttöön.",
-  "AboutPageContent.defaultReservableParagraph": "Pilottivaiheessa palvelun kautta on varattavissa tiloja, laitteita ja asiantuntijapalveluita.",
-  "AboutPageContent.developmentParagraph": "Pilotoinnilla ja keräämällä käyttäjäkokemuksia pyritään saamaan tietoa Varaamon käytettävyydestä, vaikka se onkin kehitteillä.",
   "AboutPageContent.espooHeader": "Tietoa varaamo.espoo.fi –palvelusta",
   "AboutPageContent.espooLead": "Varaamo on Helsingin kaupungin ylläpitämä verkkopalvelu, jonka kautta voi varata Espoon ja Helsingin kaupunkien julkisia tiloja sekä työpisteitä yksityiseen käyttöön.",
   "AboutPageContent.espooPartnersHeader": "Espoo pilotoi Varaamoa osana 6Aika-hanketta",
@@ -18,10 +13,7 @@
   "AboutPageContent.vantaaLead": "Varaamon kautta voit varata Vantaan, Espoon ja Helsingin kaupunkien julkisia tiloja sekä työpisteitä.",
   "AboutPageContent.vantaaPartnersHeader": "Vantaa pilotoi Varaamoa osana 6Aika-hanketta",
   "AboutPageContent.vantaaReservableParagraph": "Pilottivaiheessa palvelun kautta on varattavissa Vantaalla Tikkurilan ja Pointin kirjastojen tiloja, työpisteitä ja laitteita. Myöhemmin varattava tarjonta Vantaalla laajenee kattamaan myös muita toimipisteitä. Varattavissa on Vantaan lisäksi myös Espoon ja Helsingin tiloja, työpisteitä ja laitteita. Varaamo-palvelua ylläpitää Helsingin kaupunki. Vantaan kaupungin kirjasto ylläpitää Vantaalta varattavien tilojen tietoja.",
-  "AboutPageContent.feedbackLink": "Palautetta voit antaa tämän linkin kautta.",
-  "AboutPageContent.feedbackParagraph": "Toivomme palvelun käyttäjiltä palautetta.",
   "AboutPageContent.goalParagraph": "Virastoyhteisen tilavaraushankkeen tavoitteena on julkisten tilojen käytön tehostaminen, saavutettavuuden parantaminen ja tilojen käyttöön liittyvien kustannusten alentaminen kaupungin tilavarauskäytäntöjä yhtenäistämällä.",
-  "AboutPageContent.pilotParagraph": "Tilavarausjärjestelmä on testausvaiheessa, eikä pilottikäytössä olevassa versiossa ole vielä kaikkia suunnitteilla olevia ominaisuuksia ja toiminnallisuuksia.",
   "AboutPartners.aikaLogoAlt": "6aika logo",
   "AboutPartners.eakrLogoAlt": "Euroopan aluekehitysrahasto logo",
   "AboutPartners.euVipuvoimaaLogoAlt": "Vipuvoimaa EU:lta logo",
@@ -561,4 +553,4 @@
   "UserReservationsPage.regularEmptyMessage": "Ei tavallisia varauksia näytettäväksi.",
   "UserReservationsPage.regularReservationsHeader": "Tavalliset varaukset",
   "UserReservationsPage.title": "Omat varaukset"
-}
+}
diff --git a/app/i18n/messages/sv.json b/app/i18n/messages/sv.json
@@ -1,15 +1,10 @@
 {
   "AboutPage.title": "Information om tjänsten",
-  "AboutPageContent.basedOnParagraph": "Pilotförsöket genomförs inom ramen för projektet för utveckling av resursbokningar på koncernnivå, som är en del av spetsprojektet Smart and Wise Turku. Ett av målen med spetsprojektet är att ordna tjänsterna kostnadseffektivt genom att förnya stadens verksamhetssätt och utnyttja de möjligheter som digitaliseringen och data som digitaliseringen genererar för med sig.<br />På grundval av detta är målet med projektet bland annat att effektivisera användningen av lokaler och andra resurser, samla in och utnyttja information om användningsgraden, förbättra nåbarheten och sänka användningsrelaterade kostnader genom att förenhetliga stadens bokningspraxis.",
   "AboutPageContent.customerRegisterHeader": "Dataskyddsbeskrivning",
   "AboutPageContent.customerRegisterLink": "<a href='http://www.turku.fi/sv/information-om-abo/datasekretess' rel='noopener noreferrer' target='_blank'>www.turku.fi/sv/information-om-abo/datasekretess</a>",
   "AboutPageContent.customerRegisterLinkVR": "<a href='https://rekisteri.turku.fi' rel='noopener noreferrer' target='_blank'>https://rekisteri.turku.fi</a> (Boknings- och databasregistret Varaamo och gränssnittet för resursbokningen. Sidan finns enbart på finska)",
   "AboutPageContent.customerRegisterLinkSUO": "För stark autentisering använder vi Suomi.fi-identifiering vars dataskyddsbeskrivning finns på adressen <a href='https://www.suomi.fi/anvisningar-och-stod/allmant-om-webbtjansten/dataskydd' rel='noopener noreferrer' target='_blank'>https://www.suomi.fi/anvisningar-och-stod/allmant-om-webbtjansten/dataskydd</a>",
   "AboutPageContent.customerRegisterParagraph": "Information om hur Åbo stad behandlar personuppgifter samt registerbeskrivningarna för denna tjänst hittar du på adresserna nedan.<br />",
-  "AboutPageContent.defaultHeader": "Information om tjänsten varaamo.turku.fi",
-  "AboutPageContent.defaultLead": "Varaamo är en webbtjänst som upprätthålls av Åbo stad. Via tjänsten kan stadens offentliga lokaler och utrustning bokas för privat bruk.",
-  "AboutPageContent.defaultReservableParagraph": "I pilotskedet kan tjänsten användas för att boka huvudbibliotekets lokaler och utrustning.",
-  "AboutPageContent.developmentParagraph": "Med hjälp av pilotförsök och användarupplevelser vill staden ta reda på hur användbar Varaamo är, trots att tjänsten ännu befinner sig i utvecklingsskedet.",
   "AboutPageContent.espooHeader": "Information om tjänsten varaamo.espoo.fi",
   "AboutPageContent.espooLead": "Varaamo är en webbtjänst som upprätthålls av Helsingfors stad. Genom den kan man boka Esbo och Helsingfors städers offentliga utrymmen och arbetspunkter för privat bruk.",
   "AboutPageContent.espooPartnersHeader": "Esbo pilottestar Varaamo som en del av projektet 6Aika",
@@ -18,10 +13,7 @@
   "AboutPageContent.vantaaLead": "Varaamo är en webbtjänst som upprätthålls av Helsingfors stad. Genom den kan man boka stadens offentliga utrymmen och arbetspunkter för privat bruk.",
   "AboutPageContent.vantaaPartnersHeader": "Vanda pilottestar Varaamo som en del av projektet 6Aika",
   "AboutPageContent.vantaaReservableParagraph": "I pilotskedet kan man boka utrymmen, arbetspunkter och apparater i Dickursby biblioteket och Point i Vanda, servicetorget Iso Omena i Esbo (biblioteket, hälsostationen, barnrådgivningsbyrån) samt i stadsbiblioteket, ungdomscentralen och barnomsorgsverket i Helsingfors.",
-  "AboutPageContent.feedbackLink": "Du kan ge feedback via denna länk.",
-  "AboutPageContent.feedbackParagraph": "Vi önskar att användarna ger feedback på tjänsten.",
   "AboutPageContent.goalParagraph": "Målet med de olika verkens gemensamma utrymmesbokningssprojekt är att effektivisera användningen av offentliga utrymmen, förbättra deras tillgänglighet och att minska kostnaderna för användningen av utrymmena genom att förenhetliga praxisen för utrymmesbokning i staden.",
-  "AboutPageContent.pilotParagraph": "Systemet för bokning av lokaler testas för tillfället och provversionen innehåller inte ännu alla de egenskaper och funktioner som planeras.",
   "AboutPartners.aikaLogoAlt": "Logotypen för 6Aika",
   "AboutPartners.eakrLogoAlt": "Logotyp för Europeiska regionala utvecklingsfonden",
   "AboutPartners.euVipuvoimaaLogoAlt": "Hävkraft från EU-logo",
@@ -563,4 +555,4 @@
   "UserReservationsPage.regularEmptyMessage": "Det finns inga vanliga bokningar att visa.",
   "UserReservationsPage.regularReservationsHeader": "Vanliga bokningar",
   "UserReservationsPage.title": "Mina bokningar"
-}
+}
diff --git a/app/pages/about/AboutPage.js b/app/pages/about/AboutPage.js
@@ -5,49 +5,38 @@ import { FormattedHTMLMessage } from 'react-intl';
 import { injectT } from 'i18n';
 import PageWrapper from 'pages/PageWrapper';
 import { getFeedbackLink } from 'utils/languageUtils';
+import { getAboutContent } from './content/aboutContent';
 
-class AboutPage extends React.Component {
-  static propTypes = {
-    t: PropTypes.func,
-    currentLanguage: PropTypes.string,
-  };
 
-  render() {
-    const { t, currentLanguage } = this.props;
-    const currentLink = getFeedbackLink(currentLanguage);
+function AboutPage({ t, currentLanguage }) {
+  return (
+    <PageWrapper className="about-page" title={t('AboutPage.title')}>
+      {/* eslint-disable-next-line react/no-danger */}
+      <div dangerouslySetInnerHTML={
+        { __html: getAboutContent(currentLanguage, getFeedbackLink(currentLanguage)) }}
+      />
 
-    return (
-      <PageWrapper className="about-page" title={t('AboutPage.title')}>
-        <h1>{t('AboutPageContent.defaultHeader')}</h1>
-        <p className="lead">{t('AboutPageContent.defaultLead')}</p>
-        <p>{t('AboutPageContent.pilotParagraph')}</p>
-        <p>{t('AboutPageContent.defaultReservableParagraph')}</p>
-        <p><FormattedHTMLMessage id="AboutPageContent.basedOnParagraph" /></p>
-        <p>{t('AboutPageContent.developmentParagraph')}</p>
-        <p>
-          {t('AboutPageContent.feedbackParagraph')}
-          {' '}
-          <a className="feedback-link" href={currentLink} rel="noopener noreferrer" target="_blank">
-            {t('AboutPageContent.feedbackLink')}
-          </a>
-        </p>
-        <h2>{t('AboutPageContent.customerRegisterHeader')}</h2>
-        <p>
-          <FormattedHTMLMessage id="AboutPageContent.customerRegisterParagraph" />
-        </p>
-        <p>
-          <FormattedHTMLMessage id="AboutPageContent.customerRegisterLink" />
-        </p>
-        <p>
-          <FormattedHTMLMessage id="AboutPageContent.customerRegisterLinkVR" />
-        </p>
-        <p>
-          <FormattedHTMLMessage id="AboutPageContent.customerRegisterLinkSUO" />
-        </p>
-        <br />
-      </PageWrapper>
-    );
-  }
+      <h2>{t('AboutPageContent.customerRegisterHeader')}</h2>
+      <p>
+        <FormattedHTMLMessage id="AboutPageContent.customerRegisterParagraph" />
+      </p>
+      <p>
+        <FormattedHTMLMessage id="AboutPageContent.customerRegisterLink" />
+      </p>
+      <p>
+        <FormattedHTMLMessage id="AboutPageContent.customerRegisterLinkVR" />
+      </p>
+      <p>
+        <FormattedHTMLMessage id="AboutPageContent.customerRegisterLinkSUO" />
+      </p>
+      <br />
+    </PageWrapper>
+  );
 }
 
+AboutPage.propTypes = {
+  t: PropTypes.func.isRequired,
+  currentLanguage: PropTypes.string.isRequired,
+};
+
 export default injectT(AboutPage);
diff --git a/app/pages/about/AboutPage.spec.js b/app/pages/about/AboutPage.spec.js
@@ -2,14 +2,19 @@
 import React from 'react';
 import { FormattedHTMLMessage } from 'react-intl';
 
-import constants from 'constants/AppConstants';
 import PageWrapper from 'pages/PageWrapper';
 import { shallowWithIntl } from 'utils/testUtils';
 import AboutPage from './AboutPage';
+import { getAboutContent } from './content/aboutContent';
+import { getFeedbackLink } from '../../utils/languageUtils';
 
 describe('pages/about/AboutPage', () => {
-  function getWrapper() {
-    return shallowWithIntl(<AboutPage />);
+  const defaultProps = {
+    currentLanguage: 'fi'
+  };
+
+  function getWrapper(props) {
+    return shallowWithIntl(<AboutPage {...defaultProps} {...props} />);
   }
 
   test('renders PageWrapper with correct props', () => {
@@ -19,26 +24,24 @@ describe('pages/about/AboutPage', () => {
     expect(pageWrapper.prop('title')).toBe('AboutPage.title');
   });
 
-  test('renders AboutPageContent.defaultHeader', () => {
-    const text = getWrapper().find('h1').text();
-    expect(text).toBe('AboutPageContent.defaultHeader');
+  test('renders div with main content', () => {
+    const div = getWrapper().find('div');
+    const expectedContent = {
+      __html: getAboutContent(
+        defaultProps.currentLanguage,
+        getFeedbackLink(defaultProps.currentLanguage))
+    };
+    expect(div).toHaveLength(1);
+    expect(div.prop('dangerouslySetInnerHTML')).toStrictEqual(expectedContent);
   });
+
   test('renders correct amount of <p> elements', () => {
     const p = getWrapper().find('p');
-    expect(p.length).toBe(10);
+    expect(p.length).toBe(4);
   });
+
   test('render correct amount of <FormattedHTMLMessage>', () => {
     const elements = getWrapper().find(FormattedHTMLMessage);
-    expect(elements.length).toBe(5);
-  });
-
-  test('render feedbacklink according to currentLanguage ', () => {
-    const lan = {
-      currentLanguage: 'fi'
-    };
-    const elements = getWrapper({ lan }).find('a');
-    expect(elements.prop('href')).toBe(constants.FEEDBACK_URL.FI);
-    expect(elements.prop('rel')).toBe('noopener noreferrer');
-    expect(elements.prop('target')).toBe('_blank');
+    expect(elements.length).toBe(4);
   });
 });
diff --git a/app/pages/about/_about-page.scss b/app/pages/about/_about-page.scss
@@ -1,13 +1,13 @@
 .about-page {
   max-width: 600px;
 
-}
-p.lead {
-  font-size: 1.125em;
+  p {
+    margin: 0 0 12px;
+  }
 }
 
 @media(max-width:$screen-400-min - 50) {
   .about-page {
     font-size: 16px;
   }
-}
+}
diff --git a/app/pages/about/content/aboutContent.js b/app/pages/about/content/aboutContent.js
@@ -0,0 +1,19 @@
+import getAboutContentEn from './aboutEn';
+import getAboutContentFi from './aboutFi';
+import getAboutContentSv from './aboutSv';
+
+/**
+ * Returns the content for the about page based on the current language.
+ * @param {string} currentLanguage - 'en', 'fi' or 'sv'
+ * @param {string} feedbackLink - url to feedback form
+ * @returns {string} - html string content for the about page
+ */
+export function getAboutContent(currentLanguage, feedbackLink) {
+  if (currentLanguage === 'en') {
+    return getAboutContentEn(feedbackLink);
+  }
+  if (currentLanguage === 'sv') {
+    return getAboutContentSv(feedbackLink);
+  }
+  return getAboutContentFi(feedbackLink);
+}