mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 16:34:54 +00:00
added focus, ui changes
This commit is contained in:
ivic00
@ -1,392 +1,505 @@
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
Colors,
|
||||
Dialog,
|
||||
FloatingButton,
|
||||
PanningProvider,
|
||||
Picker,
|
||||
Text,
|
||||
TextField,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
Colors,
|
||||
Dialog,
|
||||
FloatingButton,
|
||||
PanningProvider,
|
||||
Picker,
|
||||
Text,
|
||||
TextField,
|
||||
TextFieldRef,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native-ui-lib";
|
||||
import React, {useState} from "react";
|
||||
import {ScrollView, StyleSheet} from "react-native";
|
||||
import {PickerSingleValue} from "react-native-ui-lib/src/components/picker/types";
|
||||
import {useCreateSubUser} from "@/hooks/firebase/useCreateSubUser";
|
||||
import {ProfileType} from "@/contexts/AuthContext";
|
||||
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Dimensions, ScrollView, StyleSheet } from "react-native";
|
||||
import { PickerSingleValue } from "react-native-ui-lib/src/components/picker/types";
|
||||
import { useCreateSubUser } from "@/hooks/firebase/useCreateSubUser";
|
||||
import { ProfileType } from "@/contexts/AuthContext";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import UserMenu from "@/components/pages/settings/user_settings_views/UserMenu";
|
||||
import {uuidv4} from "@firebase/util";
|
||||
import { uuidv4 } from "@firebase/util";
|
||||
import QRIcon from "@/assets/svgs/QRIcon";
|
||||
import EmailIcon from "@/assets/svgs/EmailIcon";
|
||||
import CircledXIcon from "@/assets/svgs/CircledXIcon";
|
||||
import ProfileIcon from "@/assets/svgs/ProfileIcon";
|
||||
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
|
||||
|
||||
const MyGroup = () => {
|
||||
const [showAddUserDialog, setShowAddUserDialog] = useState(false);
|
||||
const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false);
|
||||
const [selectedStatus, setSelectedStatus] = useState<
|
||||
string | PickerSingleValue
|
||||
>(ProfileType.CHILD);
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [showAddUserDialog, setShowAddUserDialog] = useState(false);
|
||||
const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false);
|
||||
const [selectedStatus, setSelectedStatus] = useState<
|
||||
string | PickerSingleValue
|
||||
>(ProfileType.CHILD);
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
|
||||
const [showQRCodeDialog, setShowQRCodeDialog] = useState("");
|
||||
const lNameRef = useRef<TextFieldRef>(null);
|
||||
const emailRef = useRef<TextFieldRef>(null);
|
||||
|
||||
const {mutateAsync: createSubUser, isLoading, isError} = useCreateSubUser();
|
||||
const {data: familyMembers} = useGetFamilyMembers(true);
|
||||
const [showQRCodeDialog, setShowQRCodeDialog] = useState("");
|
||||
|
||||
const parents =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.PARENT) ?? [];
|
||||
const children =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.CHILD) ?? [];
|
||||
const caregivers =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.CAREGIVER) ?? [];
|
||||
const familyDevices =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.FAMILY_DEVICE) ?? [];
|
||||
const { mutateAsync: createSubUser, isLoading, isError } = useCreateSubUser();
|
||||
const { data: familyMembers } = useGetFamilyMembers(true);
|
||||
|
||||
const handleCreateSubUser = async () => {
|
||||
if (!firstName || (selectedStatus !== ProfileType.FAMILY_DEVICE && !lastName)) {
|
||||
console.error("First name and last name are required");
|
||||
return;
|
||||
}
|
||||
const parents =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.PARENT) ?? [];
|
||||
const children =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.CHILD) ?? [];
|
||||
const caregivers =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.CAREGIVER) ?? [];
|
||||
const familyDevices =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.FAMILY_DEVICE) ??
|
||||
[];
|
||||
|
||||
if (selectedStatus !== ProfileType.FAMILY_DEVICE && !email) {
|
||||
console.error("Email is required for non-family device users");
|
||||
return;
|
||||
}
|
||||
const handleCreateSubUser = async () => {
|
||||
if (
|
||||
!firstName ||
|
||||
(selectedStatus !== ProfileType.FAMILY_DEVICE && !lastName)
|
||||
) {
|
||||
console.error("First name and last name are required");
|
||||
return;
|
||||
}
|
||||
|
||||
if (email && !email.includes("@")) {
|
||||
console.error("Invalid email address");
|
||||
return;
|
||||
}
|
||||
if (selectedStatus !== ProfileType.FAMILY_DEVICE && !email) {
|
||||
console.error("Email is required for non-family device users");
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await createSubUser({
|
||||
firstName,
|
||||
lastName: selectedStatus === ProfileType.FAMILY_DEVICE ? "" : lastName,
|
||||
email: email || `placeholder_${uuidv4().split("-")[0]}@family.device`,
|
||||
password: uuidv4(),
|
||||
userType: selectedStatus as ProfileType,
|
||||
});
|
||||
console.log(res)
|
||||
if (email && !email.includes("@")) {
|
||||
console.error("Invalid email address");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isError) {
|
||||
setShowNewUserInfoDialog(false);
|
||||
const res = await createSubUser({
|
||||
firstName,
|
||||
lastName: selectedStatus === ProfileType.FAMILY_DEVICE ? "" : lastName,
|
||||
email: email || `placeholder_${uuidv4().split("-")[0]}@family.device`,
|
||||
password: uuidv4(),
|
||||
userType: selectedStatus as ProfileType,
|
||||
});
|
||||
console.log(res);
|
||||
|
||||
if(res?.data?.userId) {
|
||||
setTimeout(() => {
|
||||
setShowQRCodeDialog(res.data.userId)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
if (!isError) {
|
||||
setShowNewUserInfoDialog(false);
|
||||
|
||||
if (res?.data?.userId) {
|
||||
setTimeout(() => {
|
||||
setShowQRCodeDialog(res.data.userId);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
useEffect(() => {
|
||||
setFirstName("");
|
||||
setLastName("");
|
||||
setEmail("");
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<View>
|
||||
<ScrollView style={styles.card}>
|
||||
{!parents.length && !children.length && !caregivers.length && (
|
||||
<Text text70 marginV-10>
|
||||
{isLoading ? "Loading...." : "No user devices added"}
|
||||
</Text>
|
||||
)}
|
||||
return (
|
||||
<View style={{ flex: 1, minHeight: 500 }}>
|
||||
<View>
|
||||
<ScrollView style={styles.card}>
|
||||
{!parents.length && !children.length && !caregivers.length && (
|
||||
<Text text70 marginV-10>
|
||||
{isLoading ? "Loading...." : "No user devices added"}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{(!!parents.length || !!children.length) && (
|
||||
<>
|
||||
<Text style={styles.subTit} marginV-10>
|
||||
Family
|
||||
</Text>
|
||||
{[...parents, ...children]?.map((member, index) => (
|
||||
<Card
|
||||
enableShadow={false}
|
||||
elevation={0}
|
||||
key={`${member.firstName}_${member.lastName}_${index}`}
|
||||
style={styles.familyCard}
|
||||
row
|
||||
centerV
|
||||
padding-10
|
||||
>
|
||||
<Avatar
|
||||
source={{uri: "https://via.placeholder.com/60"}}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>
|
||||
{member.firstName} {member.lastName}
|
||||
</Text>
|
||||
<Text text90 grey40>
|
||||
{member.userType === ProfileType.PARENT
|
||||
? "Admin (You)"
|
||||
: "Child"}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View flex-1/>
|
||||
|
||||
<UserMenu setShowQRCodeDialog={(val) => setShowQRCodeDialog("")} showQRCodeDialog={showQRCodeDialog === member?.uid} userId={member?.uid!}/>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!!caregivers.length && (
|
||||
<>
|
||||
<Text text70 marginB-10 marginT-15>
|
||||
Caregivers
|
||||
</Text>
|
||||
{caregivers?.map((member) => (
|
||||
<Card
|
||||
enableShadow={false}
|
||||
elevation={0}
|
||||
key={`${member.firstName}_${member.lastName}`}
|
||||
style={styles.familyCard}
|
||||
row
|
||||
centerV
|
||||
padding-10
|
||||
>
|
||||
<Avatar
|
||||
source={{uri: "https://via.placeholder.com/60"}}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>
|
||||
{member.firstName} {member.lastName}
|
||||
</Text>
|
||||
<Text text90 grey40>
|
||||
Caregiver
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<UserMenu setShowQRCodeDialog={(val) => setShowQRCodeDialog("")} showQRCodeDialog={showQRCodeDialog === member?.uid} userId={member?.uid!}/>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!!familyDevices.length && (
|
||||
<>
|
||||
<Text text70 marginB-10 marginT-15>
|
||||
Family Devices
|
||||
</Text>
|
||||
{familyDevices?.map((member, index) => (
|
||||
<Card
|
||||
enableShadow={false}
|
||||
elevation={0}
|
||||
key={`${member.firstName}_${member.lastName}_${index}`}
|
||||
style={styles.familyCard}
|
||||
row
|
||||
centerV
|
||||
padding-10
|
||||
>
|
||||
<Avatar
|
||||
source={{uri: "https://via.placeholder.com/60"}}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>
|
||||
{member.firstName}
|
||||
</Text>
|
||||
<Text text90 grey40>
|
||||
Family Device
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<UserMenu setShowQRCodeDialog={(val) => setShowQRCodeDialog("")} showQRCodeDialog={showQRCodeDialog === member?.uid} userId={member?.uid!}/>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<FloatingButton
|
||||
fullWidth
|
||||
hideBackgroundOverlay
|
||||
visible
|
||||
button={{
|
||||
label: "+ Add a user device",
|
||||
onPress: () => setShowAddUserDialog(true),
|
||||
}}
|
||||
/>
|
||||
|
||||
<Dialog
|
||||
visible={showAddUserDialog}
|
||||
onDismiss={() => setShowAddUserDialog(false)}
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
>
|
||||
<Card padding-25 gap-10>
|
||||
<Text>Add a new user device</Text>
|
||||
|
||||
<Button backgroundColor={"#FD1775"}>
|
||||
<Text white>Show a QR Code</Text>
|
||||
</Button>
|
||||
<Button
|
||||
backgroundColor={"#05A8B6"}
|
||||
onPress={() => {
|
||||
setShowAddUserDialog(false);
|
||||
setTimeout(() => {
|
||||
setShowNewUserInfoDialog(true);
|
||||
}, 500);
|
||||
}}
|
||||
>
|
||||
<Text white>Enter email address</Text>
|
||||
</Button>
|
||||
|
||||
<TouchableOpacity onPress={() => setShowAddUserDialog(false)} center>
|
||||
<Text>Return to user settings</Text>
|
||||
</TouchableOpacity>
|
||||
</Card>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
visible={showNewUserInfoDialog}
|
||||
onDismiss={() => setShowNewUserInfoDialog(false)}
|
||||
>
|
||||
<Card padding-25 style={styles.dialogCard}>
|
||||
<View row spread>
|
||||
<Text text60M>New User Information</Text>
|
||||
<TouchableOpacity onPress={() => setShowAddUserDialog(false)}>
|
||||
<Text>X</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View row centerV gap-20 marginV-20>
|
||||
<Avatar
|
||||
imageStyle={{borderRadius: 10}}
|
||||
containerStyle={{borderRadius: 10}}
|
||||
size={60}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => {
|
||||
}}>
|
||||
<Text style={{color: Colors.green10}}>
|
||||
Upload User Profile Photo
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Text style={styles.label}>Member Status</Text>
|
||||
<Picker
|
||||
editable={!isLoading}
|
||||
value={selectedStatus}
|
||||
//@ts-ignore
|
||||
onChange={(item) => setSelectedStatus(item)}
|
||||
style={styles.picker}
|
||||
showSearch
|
||||
floatingPlaceholder
|
||||
>
|
||||
<Picker.Item label="Child" value={ProfileType.CHILD}/>
|
||||
<Picker.Item label="Parent" value={ProfileType.PARENT}/>
|
||||
<Picker.Item label="Caregiver" value={ProfileType.CAREGIVER}/>
|
||||
<Picker.Item label="Family Device" value={ProfileType.FAMILY_DEVICE}/>
|
||||
</Picker>
|
||||
|
||||
<Text style={styles.label}>
|
||||
{selectedStatus === ProfileType.FAMILY_DEVICE ? "Device Name" : "First Name"}
|
||||
{(!!parents.length || !!children.length) && (
|
||||
<>
|
||||
<Text style={styles.subTit} marginV-10>
|
||||
Family
|
||||
</Text>
|
||||
{[...parents, ...children]?.map((member, index) => (
|
||||
<Card
|
||||
enableShadow={false}
|
||||
elevation={0}
|
||||
key={`${member.firstName}_${member.lastName}_${index}`}
|
||||
style={styles.familyCard}
|
||||
row
|
||||
centerV
|
||||
padding-10
|
||||
>
|
||||
<Avatar
|
||||
source={{ uri: "https://via.placeholder.com/60" }}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>
|
||||
{member.firstName} {member.lastName}
|
||||
</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder={selectedStatus === ProfileType.FAMILY_DEVICE ? "Device name" : "First name"}
|
||||
value={firstName}
|
||||
onChangeText={setFirstName}
|
||||
style={styles.inputField}
|
||||
/>
|
||||
<Text text90 grey40>
|
||||
{member.userType === ProfileType.PARENT
|
||||
? "Admin (You)"
|
||||
: "Child"}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{selectedStatus !== ProfileType.FAMILY_DEVICE && (
|
||||
<>
|
||||
<Text style={styles.label}>Last Name</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder="Last name"
|
||||
value={lastName}
|
||||
onChangeText={setLastName}
|
||||
style={styles.inputField}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<View flex-1 />
|
||||
|
||||
{selectedStatus !== ProfileType.FAMILY_DEVICE && (
|
||||
<>
|
||||
<Text style={styles.label}>Email Address (Optional)</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
style={styles.inputField}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
disabled={!firstName || (selectedStatus !== ProfileType.FAMILY_DEVICE && !lastName) || isLoading}
|
||||
label={isLoading ? "Adding..." : "Add group member"}
|
||||
backgroundColor="#FD1775"
|
||||
style={{marginTop: 20}}
|
||||
onPress={handleCreateSubUser}
|
||||
/>
|
||||
<UserMenu
|
||||
setShowQRCodeDialog={(val) => setShowQRCodeDialog("")}
|
||||
showQRCodeDialog={showQRCodeDialog === member?.uid}
|
||||
userId={member?.uid!}
|
||||
/>
|
||||
</Card>
|
||||
</Dialog>
|
||||
</View>
|
||||
);
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!!caregivers.length && (
|
||||
<>
|
||||
<Text text70 marginB-10 marginT-15>
|
||||
Caregivers
|
||||
</Text>
|
||||
{caregivers?.map((member) => (
|
||||
<Card
|
||||
enableShadow={false}
|
||||
elevation={0}
|
||||
key={`${member.firstName}_${member.lastName}`}
|
||||
style={styles.familyCard}
|
||||
row
|
||||
centerV
|
||||
padding-10
|
||||
>
|
||||
<Avatar
|
||||
source={{ uri: "https://via.placeholder.com/60" }}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>
|
||||
{member.firstName} {member.lastName}
|
||||
</Text>
|
||||
<Text text90 grey40>
|
||||
Caregiver
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<UserMenu
|
||||
setShowQRCodeDialog={(val) => setShowQRCodeDialog("")}
|
||||
showQRCodeDialog={showQRCodeDialog === member?.uid}
|
||||
userId={member?.uid!}
|
||||
/>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!!familyDevices.length && (
|
||||
<>
|
||||
<Text text70 marginB-10 marginT-15>
|
||||
Family Devices
|
||||
</Text>
|
||||
{familyDevices?.map((member, index) => (
|
||||
<Card
|
||||
enableShadow={false}
|
||||
elevation={0}
|
||||
key={`${member.firstName}_${member.lastName}_${index}`}
|
||||
style={styles.familyCard}
|
||||
row
|
||||
centerV
|
||||
padding-10
|
||||
>
|
||||
<Avatar
|
||||
source={{ uri: "https://via.placeholder.com/60" }}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>{member.firstName}</Text>
|
||||
<Text text90 grey40>
|
||||
Family Device
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<UserMenu
|
||||
setShowQRCodeDialog={(val) => setShowQRCodeDialog("")}
|
||||
showQRCodeDialog={showQRCodeDialog === member?.uid}
|
||||
userId={member?.uid!}
|
||||
/>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<FloatingButton
|
||||
fullWidth
|
||||
hideBackgroundOverlay
|
||||
visible
|
||||
button={{
|
||||
label: "+ Add a user device",
|
||||
onPress: () => setShowAddUserDialog(true),
|
||||
style: styles.bottomButton,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Dialog
|
||||
visible={showAddUserDialog}
|
||||
onDismiss={() => setShowAddUserDialog(false)}
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
>
|
||||
<Card
|
||||
paddingH-25
|
||||
paddingT-40
|
||||
paddingB-20
|
||||
gap-10
|
||||
centerH
|
||||
borderRadius={20}
|
||||
>
|
||||
<Text style={styles.dialogTitle} marginB-35>
|
||||
Add a new user device
|
||||
</Text>
|
||||
|
||||
<Button backgroundColor={"#FD1775"} style={styles.dialogBtn}>
|
||||
<QRIcon />
|
||||
<Text style={styles.dialogBtnLbl} marginL-7>
|
||||
Show a QR Code
|
||||
</Text>
|
||||
</Button>
|
||||
<Button
|
||||
style={styles.dialogBtn}
|
||||
backgroundColor={"#05A8B6"}
|
||||
onPress={() => {
|
||||
setShowAddUserDialog(false);
|
||||
setTimeout(() => {
|
||||
setShowNewUserInfoDialog(true);
|
||||
}, 500);
|
||||
}}
|
||||
>
|
||||
<EmailIcon />
|
||||
<Text style={styles.dialogBtnLbl} marginL-7>
|
||||
Enter email address
|
||||
</Text>
|
||||
</Button>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowAddUserDialog(false)}
|
||||
center
|
||||
marginT-30
|
||||
>
|
||||
<Text style={styles.dialogBackBtn}>Return to user settings</Text>
|
||||
</TouchableOpacity>
|
||||
</Card>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
visible={showNewUserInfoDialog}
|
||||
onDismiss={() => setShowNewUserInfoDialog(false)}
|
||||
>
|
||||
<Card padding-25 style={styles.dialogCard}>
|
||||
<View row spread>
|
||||
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 16 }}>
|
||||
New User Information
|
||||
</Text>
|
||||
<TouchableOpacity onPress={() => {setShowNewUserInfoDialog(false)}}>
|
||||
<CircledXIcon />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.divider} spread />
|
||||
|
||||
<View row centerV gap-20 marginV-20>
|
||||
<View
|
||||
height={65.54}
|
||||
width={65.54}
|
||||
children={
|
||||
<ProfileIcon color={"#d6d6d6"} width={37} height={37} />
|
||||
}
|
||||
backgroundColor={Colors.grey60}
|
||||
style={{ borderRadius: 25 }}
|
||||
center
|
||||
/>
|
||||
<TouchableOpacity onPress={() => {}}>
|
||||
<Text color="#50be0c" style={styles.jakarta13} marginL-15>
|
||||
Upload User Profile Photo
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Text style={styles.jakarta12}>Member Status</Text>
|
||||
<Picker
|
||||
editable={!isLoading}
|
||||
value={selectedStatus}
|
||||
//@ts-ignore
|
||||
onChange={(item) => setSelectedStatus(item)}
|
||||
style={styles.picker}
|
||||
showSearch
|
||||
floatingPlaceholder
|
||||
>
|
||||
<Picker.Item label="Child" value={ProfileType.CHILD} />
|
||||
<Picker.Item label="Parent" value={ProfileType.PARENT} />
|
||||
<Picker.Item label="Caregiver" value={ProfileType.CAREGIVER} />
|
||||
<Picker.Item
|
||||
label="Family Device"
|
||||
value={ProfileType.FAMILY_DEVICE}
|
||||
/>
|
||||
</Picker>
|
||||
|
||||
<Text style={styles.jakarta12}>
|
||||
{selectedStatus === ProfileType.FAMILY_DEVICE
|
||||
? "Device Name"
|
||||
: "First Name"}
|
||||
</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder={
|
||||
selectedStatus === ProfileType.FAMILY_DEVICE
|
||||
? "Device name"
|
||||
: "First name"
|
||||
}
|
||||
value={firstName}
|
||||
onChangeText={setFirstName}
|
||||
style={styles.inputField}
|
||||
onSubmitEditing={() => {lNameRef.current?.focus()}}
|
||||
blurOnSubmit={false}
|
||||
/>
|
||||
|
||||
{selectedStatus !== ProfileType.FAMILY_DEVICE && (
|
||||
<>
|
||||
<Text style={styles.jakarta12}>Last Name</Text>
|
||||
<TextField
|
||||
ref={lNameRef}
|
||||
editable={!isLoading}
|
||||
placeholder="Last name"
|
||||
value={lastName}
|
||||
onChangeText={setLastName}
|
||||
style={styles.inputField}
|
||||
onSubmitEditing={() => {emailRef.current?.focus()}}
|
||||
blurOnSubmit={false}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedStatus !== ProfileType.FAMILY_DEVICE && (
|
||||
<>
|
||||
<Text style={styles.jakarta12}>Email Address (Optional)</Text>
|
||||
<TextField
|
||||
ref={emailRef}
|
||||
editable={!isLoading}
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
style={styles.inputField}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
disabled={
|
||||
!firstName ||
|
||||
(selectedStatus !== ProfileType.FAMILY_DEVICE && !lastName) ||
|
||||
isLoading
|
||||
}
|
||||
label={isLoading ? "Adding..." : "Add group member"}
|
||||
backgroundColor="#fd1775"
|
||||
labelStyle={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 15,
|
||||
marginLeft: 7,
|
||||
}}
|
||||
style={{ marginTop: 20, backgroundColor: "#fd1775" }}
|
||||
iconSource={() => <NavToDosIcon width={22} color={"white"} />}
|
||||
onPress={handleCreateSubUser}
|
||||
/>
|
||||
</Card>
|
||||
</Dialog>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginVertical: 15,
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 15,
|
||||
padding: 20,
|
||||
},
|
||||
familyCard: {
|
||||
marginBottom: 10,
|
||||
borderRadius: 10,
|
||||
backgroundColor: Colors.white,
|
||||
width: "100%",
|
||||
},
|
||||
inputField: {
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
height: 40,
|
||||
},
|
||||
picker: {
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
marginTop: -20,
|
||||
height: 40,
|
||||
},
|
||||
label: {
|
||||
marginBottom: 5,
|
||||
fontSize: 12,
|
||||
color: Colors.grey40,
|
||||
},
|
||||
dialogCard: {
|
||||
borderRadius: 10,
|
||||
gap: 10,
|
||||
},
|
||||
subTit: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 15,
|
||||
},
|
||||
dialogBtn: {
|
||||
height: 47,
|
||||
width: 279,
|
||||
},
|
||||
dialogTitle: { fontFamily: "Manrope_600SemiBold", fontSize: 22 },
|
||||
dialogBackBtn: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 15,
|
||||
color: "#a7a7a7",
|
||||
},
|
||||
card: {
|
||||
marginVertical: 15,
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 15,
|
||||
padding: 20,
|
||||
},
|
||||
bottomButton: {
|
||||
position: "absolute",
|
||||
bottom: 80,
|
||||
width: "100%",
|
||||
},
|
||||
familyCard: {
|
||||
marginBottom: 10,
|
||||
borderRadius: 10,
|
||||
backgroundColor: Colors.white,
|
||||
width: "100%",
|
||||
},
|
||||
inputField: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 13,
|
||||
color: "#565656",
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
height: 40,
|
||||
},
|
||||
picker: {
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
marginTop: -20,
|
||||
height: 40,
|
||||
},
|
||||
label: {
|
||||
marginBottom: 5,
|
||||
fontSize: 12,
|
||||
color: Colors.grey40,
|
||||
},
|
||||
dialogCard: {
|
||||
borderRadius: 10,
|
||||
gap: 10,
|
||||
},
|
||||
subTit: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 15,
|
||||
},
|
||||
dialogBtnLbl: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 15,
|
||||
color: "white",
|
||||
},
|
||||
divider: { height: 0.7, backgroundColor: "#e6e6e6", width: "100%" },
|
||||
jakarta12: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 12,
|
||||
color: "#a1a1a1",
|
||||
},
|
||||
jakarta13: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 13,
|
||||
},
|
||||
});
|
||||
|
||||
export default MyGroup;
|
||||
|
||||
Reference in New Issue
Block a user