Add healthcheck cta on escrow complete screen (#816)

Why:
When a user completes the escrow verification flow we would like to show
them a cta to complete a covid 19 symptom log.

This commit:
Updates the EscrowVerification Complete screen to include the new cta.

src/EscrowVerification/Complete.tsx

@@ -1,43 +1,99 @@
 import React, { FunctionComponent } from "react"
-import { ScrollView, Image, StyleSheet, TouchableOpacity } from "react-native"
+import {
+  Linking,
+  Pressable,
+  View,
+  Alert,
+  ScrollView,
+  Image,
+  StyleSheet,
+} from "react-native"
 import { useNavigation } from "@react-navigation/native"
 import { useTranslation } from "react-i18next"
+import { SvgXml } from "react-native-svg"
 
 import { StatusBar, Text } from "../components"
 import { useStatusBarEffect, Stacks } from "../navigation"
+import { useConfigurationContext } from "../ConfigurationContext"
+import Logger from "../logger"
 
-import { Images } from "../assets"
-import { Buttons, Colors, Layout, Spacing, Typography } from "../styles"
+import { Images, Icons } from "../assets"
+import {
+  Buttons,
+  Colors,
+  Iconography,
+  Layout,
+  Spacing,
+  Typography,
+} from "../styles"
 
 export const Complete: FunctionComponent = () => {
   useStatusBarEffect("dark-content", Colors.background.primaryLight)
   const navigation = useNavigation()
   const { t } = useTranslation()
+  const {
+    healthAuthorityHealthCheckUrl: healthCheckUrl,
+  } = useConfigurationContext()
 
-  const handleOnPressDone = () => {
+  const handleOnPressClose = () => {
     navigation.navigate("App", { screen: Stacks.Home })
   }
 
+  const handleOnPressCompleteHealthCheck = (healthCheckUrl: string) => {
+    return async () => {
+      try {
+        Linking.openURL(healthCheckUrl).then(() => {
+          navigation.navigate("App", { screen: Stacks.Home })
+        })
+      } catch (e) {
+        Logger.error("Failed to open healthCheckUrl: ", { healthCheckUrl })
+        const alertMessage = t("home.could_not_open_link", {
+          url: healthCheckUrl,
+        })
+        Alert.alert(alertMessage)
+      }
+    }
+  }
+
   return (
     <>
       <StatusBar backgroundColor={Colors.background.primaryLight} />
+      <View style={style.headerContainer}>
+        <Pressable
+          style={style.closeIconContainer}
+          onPress={handleOnPressClose}
+        >
+          <SvgXml
+            xml={Icons.X}
+            width={Iconography.xxSmall}
+            height={Iconography.xxSmall}
+            fill={Colors.neutral.shade100}
+          />
+        </Pressable>
+      </View>
       <ScrollView
         style={style.container}
         contentContainerStyle={style.contentContainer}
         alwaysBounceVertical={false}
       >
         <Image source={Images.CheckInCircle} style={style.image} />
-        <Text style={style.header}>{t("export.complete_title")}</Text>
+        <Text style={style.header}>
+          {t("escrow_verification.complete.title")}
+        </Text>
         <Text style={style.contentText}>
-          {t("export.complete_body_bluetooth")}
+          {t("escrow_verification.complete.body")}
         </Text>
-        <TouchableOpacity
-          style={style.button}
-          onPress={handleOnPressDone}
-          accessibilityLabel={t("common.done")}
-        >
-          <Text style={style.buttonText}>{t("common.done")}</Text>
-        </TouchableOpacity>
+        {healthCheckUrl && (
+          <Pressable
+            style={style.button}
+            onPress={handleOnPressCompleteHealthCheck(healthCheckUrl)}
+            accessibilityLabel={t("escrow_verification.complete_healthcheck")}
+          >
+            <Text style={style.buttonText}>
+              {t("escrow_verification.complete_healthcheck")}
+            </Text>
+          </Pressable>
+        )}
       </ScrollView>
     </>
   )
@@ -48,6 +104,14 @@ const style = StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.background.primaryLight,
   },
+  headerContainer: {
+    alignItems: "flex-end",
+    backgroundColor: Colors.background.primaryLight,
+  },
+  closeIconContainer: {
+    paddingHorizontal: Spacing.large,
+    paddingVertical: Spacing.medium,
+  },
   contentContainer: {
     justifyContent: "center",
     alignItems: "center",

src/locales/en.json

@@ -75,6 +75,11 @@
       "subheader": "Please provide your phone number and test date and we'll text you your verification code.",
       "test_date": "Test date",
       "test_details": "Test Details"
+    },
+    "complete_healthcheck": "Complete HealthCheck",
+    "complete": {
+      "body": "You’re helping contain the spread of the virus and protect others in your community.",
+      "title": "Thanks for keeping your community safe!"
     }
   },
   "export": {

src/navigation/EscrowVerification.tsx

@@ -27,6 +27,7 @@ const AffectedUserStack: FunctionComponent = () => {
   return (
     <EscrowVerificationProvider>
       <Stack.Navigator
+        initialRouteName={EscrowVerificationRoutes.EscrowVerificationStart}
         screenOptions={{ headerShown: false, gestureEnabled: false }}
       >
         <Stack.Screen