changed age picker to date time picker modal in first screen of nanny…

… registration
RitaSensei · May 1, 2024 · 09c2558 · 09c2558
1 parent 6049ee4
commit 09c2558
Show file tree

Hide file tree

Showing 6 changed files with 500 additions and 66 deletions.
diff --git a/careconnect/package-lock.json b/careconnect/package-lock.json
diff --git a/careconnect/package.json b/careconnect/package.json
@@ -13,6 +13,7 @@
     "@babel/plugin-transform-logical-assignment-operators": "^7.24.1",
     "@expo/vector-icons": "^14.0.0",
     "@expo/webpack-config": "^19.0.0",
+    "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-picker/picker": "^2.6.1",
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.17",
@@ -21,6 +22,7 @@
     "expo": "^50.0.17",
     "expo-constants": "~15.4.6",
     "expo-font": "~11.10.3",
+    "expo-image-picker": "~14.7.1",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.9",
     "expo-splash-screen": "~0.26.5",
@@ -34,6 +36,7 @@
     "react-native-animated-nav-tab-bar": "^3.1.10",
     "react-native-credit-card-input": "^0.4.1",
     "react-native-gesture-handler": "^2.14.0",
+    "react-native-modal-datetime-picker": "^17.1.0",
     "react-native-paper": "^5.12.3",
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
@@ -42,8 +45,7 @@
     "react-native-ui-lib": "^7.20.3",
     "react-native-vector-icons": "^10.0.3",
     "react-native-web": "~0.19.6",
-    "react-navigation-header-buttons": "^11.2.1",
-    "expo-image-picker": "~14.7.1"
+    "react-navigation-header-buttons": "^11.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/careconnect/screens/creating account/nanny/NewAccountNanny1.js b/careconnect/screens/creating account/nanny/NewAccountNanny1.js
@@ -1,23 +1,19 @@
 import React, { useState } from "react";
-import { View, Text, TouchableOpacity, Image, ScrollView, SafeAreaView } from "react-native";
+import { View, Text, Image, ScrollView, SafeAreaView } from "react-native";
 import { TextInput, Button } from "react-native-paper";
 import * as ImagePicker from "expo-image-picker";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { Picker } from "react-native-ui-lib";
-import { Entypo } from "@expo/vector-icons";
+import { Entypo, Ionicons } from "@expo/vector-icons";
 
 import styles from "../styles";
-import { allLocations, allNationalities, allAges } from "../../../utils/allOptions";
+import { allLocations, allNationalities } from "../../../utils/allOptions";
 
 const NewAccountNanny1Screen = ({ navigation }) => {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
-  const [age, setAge] = useState({
-    itemsCount: 1,
-    age: undefined,
-    option: undefined,
-    nativePickerValue: "",
-    pickerOpen: false,
-  });
+  const [date, setDate] = useState(new Date());
+  const [datePickerVisible, setDatePickerVisible] = useState(false);
   const [mobileNumber, setMobileNumber] = useState("");
   const [mobileNumberError, setMobileNumberError] = useState(false);
   const [profilePhoto, setProfilePhoto] = useState(null);
@@ -31,6 +27,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
   const [secureTextEntry, setSecureTextEntry] = useState(true);
   const [secureTextEntryBeta, setSecureTextEntryBeta] = useState(true);
   const [emptyField, setEmptyField] = useState(false);
+  const [validDateField, setValidDateField] = useState(false);
   const [currentCity, setCurrentCity] = useState({
     itemsCount: 1,
     location: undefined,
@@ -46,6 +43,26 @@ const NewAccountNanny1Screen = ({ navigation }) => {
     pickerOpen: false,
   });
 
+  const showDatePicker = () => {
+    setDatePickerVisible(true);
+  };
+
+  const hideDatePicker = () => {
+    setDatePickerVisible(false);
+  };
+
+  const handleConfirmDate = date => {
+    if (date > new Date(2003, 11, 31) || date < new Date(1974, 0, 1)) {
+      setEmptyField(true);
+      setValidDateField(false);
+    } else {
+      setEmptyField(false);
+      setValidDateField(true);
+    }
+    setDate(date);
+    hideDatePicker();
+  };
+
   const handleMobileNumberChange = number => {
     const mobileNumberRegex = /^[0-9]{10}$/;
     if (number === "") {
@@ -113,7 +130,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
     if (
       firstName.trim() !== "" &&
       lastName.trim() !== "" &&
-      age.nativePickerValue &&
+      date !== new Date() &&
       mobileNumber.trim() !== "" &&
       currentCity.nativePickerValue &&
       nationality.nativePickerValue &&
@@ -148,6 +165,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
           <TextInput
             label="First Name"
             placeholder="Enter your first name"
+            contentStyle={{ fontFamily: "FiraSansRegular", fontSize: 16 }}
             inputMode="text"
             mode="outlined"
             outlineColor="#BDBDBD"
@@ -174,6 +192,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
             outlineColor="#BDBDBD"
             activeOutlineColor="#FA89B8"
             placeholderTextColor="#BDBDBD"
+            contentStyle={{ fontFamily: "FiraSansRegular", fontSize: 16 }}
             inputMode="text"
             mode="outlined"
             value={lastName}
@@ -191,49 +210,31 @@ const NewAccountNanny1Screen = ({ navigation }) => {
           {emptyField && lastName.trim() === "" && (
             <Text style={styles.errorText}>Please enter your last name</Text>
           )}
-          <Picker
-            placeholder="Age"
-            style={[
-              styles.picker,
-              emptyField && !age.nativePickerValue && styles.errorPicker, // Apply error style if the field is empty
-            ]}
-            useWheelPicker
-            enableModalBlur={false}
-            value={age.nativePickerValue}
-            onChange={nativePickerValue =>
-              setAge(prevState => ({ ...prevState, nativePickerValue }))
-            }
-            trailingAccessory={
-              <Entypo
-                name={age.pickerOpen ? "chevron-up" : "chevron-down"}
-                size={30}
-                color="black"
-                style={{ position: "absolute", marginStart: 290, top: 10 }}
-              />
-            }
-            onPress={() =>
-              setAge(prevState => ({ ...prevState, pickerOpen: !prevState.pickerOpen }))
-            }
-            topBarProps={{
-              doneLabel: "Done",
-              cancelLabel: "Cancel",
-            }}
-            fieldType="filter"
+          <Button
+            mode="contained-tonal"
+            style={styles.imageUploadButton}
+            buttonColor="#fff"
+            textColor="#000"
+            title="Date of Birth"
+            contentStyle={{ flexDirection: "row-reverse", justifyContent: "space-between" }}
+            onPress={showDatePicker}
+            icon={() => <Ionicons name="calendar-number" size={24} color="#000" />}
+            error={emptyField && !validDateField}
           >
-            {allAges.map(option => (
-              <Picker.Item
-                key={option.value}
-                value={option.value}
-                label={option.label}
-                disabled={option.disabled}
-                style={{
-                  color: option.value === age.nativePickerValue ? "#ff0000" : "#000000",
-                }}
-              />
-            ))}
-          </Picker>
-          {emptyField && !age.nativePickerValue && (
-            <Text style={styles.errorText}>Please select your age</Text>
+            <Text style={styles.imageUploadButtonText}>{date.toLocaleDateString()}</Text>
+          </Button>
+          <DateTimePickerModal
+            date={date}
+            isVisible={datePickerVisible}
+            maximumDate={new Date(2003, 11, 31)}
+            minimumDate={new Date(1974, 0, 1)}
+            mode="date"
+            onConfirm={handleConfirmDate}
+            onCancel={hideDatePicker}
+            textColor="#000"
+          />
+          {emptyField && !validDateField && (
+            <Text style={styles.errorText}>Please select a valid date of birth</Text>
           )}
           <Picker
             placeholder="Nationality"
@@ -285,6 +286,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
             outlineColor="#BDBDBD"
             activeOutlineColor="#FA89B8"
             placeholderTextColor="#BDBDBD"
+            contentStyle={{ fontFamily: "FiraSansRegular", fontSize: 16 }}
             inputMode="tel"
             mode="outlined"
             value={mobileNumber}
@@ -371,6 +373,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
               outlineColor="#BDBDBD"
               activeOutlineColor="#FA89B8"
               placeholderTextColor="#BDBDBD"
+              contentStyle={{ fontFamily: "FiraSansRegular", fontSize: 16 }}
               inputMode="email"
               mode="outlined"
               value={email}
@@ -393,6 +396,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
               outlineColor="#BDBDBD"
               activeOutlineColor="#FA89B8"
               placeholderTextColor="#BDBDBD"
+              contentStyle={{ fontFamily: "FiraSansRegular", fontSize: 16 }}
               mode="outlined"
               left={<TextInput.Icon icon="lock" color="#8a8686" />}
               right={
@@ -422,6 +426,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
             secureTextEntry={secureTextEntryBeta}
             label="Confirm Password"
             placeholder="Enter your password to confirm"
+            contentStyle={{ fontFamily: "FiraSansRegular", fontSize: 16 }}
             outlineColor="#BDBDBD"
             activeOutlineColor="#FA89B8"
             placeholderTextColor="#BDBDBD"