feat: add language support in all missing places (#402)

* feat: add language support in all missing places
City-of-Helsinki · Sep 11, 2024 · ae290c1 · ae290c1
1 parent c115791
commit ae290c1
Show file tree

Hide file tree

Showing 39 changed files with 838 additions and 347 deletions.
diff --git a/e2e/tests/resource-page.spec.ts b/e2e/tests/resource-page.spec.ts
@@ -47,12 +47,12 @@ test.describe('Resource page', async () => {
     const titleFi = 'e2e test title';
 
     await page.getByRole('button', { name: 'Lisää aukioloaika +' }).click();
-    await page.locator('[data-test="opening-period-title-fi"]').fill(titleFi);
+    await page.locator('[data-testid="opening-period-title-fi"]').fill(titleFi);
     await page
-      .locator('[data-test="opening-period-title-sv"]')
+      .locator('[data-testid="opening-period-title-sv"]')
       .fill('sommartid');
     await page
-      .locator('[data-test="opening-period-title-en"]')
+      .locator('[data-testid="opening-period-title-en"]')
       .fill('summertime');
     await page
       .getByLabel('Maanantai-Perjantai')
@@ -67,12 +67,12 @@ test.describe('Resource page', async () => {
       .getByPlaceholder('E.g. seniors')
       .fill('seniors');
     await page.getByText('24 h').click();
-    await page.locator('[data-test="submit-opening-hours-button"]').click();
+    await page.locator('[data-testid="submit-opening-hours-button"]').click();
     await expect(page.getByRole('heading', { name: titleFi })).toBeVisible();
 
     const removeButton = page
       .locator(
-        '[data-test="resource-opening-periods-list"] .opening-period-action-delete'
+        '[data-testid="resource-opening-periods-list"] .opening-period-action-delete'
       )
       .last();
     await removeButton.click();
@@ -92,20 +92,20 @@ test.describe('Resource page', async () => {
     const titleFi = 'e2e test title';
 
     await page.getByRole('button', { name: 'Lisää poikkeava päivä +' }).click();
-    await page.locator('[data-test="opening-period-title-fi"]').fill(titleFi);
+    await page.locator('[data-testid="opening-period-title-fi"]').fill(titleFi);
     await page
-      .locator('[data-test="opening-period-title-sv"]')
+      .locator('[data-testid="opening-period-title-sv"]')
       .fill('utbildngingstad');
     await page
-      .locator('[data-test="opening-period-title-en"]')
+      .locator('[data-testid="opening-period-title-en"]')
       .fill('training day');
-    await page.locator('[data-test="submit-opening-hours-button"]').click();
+    await page.locator('[data-testid="submit-opening-hours-button"]').click();
 
     await expect(page.getByTestId('opening-period-form-success')).toBeVisible();
 
     const removeButton = page
       .locator(
-        '[data-test="resource-exception-opening-periods-list"] .opening-period-action-delete'
+        '[data-testid="resource-exception-opening-periods-list"] .opening-period-action-delete'
       )
       .last();
     await removeButton.click();
@@ -129,12 +129,12 @@ test.describe('Resource page', async () => {
       .first();
     const holidayTestId = await holidayInput.getAttribute('data-test');
 
-    await page.locator(`[data-test="${holidayTestId}"]`).check();
-    await page.locator('[data-test="submit-opening-hours-button"]').click();
+    await page.locator(`[data-testid="${holidayTestId}"]`).check();
+    await page.locator('[data-testid="submit-opening-hours-button"]').click();
     await expect(page.getByTestId('holiday-form-success')).toBeVisible({
       timeout: 30 * 1000,
     });
-    await page.locator(`[data-test="${holidayTestId}"]`).click();
+    await page.locator(`[data-testid="${holidayTestId}"]`).click();
     await expect(page.locator('#confirmation-modal')).toBeVisible();
 
     await page.getByRole('button', { name: 'Poista', exact: true }).click();
@@ -150,19 +150,19 @@ test.describe('Resource page', async () => {
       .first();
     const holidayTestId = await holidayInput.getAttribute('data-test');
 
-    await page.locator(`[data-test="${holidayTestId}"]`).check();
+    await page.locator(`[data-testid="${holidayTestId}"]`).check();
     await page.getByText('Poikkeava aukioloaika').click();
     await page.getByLabel('Auki', { exact: true }).click();
     await page.getByRole('option', { name: 'Itsepalvelu' }).click();
     await page.getByText('24 h').click();
     await page.getByPlaceholder('Esim. seniorit').fill('seniorit');
     await page.getByPlaceholder('T.ex. seniorer').fill('seniorer');
     await page.getByPlaceholder('E.g. seniors').fill('seniors');
-    await page.locator('[data-test="submit-opening-hours-button"]').click();
+    await page.locator('[data-testid="submit-opening-hours-button"]').click();
     await expect(page.getByTestId('holiday-form-success')).toBeVisible({
       timeout: 30 * 1000,
     });
-    await page.locator(`[data-test="${holidayTestId}"]`).click();
+    await page.locator(`[data-testid="${holidayTestId}"]`).click();
     await expect(
       page.getByRole('heading', { name: 'Oletko varma että haluat' })
     ).toBeVisible();

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -61,7 +61,7 @@ export const SecondaryButton = React.forwardRef<
         } ${className}`}
         theme={light ? 'default' : 'coat'}
         size={size}
-        data-test={dataTest}
+        data-testid={dataTest}
         disabled={disabled}
         variant="secondary"
         onClick={onClick}
@@ -100,7 +100,7 @@ export const PrimaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <HDSButton
         aria-expanded={ariaExpanded}
         ref={ref}
-        data-test={dataTest}
+        data-testid={dataTest}
         className={`button-common primary-button ${
           disabled && 'primary-button--is-disabled'
         } ${isLoading && 'primary-button--is-loading'} ${className}`}
@@ -147,7 +147,7 @@ export const SupplementaryButton = React.forwardRef<
         aria-expanded={ariaExpanded}
         ref={ref}
         type={type}
-        data-test={dataTest}
+        data-testid={dataTest}
         className={`button-common supplementary-button ${className}`}
         variant="supplementary"
         onClick={onClick}

diff --git a/src/components/exception-opening-hours-form/ExceptionOpeningHoursForm.tsx b/src/components/exception-opening-hours-form/ExceptionOpeningHoursForm.tsx
@@ -1,42 +1,45 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { ResourceState } from '../../common/lib/types';
 import { formatDate } from '../../common/utils/date-time/format';
 import OpeningHoursForm, {
   FormConfig,
   OpeningHoursFormProps,
 } from '../opening-hours-form/OpeningHoursForm';
 
-const config: FormConfig = {
-  exception: true,
-  defaultValues: {
-    startDate: formatDate(new Date().toISOString()),
-    endDate: formatDate(new Date().toISOString()),
-    fixed: true,
-    name: { fi: '', sv: '', en: '' },
-    override: true,
-    resourceState: ResourceState.CLOSED,
-    openingHours: [],
-  },
-  texts: {
-    submit: {
-      notifications: {
-        success: `Poikkeavan päivän aukiolon lisääminen onnistui`,
-        error: `Poikkeavan päivän aukiolon lisääminen epäonnistui`,
-      },
+const ExceptionOpeningHoursForm = (
+  props: Omit<OpeningHoursFormProps, 'config'>
+): JSX.Element => {
+  const { t } = useTranslation();
+
+  const config: FormConfig = {
+    exception: true,
+    defaultValues: {
+      startDate: formatDate(new Date().toISOString()),
+      endDate: formatDate(new Date().toISOString()),
+      fixed: true,
+      name: { fi: '', sv: '', en: '' },
+      override: true,
+      resourceState: ResourceState.CLOSED,
+      openingHours: [],
     },
-    title: {
-      placeholders: {
-        fi: 'Esim. koulutuspäivä',
-        sv: 'T.ex. utbildningsdag',
-        en: 'E.g. training day',
+    texts: {
+      submit: {
+        notifications: {
+          success: t('OpeningHours.ExceptionPeriodSubmitSuccess'),
+          error: t('OpeningHours.ExceptionPeriodSubmitError'),
+        },
+      },
+      title: {
+        placeholders: {
+          fi: 'Esim. koulutuspäivä',
+          sv: 'T.ex. utbildningsdag',
+          en: 'E.g. training day',
+        },
       },
     },
-  },
-};
+  };
 
-const ExceptionOpeningHoursForm = (
-  props: Omit<OpeningHoursFormProps, 'config'>
-): JSX.Element => {
   return <OpeningHoursForm config={config} {...props} />;
 };
 

diff --git a/src/components/exception-opening-hours-state-toggle/ExceptionOpeningHoursStateToggle.tsx b/src/components/exception-opening-hours-state-toggle/ExceptionOpeningHoursStateToggle.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { RadioButton, SelectionGroup } from 'hds-react';
 import { useFormContext } from 'react-hook-form';
 import { DatePeriod } from '../../common/lib/types';
@@ -18,6 +19,7 @@ const ExceptionOpeningHoursStateToggle = ({
   onClose: () => void;
   onOpen: () => void;
 }): JSX.Element => {
+  const { t } = useTranslation();
   const [isOpen, setOpen] = useState<boolean>(initiallyOpen);
   const { watch } = useFormContext<DatePeriod>();
   const [startDate, endDate] = watch(['startDate', 'endDate']);
@@ -29,22 +31,26 @@ const ExceptionOpeningHoursStateToggle = ({
         className="exception-opening-hours-resource-state-toggle"
         label="">
         <RadioButton
-          data-test="closed-state-checkbox"
+          data-testid="closed-state-checkbox"
           id={`${id}-closed-state-checkbox`}
           name={`${id}-closed-state-checkbox`}
           checked={!isOpen}
-          label={differenceInDays > 0 ? 'Suljettu' : 'Suljettu koko päivän'}
+          label={
+            differenceInDays > 0
+              ? t('OpeningHours.ExceptionStateClosed')
+              : t('OpeningHours.ExceptionStateClosedWholeDay')
+          }
           onChange={(): void => {
             setOpen(false);
             onClose();
           }}
         />
         <RadioButton
-          data-test="open-state-checkbox"
+          data-testid="open-state-checkbox"
           id={`${id}-open-state-checkbox`}
           name={`${id}-open-state-checkbox`}
           checked={isOpen}
-          label="Poikkeava aukioloaika"
+          label={t('OpeningHours.ExceptionStateOpen')}
           onChange={(): void => {
             setOpen(true);
             onOpen();

diff --git a/src/components/exception-opening-hours-validity/ExceptionOpeningHoursValidity.tsx b/src/components/exception-opening-hours-validity/ExceptionOpeningHoursValidity.tsx
@@ -1,4 +1,5 @@
 import { DateInput, SelectionGroup } from 'hds-react';
+import { useTranslation } from 'react-i18next';
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useAppContext } from '../../App-context';
@@ -13,6 +14,7 @@ import ExceptionOpeningHoursStateToggle from '../exception-opening-hours-state-t
 import './ExceptionOpeningHoursValidity.scss';
 
 const ExceptionOpeningHoursValidity = (): JSX.Element => {
+  const { t } = useTranslation();
   const { language = Language.FI } = useAppContext();
   const { getValues, setValue, watch } = useFormContext<DatePeriod>();
   const [startDate, endDate, resourceState] = watch([
@@ -26,7 +28,7 @@ const ExceptionOpeningHoursValidity = (): JSX.Element => {
       <div className="exception-opening-hours-validity">
         <SelectionGroup
           className="exception-opening-hours-validity__title"
-          label="Poikkeavan aukiolon voimassaoloaika"
+          label={t('OpeningHours.ExceptionOpeningHoursValidity')}
           required>
           <div className="exception-opening-hours-validity__dates">
             <Controller
@@ -39,12 +41,12 @@ const ExceptionOpeningHoursValidity = (): JSX.Element => {
                 <DateInput
                   id="exception-start-date"
                   className="exception-date"
-                  data-test="exception-start-date"
+                  data-testid="exception-start-date"
                   disableConfirmation
                   ref={ref}
                   errorText={fieldState.error?.message}
                   initialMonth={new Date()}
-                  label="Alkaa"
+                  label={t('OpeningHours.ExceptionStartDate')}
                   language={language}
                   name={name}
                   onChange={(newStartDate) => {
@@ -58,14 +60,14 @@ const ExceptionOpeningHoursValidity = (): JSX.Element => {
                     }
                   }}
                   onBlur={onBlur}
-                  openButtonAriaLabel="Valitse alkupäivämäärä"
+                  openButtonAriaLabel={t('OpeningHours.ExceptionStartDateAria')}
                   required
                   value={value}
                   crossOrigin={undefined}
                 />
               )}
               rules={{
-                required: 'Pakollinen',
+                required: t('Common.Mandatory'),
                 validate: isValidDate,
               }}
             />
@@ -79,24 +81,24 @@ const ExceptionOpeningHoursValidity = (): JSX.Element => {
                 <DateInput
                   id="exception-end-date"
                   className="exception-date"
-                  data-test="exception-end-date"
+                  data-testid="exception-end-date"
                   disableConfirmation
                   ref={ref}
                   errorText={fieldState.error?.message}
                   initialMonth={new Date()}
-                  label="Päättyy"
+                  label={t('OpeningHours.ExceptionEndDate')}
                   language={language}
                   name={name}
                   onChange={onChange}
                   onBlur={onBlur}
-                  openButtonAriaLabel="Valitse loppupäivämäärä"
+                  openButtonAriaLabel={t('OpeningHours.ExceptionEndDateAria')}
                   required
                   value={value}
                   crossOrigin={undefined}
                 />
               )}
               rules={{
-                required: 'Pakollinen',
+                required: t('Common.Mandatory'),
                 validate: {
                   validDate: isValidDate,
                   endDateAfterStartDate: endDateAfterStartDate(getValues),

diff --git a/src/components/holiday-opening-hours/HolidayOpeningHours.tsx b/src/components/holiday-opening-hours/HolidayOpeningHours.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   DatePeriod,
   ResourceState,
@@ -15,11 +16,12 @@ const HolidayOpeningHours = ({
   datePeriod,
   datePeriodConfig,
 }: Props): JSX.Element => {
+  const { t } = useTranslation();
   if (datePeriod) {
     return (
       <div>
         {datePeriod.resourceState === ResourceState.CLOSED
-          ? 'Suljettu'
+          ? t('ResourcePage.OpeningPeriodsSection.StateClosed')
           : datePeriod.openingHours.map((openingHours) =>
               openingHours.timeSpanGroups.map((timeSpanGroup) =>
                 timeSpanGroup.timeSpans.map((timeSpan, timeSpanIdx) => (
@@ -38,7 +40,7 @@ const HolidayOpeningHours = ({
     );
   }
 
-  return <>Ei poikkeavia aukioloja</>;
+  return <>{t('OpeningHours.NoExceptions')}</>;
 };
 
 export default HolidayOpeningHours;