delete family popups and birthday

components/pages/calendar/DetailedCalendar.tsx

@@ -88,11 +88,11 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = React.memo((
     const renderEvent = useCallback((event: any) => {
         const attendees = getAttendees(event);
         return (
-            <MemoizedEventCell
+                <MemoizedEventCell
-                event={event}
+                    event={event}
-                onPress={handlePressEvent}
+                    onPress={handlePressEvent}
-                attendees={attendees}
+                    attendees={attendees}
-            />
+                />
         );
     }, [familyMembers, handlePressEvent, getAttendees]);
 

components/pages/main/SignUpPage.tsx

@@ -4,6 +4,7 @@ import {
   ButtonSize,
   Checkbox,
   Colors,
+  DateTimePicker,
   KeyboardAwareScrollView,
   LoaderScreen,
   Text,
@@ -66,10 +67,25 @@ const SignUpPage = () => {
     return "20%"; // non-tablet case, regardless of orientation
   };
 
+  const getMaxDate = () => {
+    const date = new Date();
+    date.setFullYear(date.getFullYear() - 3); // Minimum age: 3 years
+    return date;
+  };
+
+  const getMinDate = () => {
+    const date = new Date();
+    date.setFullYear(date.getFullYear() - 18); // Maximum age: 18 years
+    return date;
+  };
+
+
+  const [birthday, setBirthday] = useState<Date>(getMinDate());
+
   const router = useRouter();
 
   const handleSignUp = async () => {
-    await signUp({ email, password, firstName, lastName });
+    await signUp({ email, password, firstName, lastName, birthday });
     
     if (profileData?.userType === ProfileType.FAMILY_DEVICE) {
         router.replace("/(auth)/calendar");
@@ -110,7 +126,7 @@ const SignUpPage = () => {
 
           <KeyboardAvoidingView style={{ width: "100%" }}>
             <TextField
-              marginT-30
+              marginT-17
               autoFocus
               placeholder="First name"
               value={firstName}
@@ -160,6 +176,16 @@ const SignUpPage = () => {
               }}
             />
 
+            <DateTimePicker 
+            placeholder="Birthday" 
+            value={birthday}
+            mode="date"
+            minimumDate={getMinDate()}
+            maximumDate={getMaxDate()} 
+            onChange={(value) => setBirthday(value)} 
+            style={styles.textfield}
+            />
+
             <View
               centerV
               style={[styles.textfield, { padding: 0, paddingHorizontal: 30 }]}
@@ -241,7 +267,7 @@ const SignUpPage = () => {
           {isTablet ? (
             <View height={50} />
           ) : (
-            <View flexG style={{ minHeight: 50 }} />
+            <View flexG style={{ minHeight: 65 }} />
           )}
 
           <View>

components/pages/settings/user_components/DeleteProfileDialogs.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { Dialog, Button, Text, View } from "react-native-ui-lib";
+import { Dialog, Button, Text, View, TextField } from "react-native-ui-lib";
 import { StyleSheet } from "react-native";
 import { Feather } from "@expo/vector-icons";
 
@@ -8,6 +8,8 @@ interface ConfirmationDialogProps {
   onDismiss: () => void;
   onFirstYes: () => void;
   onConfirm: () => void;
+  isDeleteFamily?: boolean;
+  householdName: string;
 }
 
 const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
@@ -15,8 +17,21 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
   onDismiss,
   onFirstYes,
   onConfirm,
+  isDeleteFamily,
+  householdName,
 }) => {
   const [confirmationDialog, setConfirmationDialog] = useState<boolean>(false);
+  const [input, setInput] = useState<string>("");
+  const [isCorrect, setIsCorrect] = useState<boolean>(true);
+
+  useEffect(() => {
+    setInput("");
+  }, [onDismiss, onConfirm])
+  
+  useEffect(() => {
+    setIsCorrect(input === householdName);
+  }, [input])
+  
 
   return (
     <>
@@ -31,18 +46,33 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
         <Text center style={styles.title}>
           Are you sure?
         </Text>
-        <Text
+        {isDeleteFamily ? (
-          style={{
+          <Text
-            fontSize: 18,
+            style={{
-            fontFamily: "PlusJakartaSans_700Bold",
+              fontSize: 18,
-            color: "#979797",
+              fontFamily: "PlusJakartaSans_700Bold",
-            marginBottom: 20,
+              color: "#979797",
-          }}
+              marginBottom: 20,
-          center
+            }}
-        >
+            center
-          This action will permanently delete all your data, you won't be able
+          >
-          to recover it!
+            This action will permanently delete all your family profiles and
-        </Text>
+            data, you won't be able to recover it!
+          </Text>
+        ) : (
+          <Text
+            style={{
+              fontSize: 18,
+              fontFamily: "PlusJakartaSans_700Bold",
+              color: "#979797",
+              marginBottom: 20,
+            }}
+            center
+          >
+            This action will permanently delete all your data, you won't be able
+            to recover it!
+          </Text>
+        )}
         <View centerV></View>
         <View row right gap-8>
           <Button
@@ -69,10 +99,30 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
         containerStyle={styles.dialog}
       >
         <View center paddingH-10 paddingT-15 paddingB-5>
-          <Text style={styles.title}>
+          {isDeleteFamily ? (
-            We're sorry to see you go, are you really sure you want to delete
+            <View>
-            everything?
+              <Text style={styles.title}>Deleting family</Text>
-          </Text>
+              <Text style={styles.text}>
+                Deleting the family will remove all profiles and data. This
+                cannot be undone.
+              </Text>
+              <Text style={styles.subText}>
+                Type the name of your household to confirm.
+              </Text>
+              <TextField
+                value={input}
+                onChangeText={(value) => {
+                  setInput(value);
+                }}
+                style={[styles.txtBox, { marginTop: 5 }]}
+              />
+            </View>
+          ) : (
+            <Text style={styles.title}>
+              We're sorry to see you go, are you really sure you want to delete
+              everything?
+            </Text>
+          )}
           <View row right gap-8 marginT-15>
             <Button
               label="Cancel"
@@ -85,11 +135,14 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
             />
             <Button
               label="Yes"
+              disabled={!isDeleteFamily ? false : !isCorrect}
               onPress={() => {
-                onConfirm();
+                if(input === householdName)
+                  onConfirm();
+
                 setConfirmationDialog(false);
               }}
-              style={styles.confirmBtn}
+              style={!isDeleteFamily ? styles.confirmBtn : (isCorrect ? styles.confirmBtn : styles.confirmDisabled)}
               labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
             />
           </View>
@@ -106,6 +159,9 @@ const styles = StyleSheet.create({
   cancelBtn: {
     backgroundColor: "white",
   },
+  confirmDisabled: {
+    backgroundColor: "#999999"
+  },
   dialog: {
     backgroundColor: "white",
     paddingHorizontal: 25,
@@ -123,6 +179,23 @@ const styles = StyleSheet.create({
     fontSize: 16,
     marginBottom: 0,
   },
+  subText: {
+    fontFamily: "PlusJakartaSans_400Regular",
+    fontSize: 12,
+    marginBottom: 0,
+    color: "#999999",
+    marginTop: 15,
+  },
+  txtBox: {
+    backgroundColor: "#fafafa",
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: "#cecece",
+    padding: 15,
+    height: 45,
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13,
+  },
 });
 
 export default DeleteProfileDialogs;

components/pages/settings/user_settings_views/MyGroup.tsx

@@ -549,7 +549,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
                     returnKeyType="next"
                   />
                   <Text style={styles.jakarta12}>Birthday</Text>
-                  <DateTimePicker
+                  {/*<DateTimePicker
                     editable={!isLoading}
                     mode="date"
                     minimumDate={getMinDate()}
@@ -565,7 +565,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
                         }
                       }
                     }}
-                  />
+                  />*/}
                 </>
               )}
 

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -66,10 +66,13 @@ const MyProfile = () => {
 
   const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
 
+  const [isDeleteFamily, setIsDeleteFamily] = useState<boolean>(false);
+
   const handleHideDeleteDialog = () => {
     setShowDeleteDialog(false);
   };
-  const handleShowDeleteDialog = () => {
+  const handleShowDeleteDialog = (isFamily: boolean) => {
+    setIsDeleteFamily(isFamily);
     setShowDeleteDialog(true);
   };
 
@@ -102,10 +105,6 @@ const MyProfile = () => {
     debouncedUserDataUpdate();
   }, [timeZone, lastName, firstName]);
 
-  useEffect(() => {
-    handleUpdateHouseholdName();
-  }, [householdName]);
-
   useEffect(() => {
     if (familyMembers) {
       const colors = familyMembers
@@ -261,6 +260,7 @@ const MyProfile = () => {
                 onChangeText={async (value) => {
                   setHouseholdName(value);
                 }}
+                onEndEditing={() => handleUpdateHouseholdName()}
               />
             </>
           )}
@@ -531,7 +531,7 @@ const MyProfile = () => {
         </View>
       </View>
       <TouchableOpacity
-        onPress={handleShowDeleteDialog}
+        onPress={() => handleShowDeleteDialog(false)}
         style={{ marginTop: 10, alignSelf: "center" }}
       >
         <Text
@@ -544,13 +544,39 @@ const MyProfile = () => {
           Delete Profile
         </Text>
       </TouchableOpacity>
+      {profileData?.userType === ProfileType.PARENT && (
+        <TouchableOpacity
+          onPress={() => handleShowDeleteDialog(true)}
+          style={{ marginTop: 20, alignSelf: "center" }}
+        >
+          <Text
+            style={{
+              color: "#ff1637",
+              fontFamily: "PlusJakartaSans_500Medium",
+              fontSize: 15,
+            }}
+          >
+            Delete Family
+          </Text>
+        </TouchableOpacity>
+      )}
       <DeleteProfileDialogs
         onFirstYes={() => {
           setShowDeleteDialog(false);
         }}
         visible={showDeleteDialog}
         onDismiss={handleHideDeleteDialog}
-        onConfirm={() => deleteAsync({})}
+        onConfirm={() => {
+          if(isDeleteFamily)
+            console.log('put delete family func here');
+          else
+            {
+              //deletes profile
+              deleteAsync({});
+            }
+        }}
+        isDeleteFamily={isDeleteFamily}
+        householdName={householdName}
       />
     </ScrollView>
   );

components/shared/AssigneesDisplay.tsx

@@ -60,7 +60,6 @@ const styles = StyleSheet.create({
         overflow: 'hidden',
     },
     initialsCircle: {
-        backgroundColor: '#ccc',
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: 100, // Circular shape

hooks/firebase/useSignUp.ts

@@ -16,11 +16,13 @@ export const useSignUp = () => {
                                password,
                                firstName,
                                lastName,
+                               birthday
                            }: {
             email: string;
             password: string;
             firstName: string;
             lastName: string;
+            birthday: Date;
         }) => {
             setRedirectOverride(true)
 
@@ -35,6 +37,7 @@ export const useSignUp = () => {
                                 lastName: lastName,
                                 familyId: uuidv4(),
                                 timeZone: Localization.getCalendars()[0].timeZone,
+                                birthday: birthday
                             },
                             customUser: res.user,
                         });

hooks/firebase/useUpdateHouseholdName.ts

@@ -13,7 +13,6 @@ export const useUpdateHouseholdName = () => {
       familyId: string;
       name: string;
     }) => {
-      console.log("Mutation function called with data:", { familyId, name });
 
       try {
         // Reference to the Households collection
@@ -25,11 +24,9 @@ export const useUpdateHouseholdName = () => {
         if (!snapshot.empty) {
           // If a household with the familyId exists, update the name
           const docId = snapshot.docs[0].id;
-          console.log(`Household found with ID ${docId}, updating name...`);
 
           await householdRef.doc(docId).update({ name });
 
-          console.log("Household name updated successfully.");
         } else {
           // If no household exists, create a new one with familyId and name
           console.log("No household found, creating a new one...");