Merge branch 'develop' into issues/ohcnetwork#7309/weekly-hours-btn

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) {

plugins/treeShakeCareIcons.mts

@@ -0,0 +1,94 @@
+import { Plugin } from "vite";
+import * as fs from "fs";
+import * as path from "path";
+import * as glob from "glob";
+
+/**
+ * Interface defining options for the treeShakeUniconPathsPlugin.
+ *
+ * @interface TreeShakeUniconPathsPluginOptions
+ * @property {string[]} iconWhitelist - An array of icon names to always include, even if not found in code.
+ */
+
+export interface TreeShakeCareIconsOptions {
+  iconWhitelist: string[];
+}
+
+/**
+ * Creates a Webpack plugin that tree-shakes unused Unicon paths from UniconPaths.json in production builds.
+ *
+ * @param {TreeShakeCareIconsOptions} [options] - Optional configuration options. Defaults to an empty iconWhitelist.
+ * @returns {Plugin} Webpack plugin object.
+ */
+
+export function treeShakeCareIcons(
+  options: TreeShakeCareIconsOptions = { iconWhitelist: [] }
+): Plugin {
+  const rootDir = path.resolve(__dirname, ".."); // update this if moving this code to a different file
+  const lineIconNameRegex = /"l-[a-z]+(?:-[a-z]+)*"/g;
+  const allUniconPaths = JSON.parse(
+    fs.readFileSync(
+      path.resolve(rootDir, "src/CAREUI/icons/UniconPaths.json"),
+      "utf8"
+    )
+  );
+
+  // Extracts icon names from a given file's content.
+  // Returns an array of icon names like ["l-eye", "l-sync", "l-hearbeat"]
+  function extractCareIconNames(file: string): string[] {
+    const fileContent = fs.readFileSync(file, "utf8");
+
+    const lineIconNameMatches = fileContent.match(lineIconNameRegex) || [];
+
+    const lineIconNames = lineIconNameMatches.map(
+      (lineIconName) => lineIconName.slice(1, -1) // remove quotes
+    );
+
+    return lineIconNames;
+  }
+  // Finds all used icon names within the project's source files (`.tsx` or `.res` extensions).
+  function getAllUsedIconNames() {
+    const files = glob.sync(path.resolve(rootDir, "src/**/*.{tsx,res}"));
+    const usedIconsArray: string[] = [];
+
+    files.forEach((file) => {
+      const iconNames = extractCareIconNames(file);
+      usedIconsArray.push(...iconNames);
+    });
+
+    return new Set(usedIconsArray);
+  }
+  // Generates a map of used icon names to their paths from UniconPaths.json, including any whitelisted icons.
+  function getTreeShakenUniconPaths() {
+    const usedIcons = [...getAllUsedIconNames(), ...options.iconWhitelist];
+    const treeshakenCareIconPaths = {};
+
+    for (const iconName of usedIcons) {
+      const path = allUniconPaths[iconName];
+      if (path === undefined) {
+        throw new Error(`Icon ${iconName} is not found in UniconPaths.json`);
+      } else {
+        treeshakenCareIconPaths[iconName] = path;
+      }
+    }
+
+    return treeshakenCareIconPaths;
+  }
+
+  return {
+    name: "tree-shake-care-icons",
+    transform(_src, id) {
+      if (process.env.NODE_ENV !== "production") {
+        return;
+      }
+
+      // Replace the UniconPaths with the tree-shaken version
+      if (id.endsWith("UniconPaths.json")) {
+        return {
+          code: `export default ${JSON.stringify(getTreeShakenUniconPaths())}`,
+          map: null,
+        };
+      }
+    },
+  };
+}

src/CAREUI/display/RecordMeta.tsx

@@ -44,7 +44,7 @@ const RecordMeta = ({
         {user && !inlineUser && (
           <span className="flex items-center gap-1">
             by
-            <CareIcon className="care-l-user" />
+            <CareIcon icon="l-user" />
             {formatName(user)}
             {isOnline && (
               <div className="h-1.5 w-1.5 rounded-full bg-primary-400" />
@@ -61,7 +61,7 @@ const RecordMeta = ({
         {prefix}
         {child}
         {user && inlineUser && <span>by</span>}
-        {user && !inlineUser && <CareIcon className="care-l-user" />}
+        {user && !inlineUser && <CareIcon icon="l-user" />}
         {user && inlineUser && (
           <span className="font-medium">{formatName(user)}</span>
         )}

src/CAREUI/display/SubHeading.tsx

@@ -18,7 +18,7 @@ export default function SubHeading(props: Props) {
         </span>
         {props.lastModified && (
           <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-gray-600">
-            <CareIcon className="care-l-history-alt text-sm" />
+            <CareIcon icon="l-history-alt" className="text-sm" />
             <RecordMeta time={props.lastModified} prefix="Last modified" />
           </div>
         )}

src/CAREUI/icons/CareIcon.tsx

@@ -6,7 +6,7 @@ import iconData from "./UniconPaths.json";
 export type IconName = keyof typeof iconData;
 
 export interface CareIconProps {
-  icon?: IconName;
+  icon: IconName;
   className?: string | undefined;
   onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
   id?: string;
@@ -16,7 +16,7 @@ export interface CareIconProps {
  * ### CARE's Official Icon Library.
  * @param className icon class name
  * @returns icon component
- * @example ```<CareIcon className="care-l-hospital" /> ```
+ * @example ```<CareIcon icon="l-hospital"/> ```
  *
  * @see [icon library](https://iconscout.com/unicons/)
  */

src/CAREUI/interactive/FiltersSlideover.tsx

@@ -36,7 +36,7 @@ export default function FiltersSlideover({
               onClick={onClear}
               id="clear-filter"
             >
-              <CareIcon className="care-l-filter-slash text-lg" />
+              <CareIcon icon="l-filter-slash" className="text-lg" />
               <span>{t("clear")}</span>
             </ButtonV2>
             <ButtonV2 ghost onClick={onApply} id="apply-filter">
@@ -62,7 +62,7 @@ export const AdvancedFilterButton = ({ onClick }: { onClick: () => void }) => {
       onClick={onClick}
       id="advanced-filter"
     >
-      <CareIcon className="care-l-filter" />
+      <CareIcon icon="l-filter" />
       <span className="py-0.5">{t("advanced_filters")}</span>
     </ButtonV2>
   );

src/CAREUI/interactive/LegendInput.tsx

@@ -144,7 +144,8 @@ export default function LegendInput(props: InputProps) {
             onClick={() => setShowPassword(!showPassword)}
           >
             <CareIcon
-              className={`care-l-eye${showPassword ? "" : "-slash"} text-lg`}
+              icon={showPassword ? "l-eye" : "l-eye-slash"}
+              className="text-lg"
             />
           </button>
         )}

src/CAREUI/interactive/SlideOver.tsx

@@ -116,7 +116,7 @@ export default function SlideOver({
                       onCloseClick && onCloseClick();
                     }}
                   >
-                    <CareIcon className="care-l-arrow-left" />
+                    <CareIcon icon="l-arrow-left" />
                   </button>
                   <div className="flex w-full">
                     <h1 className="w-full text-xl font-black">{title}</h1>

src/Common/constants.tsx

@@ -742,7 +742,7 @@ export const GENDER: { [key: number]: string } = GENDER_TYPES.reduce(
 );
 
 export type CameraPTZ = {
-  icon?: string;
+  icon?: IconName;
   label: string;
   action: string;
   loadingLabel?: string;

src/Common/hooks/useRangePagination.ts

@@ -19,7 +19,7 @@ const useRangePagination = ({ bounds, perPage, ...props }: Props) => {
 
   useEffect(() => {
     setCurrentRange(getInitialBounds(bounds, perPage, props.defaultEnd));
-  }, [bounds, perPage, props.defaultEnd]);
+  }, [JSON.stringify(bounds), perPage, props.defaultEnd]);
 
   const next = () => {
     const { end } = currentRange;

src/Components/ABDM/ABHAProfileModal.tsx

@@ -54,11 +54,13 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
           <div className="flex items-center gap-2">
             <CareIcon
               onClick={() => downloadAbhaCard("pdf")}
-              className="care-l-print cursor-pointer"
+              icon="l-print"
+              className="cursor-pointer"
             />
             <CareIcon
               onClick={() => downloadAbhaCard("png")}
-              className="care-l-import cursor-pointer"
+              icon="l-import"
+              className="cursor-pointer"
             />
           </div>
         </div>

src/Components/ABDM/LinkABHANumberModal.tsx

@@ -59,7 +59,7 @@ export default function LinkABHANumberModal({
 
   const title = (
     <div className="flex items-center gap-3">
-      <CareIcon className="care-l-link text-xl" />
+      <CareIcon icon="l-link" className="text-xl" />
       <h2 className="text-xl font-bold text-black">
         {currentStep === "ScanExistingQR"
           ? "Link Existing ABHA Number"
@@ -752,7 +752,7 @@ const VerifyMobileSection = ({
         />
       ) : (
         <p className="-mt-4 text-sm text-warning-600">
-          <CareIcon className="care-l-exclamation-triangle h-4 w-4" /> OTP is
+          <CareIcon icon="l-exclamation-triangle" className="h-4 w-4" /> OTP is
           generated if the above phone number is not linked with given Aadhaar
           number.
         </p>
@@ -833,7 +833,7 @@ const CreateHealthIDSection = ({
       />
 
       <p className="-mt-4 text-sm text-warning-600">
-        <CareIcon className="care-l-exclamation-triangle h-4 w-4" /> Existing
+        <CareIcon icon="l-exclamation-triangle" className="h-4 w-4" /> Existing
         ABHA Address is used if ABHA Number already exists.
       </p>