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
...
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_IDORDER_INFOS, 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 storesShould 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.tsxCreate a new document in the
features/documentsfor our new QR Code documentAdd 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-cardGet 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/iconsCreate a new folder for the new icon with a semantic name
Example of an icon:
icons/book/index.jsWe 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
...
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_MODEmust 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.tsxSuccess page path finish order:
workspaces/frontend/src/pages/order-confirmation/order-confirmation.tsxShould 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
...
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_SUCCESSFULThe updateAt field in the Order must be the calculation basisToday date -
updateAt(order) > Sanity timeHide 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_SUCCESSFULThe updateAt field in the Order must be the calculation basisToday date -
updateAt(order) > Sanity timeHide 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)
...