Offline orders confirmation

[filrak]

Current behavior:

Currently when we are offline and placing the order it's data is stored in indexedDB with transmitted: false property. After coming back online the app automatically checks if there are any orders with property transmitted set to false. If so it's sent to the server.

Desired behavior:

After coming back online and investigating that order wasn't transmitted to the server user should see modal asking for confirmation. It ideally should display the order data. The modal shopuld appear only if we reenter the website (for example from push notification) or browse the catalogue. If we are on Thank you page the order should be automatically transmitted like before.

Proposal solution

After investigating that there is an order to transmit and checking if order data is valid app should emit an event with order data as a payload. This event will be catched by confirmation modal which will display it's short summary and ask user if he wants to confirm the order. After clicking 'confirm' another event is emmited which is catched inside the order script (currently the one i linked from client-entry.js) and sends the order to the server.

For Thank You Page you can just emit the event that confirms order transmission automatically (teh same way its sent after clicking the button in newly created component)

You don't need to provide any UX for modal. Just create new component with a button that receives the order data from the event i described above and emits the event responsible for sending the order to the server after clicking the button (also described above). I'll handle the rest. You can place this component in App.vue

Developer should have possibility to turn on/off automatic transmission

Ideally the logic for placing the order from client-entry.js should be moved to a different place (core api module called 'order' - you can contact me in slack to discuss the details) but it's not mandatory - you can just modify the current code and i will extract it to other place by myself as completely different task.

Checklist:

• Prevent order from being automatically transmitted after coming back online (base it on events)
• Make sure that order is automatically transmitted if we are on Thank You Page
• Create event emitter responsible for emitting untransmitted order data after coming back online
• Create event listener responsible for sending the given untransmitted order to the server
• Create component responsible for order transmission confirmation just with the button
• Add possibility to turn on/off automatic order transmission

[phronesis]

Hi, @filrak just wondering why the desired approach is better? How does it provide a better user experience?
Secondly, would it be possible to have a configuration option as to the behavior in the event other implementations may prefer it to behave the way it currently behaves?