Repos that we’ll change
...
...
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.
...
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
...
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
...
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
...