delete family popups and birthday

components/pages/settings/user_components/DeleteProfileDialogs.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Dialog, Button, Text, View } from "react-native-ui-lib";
+import React, { useEffect, useState } from "react";
+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
-          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>
+        {isDeleteFamily ? (
+          <Text
+            style={{
+              fontSize: 18,
+              fontFamily: "PlusJakartaSans_700Bold",
+              color: "#979797",
+              marginBottom: 20,
+            }}
+            center
+          >
+            This action will permanently delete all your family profiles and
+            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}>
-            We're sorry to see you go, are you really sure you want to delete
-            everything?
-          </Text>
+          {isDeleteFamily ? (
+            <View>
+              <Text style={styles.title}>Deleting family</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;