Direct links to accept/reject a booking#5939
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
never to primary buttons. Accept should be primary, reject should be secondary |
@PeerRich fixed, thanks! |
| const router = useRouter(); | ||
|
|
||
| return ( | ||
| <div className="flex h-screen"> |
There was a problem hiding this comment.
NIT: unrelated but i think this container isnt mobile responsive
There was a problem hiding this comment.
Indeed, I drafted this PR because mobile was pending testing/tweaking, it will work as it works for the booking page.
|
@PeerRich Here is how the screen currently looks like in my iPhone mini:
|
|
Perhaps we can make those error pages a bit more readable? |
In that case, can we put "Reason for rejecting (optional)" in the label so?
I would prefer the title left aligned, and it would probably be better single column rather than having the "Who, What, etc" in a second column but it's ok for now, especially if the booking page is the same. We can fix both of those separately? We actually have designs for this already here |
|
Feedback applied @PeerRich @Jaibles New 500 error page: Mobile view to accept/reject a booking using the direct link: v2 buttons in emails: |
| Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right | ||
| away for you. | ||
| </p> | ||
| {router.query.error && ( |
There was a problem hiding this comment.
New 500 error page design plus an optional message to give more context of the error for support purposes.
|
|
||
| export const CallToAction = (props: { label: string; href: string }) => ( | ||
| export const CallToAction = (props: { label: string; href: string; secondary?: boolean }) => ( | ||
| <p |
There was a problem hiding this comment.
v2 design for email buttons
| import { BASE_URL, IS_PRODUCTION } from "@calcom/lib/constants"; | ||
|
|
||
| export const LinkIcon = () => ( | ||
| export const LinkIcon = ({ secondary }: { secondary?: boolean }) => ( |
There was a problem hiding this comment.
New v2 design for email buttons adding secondary state
| <img | ||
| src={IS_PRODUCTION ? BASE_URL + "/emails/linkIcon.png" : "https://app.cal.com/emails/linkIcon.png"} | ||
| width="12px" | ||
| srcSet={IS_PRODUCTION ? BASE_URL + "/emails/linkIcon.svg" : "https://app.cal.com/emails/linkIcon.svg"} |
There was a problem hiding this comment.
Added the possibility to load an SVG to be a crisper image, otherwise it loads usual png
| @@ -0,0 +1,3 @@ | |||
| export const Separator = () => ( | |||
| <p style={{ width: "16px", height: "16px", display: "inline-block" }}> </p> | |||
| ); | |||
There was a problem hiding this comment.
New separator component for email in this case to separate two buttons from each other
| const t = calEvent.attendees[0].language.translate; | ||
| const rruleOptions = new RRule(calEvent.recurringEvent).options; | ||
| const recurringEvent: RecurringEvent = { | ||
| export function getRecurringWhen({ |
There was a problem hiding this comment.
Making the definition more accurate to what's expected to broaden up its usage
4 participants
What does this PR do?
Implement direct links in a email with required confirmation for a booking in order to accept or reject it, no need to log in.
Now when getting a booking that requires confirmation, it has 2 CTAs:
When clicking on accept:
When clicking on reject, it requires a reason to reject:
Once the reason for reject is provided:
In case an already accepted/rejected booking is visited again:
In case a booking does not exist, using the 500 error with custom text:
In case the wrong URL is provided, hence the signature is not correct:
Closes #5807
Internal Tech Specs for the implementation (WIP): https://app.gitbook.com/o/6snd8PyPYMhg0wUw6CeQ/s/VM7BFW5yP5ZxWKDW57nx/technical-specs/direct-link-actions-wip
Loom Video: TBD
Environment: Staging(main branch) / Production
Type of change
How should this be tested?
Book required confirmation event-types and interact with the email CTAs.