...

1. Overall goal:

   1. The platform must allow assigning specific images to the products on the menu according to the purchase channel: home delivery, mobile ordering, kiosk and public menu.

   2. The configuration of the images must be done from Sanity.

2. Platforms: Web, Android and IOS

3. Brands: all - PLK ES, BK ES and BK PT

4. Service modes: Home Delivery, Pick-up, Dine-in and Table Service

   1. It also includes “Public Letter” → Public Menu → It means the menu NOT linked with any selected restaurant / delivery.

   2. Regarding 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).

5. Images in scope:

   1. Menu: Picker Combo and Item (also in the check-out and in the customization/extra)

...

• Task 1 - Create a Feature Flag

• Task 2 - Add imagesByChannels in Graphql

• Task 3 - Add new interfaces and update.

• Task 4 - Implement logic Create a new hook for show image by channel (function change image)

• Task 5 - Implement function change image calls hook image by channel

• Task 6 - Implement calls hook in the add-on section and add extra (Ketchup)

• Task 6 7 - Replicate to menu legacy (To analyze) - SPIKE

...

Tasks breakdown

Intl Whitelabel APP

...

• New feature flag for front-end: ENABLE_IMAGES_BY_CHANNELS enable-images-by-channels

• src/utils/launchdarkly/flags.ts

• The flag should be created in intl-guest-app in LaunchDarkly

Task 2 - Add imagesByChannels in Graphql

...

Update Sanity Graphql with command yarn apollo-:generate.

Task 3 - Add new interfaces and update

...

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

...

Create a new hook for show image by channel

• Poc reference: https://github.com/rbilabs/intl-whitelabel-app/pull/1841/files#diff-4516aec29cee97c67b42f2b6e7ebb3e2a78da046f48149a0002e9cb815c0e505

• Should create a new function to change image.

  Example: changeImageByChannel

  Creation of a new generic hook in the folder: app/workspaces/frontend/src/hooks

• Folder name suggestion: use-images-by-channel

  • index.ts → only used to export the hook

  • use-images-by-channel.ts

  • __tests__ folder

    • use-images-by-channel.unit.test.ts OR use-images-by-channel.test.ts

• Following the POC exemple we’ll need to pass in the hook the request data (if necessary) to be converted for what we need. Here’s an example:

  Code Block
  language typescript
  interface ImagesByChannelResult { convertedData?: ImagesByChannelProps; } interface ImagesByChannelProps { requestData?: ImagesByChannelProps; } export const useImagesByChannel = ({ requestData, }: ImagesByChannelProps): ImagesByChannelResult => { const [data, setData] = useState(requestData); // ... other functions here useEffect(() => { if (requestData && flagON) { const convertedData = converterFunction(requestData); setData(convertedData); } }, [requestData, flagON]); return { convertedData: data }; };

• The getImagesByChannel, changeImageByChannel and preparedImages function examples will be placed inside our hook

• For the changeImageByChannel example, one suggestion is to use generics (type overload can be used too, if needed) for the approach

  • https://www.typescriptlang.org/docs/handbook/2/generics.html

  • Overloaded functions: https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html#overloaded-functions

• Take a look where the functions are used to define the better generic/overload approach

DOD-LIKE

• Implement the unit tests

• Follow good practices (SOLID, etc etc)

Task 5 - Implement calls hook image by channel

• Call the new hook inside the workspaces/frontend/src/state/main-menu/new-main-menu.tsx

  • This function should be used everywherePass the data from useGetMenuSectionsLazyQuery to the hook param

  • The data returned by the hook will be used as the data returned from MainMenuProvider

• Looking to the POC reference call the desired function in:

  • src/state/menu-options/legacy-menu-options.tsx

  • src/state/product-wizard/index.tsx

  • src/components/product-detail/product-overview/product-overview.tsx

  • src/components/product-detail/order-summary/order-summary.tsx

  • src/components/menu-tile-grid/menu-tile/menu-tile.tsx

• Check if any existent unit test is broken for the changed files

DOD-LIKE

• Should add Piotr and Marco in Code Review.

...

• All the legacy tests working

• Check in the Whitelabel app if the correct image is shown for each point of change

Task 6 - Implement calls hook in the add-on 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)

...

• Looking to the POC reference call the desired function in:

  • src/pages/cart/addons-item-container/addons-item-container.tsx

  • src/components/add-extras-modal/add-extras-content.tsx

• Check if any existent unit test is broken for the changed files

DOD-LIKE

• All the legacy tests working

• Check in the Whitelabel app if the correct image is shown for each point of change (Add extras modal)

Task 7 - Replicate to menu legacy (To analyze)

• We should verify if it needs to replicate this functionality to Legacy Menu

...