Show pop-in alert when navigating away from /summary page without placing order

[RachL]

Description

- As a: guest or loggedin shopper - On page: /checkout/summary - I want to be able to do:

Hubs are reporting that users believe they've placed an order, but have instead navigated away from the checkout/summary page without clicking 'complete order'.

We want to add a modal soft warning when users attempt to navigate away from this page without clicking the complete order button (i.e. click browser back button/close browser/reloading/navigate away from page)

Creating a designed modal was desired, but it can't cover all situations, so we will use the browser default popup: (See BeforeUnloadEvent )

Acceptance Criteria & Tests

1. Leave summary page by closing or reloading or clicking a button
2. Check the modal appears and the button works
3. Check going backwards in the checkout process (step 1 or 2 or carf page) does not trigger the message

do it with a guest user and loggedin user

Add automated specs in /spec/system/

[NickIkenma]

Hey @RachL I'm linking a dedicated design I made for the pop-up alert modal here: https://www.figma.com/file/QMLtSme5zWp5UOunWOEZgB/Order-Cycle?type=design&node-id=9%3A6&mode=design&t=3hezHWn5hkPdqJn0-1

Edit: I changed the colours back to the shop front colours -- the orange palette.

[FionaDL]

Hello! Could I pick this up?

[sigmundpetersen]

Hi @FionaDL sure, thank you! 🙂 Don't hesitate to ask if you need any help!

[FionaDL]

Hey @sigmundpetersen my colleague and I tried to work on this together this week, but we don't think we will be able to pull it off :( Would you mind un-assigning us?

[sigmundpetersen]

No worries @FionaDL thank you for the feedback. Please reach out if you find another issue you would like to work on instead.

[AkinAgbejoye]

Hi. I would like to pick this issue.

[sigmundpetersen]

Hi @AkinAgbejoye sure, thank you! 🙂 Don't hesitate to ask if you need any help!

[RachL]

hello @AkinAgbejoye I hope you are doing well. I'm just checking in: are you still working or planning to work on this?

[AkinAgbejoye]

I am really sorry, I have serious difficulty in setting up the project on my windows and even linux, you can assign the task to another person. I will revisit the whole stuff soon. Thanks and kind regards.

On Mon, Nov 20, 2023 at 2:52 PM Rachel Arnould @.***> wrote:

hello @AkinAgbejoye https://github.com/AkinAgbejoye I hope you are doing well. I'm just checking in: are you still working or planning to work on this?

— Reply to this email directly, view it on GitHub https://github.com/openfoodfoundation/openfoodnetwork/issues/11600#issuecomment-1819103344, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS4J4VJXZ6QR3DIABZ5OZH3YFNOANAVCNFSM6AAAAAA5MPEBBWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJZGEYDGMZUGQ . You are receiving this because you were mentioned.Message ID: @.***>

[dacook]

Hi @RachL , I'm not sure that it's possible to achieve this as desired.

We want to add a modal soft warning when users attempt to navigate away from this page without clicking the complete order button (i.e. click browser back button/close browser/reloading/navigate away from page)

The easiest way to do this is with a general popup message provided by the browser (see examples below). Some things we can maybe intercept to provide the modal with some custom Javascript, but I'm not sure it's worth it. On my knowledge (but more research is necessary):

1. click browser back button: could be possible with browser history API, though I'm not sure if it's practical
2. close browser: not possible
3. reloading: maybe with history API?
4. navigate away from page
   • click a link on the page: yes, possible
   • enter in a url or select a bookmark: no, not possible

Example browser popups:

I'd suggest that we first implement the basic browser popup which can cover all cases, then consider adding the modal for some specific cases. What do you think?

[dacook]

@jameleu are you able to add any details here or confirm if I'm right?

[jameleu]

@dacook Yes, I agree with you. 1., 4. I agree. 2.I think using an event listener with "beforeunload" would work, but I think refreshing should not have a modal pop up since most people refreshing would be refreshing on accident or due to wanting to restart processes on the webpage, so they probably do not intend to leave the checkout yet. I think only when they do intend to leave the checkout should we tell them that they should not leave yet if they still plan to buy their cart.

3. I agree since tracking closing the browser is not possible since browsers, for security reasons, don't provide reliable way to handle this event to prevent misuse.

I think implementing the basic browser popup is the best solution so far since a lot of other shopping websites I use simply utilize that and it gets my attention and allows me to reconsider my actions sufficiently. I will get started on that.

[dacook]

Thanks jameleu. @RachL, would you support changing this issue to implement the basic browser popup?

[RachL]

I guess it's better than nothing... so okay for now 👍

[sigmundpetersen]

Hi @jameleu 👋 Did you want to continue with this, implementing the basic browser popup?

[dacook]

@RachL There are two possible tasks we can do:

1. Attempt the designed modal. We can only cover some cases with this (as per my comment)
2. Add a browser modal. This can cover all cases, but doesn't look nice and has a very general message.

Perhaps we can create a separate issue for each, or just choose one and update this issue. I'll let you decide.

[tschumilas]

would both of the above approaches (designed modal or browser modal) result in the message being blocked if the shopper has a browser pop-up blocker enabled? I'm asking because I think this is the problem. Today, if a shopper is placing an order, and an item goes out of stock, a error appears that says "An item in your cart has become unailable, please update the selected quantities". But shoppers are either not understanding, or not seeing that message. So they cannot checkout. We can translate the message and word it more strongly like: 'You must remove out of stock items from your cart before you can checkout'. But I"m just not clear - will they even see that message if their browser is blocking popups? (sorry I don't understand the difference between a popup and a modal....)

[dacook]

In general, popup blockers will block something that pops up without a user interaction. So I think either of the suggestions on this issue are fine. But the out of stock popup you mentioned could potentially be blocked.

I couldn't say conclusively, but I had a look at the description of Poper Blocker, a popular browser extension, and it sounds like it would only stop that popup if you had intentionally configured it to.

I would dare say that it's much more likely that people ignore, or don't see the stock popup. That information should appear on the page the when the checkout fails, if it's not, I think we should address that in a new issue.

[dacook]

I've updated the description to use the basic browser popup instead of the designed popup.

[wandji20]

I would like to try this one