During the Tech Discovery of the feature Free Refill Drinks (QR code), we identified two possible approaches of solution.
The first one is based on partners described below under Approach 1. This solution intends to generate the QR code based on a encoded hash that the POS Vender (Winrest) will respond once the order is sent to the kitchen (Commit Order and Commit Order Callback). With this, we just need to change backend APIs to store this info in the database (DynamoDB) and then enhance WL to read this info.
The second approach is a standalone solution and is described below in Approach 2 section. This solution relies on a enhancement of the internal configuration of the items and stores, so that they will have an identifier to mark them as eligible to generate the hash/refill drink QR code or not. Said that, WL must read this info from the Order items/store and apply the business logic.
Approach 1 : Refill drinks code generated based on partners
Sequence Diagram
...
Datadog example
CloudWatch Log example
Approach 2 : Refill drinks code generated without partners (standalone)
Sequence diagram
...
Sanity
Inclusion of item refill drink indicator
...
Inclusion of Resturant refill drink indicator
...
Figma (UX)
...
What’s the API that whitelabel needs to call to receive as response the hash to be converted into QR code? What is the response field? Any example?
Hash: 2bb4193529026315ce6ca36dbc6831ef
What’s the content of the hash?
This field is the result of several fields encrypted with a password provided by the vending machine team: Example:
Store ID: 103
Transaction ID: 84970387
Date and time stamp: 20211031013000
Can the hash content be generated inside RBI app?
Most probably not. It has the logic to decide whether or not the purchase has a drink eligible for refillYes, it can. But we need the the secret to generate the encoded hash that the vending machine will decode. Besides, we need to configure all items and all stores that grants the right of refill drinks. All the logic would be internal.
What’s the handle component (sticker) of the bottom?
We checked existing storybook component, but no one looks good for it
Proposal: create a new one:
Example :
View file name App.css View file name App.js
What are the icons for 'refill drink' and qr-code ?
Follow Menu Brand Icon approach to keep consistency and add new icons in ctg-components-library and import it in Whitelabel :
View file name Free Refil Icons.zip
...