feat(ks,employer): single form wizard form flow#3874
feat(ks,employer): single form wizard form flow#3874nikomakela wants to merge 6 commits intomainfrom
Conversation
nikomakela
force-pushed
the
YJDH-801-employer-1-form-view
branch
from
5e0c39e to
b11ee70
Compare
|
YJDH-KESASETELI-API branch is deployed to platta: https://yjdh-kesaseteli-pr3874.api.dev.hel.ninja 🚀🚀🚀 |
nikomakela
force-pushed
the
YJDH-801-employer-1-form-view
branch
from
b11ee70 to
4709b31
Compare
|
YJDH-KESASETELI-API branch is deployed to platta: https://yjdh-kesaseteli-pr3874.api.dev.hel.ninja 🚀🚀🚀 |
|
EMPLOYER branch is deployed to platta: https://kesaseteli-pr3874.dev.hel.ninja 🚀🚀🚀 |
|
HANDLER branch is deployed to platta: https://kesaseteli-handler-ui-pr3874.dev.hel.ninja 🚀🚀🚀 |
|
YJDH-HELSINKILISA-API branch is deployed to platta: https://helsinkilisa-pr3874.api.dev.hel.ninja 🚀🚀🚀 |
|
YOUTH branch is deployed to platta: https://nuortenkesaseteli-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe employer result is failed for https://kesaseteli-pr3874.dev.hel.ninja 😿💢💥💥 |
|
HANDLER branch is deployed to platta: https://helsinkilisa-ui-handler-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://kesaseteli-handler-ui-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
|
APPLICANT is deployed to platta: https://helsinkilisa-ui-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://nuortenkesaseteli-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
TestCafe result is success for https://helsinkilisa-ui-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
TestCafe result is success for https://helsinkilisa-ui-handler-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
nikomakela
force-pushed
the
YJDH-801-employer-1-form-view
branch
3 times, most recently
from
143ab47 to
2e02828
Compare
|
YJDH-KESASETELI-API branch is deployed to platta: https://yjdh-kesaseteli-pr3874.api.dev.hel.ninja 🚀🚀🚀 |
|
HANDLER branch is deployed to platta: https://kesaseteli-handler-ui-pr3874.dev.hel.ninja 🚀🚀🚀 |
|
YJDH-HELSINKILISA-API branch is deployed to platta: https://helsinkilisa-pr3874.api.dev.hel.ninja 🚀🚀🚀 |
|
EMPLOYER branch is deployed to platta: https://kesaseteli-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://kesaseteli-handler-ui-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
|
YOUTH branch is deployed to platta: https://nuortenkesaseteli-pr3874.dev.hel.ninja 🚀🚀🚀 |
|
APPLICANT is deployed to platta: https://helsinkilisa-ui-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://nuortenkesaseteli-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
|
HANDLER branch is deployed to platta: https://helsinkilisa-ui-handler-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe employer result is failed for https://kesaseteli-pr3874.dev.hel.ninja 😿💢💥💥 |
TestCafe result is success for https://helsinkilisa-ui-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
nikomakela
force-pushed
the
YJDH-801-employer-1-form-view
branch
from
2e02828 to
bbb438f
Compare
|
EMPLOYER branch is deployed to platta: https://kesaseteli-pr3874.dev.hel.ninja 🚀🚀🚀 |
|
APPLICANT is deployed to platta: https://helsinkilisa-ui-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://nuortenkesaseteli-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
TestCafe result is success for https://kesaseteli-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
|
HANDLER branch is deployed to platta: https://helsinkilisa-ui-handler-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://helsinkilisa-ui-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
TestCafe result is success for https://helsinkilisa-ui-handler-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
karisal-anders
left a comment
karisal-anders
left a comment
There was a problem hiding this comment.
Tested locally with NEXT_PUBLIC_MOCK_FLAG on. Mostly functional testing, skimmed through the code. Seems to be working ok for the most part. Can be fixed more in another PRs.
Having the EMPLOYER_FIELDS in sessionStorage ("Closing the tab/window ends the session and clears the data in sessionStorage.") using a trivially reversible obfuscation (=base64 encoding) is good enough IMO (Could it be made better? Sure. Is it worth the time and effort? That's the question).
YJDH-801. IBAN input id must not be a static hard coded input. It should be consistent with other inputs and the id-property should be settable.
YJDH-801. Remove accordion forms from wizard form flow. Merge organisation and employment steps (step 1 and step 2). Summary page then represents only 1 employment form and organisation details. 3rd step removed -- thank you page offers adding another form (or to logout). Made the employment form fully visible, but disabled until employee details are requested to be filled. Added disabled and read only props to some shared components.
YJDH-801.
YJDH-801. Add tools to persist data in session storage: 1. Employer details should be remembered in form wizard when adding new employment details after another. 2. Fix for fields' values not remembered on page reload or stepping backwards in form wizard.
nikomakela
force-pushed
the
YJDH-801-employer-1-form-view
branch
from
337bd48 to
b0c8db8
Compare
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| const vouchers = applicationQuery.data?.summer_vouchers || []; | ||
| const currentVoucherIndex = vouchers.length > 0 ? vouchers.length - 1 : 0; | ||
|
|
||
| return ( | ||
| <ApplicationForm title={t('common:application.step1.header')} step={1}> | ||
| <EmployerForm /> | ||
| <EmploymentForm index={currentVoucherIndex} /> |
There was a problem hiding this comment.
Bug: The form attempts to register fields for summer_vouchers[0] on new applications, but this index doesn't exist in the initially empty summer_vouchers array, causing form fields to fail.
Severity: HIGH
Suggested Fix
Either initialize the summer_vouchers array with at least one empty object [{}] for new applications, or refactor the form to use the useFieldArray hook from React Hook Form to dynamically manage employment entries with its append and remove methods.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location:
frontend/kesaseteli/employer/src/components/application/steps/step1/Step1EmployerAndEmployment.tsx#L14-L20
Potential issue: When a user creates a new application, the `summer_vouchers` array is
initially empty. The `EmploymentForm` component then attempts to register form fields
for the first voucher at index 0 (e.g., `summer_vouchers.0.employee_name`). However,
because the component does not use the `useFieldArray` hook and no initial empty voucher
object is added to the array, React Hook Form fails to register fields for this
non-existent index. This results in form fields not binding correctly, `useWatch` hooks
returning `undefined`, and user input not being tracked, rendering the form unusable for
new applications.
Did we get this right? 👍 / 👎 to inform future reviews.
|
YJDH-KESASETELI-API branch is deployed to platta: https://yjdh-kesaseteli-pr3874.api.dev.hel.ninja 🚀🚀🚀 |
|
|
|
YOUTH branch is deployed to platta: https://nuortenkesaseteli-pr3874.dev.hel.ninja 🚀🚀🚀 |
|
HANDLER branch is deployed to platta: https://kesaseteli-handler-ui-pr3874.dev.hel.ninja 🚀🚀🚀 |
|
YJDH-HELSINKILISA-API branch is deployed to platta: https://helsinkilisa-pr3874.api.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://nuortenkesaseteli-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
|
EMPLOYER branch is deployed to platta: https://kesaseteli-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://kesaseteli-handler-ui-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
|
APPLICANT is deployed to platta: https://helsinkilisa-ui-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://kesaseteli-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
|
HANDLER branch is deployed to platta: https://helsinkilisa-ui-handler-pr3874.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://helsinkilisa-ui-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
TestCafe result is success for https://helsinkilisa-ui-handler-pr3874.dev.hel.ninja 😆🎉🎉🎉 |
2 participants
YJDH-801.
Remove accordion forms from wizard form flow. Merge organisation and employment steps (step 1 and step 2). Summary page then represents only 1 employment form and organisation details. 3rd step removed -- thank you page offers adding another form (or to logout).
Made the employment form fully visible, but disabled until employee details are requested to be filled. Added disabled and read only props to some shared components.