Files
cally/app/(unauth)/get_started.tsx
2025-02-12 00:05:39 +01:00

230 lines
6.5 KiB
TypeScript

import { SafeAreaView } from "react-native-safe-area-context";
import {
Button,
Colors,
Dialog,
LoaderScreen,
Text,
View,
} from "react-native-ui-lib";
import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "expo-router";
import QRIcon from "@/assets/svgs/QRIcon";
import { Camera, CameraView } from "expo-camera";
import { useLoginWithQrCode } from "@/hooks/firebase/useLoginWithQrCode";
import { useAuthContext } from "@/contexts/AuthContext";
import debounce from "debounce";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
import { Dimensions } from "react-native";
export default function Screen() {
const router = useRouter();
const { setRedirectOverride } = useAuthContext();
const [hasPermission, setHasPermission] = useState<boolean | null>(null);
const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
const [isPortrait, setIsPortrait] = useState(() => {
const dim = Dimensions.get('screen');
return dim.height >= dim.width;
});
useEffect(() => {
const subscription = Dimensions.addEventListener('change', ({ screen }) => {
setIsPortrait(screen.height >= screen.width);
});
return () => subscription.remove();
}, []);
const getTopPadding = () => {
if (Device.deviceType === DeviceType.TABLET) {
return isPortrait ? "50%" : "15%";
}
return "20%"; // non-tablet case, regardless of orientation
};
const { mutateAsync: signInWithQrCode, isLoading } = useLoginWithQrCode();
const debouncedRouterReplace = useCallback(
debounce(() => {
router.push("/(unauth)/birthday_page");
}, 300),
[]
);
const handleQrCodeScanned = async ({ data }: { data: string }) => {
setShowCameraDialog(false);
setRedirectOverride(true);
try {
await signInWithQrCode({ userId: data });
debouncedRouterReplace();
} catch (err) {
console.log(err);
}
};
const getCameraPermissions = async (callback: () => void) => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === "granted");
if (status === "granted") {
callback();
}
};
const handleOpenQrCodeDialog = () => {
getCameraPermissions(() => setShowCameraDialog(true));
};
return (
<SafeAreaView style={{ flex: 1, alignItems: "center" }}>
<View
style={{
flex: 1,
padding: 21,
paddingBottom: 45,
paddingTop: isLoading ? "20%" : getTopPadding(),
width: isTablet ? 629 : '100%'
}}
>
<View center>
<Text style={{ fontSize: 30, fontFamily: "Manrope_600SemiBold" }}>
Get started with Cally
</Text>
</View>
<View width={"100%"} gap-30>
<View>
<Button
label="Scan QR Code"
marginT-50
labelStyle={{
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
marginLeft: 10,
}}
iconSource={() => <QRIcon color={"#07B8C7"} />}
onPress={handleOpenQrCodeDialog}
style={{ height: 50 }}
color={Colors.black}
backgroundColor={Colors.white}
/>
{/* GOOGLE LOGIN HERE */}
</View>
<View row center gap-20>
<View flexG style={{ backgroundColor: "#E2E2E2", height: 2 }} />
<Text
style={{
fontSize: 16,
fontFamily: "PlusJakartaSans_300Light",
color: "#7A7A7A",
}}
>
or
</Text>
<View flexG style={{ backgroundColor: "#E2E2E2", height: 2 }} />
</View>
<View>
<Button
label="Continue with Email"
labelStyle={{
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
marginLeft: 10,
}}
onPress={() => router.push("/(unauth)/sign_up")}
style={{
height: 50,
borderStyle: "solid",
borderColor: "#E2E2E2",
borderWidth: 2,
}}
color={Colors.black}
backgroundColor={"transparent"}
/>
</View>
</View>
{isTablet ? (
<View marginT-30 />
) : (
<View flexG />
)}
<View row centerH gap-5>
<Text
style={{
fontFamily: "PlusJakartaSans_300Light",
fontSize: 16,
color: "#484848",
}}
center
>
Already have an account?
</Text>
<Button
label="Log in"
link
onPress={() => router.push("/(unauth)/sign_in")}
labelStyle={[
{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
color: "#919191",
},
{ fontSize: 16, textDecorationLine: "none", color: "#fd1775" },
]}
/>
</View>
</View>
{/* Legacy, move into separate component */}
{/* Camera Dialog */}
<Dialog
visible={showCameraDialog}
onDismiss={() => setShowCameraDialog(false)}
bottom
width="100%"
height="70%"
containerStyle={{ padding: 15, backgroundColor: "white" }}
>
<Text center style={{ fontSize: 16 }} marginB-15>
Scan a QR code presented from your family member of provider.
</Text>
{hasPermission === null ? (
<Text>Requesting camera permissions...</Text>
) : !hasPermission ? (
<Text>No access to camera</Text>
) : (
<CameraView
style={{ flex: 1, borderRadius: 15 }}
onBarcodeScanned={handleQrCodeScanned}
barcodeScannerSettings={{
barcodeTypes: ["qr"],
}}
/>
)}
<Button
label="Cancel"
onPress={() => setShowCameraDialog(false)}
backgroundColor="#fd1775"
style={{ margin: 10, marginBottom: 30 }}
/>
</Dialog>
{isLoading && (
<LoaderScreen
overlay
message={"Signing in..."}
backgroundColor={Colors.white}
color={Colors.grey40}
/>
)}
</SafeAreaView>
);
}