UI - whatever is needed

[sienna-oldaccountdontuse]

This ticket is to add the staff payment component and functionality to Namerequest UI. See designs for details.

• New staff payment tab after the payment summary modal
• When you close the staff payment modal, you still go back to the previous modal

DEV NOTES

• Update design of current component to match this comp .
• Hide the line under "No fee" option and the "Priority" ($100) checkbox.
• Transition from Confirm Payment modal screen to Staff payment modal screen - slide the content sideways (like it does moving between the submission details screens in NR), the staff payment screen needs to grow taller to fit its longer content.
• Modals should have a scroll bar only if/when it doesn't fit vertically into a user's browser window.
• After staff clicks "submit name request", a success modal shows. Remove this success modal for staff (if possible, if its lots of work don't do it).
• When the staff user clicks "Exit Payment" or "x" at top right of modal, they are sent back to previous modal.
• This implementation applies to the main (NR) payment flow. It does not include the "upgrade" payment flow.

[severinbeauvais]

obsolete comment deleted

[severinbeauvais]

Test Notes

1. Verify that only users with staff role see the Staff Payment dialog after they click "Continue to Payment". (Other users go to PayBC directly.)
2. Verify that staff clicking "Continue to Payment" goes to Staff Payment dialog.
3. Verify that clicking "Close" closes the Confirm Name Request dialog.
4. Verify that clicking "Submit Name Request" submits the name request. (ATM this goes to PayBC. Eventually this will reroute to existing NR page.)
5. Verify that clicking "Exit Payment" goes back to Confirm Name Request dialog.
6. Verify that staff cannot submit name request if a staff payment option is not selected/completed. (ie, validation)

FUTURE: verify that clicking "Submit Name Request" reroutes to existing NR page (see #7653)

[severinbeauvais]

@tlebedovich @forgeuxGH5 This ticket is now implemented in Dev (where the feature flag to enable it is ON). Please have a look.

[severinbeauvais]

@tlebedovich

This feature is now in Dev; please have a look. If OK, please move this ticket to RFQA.

There is outstanding (blocked) work needed for this feature. I have created ticket #7653 for that to reduce confusion between part 1 (this ticket) and part 2 (future), state changes, reviews, etc.

[tlebedovich]

Thanks @severinbeauvais - this part of the ticket looks good, I will move onto QA

[tlebedovich]

@severinbeauvais Waiting to talk with Scott , but in the meantime I noticed a couple small items after a longer look;

1. If you hit the "No Fee" option and then the Submit Name Request button, for some reason all of the field hints display (and the exit payment button goes gray)

2. We'd like to trigger field error validations when the user hits the Submit Name Request button versus doing pre-emptive errors when a user selects a payment option.

[tlebedovich]

@severinbeauvais - Final comments from Scott - now that he has seen this working;

1. please change "Exit Payment" button to say "Back" and move to the left of the submit button

2. please have the X on the payment screen also close the modal (versus going back to the first screen)

3. we noticed a little jump in height of the white modal box when sliding from one to the other. This is low priority.

[severinbeauvais]

If you hit the "No Fee" option and then the Submit Name Request button, for some reason all of the field hints display (and the exit payment button goes gray)

This was a deep, latent bug (as I am reusing a shared component), but I fixed it.

We'd like to trigger field error validations when the user hits the Submit Name Request button versus doing pre-emptive errors when a user selects a payment option.

Similar problem to above. Fixed.

please change "Exit Payment" button to say "Back" and move to the left of the submit button

Done.

please have the X on the payment screen also close the modal (versus going back to the first screen)

Done.

we noticed a little jump in height of the white modal box when sliding from one to the other. This is low priority.

This is due to a built-in Vuetify transition (that I haven't been able to slay) because the tabs are different heights. If I make both tabs the same height then the problem goes away but actually the first tab is variable height (due to 1/2/3 requested names and possibly different addresses or payment details), but then the button layout on the second (tall-for-no-reason) tab looks weird.

^^^ This transition looks less weird if there are multiple names, tall addresses, or extra payment details.

Note that I have not yet committed/merged these fixes.

[severinbeauvais]

It's taking another half day to fix up the (pre-existing) validations.

[severinbeauvais]

Validation Tests

(When logged in with staff role.)

1a. Staff Payment tab initially has no radio button selected.
1b. Clicking X button and returning to SP tab has no radio button selected.
1c. Clicking Back button and returning to SP tab has no radio button selected.

2a. Clicking Submit Name Request with no radio button selected shows red error bar.
2b. Clicking X button and returning to SP tab has no error bar.
2c. Clicking Back button and returning to SP tab has no error bar.

3a. Clicking Cash or Cheque does not show validation message.
3b. Clicking Submit Name Request with no RSN shows validation message.
3c. Entering valid Route Slip Number hides validation message.
3d. Clicking Submit Name Request submits the name request (*).

4a. Clicking BC Online does not show validation message.
4b. Clicking Submit Name Request with no BCOL and no DAT shows validation messages.
4c. Entering valid BC Online Account Number hides BCOL validation message.
4d. Entering valid DAT Number hides DAT validation message.
4e. Clicking Submit Name Request submits the name request (*).

5a. Clicking No Fee does not show validation message.
5b. Clicking Submit Name Request submits the name request (*).

6. When any validation message is shown, selecting another radio button hides it/them.

7. With staff payment data entered, closing the tab and returning to SP tab shows the data.

(*) Other ticket to bypass PayBC may or may not be implemented yet. this is now implemented and working

[severinbeauvais]

This is ready for final UX assurance (in Dev). If OK, please move to RFQA. Thanks!

[sienna-oldaccountdontuse]

@tlebedovich ready for you!
We won't be demoing end of sprint.

[tlebedovich]

above updates look good. moving to QA.