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

• Should show product image by channel.

  • 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
      

      

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)

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

  • Example : https://github.com/rbilabs/intl-whitelabel-app/pull/1841/files#diff-4570b3b140f129d1e996edb231de396894c13059dc31b8dc1c7caad9e6bd672e

• 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, imageKiosk and imageRestaurant.

• Should add imagesByChannel in IPickerItem

• Should add imagesByChannel in IBasePicker

• Should add imagesByChannel in IBaseCombo

• Should add imagesByChannel in IBaseItem

• Should 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: changeImageByChannel

    • workspaces/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

https://github.com/rbilabs/intl-whitelabel-app/pull/1841/files#diff-93b83a363f89eac56923577fd7624748a3041ad034ed535fd74229bc2794257a

Add Extra

https://github.com/rbilabs/intl-whitelabel-app/pull/1841/files#diff-24dff43fd9fee6ee00763e2616430b61687ab9803c6020ce2f8f6f3997a2f8ec

• Must use image change function in Add-on Section and Add Extra (implemented in the task 4)

POC:

https://github.com/rbilabs/intl-whitelabel-app/pull/1841