feat: #3921 Added v2 design for booking details.

[JeroenReumkens]

What does this PR do?

Implements new v2 design for booking details.
The template in this PR contains only styling changes, no logic touched. The file is copy over to v2 to not break v1 🙂

Fixes #3921

Loom Video: https://www.loom.com/share/4694769e865e4edd99b74f5e529dbbd6

Environment: Staging(main branch) / Production

Type of change

• New feature (non-breaking change which adds functionality)

How should this be tested?

• Verify that implemented design matches design in Figma (see 2.0 Booking Details {component} #3921)

[vercel]

Someone is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[ciaranha]

@JeroenReumkens looks fantastic!

One issue I noticed is the header for the booking request for opt-in bookings has green at the top and looks like a success state. Can we change it to this?

Do we also have a cancelled state done yet or will I create a separate issue to have that tackled?

[JeroenReumkens]

@Jaibles I'm so sorry, totally forgot to include the cancelled state in my video. It is indeed also included in this PR. I created a new Loom showing that part for you:

https://www.loom.com/share/f3fcca38c16f48e382b6c87a8734cfc1

As for the opt-in booking, how can I exactly create such a booking? Then I can test locally and see what I can do 😄

[sean-brydon]

@PeerRich Correct me if I'm wrong - should this override the V1 screen for this page?

Like we are doing with public booking page?

[ciaranha]

Fantastic cancel looks great. Left a comment in Loom :)

To test opt-in:
https://user-images.githubusercontent.com/4536123/188125502-e163a88b-56f4-4b83-81ee-36e92ededde3.mp4

[sean-brydon]

@Jaibles I'm so sorry, totally forgot to include the cancelled state in my video. It is indeed also included in this PR. I created a new Loom showing that part for you:

loom.com/share/f3fcca38c16f48e382b6c87a8734cfc1

As for the opt-in booking, how can I exactly create such a booking? Then I can test locally and see what I can do 😄

@JeroenReumkens for opt-in booking please toggle this switch in the Advanced tab :)

[JeroenReumkens]

@PeerRich Correct me if I'm wrong - should this override the V1 screen for this page?

Like we are doing with public booking page?

Would actually love it if we could copy less. This way we also maintain git history etc for these pages and less bug fixing if a bug occurs in any of these copied pages 🙂

[sean-brydon]

@PeerRich Correct me if I'm wrong - should this override the V1 screen for this page?
Like we are doing with public booking page?

Would actually love it if we could copy less. This way we also maintain git history etc for these pages and less bug fixing if a bug occurs in any of these copied pages 🙂

Agreed - we will be replace V1 with V2 in the upcoming month I believe

[PeerRich]

looks good to me! thank you jeroen

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
cal	✅ Ready (Inspect)	Visit Preview	Sep 2, 2022 at 11:14AM (UTC)

[JeroenReumkens]

@Jaibles Updated the icon and colors for the opt-in event. Created a new Loom showing all 3 states:
https://www.loom.com/share/c941f904dee64f6b9d1097e516318c18

While I was looking at the icons I also noticed the icons were slightly smaller in the new design, which I missed. So I've also made them smaller in this video and commit. Let me know what you think!

One other thing I actually noticed is that in the new design it says "your request has been submitted", where is the content now says "your booking has been submitted". Is that something we want to change now? Since that also involves translations.