From 88e4f764a737bc07770c7a47a980868681950789 Mon Sep 17 00:00:00 2001 From: Rashmik Date: Sat, 2 Mar 2024 04:46:53 +0530 Subject: [PATCH 1/6] Replace age field with DOB while Updating User --- src/Components/Users/UserAdd.tsx | 10 +++--- src/Components/Users/UserProfile.tsx | 51 ++++++++++++++++++---------- src/Components/Users/models.tsx | 4 +-- 3 files changed, 41 insertions(+), 24 deletions(-) diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx index b4d9e9fbca6..39615f532f1 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] = "Field is required"; + 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 34452a367de..3017dcee9d4 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -18,13 +18,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; gender: GenderType; email: string; video_connect_link: string | undefined; @@ -39,7 +39,7 @@ type EditForm = { type ErrorForm = { firstName: string; lastName: string; - age: string; + date_of_birth: string | null; gender: string; email: string; video_connect_link: string | undefined; @@ -62,7 +62,7 @@ type Action = const initForm: EditForm = { firstName: "", lastName: "", - age: "", + date_of_birth: null, gender: "Male", video_connect_link: "", email: "", @@ -145,7 +145,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 +188,14 @@ 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] = "Field is required"; invalidForm = true; } else if ( - Number(states.form[field]) <= 0 || - !/^\d+$/.test(states.form[field]) + dayjs(states.form[field]).isAfter(dayjs().subtract(1, "year")) ) { - errors[field] = "Age must be a number greater than 0"; + errors[field] = "Enter a valid date of birth"; invalidForm = true; } return; @@ -295,6 +294,20 @@ export default function UserProfile() { form: { ...states.form, [event.name]: event.value }, }); }; + const handleDateChange = (e: FieldChangeEvent) => { + if (dayjs(e.value).isValid()) { + dispatch({ + type: "set_form", + form: { + ...states.form, + [e.name]: dayjs(e.value).format("YYYY-MM-DD"), + }, + }); + } + }; + + const getDate = (value: any) => + value && dayjs(value).isValid() && dayjs(value).toDate(); const fieldProps = (name: string) => { return { @@ -319,7 +332,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: states.form.date_of_birth, doctor_qualification: states.form.user_type === "Doctor" ? states.form.doctor_qualification @@ -520,10 +533,10 @@ export default function UserProfile() {
- Age + Date of Birth
- {userData?.age || "-"} + {userData?.date_of_birth?.toString() || "-"}
@@ -647,13 +660,15 @@ export default function UserProfile() { label="Last name" className="col-span-6 sm:col-span-3" /> - Date: Sun, 10 Mar 2024 13:18:02 +0530 Subject: [PATCH 2/6] change cypress tests --- 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/UserProfile.tsx | 32 +++++++++------------ 5 files changed, 42 insertions(+), 34 deletions(-) diff --git a/cypress/e2e/users_spec/user_creation.cy.ts b/cypress/e2e/users_spec/user_creation.cy.ts index d9b3e52ddaf..2becce1d82c 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", + "Field is required", "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", + "1998-01-01" + ); 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..a9d92e02506 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("1999-01-01"); 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/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index 3017dcee9d4..ef7220ff8a9 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -5,7 +5,12 @@ 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, + isValidUrl, + parsePhoneNumber, +} from "../../Utils/utils"; import CareIcon from "../../CAREUI/icons/CareIcon"; import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField"; import { FieldChangeEvent } from "../Form/FormFields/Utils"; @@ -190,10 +195,11 @@ export default function UserProfile() { return; case "date_of_birth": if (!states.form[field]) { - errors[field] = "Field is required"; + errors[field] = "Enter a valid date of birth"; invalidForm = true; } else if ( - dayjs(states.form[field]).isAfter(dayjs().subtract(1, "year")) + !dayjs(states.form[field]).isValid() || + dayjs(states.form[field]).isAfter(dayjs().subtract(17, "year")) ) { errors[field] = "Enter a valid date of birth"; invalidForm = true; @@ -294,17 +300,6 @@ export default function UserProfile() { form: { ...states.form, [event.name]: event.value }, }); }; - const handleDateChange = (e: FieldChangeEvent) => { - if (dayjs(e.value).isValid()) { - dispatch({ - type: "set_form", - form: { - ...states.form, - [e.name]: dayjs(e.value).format("YYYY-MM-DD"), - }, - }); - } - }; const getDate = (value: any) => value && dayjs(value).isValid() && dayjs(value).toDate(); @@ -332,7 +327,7 @@ export default function UserProfile() { phone_number: parsePhoneNumber(states.form.phoneNumber) ?? "", alt_phone_number: parsePhoneNumber(states.form.altPhoneNumber) ?? "", gender: states.form.gender, - date_of_birth: states.form.date_of_birth, + date_of_birth: dateQueryString(states.form.date_of_birth), doctor_qualification: states.form.user_type === "Doctor" ? states.form.doctor_qualification @@ -531,7 +526,10 @@ export default function UserProfile() { {userData?.last_name || "-"}
-
+
Date of Birth
@@ -663,10 +661,8 @@ export default function UserProfile() { From 1720e510fa25f919a70b345d9ded2391ee07b543 Mon Sep 17 00:00:00 2001 From: khavinshankar Date: Tue, 26 Mar 2024 23:17:27 +0530 Subject: [PATCH 3/6] minor ux enhancements --- cypress/e2e/users_spec/user_creation.cy.ts | 2 +- src/Components/Users/UserAdd.tsx | 2 +- src/Components/Users/UserProfile.tsx | 10 +++++++--- src/Components/Users/models.tsx | 2 +- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/cypress/e2e/users_spec/user_creation.cy.ts b/cypress/e2e/users_spec/user_creation.cy.ts index 2becce1d82c..2e0d24910b3 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", - "Field is required", + "Please enter date in DD/MM/YYYY format", "Please enter the password", "Confirm password is required", "First Name is required", diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx index 39615f532f1..c6de6c18fa4 100644 --- a/src/Components/Users/UserAdd.tsx +++ b/src/Components/Users/UserAdd.tsx @@ -469,7 +469,7 @@ export const UserAdd = (props: UserProps) => { return; case "date_of_birth": if (!state.form[field]) { - errors[field] = "Field is required"; + errors[field] = "Please enter date in DD/MM/YYYY format"; invalidForm = true; } else if ( dayjs(state.form[field]).isAfter(dayjs().subtract(1, "year")) diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index 71e130663d9..43949165a55 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -8,6 +8,7 @@ import ButtonV2, { Submit } from "../Common/components/ButtonV2"; import { classNames, dateQueryString, + formatDate, isValidUrl, parsePhoneNumber, } from "../../Utils/utils"; @@ -29,7 +30,7 @@ const Loading = lazy(() => import("../Common/Loading")); type EditForm = { firstName: string; lastName: string; - date_of_birth: Date | null; + date_of_birth: Date | null | string; gender: GenderType; email: string; video_connect_link: string | undefined; @@ -39,7 +40,7 @@ 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; @@ -536,7 +537,9 @@ export default function UserProfile() { Date of Birth
- {userData?.date_of_birth?.toString() || "-"} + {userData?.date_of_birth + ? formatDate(userData?.date_of_birth) + : "-"}
@@ -663,6 +666,7 @@ export default function UserProfile() { Date: Tue, 26 Mar 2024 23:26:40 +0530 Subject: [PATCH 4/6] fix cypress fail --- cypress/e2e/users_spec/user_creation.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/users_spec/user_creation.cy.ts b/cypress/e2e/users_spec/user_creation.cy.ts index 2e0d24910b3..a8cb8165a12 100644 --- a/cypress/e2e/users_spec/user_creation.cy.ts +++ b/cypress/e2e/users_spec/user_creation.cy.ts @@ -112,7 +112,7 @@ describe("User Creation", () => { ); userCreationPage.verifyElementContainsText( "date_of_birth-profile-details", - "1998-01-01" + "01-01-1998" ); userCreationPage.verifyElementContainsText( "emailid-profile-details", From bd1f99dd1ef56bdabb1077f18dd110e4e427f3fb Mon Sep 17 00:00:00 2001 From: khavinshankar Date: Tue, 26 Mar 2024 23:36:03 +0530 Subject: [PATCH 5/6] fix cypress fails --- cypress/e2e/users_spec/user_creation.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/users_spec/user_creation.cy.ts b/cypress/e2e/users_spec/user_creation.cy.ts index a8cb8165a12..33fd7cb958d 100644 --- a/cypress/e2e/users_spec/user_creation.cy.ts +++ b/cypress/e2e/users_spec/user_creation.cy.ts @@ -112,7 +112,7 @@ describe("User Creation", () => { ); userCreationPage.verifyElementContainsText( "date_of_birth-profile-details", - "01-01-1998" + "01/01/1998" ); userCreationPage.verifyElementContainsText( "emailid-profile-details", From 769ac1cb1bb1c4d3108e32c557ef640be7a8abf7 Mon Sep 17 00:00:00 2001 From: khavinshankar Date: Tue, 26 Mar 2024 23:46:09 +0530 Subject: [PATCH 6/6] fix cypress fail in user profile --- cypress/e2e/users_spec/user_profile.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/users_spec/user_profile.cy.ts b/cypress/e2e/users_spec/user_profile.cy.ts index a9d92e02506..3cbc2e91404 100644 --- a/cypress/e2e/users_spec/user_profile.cy.ts +++ b/cypress/e2e/users_spec/user_profile.cy.ts @@ -49,7 +49,7 @@ describe("Manage User Profile", () => { cy.verifyNotification("Details updated successfully"); - userProfilePage.assertdate_of_birth("1999-01-01"); + userProfilePage.assertdate_of_birth("01/01/1999"); userProfilePage.assertGender(gender); userProfilePage.assertEmail(email); userProfilePage.assertPhone(phone);