Architecture
Questions
Platforms?
Web, Android and IOS ✅
Brands?
All, including specific ones for Iberia: PLK ES, BK ES and BK PT ✅
Channels?
Home Delivery → Delivery ✅
Mobile Ordering → Pick-up, dine-in and Table Service ✅
Public Letter → Public Menu → It means the menu NOT linked with any selected restaurant / delivery.
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
Additional flows:
Cart✅
Recent Orders✅
Images out-of-scope (
)Home
Offers
Catalog Update?
Proposal is that CMS user doesn’t need to update each image for each channel manually. Let’s keep existing image configuration as fallback option and include new ones per channel in order to override it optionally.
Image localization(language)?
It is not a business requirement.
Solution
AS-IS
The concept of having different images for a context already exists in WL. For instance, it has different product images per locale (ES, PT, etc), as can be seen in Hero (just example - no impact here is expected):
For menu section, there’s already the capability to display image to Kiosk channel(just example - no impact here is expected):
Add-on section (just example - no impact here is expected):
TO-BE
Intl-whitelabel-app
Menu picker, combo and item
Intl-whitelabel-app must be changed whenever it queries for menu images to apply filters to retrieve images per channel. Currently it gets the images from the image field 
. From now on, it can pass an optional filter on the graphql query to retrieve specific image channel field(new).
It means that:
If the customer didn’t select any service mode yet. The called hooks in picker, combo, item flows should consider "Public" as filter.
If the customer selected Delivery as service mode. The called hooks in picker, combo, item flows should consider "Delivery" as filter.
If the customer selected Restaurant as service mode. The called hooks in picker, combo, item flows should consider "Restaurant" as filter.
Kiosk is not called from intl-whitelabel-app.
Therefore, new fields that refer to “Restaurant Image”, "Delivery Image”, "Public Image” and "Kiosk Image” can be (or not) added into the existing structures.
Existing "Image” field should remain in the menu structures and should work as a fallback when there’s no passed filter or response image for the applied filter.
Preferably, the logic for it should be in the backend to avoid unnecessary images responded to the frontend (latency issue).
Hopefully, a mapping can be done from sanity channel images to the existing image field, avoiding field structural changes on front-end.
→ Can be evaluted with a PoC
As per the discovery, intl-whitelabel-app keeps polling sanity CDN with GetPickerAvailability, GetComboAvailability, GetItemAvailability graphql queries… get the reference of the image, and get it from sanity CDN, as well:
Recent Order
If the customer goes to the recent order page, the information from the recent order must be loaded from the database. It means that at the time of the order selection, intl-whitelabel-app must select the retrieved image and persist it(as-is), no huge impact is expected in this flow.
Cart
The image that is present in the cart is supposed to be that is load in the menu picker, combo, item selection. No huge impact is expected in this flow.
Sanity
Changes to be added on Menu Picker (Sanity):
intl-whitelabel-cms and intl-sanity-shared-schemas
“Restaurant Image”, "Delivery Image”, "Public Image” and "Kiosk Image”
Changes to be added on Menu Combo (Sanity):
intl-whitelabel-cms and intl-sanity-shared-schemas
“Restaurant Image”, "Delivery Image”, "Public Image” and "Kiosk Image”
Changes to be added on Item (Sanity):
intl-whitelabel-cms and intl-sanity-shared-schemas
“Restaurant Image”, "Delivery Image”, "Public Image” and "Kiosk Image”
Github References:
Add Comment