Versions Compared

Old Version 13

changes.mady.by.user Ruani, Andrea

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.

...

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

  • 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

...