Skip to content

fix: rename Cancel to Fill Later

Rajuldev Vandana requested to merge fix/fill-later into fix/develop

Overview

This MR improves the KYP (Know Your Patient) form UI by renaming the "Cancel" button to "Fill Later" and repositioning it beside the step indicator for better usability.

What does this MR do and why?

Previously, the "Cancel" button in the KYP form was misleading, as it suggested abandoning the process. However, its actual purpose is to allow users to skip filling the form and complete it later.

To improve clarity and user experience:

  • The button label has been updated to "Fill Later".
  • The button has been repositioned next to the "Step 1/2" indicator for better visibility and accessibility.

This ensures users clearly understand that they can postpone filling the form without losing progress.

Changes Made

  • Renamed "Cancel" button to "Fill Later"
  • Moved button from bottom section to top header near step indicator
  • Updated layout to align Step indicator and button properly

Technical Details

  • Updated button label text in KYP form component
  • Refactored layout using flex alignment to position:
    • Step indicator
    • Fill Later button
  • No changes made to existing functionality or navigation logic

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

  • N/A

Screenshots or Screen Recordings

Before After
"Cancel" button at bottom "Fill Later" beside Step (1/2)

How to Set Up and Validate Locally

  1. Pull this branch:

    git checkout <branch-name>

  2. Install dependencies:

    bun install

  3. Run the development server:

    bun dev

  4. Navigate to:

    • http://localhost:5173/volunteer/kyp

  5. Verify:

    • "Cancel" is renamed to "Fill Later"
    • Button appears beside "Step 1/2"
    • Clicking behaves same as previous Cancel

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Button label updated Shows "Fill Later" ✅
Button position Appears beside Step indicator ✅
Button functionality Works same as Cancel ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log() or debugger statements
  • No unused code
  • No duplicate code
  • ESLint and Prettier checks pass

React Best Practices

  • Proper component structure maintained
  • No unnecessary re-renders
  • State management unchanged and correct

Component Patterns

  • Tailwind used for layout alignment
  • Responsive design maintained

Error Handling

  • No impact on error handling

Documentation

  • README.md updated
  • .env.example updated
  • CHANGELOG.md updated

Known Limitations / Technical Debt

  • None

Additional Notes

  • This is a UI-only change; no backend impact.

Merge request reports