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

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
        }
      }
    }
  }
}