Initial setup - exposure history (#1513)

* initial setup

* add icon

src/components/Icon.tsx

@@ -41,6 +41,7 @@ import DeleteIcon from 'assets/delete-icon.svg';
 import NoVisitIcon from 'assets/no-visit-icon.svg';
 import SuccessfulCheckIn from 'assets/successful-checkin-hand.svg';
 import QRCodeInvalid from 'assets/qr-code-invalid.svg';
+import ExposureHistoryThumb from 'assets/exposure-history-thumb.svg';
 
 const ICONS = {
   'icon-x': IconX,
@@ -85,6 +86,7 @@ const ICONS = {
   'no-visit-icon': NoVisitIcon,
   'successful-checkin': SuccessfulCheckIn,
   'qr-code-invalid': QRCodeInvalid,
+  'exposure-history-thumb': ExposureHistoryThumb,
 };
 
 export type IconName = keyof typeof ICONS;

src/locale/translations/en.json

@@ -173,6 +173,7 @@
     "HelpUrl": "https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19/covid-alert/help.html",
     "GetCode": "Get a one-time key",
     "YourVisits": "Your Visits",
+    "YourRecentExposures": "Your recent exposures",
     "ChangeLanguage": "Change language",
     "ToggleCovidAlert": {
       "TurnOff": "Turn off COVID Alert",
@@ -567,7 +568,11 @@
       "ConfirmDeleteAll": "Yes, delete all"
     }
   },
-
+  "ExposureHistory": {
+    "Title": "Your recent exposures",
+    "Body": "This list shows your exposures from the last 14 days.",
+    "NoExposures": "No exposures"
+  },
   "Errors": {
     "Action": "OK",
     "TekUploadNoDate": {

src/locale/translations/fr.json

@@ -173,6 +173,7 @@
     "HelpUrl": "https://www.canada.ca/fr/sante-publique/services/maladies/maladie-coronavirus-covid-19/alerte-covid/aide.html",
     "GetCode": "Obtenir une clé à usage unique",
     "YourVisits": "Vos visites",
+    "YourRecentExposures": "Vos expositions récentes",
     "ChangeLanguage": "Modifier la langue",
     "ToggleCovidAlert": {
       "TurnOff": "Désactiver Alerte COVID",
@@ -561,7 +562,11 @@
       "ConfirmDeleteAll": "Oui, tout supprimer"
     }
   },
-
+  "ExposureHistory": {
+    "Title": "Vos expositions récentes",
+    "Body": "Voici la liste de vos expositions pour les 14 derniers jours.",
+    "NoExposures": "Aucune exposition"
+  },
   "Errors": {
     "Action": "OK",
     "TekUploadNoDate": {

src/navigation/MainNavigator.tsx

@@ -30,6 +30,7 @@ import {CheckInSuccessfulScreen} from 'screens/qr/CheckInSuccessfulScreen';
 import {InvalidQRCodeScreen} from 'screens/qr/InvalidQRCodeScreen';
 import {LearnAboutQRScreen} from 'screens/qr/LearnAboutQRScreen';
 import {CheckInHistoryScreen} from 'screens/qr/CheckInHistoryScreen';
+import {ExposureHistoryScreen} from 'screens/qr/ExposureHistoryScreen';
 import {QRCodeIntroScreen} from 'screens/qr/QRCodeIntroScreen';
 import {MenuScreen} from 'screens/menu/MenuScreen';
 import {ClearOutbreakExposureScreen} from 'screens/home/views/ClearOutbreakExposureView';
@@ -105,6 +106,7 @@ const InvalidQRCodeScreenWithNavBar = withDarkNav(InvalidQRCodeScreen);
 const LearnAboutQRScreenWithNavBar = withDarkNav(LearnAboutQRScreen);
 const OnboardingWithNavBar = withDarkNavNonModal(OnboardingScreen);
 const CheckInHistoryScreenWithNavBar = withDarkNav(CheckInHistoryScreen);
+const ExposureHistoryScreenWithNavBar = withDarkNav(ExposureHistoryScreen);
 const QRCodeIntroScreenWithNavBar = withDarkNav(QRCodeIntroScreen);
 const MenuScreenWithNavBar = withDarkNav(MenuScreen);
 const ClearOutbreakExposureScreenWithNavBar = withDarkNav(ClearOutbreakExposureScreen);
@@ -201,6 +203,7 @@ const MainNavigator = () => {
       <MainStack.Screen name="FrameworkUnavailableScreen" component={FrameworkUnavailableView} />
       <MainStack.Screen name="QRCodeFlow" component={QRCodeNavigator} />
       <MainStack.Screen name="CheckInHistoryScreen" component={CheckInHistoryScreenWithNavBar} />
+      <MainStack.Screen name="ExposureHistoryScreen" component={ExposureHistoryScreenWithNavBar} />
       <MainStack.Screen name="Menu" component={MenuScreenWithNavBar} />
       <MainStack.Screen name="ClearOutbreakExposure" component={ClearOutbreakExposureScreenWithNavBar} />
     </MainStack.Navigator>

src/screens/menu/MenuScreen.tsx

@@ -35,6 +35,7 @@ export const MenuScreen = () => {
   const onLanguage = useCallback(() => navigation.navigate('LanguageSelect'), [navigation]);
   const onRegion = useCallback(() => navigation.navigate('RegionSelect'), [navigation]);
   const onYourVisits = useCallback(() => navigation.navigate('CheckInHistoryScreen'), [navigation]);
+  const onRecentExposures = useCallback(() => navigation.navigate('ExposureHistoryScreen'), [navigation]);
   const onHelp = useCallback(() => {
     Linking.openURL(i18n.translate('Info.HelpUrl')).catch(error => captureException('An error occurred', error));
   }, [i18n]);
@@ -86,6 +87,14 @@ export const MenuScreen = () => {
                 icon="icon-chevron"
               />
             )}
+            {qrEnabled && (
+              <InfoShareItem
+                text={i18n.translate('Info.YourRecentExposures')}
+                testID="yourVisitsButton"
+                onPress={onRecentExposures}
+                icon="icon-chevron"
+              />
+            )}
 
             <InfoShareItem
               text={i18n.translate('Info.GetCode')}

src/screens/qr/ExposureHistoryScreen.tsx

@@ -0,0 +1,91 @@
+import React, {useCallback} from 'react';
+import {StyleSheet} from 'react-native';
+import {useI18n} from 'locale';
+import {ExposureHistoryData} from 'shared/qr';
+import {useNavigation} from '@react-navigation/native';
+import {Box, Text, Icon, Toolbar} from 'components';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {ScrollView} from 'react-native-gesture-handler';
+
+const ExposureList = ({exposureHistoryData}: {exposureHistoryData: ExposureHistoryData[]}) => {
+  return (
+    <>
+      {Object.keys(exposureHistoryData).map(item => {
+        return <Box key={item} />;
+      })}
+    </>
+  );
+};
+
+const NoExposureHistoryScreen = () => {
+  const i18n = useI18n();
+
+  return (
+    <Box style={styles.noExposureHistoryScreen} marginTop="xl">
+      <Icon height={120} width={150} name="exposure-history-thumb" />
+      <Text paddingTop="s" fontWeight="bold">
+        {i18n.translate('ExposureHistory.NoExposures')}
+      </Text>
+    </Box>
+  );
+};
+
+export const ExposureHistoryScreen = () => {
+  const i18n = useI18n();
+  const exposureHistory = [];
+  const navigation = useNavigation();
+  const back = useCallback(() => navigation.goBack(), [navigation]);
+
+  return (
+    <Box flex={1} backgroundColor="overlayBackground">
+      <SafeAreaView style={styles.flex}>
+        <Toolbar title="" navIcon="icon-back-arrow" navText={i18n.translate('PlacesLog.Back')} onIconClicked={back} />
+        <ScrollView style={styles.flex}>
+          <Box paddingHorizontal="m">
+            <Text variant="bodyTitle" marginBottom="l" accessibilityRole="header">
+              {i18n.translate('ExposureHistory.Title')}
+            </Text>
+            <Text>{i18n.translate('ExposureHistory.Body')}</Text>
+          </Box>
+
+          {exposureHistory.length === 0 ? (
+            <NoExposureHistoryScreen />
+          ) : (
+            <>
+              <Box paddingHorizontal="xxs" marginLeft="m" marginRight="m" paddingBottom="m">
+                <ExposureList exposureHistoryData={[]} />
+              </Box>
+            </>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </Box>
+  );
+};
+
+const styles = StyleSheet.create({
+  boxStyle: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  bottomBorder: {
+    borderBottomColor: '#8a8a8a',
+    borderBottomWidth: 1,
+  },
+  textBox: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  radius: {
+    borderRadius: 10,
+  },
+  noExposureHistoryScreen: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  flex: {
+    flex: 1,
+  },
+});

src/shared/qr.ts

@@ -13,6 +13,12 @@ export interface CheckInData {
   timestamp: number;
 }
 
+export interface ExposureHistoryData {
+  id: string;
+  name: string;
+  timestamp: number;
+}
+
 export interface TimeWindow {
   start: number;
   end: number;