Merge branch 'develop' into ts-theme-button

* develop:
  Add Danish to the list of languages. (#765)
  Fixed the aspect ration on the icon and add links (#763)
  Build time feature flags (Phase 1) (#694)
  Extract theme aware <IconButton /> component (#756)
  Latest i18n pull (#755)
  Add language contribution info to contributing guide (#754)

.env

@@ -0,0 +1,10 @@
+# This is the debug/dev .env file. Any debug or non-release-signed build will
+# use these flags.
+
+# About flags:
+# ------------
+# Any variables that start with flag_ will be available to the <Flag> component
+# For now, only true/1 is parsed, everything else will be interpretted as false
+# flags must begin with flag_ and are case sensitive
+
+flag_google_import=true

.env.beta

@@ -0,0 +1,11 @@
+# This is the BETA .env file, it is built for TestFlight and Google Play beta
+# channels. Flags that are ready for testing/beta should be enabled here.
+
+# When making any BETA channel build on both iOS or Android, prepend the build
+# command with ENVFILE=.env.beta
+#
+# e.g.
+#
+# ENVFILE=.env.beta ./gradlew assembleRelease
+
+# flag_google_import=true

.env.release

@@ -0,0 +1,5 @@
+# This is the release .env file, it is built for App store final releases
+# only prod ready feature flags should be enabled here.
+#
+# For Android, this file is automatically used for any release build. iOS should
+# prepend ENVFILE=.env.release before any build commands.

.github/workflows/create-release.yml

@@ -8,6 +8,8 @@ on:
 jobs:
   deploy:
     runs-on: ubuntu-latest
+    env:
+      ENVFILE: .env.release
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
@@ -76,7 +78,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          upload_url: ${{ steps.create_release.outputs.upload_url }} 
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
           asset_path: android/app/build/outputs/apk/release/app-release-unsigned-signed.apk
           asset_name: app-release-${{ github.ref }}.apk
           asset_content_type: application/zip

App.js

@@ -1,17 +1,10 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
 import React, { useEffect } from 'react';
 import { MenuProvider } from 'react-native-popup-menu';
 import SplashScreen from 'react-native-splash-screen';
 
 import { Theme } from './app/constants/themes';
 import Entry from './app/Entry';
+import { FlagsProvider, buildTimeFlags } from './app/helpers/flags';
 import VersionCheckService from './app/services/VersionCheckService';
 
 const App = () => {
@@ -21,11 +14,13 @@ const App = () => {
   }, []);
 
   return (
-    <MenuProvider>
-      <Theme use='default'>
-        <Entry />
-      </Theme>
-    </MenuProvider>
+    <FlagsProvider flags={buildTimeFlags}>
+      <MenuProvider>
+        <Theme use='default'>
+          <Entry />
+        </Theme>
+      </MenuProvider>
+    </FlagsProvider>
   );
 };
 

CONTRIBUTING.md

@@ -3,6 +3,7 @@
 We welcome participation in an open project. We want to make it as easy as possible for people to work together, so please follow these guidelines to prepare and submit a pull request.
 
 - Filtering by [good first issues](https://github.com/tripleblindmarket/covid-safe-paths/labels/good%20first%20issue) is the recommended way to begin contributing to the project
+- Localization/Language updates are handled in [Lokalise](https://lokalise.com/). More info on how to contribute [here](https://github.com/tripleblindmarket/covid-safe-paths/wiki/Localization-Contributing-Guidelines)
 
 ## Create A New Issue
 

README.md

@@ -3,8 +3,8 @@
 
   <a href="https://covidsafepaths.org">
     <img
-      height="80"
       width="80"
+      height="67"
       alt="safe paths logo"
       src="./assets/Safe_Paths_Logo.png"
     />
@@ -45,7 +45,7 @@ Safe Paths logs your device’s location once every five minutes and stores 28 d
 
 ### Downloads for COVID Safe Paths
 
-_coming soon!_
+[Google Play](https://play.google.com/store/apps/details?id=org.pathcheck.covidsafepaths) | [Apple Store](https://apps.apple.com/us/app/covid-safe-paths/id1508266966)
 
 ### Downloads for Private Kit (technology beta)
 

__mocks__/react-native-config.js

@@ -0,0 +1,3 @@
+export default {
+  FLAG_FOO_BAR: 'true',
+};

android/app/build.gradle

@@ -1,5 +1,12 @@
 apply plugin: "com.android.application"
 
+project.ext.envConfigFiles = [
+    debug: ".env",
+    release: ".env.release",
+]
+
+apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
+
 import com.android.build.OutputFile
 
 /**

android/app/proguard-rules.pro

@@ -8,3 +8,6 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
+
+# react-native-config, prevents obfuscating of .env flags
+-keep class org.pathcheck.covidsafepaths.BuildConfig { *; }

android/app/src/main/res/values-ar/strings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resources>
+  <!-- Channel label for notifications shown in App > Notifications > Safe Paths -->
+  <string name="notification_channel_description">إشعارات Safe Paths</string>
+</resources>

android/app/src/main/res/values-da/strings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resources>
+  <!-- Channel label for notifications shown in App > Notifications > Safe Paths -->
+  <string name="notification_channel_description">Safe Paths notifikationer</string>
+</resources>

android/app/src/main/res/values-it/strings.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <resources>
   <!-- Channel label for notifications shown in App > Notifications > Safe Paths -->
-  <string name="notification_channel_description">Gestisci tutte le notifiche locali</string>
+  <string name="notification_channel_description">Notifiche Safe Paths</string>
 </resources>

android/app/src/main/res/values-pt-rBR/strings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resources>
+  <!-- Channel label for notifications shown in App > Notifications > Safe Paths -->
+  <string name="notification_channel_description">Notícias Safe Paths</string>
+</resources>

app/components/EulaModal.js

@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Modal, StyleSheet, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import WebView from 'react-native-webview';
 
-import closeIcon from '../assets/images/closeIcon.png';
+import close from '../assets/svgs/close';
 import Colors from '../constants/colors';
 import { Theme } from '../constants/themes';
 import en_html from '../locales/eula/en_html';
 import ht_html from '../locales/eula/ht_html';
 import { Button } from './Button';
 import { Checkbox } from './Checkbox';
+import { IconButton } from './IconButton';
 import { Typography } from './Typography';
 
 const EULA_FILES = {
@@ -87,10 +88,14 @@ export const EulaModal = ({ selectedLocale, continueFunction }) => {
       <Modal animationType='slide' transparent visible={modalVisible}>
         <View style={styles.container}>
           <SafeAreaView style={{ flex: 1 }}>
-            <View style={{ flex: 7, paddingHorizontal: 5, paddingBottom: 0 }}>
-              <TouchableOpacity onPress={() => setModalVisibility(false)}>
-                <Image source={closeIcon} style={styles.closeIcon} />
-              </TouchableOpacity>
+            <View style={{ flex: 7, paddingHorizontal: 5 }}>
+              <IconButton
+                icon={close}
+                size={20}
+                style={styles.closeIcon}
+                accessibilityLabel='Close'
+                onPress={() => setModalVisibility(false)}
+              />
               <WebView
                 style={{ flex: 1 }}
                 source={{ html }}
@@ -143,10 +148,8 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.VIOLET_BUTTON,
   },
   closeIcon: {
-    width: 20,
-    height: 20,
     marginBottom: 6,
-    opacity: 0.7,
+    marginRight: 8,
     alignSelf: 'flex-end',
   },
   smallDescriptionText: {

app/components/Feature.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { Flag } from '../helpers/flags';
+
+/**
+ * Small wrapper around `<Flag />` which makes the default case easier:
+ *
+ * Usage:
+ *
+ * ```
+ * <Feature name="google_import" fallback={() => <hr />}>
+ *   <FeatureUi />
+ * </Feature>
+ * ```
+ *
+ * @param {{
+ *   name: string;
+ *   fallback?: () => import('react').ReactNode;
+ *   children: import('react').ReactNode;
+ * }} param0
+ */
+export const Feature = ({ name, fallback, children }) => {
+  const keyPath = name.split('.');
+
+  return (
+    <Flag name={keyPath} render={() => children} fallbackRender={fallback} />
+  );
+};

app/components/IconButton.js

@@ -0,0 +1,43 @@
+import styled from '@emotion/native';
+import React from 'react';
+import { SvgXml } from 'react-native-svg';
+
+import { themeTextColor } from '../constants/themes';
+
+/**
+ * A theme aware icon button
+ *
+ * @param {{
+ *   icon: SvgXml;
+ *   accessibilityLabel: string;
+ *   secondary?: boolean;
+ *   size?: number;
+ * }} param0
+ */
+export const IconButton = ({
+  icon,
+  accessibilityLabel,
+  secondary,
+  size,
+  ...otherProps
+}) => {
+  return (
+    <Container accessibilityLabel={accessibilityLabel} {...otherProps}>
+      <Icon
+        xml={icon}
+        secondary={secondary}
+        width={size || 24}
+        height={size || 24}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.TouchableOpacity`
+  align-items: center;
+  align-content: center;
+`;
+
+const Icon = styled(SvgXml)`
+  color: ${themeTextColor};
+`;

app/components/Typography.js

@@ -2,6 +2,7 @@ import styled from '@emotion/native';
 import { css } from '@emotion/native/dist/native.cjs.prod';
 import * as React from 'react';
 
+import { themeTextColor } from '../constants/themes';
 import { useLanguageDirection } from '../locales/languages';
 
 export const Type = {
@@ -89,9 +90,6 @@ const LINE_HEIGHT_MAP = {
 
 const getLineHeight = ({ use = Type.Body1 }) => LINE_HEIGHT_MAP[use];
 
-const getTextColor = ({ theme, secondary }) =>
-  secondary ? theme.textSecondaryOnBackground : theme.textPrimaryOnBackground;
-
 const getTextOpacity = ({ disabled }) => (disabled ? '0.25' : '1');
 
 const getFontWeight = ({ use = Type.Body1, bold }) =>
@@ -104,7 +102,7 @@ const getFontFamily = ({ use, monospace, bold }) => {
 };
 
 const ThemedText = styled.Text`
-  color: ${getTextColor};
+  color: ${themeTextColor};
   opacity: ${getTextOpacity};
   font-family: ${getFontFamily};
   font-size: ${getFontSize};