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
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 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
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
Intl Whitelabel APP
Task 1 - Create a Feature Flag
New feature flag for front-end:
ENABLE_QRCODE_REFILLNew 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.graphqlExample of a query that have the service mode structure that we’ll need:
src/queries/sanity/fragments/add-on-section.graphqlWe’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:generatecommand 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.tsThe hook should be created inside the
src/hooksfolder
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
Call the query at home 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
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 codeconst 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_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
path:
workspaces/frontend/src/pages/account/account-orders/index.tsxpath 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
DOD-LIKE
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
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
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
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_IDkey 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 mainGit pullyarn buildgit tag com a versão novagit push das tags (git push --tags)npm publish
Add Comment