Merge pull request #514 from cds-snc/add-tip-back

Add link to manual contact tracing page to Ontario "Thank you" screen

src/components/ButtonSingleLine.tsx

@@ -45,8 +45,16 @@ export const ButtonSingleLine = ({
   const variantProps = theme.buttonVariants[variant];
   const disabledProps = disabled ? variantProps.disabled || {} : {};
   const themedStyles = {...variantProps, ...disabledProps};
-  const {fontSize, fontWeight, fontFamily, color, borderWidth, height} = (themedStyles as unknown) as TextStyle &
-    ViewStyle;
+  const {
+    fontSize,
+    fontWeight,
+    fontFamily,
+    color,
+    borderWidth,
+    height,
+    borderBottomWidth,
+    borderBottomColor,
+  } = (themedStyles as unknown) as TextStyle & ViewStyle;
   const textColor = themedStyles.textColor;
   const buttonColor = buttonColorName && theme.colors[buttonColorName];
 
@@ -65,7 +73,14 @@ export const ButtonSingleLine = ({
       borderRadius={10}
       alignItems="center"
       justifyContent="center"
-      style={{backgroundColor: color, minHeight: height, borderWidth, borderColor: buttonColor}}
+      style={{
+        backgroundColor: color,
+        minHeight: height,
+        borderWidth,
+        borderColor: buttonColor,
+        borderBottomWidth,
+        borderBottomColor: Platform.OS === 'ios' ? palette.fadedWhiteDark : borderBottomColor,
+      }}
       paddingHorizontal="m"
       paddingVertical="m"
       flexDirection="row"

src/locale/translations/en.json

@@ -39,7 +39,11 @@
         "Other": "For the next {number} days, you’ll get a daily notification asking permission to upload any new random codes your phone sent out."
       },
       "Body2": "You do not have to agree, even if you agreed the day before.",
-      "Body3": "Take care of yourself and your family during this time."
+      "Body3": "Take care of yourself and your family during this time.",
+      "TipTitle": "TIP: ",
+      "TipBody": "You can prepare for your call from Public Health through the test results website.  ",
+      "TipLinkText": "Test results website",
+      "TipURL": "https://covid19results.ehealthontario.ca:4443/login"
     },
     "SymptomTrackerUrl": "https://ca.thrive.health/covid19app/action/88a5e9a7-db9e-487b-bc87-ce35035f8e5c?from=/home&navigateTo=/tracker/complete",
     "DiagnosedShareView": {

src/locale/translations/fr.json

@@ -80,7 +80,11 @@
       },
       "Body2": "Vous n’êtes pas tenu d’accepter, même si vous avez accepté le jour d’avant. Vous avez le choix.",
       "Body3": "Prenez soin de vous et de votre famille pendant ce temps.",
-      "Title": "Merci d’aider à lutter contre la COVID"
+      "Title": "Merci d’aider à lutter contre la COVID",
+      "TipTitle": "CONSEIL : ",
+      "TipBody": "Vous pouvez vous préparer pour l’appel de la Santé publique sur le site Web des résultats du test.",
+      "TipLinkText": "Site des résultats du test",
+      "TipURL": "https://covid19results.ehealthontario.ca:4443/login"
     },
     "DiagnosedShareView": {
       "Title": "Téléverser les codes aléatoires",

src/screens/home/components/Tip.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Box, ButtonSingleLine, Icon, Text} from 'components';
+import {Linking} from 'react-native';
+import {useI18n} from '@shopify/react-i18n';
+
+export const Tip = () => {
+  const [i18n] = useI18n();
+  return (
+    <Box backgroundColor="green2" borderRadius={10} paddingVertical="m" marginTop="m" marginBottom="xl">
+      <Box flexDirection="row" paddingLeft="s" paddingRight="m">
+        <Box flex={0} paddingTop="xxs" marginRight="xxs">
+          <Icon name="icon-light-bulb" size={40} />
+        </Box>
+        <Box flex={1}>
+          <Text>
+            <Text fontWeight="bold">{i18n.translate('Home.DiagnosedView.TipTitle')}</Text>
+            <Text>{i18n.translate('Home.DiagnosedView.TipBody')}</Text>
+          </Text>
+        </Box>
+      </Box>
+      <Box paddingHorizontal="m" paddingTop="s">
+        <ButtonSingleLine
+          text={i18n.translate('Home.DiagnosedView.TipLinkText')}
+          variant="thinFlatNeutralGrey"
+          externalLink
+          onPress={() => Linking.openURL(i18n.translate('Home.DiagnosedView.TipURL'))}
+        />
+      </Box>
+    </Box>
+  );
+};

src/screens/home/views/DiagnosedView.tsx

@@ -4,11 +4,14 @@ import {Text} from 'components';
 import {useExposureStatus} from 'services/ExposureNotificationService';
 import {daysBetween} from 'shared/date-fns';
 import {pluralizeKey} from 'shared/pluralization';
+import {useStorage} from 'services/StorageService';
 
 import {BaseHomeView} from '../components/BaseHomeView';
+import {Tip} from '../components/Tip';
 
 export const DiagnosedView = () => {
   const [i18n] = useI18n();
+  const {region} = useStorage();
   const [exposureStatus] = useExposureStatus();
 
   if (exposureStatus.type !== 'diagnosed') return null;
@@ -30,6 +33,7 @@ export const DiagnosedView = () => {
       <Text variant="bodyText" color="bodyText" marginBottom="l">
         {i18n.translate('Home.DiagnosedView.Body3')}
       </Text>
+      {region === 'ON' ? <Tip /> : null}
     </BaseHomeView>
   );
 };