Transition Filing: Staff Payment Component Updates
- Dominant language
- JavaScript
- Stars
- 23
- Forks
- 62
- Avg merge
- 24m
- Merged PRs (30d)
- 1
Description
### Design in Ticket #30441
### To Do:
**Switching between payment options**
- If the user switches to any other radio button in the section, remove the validation errors (if any are present) and clear the input field so it goes back to empty state.
- Characters entered into the input fields do not persist when different radio button options are selected (the user must enter in the text again if they switch options).
_Scenario_
- If user selects Cash or Cheque radio button option and only enters 5 digits under Routing Slip Number and clicks Submits, validation error displays on Routing Slip input field.
- Then if the user selects the BC Online radio button option, the validation error under Routing Slip stops displaying and the field clears.
- If the user selects Routing Slip number once again, the validation error doesn't display again. User must also enter text again.
**Deselected Radio Button Options**
- The input fields associated to a unselected radio button have a dashed bottom border
- The input fields associated to a unselected radio button are disabled
**Selected Radio Button Options**
- The input fields associated to a selected radio button have a normal (solid) bottom border and user can enter text
- The user can only enter text into the input fields associated with selected radio button option
**Align to other input fields**
- the active state input fields should look like and behavior like the other fields on the page (folio, court order) with a black label and bottom border that changes when the user selects the input field.
- The deselected radio buttons should be black - right now they are light grey that won't pass accessibility standards.
**Spacing**
- There should be a bit more space below No Fee button and above Priority checkbox (see designs)
**Current State Screenshots**


Contributor guide
No contributing guide indexed for this repository
Research direction
Start with Design in Ticket #30441 and locate the staff payment component that renders the payment-option radio buttons and inputs. Verify switching options clears values and validation, disables and styles deselected fields, matches the folio and court order fields, and adds the requested spacing; done when these behaviors and visual states match the described scenarios and designs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100