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:

• sanity picker image

• sanity combo image

• sanity item image

POC:

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