Repos that we’ll change

Whitelabel CMS: https://github.com/rbilabs/intl-whitelabel-cms - Connect your Github account

Whitelabel App: https://github.com/rbilabs/intl-whitelabel-app

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

https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/branch/vHkAnCCKjzCGg7ibeurVLW/Popeyes?type=design&node-id=6154-20378&mode=design&t=rI0nV0lqvOB2IWeF-0

Solution proposal

When the customer makes a purchase that contains Refill, the Order will return a Hash that must be presented in the form of a QRCode to the user, with this QRCode, the user will be able to point to the soda machine and release the product.

The hash value must be simulated in Storage with the key RBI::ORDER_REFILL_ID, the backend implementation will put this information into Storage.

Path: workspaces/frontend/src/utils/local-storage/constants.ts

Task summary

Intl Whitelabel CMS:

• Task 1 - Create Sanity settings

Intl Whitelabel App:

• Task 1 - Create a Feature Flag

• Task 2 - Update Whitelabel-Graphql - Sanity settings

• Task 3 - Add new icons

• Task 4 - Create a Bottom Sheet with QRCode on Home Page

• Task 5 - Create componente to show QRCode in Recent Orders and Finish Order

• Task 6 - Validations of durations of QR code - Recent Order

• Task 7 - Validations of durations of QR code - Home Page

• Task 8 - Validate Sanity if save hash in LocalStorage (back-end necessary)

Tasks breakdown

Intl Whitelabel CMS

Task 1 - Create Sanity settings

• Configuration of service modes (intl-whitelabel-cms)

  • Should to be create a new feature in Marketing Content / Features/ Feature QR Code Refill Drinks

  • Should create settings to service mode. (pick-up, diner, etc)

  • Should create two new field time to Bottom Sheets and Recente Order in minutes.

  • Should to be create a new feature in Marketing Content / Features/ Feature QR Code Refill Drinks / List of stores

    • Should create a new field items to set restaurants.

    • Should create settings to service mode.

    • Should create two new field time to Bottom Sheets and Recente Order by service mode in minutes.

Intl Whitelabel APP

Task 1 - Create a Feature Flag

• New feature flag for front-end

• New feature flag for back-end

Task 2 - Update Whitelabel-Graphql - Sanity settings

• Update Graphql (intl-whitelabel-graphql)

Task 3 - Add new icons

• Should add new icons to QRCode components (only whitelabel-app)

Task 4 - Create a Bottom Sheet with QRCode on Home Page

• Create a component BottomSheets in the folder workspaces/frontend/src/components/

• Add this new component in path: workspaces/frontend/src/components/layout/index.tsx - but this component just can show in home page, so we can know if in home page with code const isHomePage = window.location.pathname === '/';

• Should create a new component to show QRCode with hash value, this hash must get the Storage using a key

• Should use QRCode component in workspaces/frontend/src/components/qrcode/qr-code.tsx

Gravação de Tela 2023-08-02 às 15.06.54.mov

Acceptance Criteria

• Display Bottom Sheet with QR only on home screen

• Show this component just has HashCode in LocalStorage

• Show this component while the time configured in sanity does not expire

• Show this component just Home Page

• Show this component if new feature flag “ENABLE_QRCODE_REFILL" is activated.

• Expand content on click

• The Start Order should appear just above the bottom sheet, but when the bottom sheet is expanded the start order button should be overlaid by the bottom sheet and the background has to be obscured, to highlight the qrcode. Attention, the POC don’t have this comportment, so we need to implement this.

  

• Feature flag ENABLE_BOTTOM_SERVICE_MODE must continue to work, because this flag active other component in footer.

• Should show this QRCode only on mobile devices.

POC

• https://github.com/rbilabs/intl-whitelabel-app/pull/1693

Task 5 - Create componente to show QRCode in Recent Orders and Finish Order

• path: workspaces/frontend/src/pages/account/account-orders/index.tsx

• path finish order: workspaces/frontend/src/pages/order-confirmation/order-confirmation.tsx

• Should create a new card component in Recent Order to show QRCode with hash value, this hash must get the Storage using a key

• Should use QRCode component in workspaces/frontend/src/components/qrcode/qr-code.tsx

Acceptance Criteria

• Show a new component with QRCode information in Recent Orders

• When clicking QRCode icon it should show modal with QRCode with hash value

• Should show this QRCode only on mobile devices.

• Show this component if new feature flag “ENABLE_QRCODE_REFILL" is activated.

POC

• https://github.com/rbilabs/intl-whitelabel-app/pull/1682

Task 6 - Validations of durations of QR code - Recent Order

• if hash is expired, should not show on the QRCode card

• Should not removed hash the LocalStorage

• The order must have status equal to INSERT_SUCCESSFUL or UPDATE_SUCCESSFUL

• The updateAt field in the Order must be the calculation basis

Task 7 - Validations of durations of QR code - Home Page

• if hash is expired, should not show bottom sheet

• Should not removed hash the LocalStorage

• The order must have status equal to INSERT_SUCCESSFUL or UPDATE_SUCCESSFUL

• The updateAt field in the Order must be the calculation basis

Task 8 - Validate Sanity if save hash in LocalStorage (back-end necessary)

• After finishing Order, must save hash in LocalStorage, according to service mode settings

• RBI::ORDER_REFILL_ID key in LocalStorage

Unnecessary tasks

Task 2 - Create Shared Schemas

• Should settings schemas to service mode and duration times (Bottom Sheets and Recent Orders). (intl-sanity-shared-schemas)

• Integration intl-sanity-shared-schemas with intl-whitelabel-cms:

  • Checkout na main

  • Git pull

  • yarn build

  • git tag com a versão nova

  • git push das tags (git push --tags)

  • npm publish