Add * symbol and max phone number length to Facility Create Form #9937
Conversation
WalkthroughThe pull request introduces modifications to the Changes
Suggested Labels
Suggested Reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploying care-fe with
|
| Latest commit: |
5705d23
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3c03df0f.care-fe.pages.dev |
| Branch Preview URL: | https://facility-form-mandatory.care-fe.pages.dev |
CARE
|
||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
facility-form-mandatory
|
| Run status |
|
| Run duration | 01m 47s |
| Commit |
|
| Committer | Mohammed Nihal |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
4
|
| View all changes introduced in this branch ↗︎ | |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/Facility/CreateFacilityForm.tsx (3)
167-167: LGTM! Consider adding aria-required for better accessibility.The required indicator matches the validation schema. However, for better accessibility, consider adding
aria-required="true"to the select input.- <SelectTrigger data-cy="facility-type"> + <SelectTrigger data-cy="facility-type" aria-required="true">
263-263: Consider improving the phone number validation message.While the required indicator is correctly implemented, the validation error message could be more user-friendly.
Update the phone number validation in the schema:
phone_number: z .string() .regex( /^\+91[0-9]{10}$/, - "Phone number must start with +91 followed by 10 digits", + "Please enter a valid Indian mobile number (e.g., +919876543210)", ),
Line range hint
167-300: Consider implementing a consistent required field validation pattern.The form's required fields are now properly marked in the UI. To maintain consistency across the application, consider:
- Creating a reusable pattern for required field validation
- Implementing consistent error message formatting
- Adding aria-required attributes to all required inputs
Example pattern:
const createRequiredStringSchema = (field: string) => z.string().min(1, `${field} is required`); const facilityFormSchema = z.object({ facility_type: createRequiredStringSchema("Facility type"), name: createRequiredStringSchema("Name"), // ... other fields });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Facility/CreateFacilityForm.tsx(5 hunks)
🔇 Additional comments (3)
src/components/Facility/CreateFacilityForm.tsx (3)
196-196: LGTM! The required indicator matches the validation schema.The required indicator is correctly implemented and aligns with the form's validation rules.
300-300: LGTM! The required indicator matches the validation schema.The required indicator is correctly implemented and aligns with the form's validation rules.
281-281: Verify pincode validation for required field.The field is marked as required in the UI, but we should verify if the
validatePincodefunction properly handles empty values.✅ Verification successful
Pincode validation correctly handles required field
The validation is properly implemented:
- Empty values fail the validation due to the regex pattern
^[1-9][0-9]{5}$- The Zod schema uses
validatePincodeas a refinement function- UI correctly shows the required marker
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for validatePincode implementation rg -A 5 "validatePincode.*=" || rg -A 5 "export.*validatePincode"Length of output: 260
Script:
#!/bin/bash # Search for pincode validation in form schema rg -B 2 -A 2 "pincode.*:" src/components/Facility/CreateFacilityForm.tsxLength of output: 405
nihal467
changed the title
|
@nihal467 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! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Style
requiredattribute to key form fields for improved user guidance.