Add additional confirmation to link price changes and airplane purchase for significant changes

[k2-99]

UX improvement to help reduce the chance for users to make accidental changes, like unintentional price changes or larger than desired airplane orders. To accomplish this, I added a check box when a 'significant' event is detected (more below) and disable the purchase/confirm buttons. I opted for a checkbox rather than a button to intentionally disrupt the standard UX (e.g., like if a button were used) to help break any tunnel vision that occurs (e.g., when trying to quickly make lots of price changes back to back). On check, the purchase/confirm buttons are re-enabled. Feel free to tweak any values, I opted for a somewhat arbitrary 50% threshold. Same for the label wording, feel free to adjust.

Airplane Purchase

UX when a 'significant'(purchase price >= 50% of available cash) airplane purchase is detected:

Link Price Change

UX when a 'significant' (any of eco/bus/first percent price change >= 50%) price change is detected:

[patsonluk]

👋🏼 Many thanks for the code contribution again! Sorry about the delay of reviewing. Here are my thoughts 😊

1. I agree with the intention of disrupting UX flow. However the new check box does seem a bit "out of place" to me 😅 . Would it be possible to create a new modal and have a check box so user have to click and confirm?
2. For same look and feel, I would propose reusing the promptConfirm function in main.js, but expand the function. Perhaps have an alternative function/extra param to indicate whether we want extra check box check (to avoid changing existing invocations). We can modify the existing #confirmationPrompt html to support an optional checkbox validation
3. Perhaps we can also introduce a function like conditionalPromptConfirm(checkFn) which only call promtConfirm if the condition is fulfilled. So in your case, the checkFn will either be price change check or airplane purchase check
4. Minor nit for $('#linkConfirmationModal div.updating.price').text('$' + futureEconomyPrice + " / $" + futureBusinessPrice + " / $" + futureFirstPrice), we can use toLinkClassValueString(entry.price, '$') for more consistent handling
5. I assume in ur current PR, there will be change to the index.scala.html too? Perhaps it's not commited yet? Anyway, if we are going with the proposal, then the html change could look quite different

[k2-99]

Sure thing! promptConfirm is quite handy, didn't notice it before, thanks! And sorry, yeah must have missed adding the index.scala.html when trying not to add my application.conf and the API keys 😅

Some questions so I'm understanding your idea right:

For the case where a change (route or airplane purchase) is not 'significant':

• No change to prod UX

For the case where Update Route has a 'significant' change:

1. User is displayed the Update Route modal with Confirm and Cancel buttons visible/enabled.
2. On Confirm Click: If 'Significant' Threshold is met, display a new modal similar in look and feel to promptConfirm
3. This Modal just has a helpful text and then a Confirm and Cancel buttons, similar to this mock:
   1. 
4. On confirm, the original intended action is taken (e.g., actually update the link)

And then similar logic for the aircraft purchase.

Let me know if that's what you had in mind! (I was getting slightly confused if you also wanted a checkbox on the promptConfirm modal as well)

[patsonluk]

Sure thing! promptConfirm is quite handy, didn't notice it before, thanks! And sorry, yeah must have missed adding the index.scala.html when trying not to add my application.conf and the API keys 😅

Some questions so I'm understanding your idea right:

For the case where a change (route or airplane purchase) is not 'significant':

• No change to prod UX

For the case where Update Route has a 'significant' change:

1. User is displayed the Update Route modal with Confirm and Cancel buttons visible/enabled.

2. On Confirm Click: If 'Significant' Threshold is met, display a new modal similar in look and feel to promptConfirm

3. This Modal just has a helpful text and then a Confirm and Cancel buttons, similar to this mock:

   1. 

4. On confirm, the original intended action is taken (e.g., actually update the link)

And then similar logic for the aircraft purchase.

Let me know if that's what you had in mind! (I was getting slightly confused if you also wanted a checkbox on the promptConfirm modal as well)

Looking good!

For the prompt dialog, perhaps we can put a number as a part of the message? Having a number there could perhaps catch player's attention better? 😊