Replace age field with DOB while Updating User

cypress/e2e/users_spec/user_creation.cy.ts

@@ -37,7 +37,7 @@ describe("User Creation", () => {
     "Please select the User Type",
     "Please enter valid phone number",
     "Please enter the username",
-    "Please enter date in YYYY/MM/DD format",
+    "Please enter date in DD/MM/YYYY format",
     "Please enter the password",
     "Confirm password is required",
     "First Name is required",
@@ -52,10 +52,7 @@ describe("User Creation", () => {
   const EXPECTED_PROFILE_ERROR_MESSAGES = [
     "Field is required",
     "Field is required",
-    "This field is required",
     "Please enter valid phone number",
-    "This field is required",
-    "This field is required",
   ];
 
   before(() => {
@@ -81,7 +78,6 @@ describe("User Creation", () => {
       "District Editted"
     );
     userCreationPage.typeIntoElementByIdPostClear("lastName", "Cypress");
-    userCreationPage.typeIntoElementByIdPostClear("age", "22");
     userCreationPage.selectDropdownOption("gender", "Male");
     userCreationPage.typeIntoElementByIdPostClear(
       "phoneNumber",
@@ -93,6 +89,10 @@ describe("User Creation", () => {
     );
     userCreationPage.typeIntoElementByIdPostClear("email", "[email protected]");
     userCreationPage.typeIntoElementByIdPostClear("weekly_working_hours", "14");
+    userCreationPage.typeIntoElementByIdPostClearDob(
+      "date_of_birth",
+      "01011998"
+    );
     userCreationPage.clickElementById("submit");
     userCreationPage.verifyElementContainsText(
       "contactno-profile-details",
@@ -110,7 +110,10 @@ describe("User Creation", () => {
       "lastname-profile-details",
       "Cypress"
     );
-    userCreationPage.verifyElementContainsText("age-profile-details", "22");
+    userCreationPage.verifyElementContainsText(
+      "date_of_birth-profile-details",
+      "01/01/1998"
+    );
     userCreationPage.verifyElementContainsText(
       "emailid-profile-details",
       "[email protected]"
@@ -130,7 +133,6 @@ describe("User Creation", () => {
     userCreationPage.clickElementById("edit-cancel-profile-button");
     userCreationPage.clearIntoElementById("firstName");
     userCreationPage.clearIntoElementById("lastName");
-    userCreationPage.clearIntoElementById("age");
     userCreationPage.clearIntoElementById("phoneNumber");
     userCreationPage.clearIntoElementById("altPhoneNumber");
     userCreationPage.clearIntoElementById("weekly_working_hours");

cypress/e2e/users_spec/user_profile.cy.ts

@@ -8,7 +8,7 @@ describe("Manage User Profile", () => {
   const userProfilePage = new UserProfilePage();
   const manageUserPage = new ManageUserPage();
 
-  const age = "30";
+  const date_of_birth = "01011999";
   const gender = "Male";
   const email = "[email protected]";
   const phone = "+918899887788";
@@ -32,10 +32,10 @@ describe("Manage User Profile", () => {
     cy.awaitUrl("/user/profile");
   });
 
-  it("Set Age, Gender, Email, Phone and Working Hours for a user and verify its reflection in user profile", () => {
+  it("Set Dob, Gender, Email, Phone and Working Hours for a user and verify its reflection in user profile", () => {
     userProfilePage.clickEditProfileButton();
 
-    userProfilePage.typeAge(age);
+    userProfilePage.typedate_of_birth(date_of_birth);
     userProfilePage.selectGender(gender);
     userProfilePage.typeEmail(email);
     userProfilePage.typePhone(phone);
@@ -49,7 +49,7 @@ describe("Manage User Profile", () => {
 
     cy.verifyNotification("Details updated successfully");
 
-    userProfilePage.assertAge(age);
+    userProfilePage.assertdate_of_birth("01/01/1999");
     userProfilePage.assertGender(gender);
     userProfilePage.assertEmail(email);
     userProfilePage.assertPhone(phone);

cypress/pageobject/Users/UserCreation.ts

@@ -17,7 +17,10 @@ export class UserCreationPage {
       .click()
       .type(value);
   }
-
+  typeIntoElementByIdPostClearDob(elementId: string, value: string) {
+    cy.get("#" + elementId).click();
+    cy.get("#date-input").clear().type(value);
+  }
   clearIntoElementById(elementId: string) {
     cy.get("#" + elementId)
       .click()

cypress/pageobject/Users/UserProfilePage.ts

@@ -1,3 +1,5 @@
+import { cy } from "local-cypress";
+
 export default class UserProfilePage {
   assertVideoConnectLink(link: string) {
     cy.get("#videoconnectlink-profile-details").should("contain.text", link);
@@ -15,8 +17,10 @@ export default class UserProfilePage {
     cy.get("#submit").click();
   }
 
-  typeAge(age: string) {
-    cy.get("#age").click().clear().type(age);
+  typedate_of_birth(date_of_birth: string) {
+    //check
+    cy.get("#date_of_birth").click();
+    cy.get("#date-input").clear().type(date_of_birth);
   }
 
   selectGender(gender: string) {
@@ -55,8 +59,11 @@ export default class UserProfilePage {
       .type(medicalCouncilRegistration);
   };
 
-  assertAge(age: string) {
-    cy.get("#age-profile-details").should("contain.text", age);
+  assertdate_of_birth(date_of_birth: string) {
+    cy.get("#date_of_birth-profile-details").should(
+      "contain.text",
+      date_of_birth
+    );
   }
 
   assertGender(gender: string) {

src/Components/Users/UserAdd.tsx

@@ -67,7 +67,6 @@ type UserForm = {
   phone_number: string;
   alt_phone_number: string;
   phone_number_is_whatsapp: boolean;
-  age: number;
   date_of_birth: Date | null;
   state: number;
   district: number;
@@ -91,7 +90,6 @@ const initForm: UserForm = {
   phone_number: "+91",
   alt_phone_number: "+91",
   phone_number_is_whatsapp: true,
-  age: 0,
   date_of_birth: null,
   state: 0,
   district: 0,
@@ -471,7 +469,12 @@ export const UserAdd = (props: UserProps) => {
           return;
         case "date_of_birth":
           if (!state.form[field]) {
-            errors[field] = "Please enter date in YYYY/MM/DD format";
+            errors[field] = "Please enter date in DD/MM/YYYY format";
+            invalidForm = true;
+          } else if (
+            dayjs(state.form[field]).isAfter(dayjs().subtract(1, "year"))
+          ) {
+            errors[field] = "Enter a valid date of birth";
             invalidForm = true;
           }
           return;
@@ -543,7 +546,6 @@ export const UserAdd = (props: UserProps) => {
               : state.form.alt_phone_number
           ) ?? "",
         date_of_birth: dateQueryString(state.form.date_of_birth),
-        age: Number(dayjs().diff(state.form.date_of_birth, "years", false)),
         doctor_qualification:
           state.form.user_type === "Doctor"
             ? state.form.doctor_qualification

src/Components/Users/UserProfile.tsx

@@ -5,7 +5,13 @@ import * as Notification from "../../Utils/Notifications.js";
 import LanguageSelector from "../../Components/Common/LanguageSelector";
 import TextFormField from "../Form/FormFields/TextFormField";
 import ButtonV2, { Submit } from "../Common/components/ButtonV2";
-import { classNames, isValidUrl, parsePhoneNumber } from "../../Utils/utils";
+import {
+  classNames,
+  dateQueryString,
+  formatDate,
+  isValidUrl,
+  parsePhoneNumber,
+} from "../../Utils/utils";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
@@ -18,13 +24,13 @@ import { PhoneNumberValidator } from "../Form/FieldValidators";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
-
+import DateFormField from "../Form/FormFields/DateFormField";
 const Loading = lazy(() => import("../Common/Loading"));
 
 type EditForm = {
   firstName: string;
   lastName: string;
-  age: string;
+  date_of_birth: Date | null | string;
   gender: GenderType;
   email: string;
   video_connect_link: string | undefined;
@@ -34,12 +40,12 @@ type EditForm = {
   doctor_qualification: string | undefined;
   doctor_experience_commenced_on: number | string | undefined;
   doctor_medical_council_registration: string | undefined;
-  weekly_working_hours: string | null;
+  weekly_working_hours: string | null | undefined;
 };
 type ErrorForm = {
   firstName: string;
   lastName: string;
-  age: string;
+  date_of_birth: string | null;
   gender: string;
   email: string;
   video_connect_link: string | undefined;
@@ -62,7 +68,7 @@ type Action =
 const initForm: EditForm = {
   firstName: "",
   lastName: "",
-  age: "",
+  date_of_birth: null,
   gender: "Male",
   video_connect_link: "",
   email: "",
@@ -145,7 +151,7 @@ export default function UserProfile() {
       const formData: EditForm = {
         firstName: result.data.first_name,
         lastName: result.data.last_name,
-        age: result.data.age?.toString() || "",
+        date_of_birth: result.data.date_of_birth || null,
         gender: result.data.gender || "Male",
         email: result.data.email,
         video_connect_link: result.data.video_connect_link,
@@ -188,15 +194,15 @@ export default function UserProfile() {
             invalidForm = true;
           }
           return;
-        case "age":
+        case "date_of_birth":
           if (!states.form[field]) {
-            errors[field] = "This field is required";
+            errors[field] = "Enter a valid date of birth";
             invalidForm = true;
           } else if (
-            Number(states.form[field]) <= 0 ||
-            !/^\d+$/.test(states.form[field])
+            !dayjs(states.form[field]).isValid() ||
+            dayjs(states.form[field]).isAfter(dayjs().subtract(17, "year"))
           ) {
-            errors[field] = "Age must be a number greater than 0";
+            errors[field] = "Enter a valid date of birth";
             invalidForm = true;
           }
           return;
@@ -298,6 +304,9 @@ export default function UserProfile() {
     });
   };
 
+  const getDate = (value: any) =>
+    value && dayjs(value).isValid() && dayjs(value).toDate();
+
   const fieldProps = (name: string) => {
     return {
       name,
@@ -321,7 +330,7 @@ export default function UserProfile() {
         phone_number: parsePhoneNumber(states.form.phoneNumber) ?? "",
         alt_phone_number: parsePhoneNumber(states.form.altPhoneNumber) ?? "",
         gender: states.form.gender,
-        age: +states.form.age,
+        date_of_birth: dateQueryString(states.form.date_of_birth),
         doctor_qualification:
           states.form.user_type === "Doctor"
             ? states.form.doctor_qualification
@@ -520,12 +529,17 @@ export default function UserProfile() {
                       {userData?.last_name || "-"}
                     </dd>
                   </div>
-                  <div className="my-2  sm:col-span-1" id="age-profile-details">
+                  <div
+                    className="my-2  sm:col-span-1"
+                    id="date_of_birth-profile-details"
+                  >
                     <dt className="text-sm font-medium leading-5 text-black">
-                      Age
+                      Date of Birth
                     </dt>
                     <dd className="mt-1 text-sm leading-5 text-gray-900">
-                      {userData?.age || "-"}
+                      {userData?.date_of_birth
+                        ? formatDate(userData?.date_of_birth)
+                        : "-"}
                     </dd>
                   </div>
                   <div className="my-2  sm:col-span-1">
@@ -649,13 +663,14 @@ export default function UserProfile() {
                           label="Last name"
                           className="col-span-6 sm:col-span-3"
                         />
-                        <TextFormField
-                          {...fieldProps("age")}
+                        <DateFormField
+                          {...fieldProps("date_of_birth")}
+                          label="Date of Birth"
                           required
-                          label="Age"
                           className="col-span-6 sm:col-span-3"
-                          type="number"
-                          min={1}
+                          value={getDate(states.form.date_of_birth)}
+                          position="LEFT"
+                          disableFuture={true}
                         />
                         <SelectFormField
                           {...fieldProps("gender")}

src/Components/Users/models.tsx

@@ -32,7 +32,7 @@ export type UserModel = UserBareMinimum & {
   phone_number?: string;
   alt_phone_number?: string;
   gender?: GenderType;
-  age?: number;
+  date_of_birth: Date | null | string;
   is_superuser?: boolean;
   verified?: boolean;
   home_facility?: string;
@@ -65,7 +65,7 @@ export interface UserAssignedModel extends UserBareMinimum {
   alt_phone_number?: string;
   video_connect_link: string;
   gender?: number;
-  age?: number;
+  date_of_birth: Date | null;
   is_superuser?: boolean;
   verified?: boolean;
   home_facility?: string;