Repos that we’ll change
Whitelabel App: https://github.com/rbilabs/intl-whitelabel-app
Figma:
Solution proposal
In the Sanity went can set images of the product by Restaurant, Delivery or Kiosk
The White Label must show images of accord selected channel, Restaurant with delivered, Restaurant selected or without restaurant.
Restaurant selected.
Delivery
Acceptance Criteria
Overall goal:
The platform must allow assigning specific images to the products on the menu according to the purchase channel: home delivery, mobile ordering, kiosk and public menu.
The configuration of the images must be done from Sanity.
Platforms: Web, Android and IOS
Brands: all - PLK ES, BK ES and BK PT
Service modes: Home Delivery, Pick-up, Dine-in and Table Service
It also includes “Public Letter” → Public Menu → It means the menu NOT linked with any selected restaurant / delivery.
Regarding kiosk, impacts on kiosk app are out-of-scope, but we can add a slot image in Sanity for it (to be used in the future, although it’s not mandatory for development).
Images in scope:
Menu: Picker Combo and Item (also in the check-out and in the customization/extra)
Items.
Combo.
Items inside the Combo must show the changed images
Picker.
Items and Combos inside the Picker must show the changed images
In Section should not change image, example “Top Sales”
It should show correct image in Recent Order.
It should not change after the order ends.
It should show correct image in Checkout.
if a product is at the checkout and you change restaurants (Delivery → Restaurant), the image should change.
When you finish the order, it must show the correct image in the Add On section.
Should change image in Add Extra as well
Catalog Update: existing image configuration as fallback option and include new ones per channel in order to override it optionally.
Out of scope: localization and language
Task summary
Intl Whitelabel App:
Task 1 - Create a Feature Flag
Task 2 - Add imagesByChannels in Graphql
Task 3 - Add new interfaces and update.
Task 4 - Implement logic for show image by channel (function change image)
Task 5 - Implement function change image in the add-on section and add extra (Ketchup)
Task 6 - Replicate to menu legacy (To analyze)
Tasks breakdown
Intl Whitelabel APP
Task 1 - Create a Feature Flag
New feature flag for front-end:
ENABLE_IMAGES_BY_CHANNELS
Task 2 - Add imagesByChannels in Graphql
Should create a new graphql file to imagesByChannel
Update Combo Graphql to add imagesByChannel
workspaces/frontend/src/queries/sanity/fragments/combo.graphql
Update Item Graphql to add imagesByChannel
workspaces/frontend/src/queries/sanity/fragments/item.graphql
Update Picker Graphql to add imagesByChannel
workspaces/frontend/src/queries/sanity/fragments/picker-availability.graphql
Update Product List Graphql to add imagesByChannel
workspaces/frontend/src/queries/sanity/fragments/product-list-section.graphql
DOD-LIKE
Update Sanity Graphql with command yarn apollo-generate.
Task 3 - Add new interfaces and update
Link reference: https://github.com/rbilabs/intl-whitelabel-app/pull/1841/files#diff-3c5a6dd1f32b86cde31b8257a1e8332e9f8ccd97ae8931f47c64ad105103601c
File: workspaces/frontend/src/types/menu.d.ts
Should add new imagesByChannels interface with
imageDelivery,imageKioskandimageRestaurant.Should add imagesByChannel in
IPickerItemShould add imagesByChannel in
IBasePickerShould add imagesByChannel in
IBaseComboShould add imagesByChannel in
IBaseItemShould add imagesByChannel in
IMainMenuPickerView
Task 4 - Implement logic to image show per channel.
Link reference: https://github.com/rbilabs/intl-whitelabel-app/pull/1841/files#diff-4516aec29cee97c67b42f2b6e7ebb3e2a78da046f48149a0002e9cb815c0e505
Should create a new function to change image.
Example:
changeImageByChannelworkspaces/frontend/src/state/main-menu/new-main-menu.tsx
This function should be used everywhere
DOD-LIKE
Should add Piotr and Marco in Code Review.
Task 5 - Implement function change image in the Addons section and Add Extra (Ketchup)
Links reference:
Add Ons
Add Extra
Must use image change function in Add-on Section and Add Extra (implemented in the task 4)
Task 6 - Replicate to menu legacy (To analyze)
We should verify if it needs to replicate this functionality to Legacy Menu
POC:
https://github.com/rbilabs/intl-whitelabel-app/pull/1841
0 Comments