[L] Public - Hold Timer exit or time out

[Dianadec]

Description:

As a park visitor, when I try to navigate away from the DUP booking page with a timer, I see a warning so that I know my pass hold will be lost when I leave the page.

Mural link reference of workflow/notes: https://app.mural.co/t/dds5274/m/dds5274/1702399466586/47a2e83a2dc605bac12a96c89a02bdcafcfa3932?wid=0-1712264093757

Acceptance Criteria:

ARE YOU SURE Given that I am a parks visitor When I am on the registration page (Contact Information) and I exit or click back mid-way Then I see a warning message that tells me my hold pass will no longer be held when I leave.

Given that I am a parks visitor When I am on the registration page (Contact Information) and I refresh the page Then I see a warning message that tells me my hold pass will no longer be held when I leave. Note: Not sure if this is what we decided for Refreshing the page. Might have a different thing for Mobile view since the pull down from the top automatically refreshes

TIME'S UP Given that I am a parks visitor When I am on the registration page (Contact Information) and I don't complete the form within the time limit Then I see a message that the timer has run out and my pass has been put back into the booking pool and I need to try and make a new booking.

Development Checklist:

• [x] Warning message displayed upon:

  • [x] user canceling mid-way because they no longer want the pass
  • [x] user clicks the back button
  • [x] Note: browser back button takes them back to the home page

• [x] If timer times out before user clicks submit the will be sent back to the parks select a pass type page, item being held will return to inventory, a notice will display telling them they were not successful in booking their pass in the allotted time and have lost their pass

• [x] text will display - You have not completed your booking within the time allowed, please try again.

• [x] they will be returned to the parks select a pass page

• [x] if user is successful booking a pass within the allotted time they will be taken to the check out screen and pass is removed from bookable inventory

Figma link: https://www.figma.com/file/2lQW8InOa0lEiUiMeGmeNC/Day-Use-Pass?type=design&node-id=4077%3A6877&mode=design&t=YbmeWNjWNn9tCaMc-1

• [x] If user refreshed page during timed session, timer will be cancelled, user will be sent back to parks select a pass page, item being held will be returned to inventory
• [x] if user click back button during timed session, a warning will display, if user selects OK they will be returned to the parks select a pass type page, timer will be cancelled and item being held will return to inventory
• [x] if user click back in browser during a timed session, a warning will display, if user selects OK they will be returned to the parks select a pass type page, timer will be cancelled and item being held will return to inventory
• [x] Text will display - If you leave this page, you will lose any passes currently being held for you. Are you sure you want to leave?

Figma link: https://www.figma.com/file/2lQW8InOa0lEiUiMeGmeNC/Day-Use-Pass?type=design&node-id=4077%3A7280&mode=design&t=YbmeWNjWNn9tCaMc-1

Dependencies

• Blocked by
• Blocking

Wireframe(s):

Workflows:

Definition of Ready (Note: If any of these points are not applicable, mark N/A)

• [ ] User story is included
• [ ] User role and type are identified
• [ ] Acceptance criteria are included
• [ ] Wireframes are included
• [ ] Design / Solution is accepted by Product Owner
• [ ] Dependencies are identified (technical, business, regulatory/policy)
• [ ] Story has been estimated (under 13 pts)

Definition of Done

• In progress:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] UI meets accessibility requirements
  • [ ] Unit tests are written
  • [ ] Work is traceable in GitHub
  • [ ] PR linked to ticket number
  • [ ] If needed/required - Dev adds flag/label to highlight any migration steps necessary prior to PROD deployment
• Code review:
  • [ ] Code is peer reviewed and has passed CI/CD tests
• QA:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] Code is potentially shippable to the production environment
  • [ ] Functional features have been tested and passed by QA
  • [ ] UI components tested by designer
  • [ ] Code is deployed to PROD when moved to 'done' column (unless requested otherwise by PO)
• PO Review:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] Reviewed and approved by Product Owner

Notes:

[manuji]

Tested on TEST: Pending

• verified that when I click the back option from the Contact information page, I get an alert with the error message "If you leave this page, you will lose any passes currently being held for you. Are you sure you want to leave?".
• Verified if I use the browser back option to navigate away from the Contact Information page, I get an alert with the error "If you leave this page, you will lose any passes currently being held for you. Are you sure you want to leave?".
• Verified when the user runs out of the time allocated, an alert is displayed to let the user know about it.
• Refer to the issues below

1. I don't get the alert with the confirmation message "If you leave this page, you will lose any passes currently being held for you. Are you sure you want to leave?" when I refresh the page while being on the Contact Information page.

3. The user message displayed when I try to navigate away from the booking page shows quotations -> Figma has no quotes beside the alert message. Figma:

Test environment:

3. The timer starts from 7:12 instead of 7 minutes. if the system clock isn't set to update automatically resulting extra time for some users.

https://github.com/bcgov/parks-reso-public/assets/65190263/b6c3249d-d44e-44ff-a84c-66bfb9699214

4. When a booking process is cancelled during the 7 minute window, the passes won't revert back to the pool, instead it is held in the background even after user releases them from the booking process.

https://github.com/bcgov/parks-reso-public/assets/65190263/17a2ac74-28e6-4807-8058-68134c49d656

[cameronpettit]

@manuji @meyerdarcie @Dianadec I can answer these:

I don't get the alert with the confirmation message "If you leave this page, you will lose any passes currently being held for you. Are you sure you want to leave?" when I refresh the page while being on the Contact Information page.

Based on what I can find, JavaScript doesn't allow you to change the prompt text when you are performing a navigation away from somewhere within your current site, so whether you type in a new url, close the window, or reload the page, the browser thinks you are navigating away from (and back to) the current site. In these cases the browser has default text that displays, such as 'Changes you have made will not be saved".

Alternatively, when you click 'back', the browser recognizes that the previous page also belongs to the same website, so we are able to intercept that navigation with an Angular guard and display the custom text in that scenario.

TL;DR: this issue isn't impossible to fix but it would require significantly more effort than it's worth to solve (custom guard logic, custom modals, etc).

https://stackoverflow.com/questions/3221161/how-to-pop-up-an-alert-box-when-the-browsers-refresh-button-is-clicked

The user message displayed when I try to navigate away from the booking page shows quotations -> Figma has no quotes beside the alert message.

Again, a browser limitaion. JavaScript alert() may show the text in quotations based on the browser.

The timer starts from 7:12 instead of 7 minutes. if the system clock isn't set to update automatically resulting extra time for some users.

This has been solved - a user can manually set their system time (and by extension their browser) any time. It doesn't change our timeouts, which are synced to UTC. The pass will expire at the correct time whether the front end correctly displays the time or not. If the user has manually set their system clock, that is not something we can control.

When a booking process is cancelled during the 7 minute window, the passes won't revert back to the pool, instead it is held in the background even after user releases them from the booking process.

This is functioning as intended. To prevent slamming our API, we don't listen for events where the user leaves the page or otherwise does not book a pass. Rather, every time a user tries to book a pass, the total number of available passes is decremented. If the pass is not booked, there is a cronjob that looks for expired passes and returns them to the pool. The cron runs about every 10 minutes (I think), so the longest a pass will exist in a state where it needs to be returned to the pool is ~17 minutes, but it will likely be much less than that.

The 17 minute scenario:

• (t=0:00) cron fires, returns unclaimed passes to the pool. (t=0:00)
• (t=3:03) 3 minutes and a few seconds later, someone puts a pass in the hold timer and then immediately navigates away, losing the held pass. At this point, the pass cannot be booked by anyone.
• (t=10:00) 10 minutes after the first cron fires, the cron fires again and returns unclaimed passes to the pool. The pass that was booked in the previous step is not included in the collection of unclaimed passes because the JWT it was held with has not yet hit its 7m expiry.
• (t=10:03) a few seconds later, the held pass JWT hits the 7m expiry.
• (t=20:00) the cron fires a third time, this time as the held pass is expired, it is returned to the pool. At this point the pass can now be booked again.

[manuji]

@cameronpettit , thank for the detailed explanations, but the 4th issue gives false information to the users. Assume we only have 4 passes remaining and someone try to book 3 passes but then cancels it (won't put back right away to the pool), then the another person comes in and try to book the reming pass and he completes the booking process, to the other users who are looking for a pass will show the user message as "Full" even the facility is not fully booked.

FYI @JLWade any thoughts about this? In my opinion, I would like to get this fixed so we don't show false information to a user at any point.

[JLWade]

Sounds like the pass will be put back into the pool once that 7m timer runs out on it, is that correct? Or does the cancellation action put it back into the pool faster?

@meyerdarcie what do you think?

[marklise]

The design intentionally requires 7 minutes to reinstate a pass. This was deliberated in several meetings, highlighting the reasons we cannot rely on the front-end to reinstate passes. Beyond the 'happy path', we must also take security considerations into account.

[manuji]

I will leave this ticket in QA until a decision is made. Thank everyone!

[meyerdarcie]

Thanks @manuji and @cameronpettit - based on the security considerations that @marklise mentions, as well as confirmation that this feature is working as designed, let's move this forward. We can keep close eyes on it with ParkInfo to ensure we're not getting any related feedback from users.

[manuji]

Thank you @meyerdarcie , this ticket is ready for PO review.

[meyerdarcie]

Working as intended - moving to done.