Repos that we’ll change

...

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

Figma: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/branch/vHkAnCCKjzCGg7ibeurVLW/Popeyes?type=design&node-id=41096093-147585109679&mode=design&t=qfsQcFhawcNhDpIO1Cso03ebgO5HL5jz-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::ORDERFREE_REFILL_ORDER_IDINFOS, the backend implementation will put this information into Storage.

...

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

...

• 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

  • Create a new document in the features/documents for our new QR Code document

  • Add the new document into the schema and in other places (like the menu one)

  • Create a new object to be used as a reference and render the Service Modes

    • Example of a document that uses an object reference: https://github.com/rbilabs/intl-sanity-shared-schemas/blob/main/src/schemas/menu/objects/add-on-section-option.ts

    • Example of the object for service mode: https://github.com/rbilabs/intl-sanity-shared-schemas/blob/main/src/schemas/menu/objects/add-on-section-service-modes.ts

...

• 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

...

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

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

...

• 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

...