hackforla / hackforla/tdm-calculator
Dev: Revise modal before submit process to indicate whether it is a new or replacement submittal
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
### Overview
We need to update the submittal process modals language and formatting to allow the user to indicate if the TDM Plan submittal is a replacement
#### Final Images for Developer with notes about what specifically is changing
Modal 1 - update current modal
Soft warning informational modal with information about the project that is being submitted
Change from
to
Details of changes
- The following changes are needed in the text "An application fee must be paid to initiate review.See the [FAQ](https://tdm-dev.azurewebsites.net/faqs) for more information about the application process."
- bolded
- centered
- add a space between 'review.See"
- Add field names and ':' in bold before each value
- Unbold the values
- Replace the 'SUBMIT' button with a 'CONTINUE' button
Modal 2 - Add new modal (they don't exist now)
Insert this modal to the process after the first modal, once user clicks 'CONTINUE'
- Nothing selected, "Submit" button: inactive state.
- "New TDM Plan selected", no further steps required and "Submit" button: active state.
- "Replacement for previously submitted TDM Plan" selected. No valid TDM Plan ID in input box. "Submit" button: **active state**.
- Valid TDM Plan ID has been given. "Submit" button: active state.
Modal 2 - Add error messages (they don't exist now)
Submit button: active state. Error shows under the following circumstances after user clicks SUBMIT button and ID is
- an ID of a withdrawn project but it was already replaced by a new submission
- field is empty
- ID is less than 10 digits
- is a valid draft ID (the submission process only takes snapshots)
- is an ID number that doesn't yet exist
- has transposed numbers in the ID
Confirmation Modal - update current modal
Change from
to
Details of changes
- Remove 'Submitted: YYYY-MM-DD'
- The following changes are needed in the text "See [FAQ](https://tdm-dev.azurewebsites.net/faqs) page for more information about the application process and payment."
- bolded
- centered
- Add field names and ':' in bold before each value
- Unbold the values
- move 'Date Last Saved:' under 'Date Snapshot Created:'
### Action Items
- [ ] Assign yourself to the development issue.
- [ ] Move the development issue from the Prioritized Backlog to In Progress.
- [ ] Development tasks:
- [ ] Need a stored procedure that, when given a projectId, can verify that the project is withdrawn, and does not already have a replacement project Id assigned.
- [ ] Add web api endpoint to call the procedure.
- [ ] Make the form changes described above. When the user has specified the replacement project, call the above web api endpoint and determine if the replacement project is valid, and display validation warnings as described above.
- [ ] Also decide how to update the replacedByProjectId value in the project record. It could be a separate stored proc. web api endpoint and call from the client, but it might be better to enhance the /projects/submit endpoint with an additional query string parameter, and only change the replaceByProjectId value when the project is submitted.
- [ ] Create a PR, if applicable.
- [ ] Create a new slide (or edit one if it already exists) in staging and add the before and after images
- [ ] Once the PR has been approved, use it to close this issue. If there is no PR is associated with this issue, close this issue after lead signoff.
### Resources/Instructions
- Design details: see details above. There is a design issue and the content on the last comment has already been pasted into the details section of this issue. https://github.com/hackforla/tdm-calculator/issues/2874#issuecomment-5415944958
- Design mockups: [link to Ready for Dev section in the related Figma page](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=30278-2852&t=GSR5l6s9mNMqjrx1-0)
#### Staging and Release decks
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/)
- [Staging slide, 3247](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3e5191eaecb_14_0#slide=id.g3e5191eaecb_14_0)
- Release Deck
- [2025-MM-DD Release deck, slide ISSUE NUMBER]
Contributor guide
Research direction
Start with the design issue and Figma mockups, then trace the submission form and the existing /projects/submit endpoint. Implement the stored-procedure/API validation flow, modal and confirmation changes, and replacement-project handling described in the issue; done means the listed states and validation warnings work and the replacement relationship is updated on submission.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- api, database, full-stack
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100