COR-949 Add vaccination campaign name localization (#4334)

Co-authored-by: VWSCoronaDashboard21 <[email protected]>
minvws · Jul 26, 2022 · 8329b0b · 8329b0b
1 parent 68bb247
commit 8329b0b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/...pp/src/domain/vaccine/vaccine-campaigns-tile/components/narrow-vaccine-campaign-table.tsx b/...pp/src/domain/vaccine/vaccine-campaigns-tile/components/narrow-vaccine-campaign-table.tsx
@@ -1,4 +1,5 @@
 import css from '@styled-system/css';
+import { useRouter } from 'next/router';
 import { useCollapsible } from '~/utils/use-collapsible';
 import { useIntl } from '~/intl';
 import { Cell, HeaderCell, Row, StyledTable } from '.';
@@ -62,6 +63,7 @@ const VaccineCampaignRow = ({
   const { formatNumber } = useIntl();
   const collapsible = useCollapsible({ isOpen: isFirst });
   const isOpen = collapsible.isOpen;
+  const { locale = 'nl' } = useRouter();
 
   return (
     <Row isLast={isLast} isOpen={isOpen} onClick={() => collapsible.toggle()}>
@@ -70,7 +72,11 @@ const VaccineCampaignRow = ({
           <tbody>
             <tr>
               <Cell css={css({ pt: 3 })} mobile>
-                <strong>{campaign.vaccine_campaign_name_nl}</strong>
+                <strong>
+                  {locale === 'nl'
+                    ? campaign.vaccine_campaign_name_nl
+                    : campaign.vaccine_campaign_name_en}
+                </strong>
               </Cell>
 
               <Cell css={css({ pt: 3 })} alignRight mobile>

diff --git a/.../app/src/domain/vaccine/vaccine-campaigns-tile/components/wide-vaccine-campaign-table.tsx b/.../app/src/domain/vaccine/vaccine-campaigns-tile/components/wide-vaccine-campaign-table.tsx
@@ -1,4 +1,5 @@
 import css from '@styled-system/css';
+import { useRouter } from 'next/router';
 import { useCollapsible } from '~/utils/use-collapsible';
 import { useIntl } from '~/intl';
 import { Cell, HeaderCell, Row, StyledTable } from '.';
@@ -62,15 +63,20 @@ const VaccineCampaignRow = ({
   const { formatNumber } = useIntl();
   const collapsible = useCollapsible({ isOpen: isFirst });
   const isOpen = collapsible.isOpen;
+  const { locale = 'nl' } = useRouter();
 
   return (
     <Row isLast={isLast} isOpen={isOpen} onClick={() => collapsible.toggle()}>
       <Cell colSpan={4} css={css({ p: 0 })}>
         <StyledTable>
           <tbody>
             <tr>
-              <Cell css={css({ fontWeight: 'bold' })}>
-                {campaign.vaccine_campaign_name_nl}
+              <Cell>
+                <strong>
+                  {locale === 'nl'
+                    ? campaign.vaccine_campaign_name_nl
+                    : campaign.vaccine_campaign_name_en}
+                </strong>
               </Cell>
 
               <Cell>