Added localization keys to SingleNotification and AsthmaProviderReport #474

nathia · 2025-05-22T23:17:13Z

Overview

The Single Notifications and Asthma Provider Report components were not using the language('key') function and had hardcoded English text, making them non-functional in other languages. I resolved this by:

DESCRIBE YOUR CHANGES

Adding all necessary localization keys to the English language file and translating them across all supported localization files.
Updating all component text to use the language() function for proper internationalization.
Adding a sample test case for the "No Notification" state in the SingleNotification.stories file.

Security

Consider potential security impacts and complete the following checklist.
REMINDER: All file contents are public.

[x ] I have ensured no secure credentials or sensitive information remain in code, metadata, comments, etc.
- [x ] Please verify that you double checked that .storybook/preview.js does not contain your participant access key details.
- [ x] There are no temporary testing changes committed such as API base URLs, access tokens, print/log statements, etc.
[ x] These changes do not introduce any security risks, or any such risks have been properly mitigated.

DESCRIBE BRIEFLY WHAT SECURITY RISKS YOU CONSIDERED, WHY THEY DON'T APPLY, OR HOW THEY'VE BEEN MITIGATED.

Testing

SingleNotifications / No Notifications

This PR ensures that the text on the screen below now appears in the selected language.

AND in Storybook

AsthmaProviderReport Testing

DESCRIBE YOUR TEST PLAN

Documentation

Consider whether there are any documentation impacts and check one of the following boxes:

[ x] I have added relevant Storybook updates to this PR.
If this feature requires a developer doc update, I have tagged @CareEvolution/api-docs.
This change does not impact documentation or Storybook.

Reviewers

Assign to the appropriate reviewer(s). Minimally, a second set of eyes is needed ensure no non-public information is published. Consider also including:

Subject-matter experts
Style/editing reviewers
Others requested by the content owner

Consider "Squash and merge" as needed to keep the commit history reasonable on main.

aws-amplify-us-east-1 · 2025-05-22T23:20:55Z

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-474.d1xp2kmk6zrv44.amplifyapp.com

lynnfaraday · 2025-05-27T15:12:50Z

src/components/asthma/components/AsthmaProviderReport/AsthmaProviderReport.tsx

-                        day is noted as not under control if in the prior week (7 days) there are more than 2 days of symptoms or rescue inhaler use or due to asthma 1
-                        nighttime awakening or limitation in activity was recorded.
+                    <div style={{ fontSize: '14px', color: '#3b3b3b', backgroundColor: '#f2f2f2', padding: '16px' }}>
+                        {language('asthma-provider-report-explanation-part1')}


We can't split up prompts like this. Sentences/paragraphs won't necessarily break neatly in the same places in every language (especially RTL ones or symbolic ones). It should be possible to put the URL into the locale string directly though?

lynnfaraday · 2025-05-27T15:14:30Z

locales/sort-en.json

@@ -0,0 +1,594 @@
+{


This file should be deleted.

lynnfaraday · 2025-05-27T15:21:33Z

src/components/asthma/components/AsthmaProviderReport/AsthmaProviderReport.tsx

-                    <div style={{marginBottom: '16px'}}>
-                        To provide feedback on this report or tool, please e-mail us: <a href="mailto:[email protected]" target="_blank">[email protected]</a>
+                    <div style={{ marginBottom: '16px' }}>
+                        {language('asthma-provider-report-feedback-part1')}


The email needs to be embedded in the prompt text. It won't necessarily appear at the end of the string in all languages. Then you can remove "part1" from the name.

@nathia This one is still outstanding.

lynnfaraday · 2025-05-27T15:22:59Z

src/components/asthma/components/AsthmaProviderReport/AsthmaProviderReport.tsx

+                <div style={{ position: 'absolute', bottom: 64, left: 48, right: 48, fontSize: '17px' }}>
+                    <div style={{ fontSize: '16px', fontWeight: 700, marginBottom: '16px' }}>{language('asthma-provider-report-about-tool')}</div>
+                    <div style={{ marginBottom: '16px' }}>
+                        {language('asthma-provider-report-about-text-part1')}


Can't split translated string like this - embed MyDataHelps in the prompt.

greinard · 2025-05-27T15:40:51Z

The AsthmaProviderReport was intentionally implemented without translation because of how it is used. It is a report for the participant to share with their doctor, which, at least in its current usage, is expected to be an English speaking recipient.

I think it should be okay to add these translations, but the only existing (and expected) usage of that component will need to be adjusted to pass a lang=en parameter to ensure it remains English-only in that context. I can make that change before pulling in this update, so no worries there, but I just wanted to mention that the non-English translations are very likely to be unused.

lynnfaraday · 2025-06-02T16:36:23Z

locales/de.json

-    "asthma-provider-report-about-text-part1": "Dieser Bericht wurde basierend auf den im Asthma-Tool erfassten Daten erstellt, bereitgestellt von ",
-    "asthma-provider-report-about-text-part2": ". Das Asthma-Tool ermöglicht es Patient, täglich ihre Symptome und Auslöser zu dokumentieren, bietet übersichtliche Zusammenfassungen der Einträge sowie relevante Bildungsinhalte und Ressourcenlinks. Es fasst die Symptomprotokolle des Nutzers zusammen. Das digitale Tool wurde mit dem Ziel entwickelt, die Selbstregulation zu fördern, was ",
-    "asthma-provider-report-about-text-part3": " zeigen kann, dass sich damit chronische Erkrankungen wie Asthma verbessern lassen. Das Asthma-Tool empfiehlt keine Änderungen der Behandlung und stellt keine Diagnosen.",
+    "asthma-provider-report-about-text": "Dieses Asthma-Management-Tool wird unterstützt von <a href=\"https://careevolution.com/mydatahelps/\" target=\"_blank\">MyDataHelps</a> und basiert auf evidenzbasierten Asthma-Management-Prinzipien aus <a href=\"https://pubmed.ncbi.nlm.nih.gov/26252889/\" target=\"_blank\">Studien</a> und anderer klinischer Forschung.",


I'm confused - the combined about-text doesn't seem to include all of the original text from parts 1-3.

greinard · 2025-06-10T14:26:02Z

locales/en.json

+    "asthma-provider-report-day": "day",
+    "asthma-provider-report-days": "days",
+    "asthma-provider-report-disclaimer": "If you plan to share this report with your provider, be aware that communications over email, text, and other channels may not be secure because they can be sent to the wrong address or intercepted.",
+    "asthma-provider-report-explanation": "Asthma control is determined based on <a href=\"https://www.nhlbi.nih.gov/health-topics/guidelines-for-diagnosis-management-of-asthma\" target=\"_blank\">EPR-3 guidelines</a> and takes into account symptoms, rescue inhaler use, activity limitations, and nighttime awakenings.",


Was this change intentional? The text is quite a bit different than the original report.

greinard · 2025-06-10T14:28:18Z

src/components/asthma/components/AsthmaProviderReport/AsthmaProviderReport.tsx

+                        {renderStat(language('asthma-provider-report-home'), highHomeAqiDays > 0 ? highHomeAqiDays : language('asthma-provider-report-none'), highHomeAqiDays === 1 ? language('asthma-provider-report-day') : highHomeAqiDays > 1 ? language('asthma-provider-report-days') : '')}
+                        {renderStat(language('asthma-provider-report-work'), highWorkAqiDays > 0 ? highWorkAqiDays : language('asthma-provider-report-none'), highWorkAqiDays === 1 ? language('asthma-provider-report-day') : highWorkAqiDays > 1 ? language('asthma-provider-report-days') : '')}
+                        <div style={{ fontSize: '12px', marginTop: '12px' }}>{language('asthma-provider-report-source')}</div>
+                        <div style={{ fontSize: '12px', marginTop: '12px' }}>Source: airnow.gov</div>


This line is a duplicate of the one above.

greinard · 2025-06-10T14:33:22Z

src/components/asthma/components/AsthmaProviderReport/AsthmaProviderReport.tsx

+                    <div style={{ marginBottom: '16px' }}
+                        dangerouslySetInnerHTML={{ __html: language('asthma-provider-report-about-text') }} />
+                    <div style={{ marginBottom: '16px' }}>
+                        {language('asthma-provider-report-feedback-part1')}


I believe the language key here should be asthma-provider-report-feedback and the link below can be removed since it will be included in the text from the language file.

Yes, I forgot to stage that file.. so the change did not make it, but it should be there now.

greinard · 2025-06-13T15:49:53Z

src/components/asthma/components/AsthmaProviderReport/AsthmaProviderReport.tsx

-                    <div style={{flexGrow: 1, flexBasis: '30%', backgroundColor: '#f2f2f2', border: '1px solid #dbdbdb', borderRadius: '10px', padding: '12px'}}>
-                        <div style={{marginBottom: '8px', fontWeight: 700}}>Days with AQI over 100</div>
-                        {renderStat('Home', highHomeAqiDays > 0 ? highHomeAqiDays : 'None', highHomeAqiDays === 1 ? 'day' : highHomeAqiDays > 1 ? 'days' : '')}
-                        {renderStat('Work', highWorkAqiDays > 0 ? highWorkAqiDays : 'None', highWorkAqiDays === 1 ? 'day' : highWorkAqiDays > 1 ? 'days' : '')}


This line should not have been removed. The duplicate is down below where indicated. Line 344, I think, where it says "Source: airnow.gov" in plain text.

greinard · 2025-06-19T15:18:22Z

locales/tl.json

+    "asthma-provider-report-coughing": "Pag-ubo",
+    "asthma-provider-report-daily-entries": "Araw-araw na mga tala",
+    "asthma-provider-report-day": "araw",
+    "asthma-proSvider-report-days": "mga araw",


Looks like a typo here which is causing the build to fail.

Added localization keys to SingleNotification and AsthmaProviderReport

6c9778c

nathia marked this pull request as ready for review May 27, 2025 14:11

nathia requested review from greinard, harithamenta and lynnfaraday May 27, 2025 14:11

lynnfaraday requested changes May 27, 2025

View reviewed changes

replaced url in report with localization key

98ff6a7

nathia requested a review from lynnfaraday May 27, 2025 17:50

Removed temporary file sort-en.json

1bee707

lynnfaraday requested changes Jun 2, 2025

View reviewed changes

nathia added 2 commits June 2, 2025 13:59

About Text translation and email link

6634b34

small change from Patient:innen to Patientenin de.json

d7a8878

nathia requested a review from lynnfaraday June 2, 2025 18:12

lynnfaraday approved these changes Jun 4, 2025

View reviewed changes

greinard requested changes Jun 10, 2025

View reviewed changes

Fix AI translation error

e728a6d

nathia requested a review from greinard June 12, 2025 18:12

greinard requested changes Jun 13, 2025

View reviewed changes

added asthma-provider-report-work and removed duplicated line

24db1a9

nathia requested a review from greinard June 19, 2025 08:07

greinard reviewed Jun 19, 2025

View reviewed changes

Added localization keys to SingleNotification and AsthmaProviderReport #474

Are you sure you want to change the base?

Added localization keys to SingleNotification and AsthmaProviderReport #474

Uh oh!

Conversation

nathia commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Security

Testing

Documentation

Reviewers

Uh oh!

aws-amplify-us-east-1 bot commented May 22, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greinard commented May 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nathia commented May 22, 2025 •

edited

Loading