Files
cally/components/pages/settings/user_settings_views/UserMenu.tsx
Milan Paunovic 5cfdc84055 Merge branch 'dev'
# Conflicts:
#	app/(auth)/calendar/index.tsx
2024-11-26 21:01:10 +01:00

90 lines
2.4 KiB
TypeScript

import React from "react";
import {
Button,
Card,
Dialog,
Text,
TouchableOpacity,
} from "react-native-ui-lib";
import QRCode from "react-native-qrcode-svg";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
import Ionicons from "@expo/vector-icons/Ionicons";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { StyleSheet } from "react-native";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
const UserMenu = ({
user,
showQRCodeDialog,
setShowQRCodeDialog,
}: {
user: UserProfile;
showQRCodeDialog: boolean;
setShowQRCodeDialog: (value: string | boolean) => void;
}) => {
const {user: currentUser} = useAuthContext();
const handleShowQRCode = () => {
setShowQRCodeDialog(user.uid!);
};
const getQRCodeText = () => {
if (user.userType === ProfileType.FAMILY_DEVICE) {
return "Open Cally on the family device and scan the code to link it to your family group";
}
if (currentUser?.uid === user.uid) {
return "To connect another device to your profile, open the Cally app on that device and scan this QR code.";
}
return `To connect ${user.firstName}'s device to your Family Group, open the Cally app on their device and scan the QR code.`;
};
return (
<>
<TouchableOpacity onPress={handleShowQRCode}>
<Ionicons name="qr-code-outline" size={24} color="black" />
</TouchableOpacity>
<Dialog
visible={showQRCodeDialog}
onDismiss={() => setShowQRCodeDialog(false)}
panDirection={PanningDirectionsEnum.DOWN}
>
<Card padding-20 center>
<Text
center
marginT-15
marginH-15
marginB-25
style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
>
{getQRCodeText()}
</Text>
<QRCode value={user.uid!} size={150} />
<Button
marginT-20
style={styles.button}
label="Close"
labelStyle={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 15,
}}
onPress={() => setShowQRCodeDialog(false)}
/>
</Card>
</Dialog>
</>
);
};
const styles = StyleSheet.create({
button: {
backgroundColor: "#d9d9d9",
width: 117,
height: 47,
},
});
export default UserMenu;