Update booking confirmation UI

[devmount]

Description of the Change

• Updated the Booking Confirmation page with the latest UI designs
• Some copy was adjusted according to design (e.g. the tagline)
• A forced light mode color was introduced
• The general page structure currently doesn't allow the footer to be at the bottom, when the overall page contents have a small height. This got fixed too.

Screenshots

Light mode, logged in:

Dark mode, anonymous:

Benefits

• Better UI alignment with the rest of the application

Known issues / Things to improve

• The CTA button on the right is using the services-ui primary button. That currently doesn't exactly align with the current mock-ups. We should discuss how to implement diverging button styles.
• The mockups show a "Cancel Appointment" Link. That functionality doesn't exists yet and was already issued here: Cancel Option for Booker #720

Applicable Issues

Closes #1403
Closes #1423
Closes #1432

[rwood-moz]

Hey @devmount For me when I run the branch locally, after I confirm a time slot selection, the booking confirmed dialog doesn't appear - I just get a blank screen (see screenshot). Before running I did a docker compose up --build, that should be sufficient right?

[rwood-moz]

Hey @devmount For me when I run the branch locally, after I confirm a time slot selection, the booking confirmed dialog doesn't appear - I just get a blank screen (see screenshot). Before running I did a docker compose up --build, that should be sufficient right?

Ignore that - looks like you did another commit right after I pulled your branch; I pulled the latest and the dialog appears now \o/ looks great!

[rwood-moz]

Just FYI this breaks the book appointment E2E tests as can be expected; I have created #1431 to update the test accordingly and will take that on.

[davinotdavid]

Looking good so far! Just a few comments on some bits:

Other than the inline comments in the code, there a few mismatching typography that I captured:

1. This text seems to be larger and with a different color than the Zeplin

2. Let's double check the colour of the description here, it seems to be --colour-ti-base in Zeplin but the current implement looks slightly different

3. As noted in your PR description, the "Subscribe" button is a tad different from what we currently have in services-ui but that can be done as a one-off change by overriding the styles, for example:

:deep(.base.filled.primary) {
  // your overridden styles here
}

[davinotdavid]

This looks a bit off from the mockup. As a heads up, Zeplin unfortunately is not very accurate on the gradients overall :( but I think we can more closely approximate this by tweaking the pivot point of the gradient somewhere to the bottom right instead?

This one is not a blocker though as it might be time consuming / not super worthy to spend time now on it IMHO.

Zeplin:

In this PR:

[devmount]

Good thinking, I made some adjustments and found it to be better now (still not perfect):

[davinotdavid]

@devmount Ah, unsure if you tackling #1423 (comment) as well on this PR but it seems that it is currently behaving the same as the original issue description:

The header / footer on mobile are preventing the Booking Confirmation UI to be displayed fully

[devmount]

@rwood-moz @davinotdavid Thanks so much for the ultra fast reviews ⚡ ❤️ I'll fix the things you mentioned tomorrow (for me) 🙏🏻

[devmount]

Ignore that - looks like you did another commit right after I pulled your branch; I pulled the latest and the dialog appears now \o/ looks great!

Sorry about that @rwood-moz. I forgot to commit a file and quickly pushed it, but only after I assigned you as reviewers 😇 You're simply too fast 😂 🙇🏻

[devmount]

Just FYI this breaks the book appointment E2E tests as can be expected; I have created #1431 to update the test accordingly and will take that on.

Thanks so much Rob! For always keeping the tests in sync 🙏🏻

[devmount]

@davinotdavid Wow, thanks so much for your thorough review!! Much appreciated!

1. Great catch, fixed
2. Great catch, fixed. Plus I found another color mismatch for the info text.
3. Alright, if we are fine with one-off changes, I can totally do that. Just felt like we should quickly discuss this. Fixed the button styles now. That was a bit more work, since design really likes to use border gradients 😅

[devmount]

Ah, unsure if you tackling #1423 (comment) as well on this PR but it seems that it is currently behaving the same as the original issue description:

Yes, I decided to do that in a separate issue, since it seems to affect a lot of pages / is kind of a general problem, how the footer is currently implemented. I created #1432 for this, let's discuss the general page layout there.

---

@davinotdavid Actually nevermind. I just went through the application again and it really seems to be the only place where this is happening. I'll fixed it here, sorry for the confusion 😅

[davinotdavid]

Thanks for the revisions! It looks great!

The only bit left is that the Download ICS button doesn't seem to be working well. We can refer to the implementation in the Bookings page / SlidingPanel as the Download ICS there seems to be working well!

[devmount]

@davinotdavid I fixed the ICS download now. The problem was, that we need appointment.slug and slot.id to request the ICS download. But both values are available only AFTER creating the event. So I needed to tweak return values and response types slightly to make it work.

[rwood-moz]

Downloading the ICS (from the booking confirmation dialog) worked for me with your latest updates \o/

[davinotdavid]

Awesome! Works well, thank you so much for the great work an patience on the review points! 🎉