From 5a8b9e89d84e6023971f02d34436c5c8bac04257 Mon Sep 17 00:00:00 2001 From: Rashmik <146672184+rash-27@users.noreply.github.com> Date: Tue, 26 Mar 2024 23:56:22 +0530 Subject: [PATCH] Replace age field with DOB while Updating User (#7322) * Replace age field with DOB while Updating User * change cypress tests * minor ux enhancements * fix cypress fail * fix cypress fails * fix cypress fail in user profile --------- Co-authored-by: khavinshankar --- cypress/e2e/users_spec/user_creation.cy.ts | 16 +++--- cypress/e2e/users_spec/user_profile.cy.ts | 8 +-- cypress/pageobject/Users/UserCreation.ts | 5 +- cypress/pageobject/Users/UserProfilePage.ts | 15 ++++-- src/Components/Users/UserAdd.tsx | 10 ++-- src/Components/Users/UserProfile.tsx | 57 +++++++++++++-------- src/Components/Users/models.tsx | 4 +- 7 files changed, 72 insertions(+), 43 deletions(-) diff --git a/cypress/e2e/users_spec/user_creation.cy.ts b/cypress/e2e/users_spec/user_creation.cy.ts index d9b3e52ddaf..33fd7cb958d 100644 --- a/cypress/e2e/users_spec/user_creation.cy.ts +++ b/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", "test@test.com"); 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", "test@test.com" @@ -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"); diff --git a/cypress/e2e/users_spec/user_profile.cy.ts b/cypress/e2e/users_spec/user_profile.cy.ts index 3f3202eb423..3cbc2e91404 100644 --- a/cypress/e2e/users_spec/user_profile.cy.ts +++ b/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 = "test@example.com"; 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); diff --git a/cypress/pageobject/Users/UserCreation.ts b/cypress/pageobject/Users/UserCreation.ts index 32127ffcb90..c10d853f706 100644 --- a/cypress/pageobject/Users/UserCreation.ts +++ b/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() diff --git a/cypress/pageobject/Users/UserProfilePage.ts b/cypress/pageobject/Users/UserProfilePage.ts index 3f71a29181b..cb5f6d11f1c 100644 --- a/cypress/pageobject/Users/UserProfilePage.ts +++ b/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) { diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx index b4d9e9fbca6..c6de6c18fa4 100644 --- a/src/Components/Users/UserAdd.tsx +++ b/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 diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index da5b7b9639b..43949165a55 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/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 || "-"} -
+
- Age + Date of Birth
- {userData?.age || "-"} + {userData?.date_of_birth + ? formatDate(userData?.date_of_birth) + : "-"}
@@ -649,13 +663,14 @@ export default function UserProfile() { label="Last name" className="col-span-6 sm:col-span-3" /> -