[PERTE-330] Update task card with the new design and behaviour

[JuanIgAcosta]

Issue: #330

Related PRs:

• [PERTE-330] Add missing data for new task's card coopcycle-web#5003

Related issues:

• #233 with PR #1985
• #331 with PR #1994

---

Consider the task boxes to be like:

Tasks:

• Get missing data from backend that needs to be displayed (PR #5003)
  • Order price
  • Task comments
    (check if task.comments is fine enough or if there are more "comments" saved elsewhere)
• Apply the layout to the task card/box following the figma design.
• Add support to swipe right and left for unassigned tasks.
  Both should make appear the list of couriers to assign:
  • Swipe right (shows the square in the left): Should assign the order as a whole.
  • Swipe left (shows the square in the right): Should assign the task as individual item.
• Add support to swipe right and left for assigned tasks.
  The swipes are the same as for unassigned, both should make appear the list of couriers but with the unassign option in the 1st place (see below).
• The list of couriers + unassign could be something like:
  • The "unassign" option first as a button
  • Then, the list of all couriers
  • Pressing a new courier should reassign the task/s
• Pressing anywhere in the white rectangle with task data. will go to the specific/individual task details.
  (that task detail view already exists, we just reuse it)
• Pressing the square with the order info goes to the order/delivery details.
  • The order detail view is to be done at Order details page coopcycle#199
  • For now, just do nothing, but let the component prepared to quickly add the onClick fn later.
• If the task is an standalone one (it's not a part of an order) show a gray square with the coopcycle logo and the taskId in the place in where the resto/store name would be.
• Add the vertical coloured bar (yellow and red) depending on the task time.
  • Yellow: 10 mins remaining
  • Red: already past the delivery date/time
  • It has to be calculated with the ending hour of the range, ie: if the dropoff is between 16:45 and 17:00, we have to take/use 17:00 for calculation
• Add background color to swipe buttons.
• Check if everything works fine from courier section!
  • We are going to use the same TaskListItem for both dispatcher and courier screens/sections.
  • We need to make sure that also the courier section behaves as expected.

This PR updates dev-dependencies so a yarn install is required.

[diegomanuel]

LGTM!

[diegomanuel]

This should be re-enabled at #1994!