CAL-1653: Show 404 page for new booker when event is not found.

[JeroenReumkens]

What does this PR do?

Before this PR we didn't show a 404 page for non existing events in the new booker. It wasn't checked for, so you'd see an infinite loading state.

• After this PR you see the default 404 message we show for every page when an event does not exist.
• On top of that when the API call fails to fetch meeting data, it also shows a custom 404 layout. This will happen when in the future this component is used as a standalone component (so people using it as an npm package). In that case we can't server side show the 404 error, but we still want to show a message for the user so they know what's happening
• Also added an updated layout for this 404 message on the client side, and used this layout for the away state too. See below screenshots. @Jaibles still wanted to improve these designs, which could be done in a separate PR.

404 when used on cal.com

Same 404 we use everywhere.

404 when used as a standalone widget

This won't be the case yet, but will be the case once the components gets published to npm and people for example make a typo in their meeting slug, or delete the meeting on cal without updating their own website (that uses this component).

Didn't want to make this component too large because people might show it in a small part of their website. Also no buttons like go back to homepage for example, since we don't know where to send the user – because they embed this component in their own website.

Reflected same layout in away state (visible both on cal.com and when in the future used as Atom)

Content and emoji still based on current message. I don't really like the emoji. Waiting for @Jaibles before updating though.

Fixes CAL-1653

Environment: Staging(main branch)

Type of change

• Bug fix (non-breaking change which fixes an issue)

How should this be tested?

• [ ] Event booking pages should still work
• [ ] Try changing a slug to a non existent slug, should show 404
• [ ] Try both for regular events, dynamic collectives as well as team events.

[linear[bot]]

CAL-1653 new booker: 404 missing

https://cal.com/bailey/404

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
cal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2023 2:35pm
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2023 2:35pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
api	⬜️ Ignored (Inspect)	Visit Preview		May 30, 2023 2:35pm

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[deploysentinel[bot]]

Current Playwright Test Results Summary

✅ 104 Passing - ⚠️ 1 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 05/30/2023 02:46:22pm UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: 258a20c2b8cf7159196014a46256485027e85a39

Started: 05/30/2023 02:42:37pm UTC

⚠️ Flakes

📄   packages/embeds/embed-core/playwright/tests/action-based.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Popup Tests should be able to reschedule Retry 1 • Initial Attempt	2.96% (4) 4 / 135 runs failed over last 7 days	62.96% (85) 85 / 135 runs flaked over last 7 days

---

View Detailed Build Results

---

[hariombalhara]

I find the new 404 view for EventType better in giving better message. Why don't we show that instead in all cases?

[JeroenReumkens]

I find the new 404 view for EventType better in giving better message. Why don't we show that instead in all cases?

Hey @hariombalhara, sorry missed this comment. Which 404 do you mean? When going to /event-types/asdfasdasdf I see the same 404 I use for the booking pages. So I guess I'm not looking in the right spot 😁

[JeroenReumkens]

@PeerRich @Jaibles

Talked to @hariombalhara about what he meant with his comment. He meant that he actually likes the simple 404 message (see screen below) a lot more for booker pages instead of our default 404. What do you guys think? I guess using a different 404 on the booker page could be confusing to users?

[PeerRich]

misclicked... didnt intend to close

[PeerRich]

can we fix the slack icon color too?

[JeroenReumkens]

can we fix the slack icon color too?

Good point, fixed!