Create email invite confirmation screen #215
Conversation
|
There was a problem hiding this comment.
Nice work on this screen! Apart from the in-line comments, please address the following changes as well:
- Integrate
InviteBackLinkandEmailInviteConfirmationinto one component corresponding to the/invite/:idroute. This will be used to integrate the Firebase function call that adds the friend - Implement a state that will be used to modify the contents displayed on the confirmation screen. There are three possible states: Loading, Success, Error (does not need to be this exactly)
- When the user lands on this route, a loading message or symbol should be displayed until
handleInviteis completed. Do not redirect or display the button that redirects. - If
handleInviteis successful, display what is currently shown inEmailInviteConfirmationand redirect in 5s - If
handleInvitefails, display what is currently shown inEmailInviteConfirmationbut replaceCongratulations on Adding a New Schedule to your View!with some apt error message. Redirect in 10s
| useEffect(() => { | ||
| setTimeout(() => { | ||
| navigate('/'); | ||
| }, 30000); | ||
| }); |
There was a problem hiding this comment.
Let's change the timeout to 5s. Websites usually mention 30s in case the redirect fails or takes too much time, but they trigger the redirect much earlier on.
| If you have not been redirected in 30 seconds, please click the button | ||
| below | ||
| </p> | ||
| <button type="button" className="continue-button"> |
There was a problem hiding this comment.
The button is missing the on-click redirect functionality.
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| padding-top: 160px; |
There was a problem hiding this comment.
Let's make this responsive. For larger screens, the gap appears to be too large:
| flex-direction: column; | ||
| align-items: center; | ||
| padding-top: 160px; | ||
| padding-bottom: 38px; |
There was a problem hiding this comment.
This can be removed since the footer is already absolutely positioned.
| h1 { | ||
| font-size: 24px; | ||
| align-self: flex-start; | ||
| } | ||
|
|
||
| p { | ||
| align-self: flex-start; | ||
| } | ||
| } |
There was a problem hiding this comment.
The text should be center-aligned even in mobile view. So, this can be removed.
| padding-left: 32px; | ||
| padding-right: 32px; | ||
| font-size: 24px; | ||
| height: 100%; |
There was a problem hiding this comment.
Let's add a text-align: center; over here so all text is center aligned even when broken into multiple lines.
| font-size: 24px; | ||
| height: 100%; | ||
|
|
||
| @media (max-width: 1000px) { |
There was a problem hiding this comment.
The page is responsive to the width but not the height. The button appears below the BoG text and logo:
There was a problem hiding this comment.
Great work integrating my comments! There are just a few minor changes to look into. I would also recommend testing it locally using the Firebase emulator with the changes from Yatharth's Firebase functions PR: gt-scheduler/firebase-conf#3
|
Lgtm 👍 |
samarth52
changed the base branch from
bog-changes-s23
to
bog-changes-s23-merged
…ler/website into nathan/205-confirmation-screen
Summary
Resolves #205
Creates a confirmation screen for email invite, access through /confirm-invite
Checklist
UI Requirements
- [ ] Information about the invitation (i.e., the author of the schedule, its name, and the account that is given access to this schedule) is displayed.-- Figma doesn't specify any of this information (?)Functional Requirements
How to Test
Run it locally and navigate to http://localhost:3000/confirm-invite