Frontend - Free refill QR code

Owned by Augusto de Souza, Jonatan (Deactivated)
Last updated: Aug 14, 2023 by Hellen Rodrigues Magalhaes
6 min read

 

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=6093-109679&mode=design&t=1Cso03ebgO5HL5jz-0

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

https://www.figma.com/file/qVg9p3t3OLfcuQ71ZhI8ti/Guest-App-DS?type=design&node-id=7242-83992&mode=design&t=a1o8jn4J1C9oCGC5-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::FREE_REFILL_ORDER_INFOS, 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 a new Sanity document for QR Code settings

 

Intl Whitelabel App:

  • Task 1 - Create a Feature Flag

  • Task 2 - Update Whitelabel-Graphql - Sanity settings

    • Task 3 - Create a new hook for the new sanity query

  • Task 4 - Add new icons

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

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

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

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

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

Tasks breakdown

Intl Whitelabel CMS

Task 1 - Create a new Sanity document for QR Code settings

Example for the Sanity UI components order and behavior

 

  • Important: talk with Gabriel or Diego (UX team) to define:

    • Title and description for the number fields

    • Description for Serice Modes block

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

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

  • We can follow our solution like the feature menu: /schemas/features/documents/menu.tsx

DOD-LIKE

  • Show number fields only if at least one service mode is selected

    • Number fields are required when one service mode is enabled

    • The user can’t publish the document until fill in the required fields

  • Number fields should be type number

  • Create a new object for the service mode part and reference it in the document

 

Intl Whitelabel APP

Task 1 - Create a Feature Flag

  • New feature flag for front-end: ENABLE_QRCODE_REFILL

  • New feature flag for back-end (we’ll make this if necessary)

 

Task 2 - Update Whitelabel-Graphql - Sanity settings

  • Update Graphql (intl-whitelabel-graphql)

  • Example of graphql query: src/queries/sanity/feature-menu.graphql

  • Example of a query that have the service mode structure that we’ll need: src/queries/sanity/fragments/add-on-section.graphql

    • We’ll need to create a new fragment for our service modes fragment like this example: src/queries/sanity/fragments/add-on-section-service-modes.graphql

 

DOD-LIKE

  • Codegen should not be broken and apollo:generate command should work without problem after add the new graphql files

 

Task 3 - Create a new hook for the new sanity query

  • The creation of a new hook that we’ll use to get the data from the new Sanity document

  • Example of a hook that uses a query from Sanity: src/hooks/use-feature-menu/use-feature-menu.ts

  • The hook should be created inside the src/hooks folder

 

DOD-LIKE

  • Create the hook in the correct folder

  • Create an index file to export the hook and a file with the hook name for the code itself

  • If necessary or if makes sense the unit test needs to be implemented

  • To test and validate: Call the new hook at home (layout index) and see if the query is working before opening the PR (should get data from Sanity)

 

Task 4 - Add new icons

  • Important: We’ll have different icons for each brand. With this in mind, we’ll need to follow this example: src/components/icons/add-new-credit-card

  • Get the icon as SVG from Figma

  • Put SVG code in https://react-svgr.com/playground/ and get the JSX result that will be used on the Whitelabel code

  • The icon should be in src/components/icons

    • Create a new folder for the new icon with a semantic name

    • Example of an icon: icons/book/index.js

      • We need to pass the props to the icon like in this example. The desired result is to have a black icon. The responsibility of setting the color will be where the icon is used

    • Add the new icon in /src/components/icons/icons.stories.tsx

  • The icon for QR Code should use the black from DS

  • All colors should be from DS

 

DOD-LIKE

  • The icon is generic and black

  • Dev is able to pass the desired color when using the icon (through styled component, etc)

 

Task 5 - 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

 

 

DOD-LIKE

  • 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 doesn’t have this comportment, so we need to implement this

  • Feature flag ENABLE_BOTTOM_SERVICE_MODE must continue to work because this flag actives another component in footer

  • Should show this QRCode only on mobile devices

POC

 

Task 6 - Create a component to show QRCode in Recent Orders and Finish Order

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

  • Success page path: 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

DOD-LIKE

  • Show a new component with QRCode information in Recent Orders and Success page

  • 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 the new feature flag “ENABLE_QRCODE_REFILL" is activated

POC

ATTENTION: There are some layout convergencies between Figma design and the current layout for the other components on Order Confirmation page, which makes FreeQRCodeRefill component stand out for those explicit differences. However @Schroer, Gabriel (Deactivated) and @Hainzenreder, Diego agreed to maintain it as it is, because they will standardize everything else later.

Final result:

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

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

  • Should not remove 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

    • Today date - updateAt (order) > Sanity time

      • Hide component

    • Validate with @Raphael Ferreira Gomes: add logic to have a local counter to hide the component

 

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

  • if hash is expired, should not show bottom sheet

  • Should not remove 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

    • Today date - updateAt (order) > Sanity time

      • Hide component

    • Validate with @Raphael Ferreira Gomes: add logic to have a local counter to hide the component

 

Task 9 - Validate Sanity if hash value is saved in LocalStorage (back-end necessary)

  • After finishing Order, must save hash value 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