[Appointments] Better UX after you select a date and time while booking appointments

[nimishavijay]

Is your feature request related to a problem? Please describe.

Currently after you select a date and time the modal to confirm your booking can be a bit confusing

Describe the solution you'd like

Before:

After:

• Instead of a modal on top of the existing information, just reuse the same container
• Width of the container is 600px (size of the medium modal)
• nice-to-have: add an animation when resizing from the larger container to the smaller container

Left column

• Avatar, name, title and description have same styling
• Additionally, when a user selects a time the left column gets the selected date, time and timezone info along with the appropriate icons (calendar symbol, schedule symbol and language symbol)
• Show date in full instead of dd/mm/yyyy

Bottom row of buttons

• "Book the appointment" --> "Book appointment"
• Add a checkmark icon to the book appointment button
• Add a back button to go back to the page to select date and time

Describe alternatives you've considered

n/a

Additional context

related to #6313