PR: Implement the new profile creation screen

app.json

@@ -29,7 +29,15 @@
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router"],
+    "plugins": [
+      "expo-router",
+      [
+        "expo-barcode-scanner",
+        {
+          "cameraPermission": "Allow Senso to access camera."
+        }
+      ]
+    ],
     "experiments": {
       "tsconfigPaths": true
     }

app/auth/login.tsx

@@ -18,6 +18,7 @@ import {
 import { POST } from "@/common/api";
 import { useI18n } from "@/common/i18n";
 import { useIdentity, RedirectIfLoggedIn } from "@/common/identity";
+import { AppRoutes } from "@/common/util/constants";
 import { Header } from "@/components/Header";
 
 const Page = () => {
@@ -120,7 +121,7 @@ const Page = () => {
             </Button>
             <Text style={styles.submit}>
               {t("login.registerPrompt")}{" "}
-              <Link href="/auth/register" replace>
+              <Link href={AppRoutes.Register} replace>
                 <Text style={{ color: theme.colors.primary }}>
                   {t("login.registerButton")}
                 </Text>

app/auth/register.tsx

@@ -20,6 +20,7 @@ import {
 import { POST } from "@/common/api";
 import { useI18n } from "@/common/i18n";
 import { useIdentity, RedirectIfLoggedIn } from "@/common/identity";
+import { AppRoutes } from "@/common/util/constants";
 import { Header } from "@/components/Header";
 
 interface IRegisterForm {
@@ -196,7 +197,7 @@ const Page = () => {
               </Button>
               <Text style={styles.submit}>
                 {t("register.loginPrompt")}{" "}
-                <Link href="/auth/login" replace>
+                <Link href={AppRoutes.Login} replace>
                   <Text style={{ color: theme.colors.primary }}>
                     {t("register.loginButton")}
                   </Text>

app/index.tsx

@@ -5,6 +5,7 @@ import { ActivityIndicator, Button, Text } from "react-native-paper";
 import { BASE_URL, useApi } from "@/common/api";
 import { useI18n } from "@/common/i18n";
 import { useIdentity, RedirectIfLoggedIn } from "@/common/identity";
+import { AppRoutes } from "@/common/util/constants";
 import { Header } from "@/components/Header";
 import { MonoText } from "@/components/StyledText";
 
@@ -44,7 +45,7 @@ export const Landing = ({ debug = false }: { debug?: boolean }) => {
               {error?.toString()}
             </MonoText>
             {/* Escape hatch to let us test client without server in development */}
-            <Link href="/auth/login" replace>
+            <Link href={AppRoutes.Login} replace>
               <Button textColor="red">IGNORE</Button>
             </Link>
           </>
@@ -62,7 +63,7 @@ export const Landing = ({ debug = false }: { debug?: boolean }) => {
       <Text variant="displayMedium">{t("appName")}</Text>
 
       <Text style={styles.description}>{t("landing.description")}</Text>
-      <Link href="/auth/login" replace>
+      <Link href={AppRoutes.Login} replace>
         <Button mode="contained" labelStyle={styles.button}>
           {t("landing.startButton")}
         </Button>

app/profile/caretaker/add.tsx

@@ -0,0 +1,49 @@
+import { Link } from "expo-router";
+import { StyleSheet, View } from "react-native";
+import { Button, Text } from "react-native-paper";
+
+import { actions } from "@/common/actions";
+import { useI18n } from "@/common/i18n";
+import { AppRoutes } from "@/common/util/constants";
+import { Header } from "@/components/Header";
+
+const AddCaretakerProfile = () => {
+  const { t } = useI18n();
+
+  return (
+    <View style={styles.container}>
+      <Header
+        left={actions.goBack}
+        title={t("createCaretakerProfile.pageTitle")}
+      />
+      <Text variant="titleLarge" style={styles.description}>
+        {t("createCaretakerProfile.description")}
+      </Text>
+      <Link href={AppRoutes.ScanSeniorQR}>
+        <Button labelStyle={styles.skipButton}>
+          {t("createCaretakerProfile.scanQR")}
+        </Button>
+      </Link>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: 16,
+    marginHorizontal: 24,
+    gap: 32,
+  },
+  description: {
+    textAlign: "center",
+  },
+  skipButton: {
+    fontSize: 20,
+    lineHeight: 28,
+  },
+});
+
+export default AddCaretakerProfile;

app/profile/caretaker/scan-qr.tsx

@@ -0,0 +1,70 @@
+import { BarCodeScanner } from "expo-barcode-scanner";
+import { router } from "expo-router";
+import React, { useState, useEffect } from "react";
+import { Text, View, StyleSheet, Alert } from "react-native";
+
+import { actions } from "@/common/actions";
+import { useI18n } from "@/common/i18n";
+import { Header } from "@/components/Header";
+
+export default function App() {
+  const { t } = useI18n();
+
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const [scanned, setScanned] = useState(false);
+
+  useEffect(() => {
+    const getBarCodeScannerPermissions = async () => {
+      const { status } = await BarCodeScanner.requestPermissionsAsync();
+      setHasPermission(status === "granted");
+    };
+
+    getBarCodeScannerPermissions();
+  }, []);
+
+  const handleBarCodeScanned = ({ type, data }: { type: any; data: any }) => {
+    setScanned(true);
+    Alert.alert(t("scanQR.alertTitle"), t("scanQR.alertDescription"), [
+      {
+        text: t("scanQR.alertCancel"),
+        style: "cancel",
+        onPress: () => setScanned(false),
+      },
+      {
+        text: t("scanQR.alertAdd"),
+        onPress: () => {
+          router.back();
+          setScanned(false);
+        },
+      },
+    ]);
+  };
+
+  if (hasPermission === null) {
+    return <Text>{t("scanQR.requestingPermission")}</Text>;
+  }
+  if (hasPermission === false) {
+    return <Text>{t("scanQR.noPermission")}</Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Header
+        left={actions.goBack}
+        title={t("createSeniorProfile.pageTitle")}
+      />
+      <BarCodeScanner
+        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
+        style={StyleSheet.absoluteFillObject}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "column",
+    justifyContent: "center",
+  },
+});

app/profile/list.tsx

@@ -11,6 +11,7 @@ import {
   useIdentity,
   RedirectIfLoggedOut,
 } from "@/common/identity";
+import { AppRoutes } from "@/common/util/constants";
 import { Header } from "@/components/Header";
 
 const mockApiResponse = {
@@ -95,11 +96,18 @@ const ProfilesList = () => {
         </List.Subheader>
       )}
       <View style={styles.newProfileButtonWrapper}>
-        <Link href="/profile/add">
-          <Button icon="plus" mode="contained" uppercase>
-            {t("profileList.newProfileButton")}
+        <Link href={AppRoutes.AddCaretakerProfile}>
+          <Button icon="account-eye-outline" mode="outlined" uppercase>
+            {t("profileList.newCaretakerProfileButton")}
           </Button>
         </Link>
+        {!seniorProfile && (
+          <Link href={AppRoutes.AddSeniorProfile} replace>
+            <Button icon="plus" mode="contained" uppercase>
+              {t("profileList.newSeniorProfileButton")}
+            </Button>
+          </Link>
+        )}
       </View>
     </View>
   );
@@ -139,6 +147,7 @@ const styles = StyleSheet.create({
   },
   newProfileButtonWrapper: {
     alignItems: "center",
+    gap: 16,
   },
 });
 

app/profile/senior/add.tsx

@@ -0,0 +1,55 @@
+import { Link } from "expo-router";
+import { StyleSheet, View } from "react-native";
+import { Button, Text } from "react-native-paper";
+
+import { actions } from "@/common/actions";
+import { useI18n } from "@/common/i18n";
+import { AppRoutes } from "@/common/util/constants";
+import { Header } from "@/components/Header";
+
+const ProfilesList = () => {
+  const { t } = useI18n();
+
+  return (
+    <View style={styles.container}>
+      <Header
+        left={actions.goBack}
+        title={t("createSeniorProfile.pageTitle")}
+      />
+      <Text variant="titleLarge" style={styles.description}>
+        {t("createSeniorProfile.description")}
+      </Text>
+      <View style={styles.mockQR} />
+      <Link href={AppRoutes.Dashboard} replace>
+        <Button labelStyle={styles.skipButton}>
+          {t("createSeniorProfile.skipButton")}
+        </Button>
+      </Link>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: 16,
+    marginHorizontal: 24,
+    gap: 32,
+  },
+  description: {
+    textAlign: "center",
+  },
+  mockQR: {
+    width: "90%",
+    aspectRatio: 1,
+    backgroundColor: "black",
+  },
+  skipButton: {
+    fontSize: 20,
+    lineHeight: 28,
+  },
+});
+
+export default ProfilesList;