Page Comparison

...

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

DOD-LIKE

• Should add Piotr and Marco in Code Review.

...

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

• 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

...