Tech Discovery

We need to add new components with images for Restaurant, Restaurant Delivery and Kiosk, the images will be displayed according to the selected channel.

Example:

If the user is in the selected restaurant, it must show a glass of soda, if the user is in the delivery restaurant, it must show a canned soda

 

Architecture

https://lucid.app/lucidchart/0af15917-7f95-4f8c-900d-6577c594f8c5/edit?viewport_loc=529%2C-163%2C1971%2C1005%2C0_0&invitationId=inv_2d601fa6-c317-421a-bcbc-62a764f9058f

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):

 

TO-BE

intl-whitelabel-cms and intl-sanity-shared-schemas

Changes to be added on Menu Picker (Sanity):

 

Changes to be added on Menu Combo (Sanity):

 

Changes to be added on Item (Sanity):

 

Github References:

 

POC:

https://github.com/rbilabs/intl-sanity-shared-schemas/pull/30

 

Query Sanity:

https://czqk28jt.api.sanity.io/v1/graphql/dev_plk_es/default

query { Menu(id: "item_67164") { name { en } image { asset { metadata { lqip } label title description assetId url path source { id url } } } } }