chore: Implement webchat pre-engagement form - render forms [CHI-3696]

[gpaoloni]

Description

This PR implements the rendering of pre engagement form, based on the form definitions introduced in #3865.

Checklist

• Corresponding issue has been opened
• New tests added
• Feature flags added
• Strings are localized
• Tested for chat contacts
• Tested for call contacts

Other Related Issues

None

Verification steps

AFTER YOU MERGE

1. Cut a release tag using the Github workflow. Wait for it to complete and notify in the #aselo-deploys Slack channel.
2. Comment on the ticket with the release tag version AND any additional instructions required to configure an environment to test the changes.
3. Only then move the ticket into the QA column in JIRA

You are responsible for ensuring the above steps are completed. If you move a ticket into QA without advising what version to test, the QA team will assume the latest tag has the changes. If it does not, the following confusion is on you! :-P

[stephenhand]

One design question. Also, we should add some tests

[stephenhand]

Since our long term aim is to move away from using this, is there any chance we could avoid adding it to a new project?

[gpaoloni]

I honestly don't know why that would be our long term goal. As I've said when this was discussed, we would have to implement and maintain all the validation rules, handle dirty states that are used in some components, among others features that we rely on. I don't think removing rhf is a good idea as I don't see the benefit. However, if we end up removing it, I would do so in a separate refactor PR if you don't mind, as I'd rather avoid having to write all the validations and form state management that are required for the components introduced in this PR.

[gpaoloni]

@copilot In a new PR, improve unit test coverage for the newly added code as follows:

• aselo-webchat-react-app/src/components/__tests__/PreEngagementFormPhase.test.tsx: add test cases for all of the possible FormInputType types, as described in lambdas/packages/hrm-form-definitions/src/formDefinition/loadWebchatDefinition.ts. The tests should assert
  • Form submission is not valid if a "required" input is empty.
  • Form submission is not valid if an "email" input does not contains a string that matches the EMAIL_PATTERN regex.
• For each of the four form components intrdouced in aselo-webchat-react-app/src/components/forms/formInputs/ (Input.tsx, Checkbox.tsx, Select.tsx and DependentSelect.tsx), add UI tests to assert the components render and behave properly:
  • Given a definition, a handleChange function and the rest of the required props:
    • Components render with it's corresponding label.
    • If error is not null, error message renders.
    • onBlur event triggers the handleChange function.
    • For the DependentSelect, assert that when the "dependee" value changes, the "dependent" select is blanked.

[Copilot]

@gpaoloni I've opened a new pull request, #3976, to work on those changes. Once the pull request is ready, I'll request review from you.