Sequence Diagram

https://lucid.app/lucidchart/2e8d5dc1-74c3-45f2-ad7d-45ae309a89ae/edit?viewport_loc=-595%2C627%2C3357%2C1850%2C0_0&invitationId=inv_a0954c87-16c5-4b55-b3ef-224665d8ce2e

Reference: https://euc1-dev-bk-partners-api.rbictg.com/docs/market/#tag/OrderWebhook/operation/webhookOrdersCommit

• Commit Order (sync)

• Commit Order Callback (async)

Considering a new optional string field to fit the POS hash (Vendor machine refill drinks) in the response.

To check with POS Vender if Fire Order

Datadog example

CloudWatch Log example

Figma (UX)

https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/branch/vHkAnCCKjzCGg7ibeurVLW/Popeyes?type=design&node-id=4109-147585&mode=design&t=qfsQcFhawcNhDpIO-0

Questions

• 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

• 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 refill.

• 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 :

• 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 :

• What are the impacts on Recent Order page?

  • This page can be reached via several flows. Left menu, Bottom menu (icons), deeplink account/orders), etc. The point is that, while refill drink is available, this screen should be incremented with a new component in the header. Additionally, a new modal should be created to display the QR code:

• How long should the QR code be visible?

  • It should be configurable in Sanity

    • Default: 4 hours for recent orders page and 1 hour for bottom sticker.

    • https://qa-plk-es-whitelabel-cms.rbi.tools/desk/marketingContent;features

      • Feature QR Code Refill Drinks / Refill duration / duration time for bottom sticker (new)

      • Feature QR Code Refill Drinks / Refill duration / duration time for recent order(new)

    • 

• For which service modes is it applicable?

  • 

  • Obs: there could be the possibility/need to have the service modes configurable in Sanity as well (ex: Curbside today is not included but could be done in the future) → to analyze effort

• What’s the logic to show the QR codes?

  • Bottom sticker QR code: During the modal transitions, while last ‘refill drink’ recent order time + bottom sticker duration time > current time.

  • Recent Order QR code: In recent order page rendering, while last ‘refill drink’recent order time + recent order duration time > current time

  • Obs: Refill drink order = Last order with POS hash. To be stored locally. Not in DB.

• Where will be defined the text messages?

  • Text message in lokalise:

  • 

• How to translate hash into visual QR code?

  • Example:

    • “Hello World” ->

      

  • Evaluate existing WL QR code component that already translates barcode

    • https://github.com/rbilabs/intl-whitelabel-app/blob/1011f86b0a57a098b6ba249d00c5a850178dc139/workspaces/frontend/src/components/qrcode/qr-code.tsx#L12

• If a customer makes an order from one platform, will it be available in another platform? Eg.1: Customer orders in Web and signs in Android. E.g2. Customer orders in Android and signs in IOS.

  • No.

• For which platforms will it be available?

  • IOS and Android. Web is out-of-scope.

• Depending on the service mode, customer can schedule when to take the order. Should the QR code be displayed anyway?

  • Yes. If it expires in bottom sticker, customer can still go to recent order page

Epic Breakdown

• Backend Services

  • Commit Order - 13

    • partners-service response - 5

    • database update - 8

  • Commit Order Callback - 10

    • partners-api request - 5

    • database update - 5

• Front-end

  • Place Secure Order

    • Get Order - 10

      • graphql - get order with refill drink hash - 5

      • database get order with refill drink hash - 5

    • Hook Refill Drinks - 37

      • Validate Get Order - check Refill Drinks hash - 5

      • Validate Service Mode (Sanity) - 8

      • Trigger bottom sticker - 8

      • New modal of QR code - 8

      • Convert hash to QR code - 8

  • Recent Order Page - 13

    • Hook Refill Drinks banner

      • Validate Orders

        • Read bottom sticker order - 3

        • Read Sanity Config (duration) - 5

        • Apply logic to show banner - 5

  • Layout (transition of pages) - 20

    • Check if there’s QR code order in cache - 5

    • Read Sanity config (sticker duration) - 5

      • Apply logic to show bottom sticker of QR code - 5

      • Add/Remove QR code order in cache - 5

• Sanity - 16

  • New Feature Refill Drinks - 8

    • Duration of bottom sticker - refill drinks

    • Duration of recent order - refill drinks

  • Configuration of service modes - 8

• Feature Flag - 3

  • New feature flag for front-end

  • New feature flag for back-end

• Testing - 34

  • Testing Plan

  • Dev - using mocks

  • QA, STG, PROD - using integration with Winrest

  • Validations in dynamodb

  • Validations of durations of QR code

    • bottom sticker

    • recent order sticker

  • Validation of the last order QR code

  • Validations using native devices

    • responsiveness

    • QR code reading