Patient Registration form refactor

[khavinshankar]

• Refactored PatientRegistration component to use react hook form
• Added a couple of plugin hooks
• Exposed core envs to global scope

Summary by CodeRabbit

Release Notes

• Localization

  • Added multiple new validation messages and prompts for improved user guidance in forms.

• Patient Registration

  • Enhanced patient registration form with improved validation using Zod and react-hook-form.
  • Simplified form layout and structure for better user experience.

• Plugin System

  • Integrated new plugin component for patient actions in the PatientHome, PatientInfoCard, and other components.
  • Removed outdated plugin component from the EncounterContext.

• Configuration

  • Improved handling of environment variables and expanded shared dependencies in build configuration.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/components/Patient/PatientRegistration.tsx (1)

261-262: Avoid type casting with proper typing

The type casting of geo_organization could be avoided by properly typing the API response.

Consider updating the PatientModel type to include the correct type for geo_organization.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e1998e9 and 18e8454.

📒 Files selected for processing (1)

• src/components/Patient/PatientRegistration.tsx (8 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: Cloudflare Pages: care-fe

🔇 Additional comments (3)

src/components/Patient/PatientRegistration.tsx (3)

150-157: ⚠️ Potential issue

Set default value for same_address checkbox

According to the PR objectives, the "Use this address for permanent address" checkbox should be selected by default.

Apply this diff:

    defaultValues: {
      nationality: "India",
      phone_number: phone_number || "+91",
      emergency_phone_number: "+91",
      age_or_dob: "dob",
      same_phone_number: false,
-     same_address: true,
+     same_address: true, // Set to true by default as per requirements
    },

Likely invalid or redundant comment.

---

250-265: 🛠️ Refactor suggestion

Add form to useEffect dependencies

The useEffect hook depends on patientQuery.data, but it should also include form in its dependency array to ensure that form.reset has the latest reference.

Apply this diff:

-  }, [patientQuery.data]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [patientQuery.data, form]); // eslint-disable-line react-hooks/exhaustive-deps

Likely invalid or redundant comment.

---

497-510: 🛠️ Refactor suggestion

Add validation for date of birth fields

The date input fields lack validation for valid dates (e.g., preventing invalid dates like February 30th).

Apply this diff to add validation:

                              <Input
                                type="number"
                                placeholder="DD"
+                               min={1}
+                               max={31}
                                {...field}
                                value={
-                                 form.watch("date_of_birth")?.split("-")[2]
+                                 form.watch("date_of_birth")?.split("-")?.[2] || ""
                                }
                                onChange={(e) => {
+                                 const day = Number(e.target.value);
+                                 if (day < 1 || day > 31) return;
                                  form.setValue(
                                    "date_of_birth",
                                    `${form.watch("date_of_birth")?.split("-")?.[0] || ""}-${form.watch("date_of_birth")?.split("-")?.[1] || ""}-${e.target.value}`,
                                  )
                                }}

Apply similar validation for month (1-12) and year inputs.

Likely invalid or redundant comment.

[coderabbitai]

⚠️ Potential issue

Fix phone number validation to match requirements

The regex pattern /^\+\d{12}$/ requires exactly 12 digits after the '+' sign, but according to the PR objectives, phone numbers should be limited to 10 digits.

Apply this diff to fix the validation:

-            .regex(/^\+\d{12}$/, t("phone_number_must_be_10_digits")),
+            .regex(/^\+\d{10}$/, t("phone_number_must_be_10_digits")),

Make the same change for emergency_phone_number validation as well.

Also applies to: 93-95

[coderabbitai]

🛠️ Refactor suggestion

Improve phone number input validation

The phone number input should validate the format as the user types and prevent invalid characters.

Apply this diff:

                      <Input
                        {...field}
                        maxLength={13}
+                       pattern="[+][0-9]+"
                        onChange={(e) => {
+                         const value = e.target.value.replace(/[^+0-9]/g, '');
-                         form.setValue("phone_number", e.target.value);
+                         form.setValue("phone_number", value);
                          if (form.watch("same_phone_number")) {
                            form.setValue(
                              "emergency_phone_number",
-                             e.target.value,
+                             value,
                            );
                          }
                        }}
+                       inputMode="numeric"
                        data-cy="patient-phone-input"
                      />

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<Input
	{...field}
	maxLength={13}
	onChange={(e) => {
	form.setValue("phone_number", e.target.value);
	if (form.watch("same_phone_number")) {
	form.setValue(
	"emergency_phone_number",
	e.target.value,
	);
	}
	}}
	data-cy="patient-phone-input"
	/>
	<Input
	{...field}
	maxLength={13}
	pattern="[+][0-9]+"
	onChange={(e) => {
	const value = e.target.value.replace(/[^+0-9]/g, '');
	form.setValue("phone_number", value);
	if (form.watch("same_phone_number")) {
	form.setValue(
	"emergency_phone_number",
	value,
	);
	}
	}}
	inputMode="numeric"
	data-cy="patient-phone-input"
	/>

[nihal467]

the update patients page is not pre-filling, patients state,district, etc... from the dropdown, can you fix it, it exist in develop also

[nihal467]

LGTM

[github-actions]

@khavinshankar Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌