Versions Compared

Old Version 8

changes.mady.by.user Augusto de Souza, Jonatan (Deactivated)

Saved on

compared with

New Version Current

changes.mady.by.user Augusto de Souza, Jonatan (Deactivated)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

Restaurant selected.

...

Delivery

...

...

Acceptance Criteria

...

  1. Overall goal:

    1. The platform must allow assigning specific images to the products on the menu according to the purchase channel.

    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)

  • Items.

  • Combo.

    • Items inside the Combo must show the changed images

      Image Added

  • Picker.

    • Items and Combos inside the Picker must show the changed images

      Image Added


  • In Section should not change image, example “Top Sales”

    Image Modified

  • It should show correct image in Recent Order.

    • It should not change after the order ends.

      Image Modified

  • It should show correct image in Checkout.

    • if a product is at the checkout and you change restaurants (Delivery → Restaurant), the image should change.

      Image Modified

  • When you finish the order, it must show the correct image in the Add On section.

    Image Modified

    Image Modified

    • Should change image in Add Extra as well

      Image Modified

    • Catalog Update: existing image configuration as fallback option and include new ones per channel in order to override it optionally.

     

    1. Out of scope: localization and language

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 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 7 - Replicate to menu legacy (To analyze) - SPIKE

...

Tasks breakdown

Intl Whitelabel APP

Task 1 - Create a Feature Flag

  • 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

Link reference: https://github.com/rbilabs/intl-whitelabel-app/pull/1841/files#diff-3c5a6dd1f32b86cde31b8257a1e8332e9f8ccd97ae8931f47c64ad105103601c

...

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

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

...

  • 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

...

POC:

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

...