Create email invite confirmation screen (#215)

### 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 - [x] The screen automatically redirects after 30s. - [x] Works for preview sites. ### How to Test Run it locally and navigate to http://localhost:3000/confirm-invite --------- Co-authored-by: Samarth Chandna <[email protected]> Co-authored-by: Samarth Chandna <[email protected]>
gt-scheduler · Oct 19, 2023 · 83f447e · 83f447e
1 parent f87c046
commit 83f447e
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 18 deletions.
diff --git a/public/bitsOfGood.png b/public/bitsOfGood.png
diff --git a/public/bitsOfGood.svg b/public/bitsOfGood.svg
diff --git a/src/components/InviteBackLink/index.tsx b/src/components/InviteBackLink/index.tsx
@@ -1,34 +1,96 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import axios from 'axios';
 
-// import { CLOUD_FUNCTION_BASE_URL } from '../../constants';
+import { CLOUD_FUNCTION_BASE_URL } from '../../constants';
+import Spinner from '../Spinner';
 
-const handleInvite = async (inviteId: string | undefined): Promise<void> =>
-  // The link should be changed to prod link, or we can choose the link based
-  // on environment
-  axios.post(
-    `http://127.0.0.1:5001/gt-scheduler-web-dev/us-central1/handleFriendInvitation`,
-    { inviteId }
-  );
-// .then((res) => {
-//   console.log(res);
-// })
-// .catch((err) => {
-//   console.error(err);
-// });
+import './stylesheet.scss';
+
+// eslint-disable-next-line no-shadow
+enum LoadingState {
+  LOADING,
+  SUCCESS,
+  ERROR,
+}
+
+const url = `${CLOUD_FUNCTION_BASE_URL}/handleFriendInvitation`;
+
+const handleInvite = async (inviteId: string | undefined): Promise<void> => {
+  const requestData = JSON.stringify({ inviteId });
+  await axios({
+    method: 'POST',
+    url,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    data: `data=${requestData}`,
+  });
+};
 
 export default function InviteBackLink(): React.ReactElement {
   const navigate = useNavigate();
   const { id } = useParams();
+  const [state, setState] = useState(LoadingState.LOADING);
 
   useEffect(() => {
     if (id && navigate) {
       handleInvite(id)
-        .then(() => navigate('/'))
-        .catch(() => navigate('/'));
+        .then(() => {
+          setState(LoadingState.SUCCESS);
+          setTimeout(() => {
+            navigate('/');
+          }, 5000);
+        })
+        .catch(() => {
+          setState(LoadingState.ERROR);
+          setTimeout(() => {
+            navigate('/');
+          }, 10000);
+        });
     }
   }, [id, navigate]);
 
-  return <div />;
+  if (state === LoadingState.LOADING) {
+    return (
+      <div className="Loading">
+        <Spinner size="normal" style={{ opacity: 0.6 }} />
+        <h4>Loading</h4>
+        <div>friend schedule invite</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="EmailInviteConfirmation">
+      {state === LoadingState.SUCCESS ? (
+        <h1>Congratulations on Adding a New Schedule to your View!</h1>
+      ) : (
+        <h1>We&apos;ve Encountered an Error, Please Try Again</h1>
+      )}
+      <p>You are being redirected to our main site, please wait...</p>
+      <p>
+        If you have not been redirected in 30 seconds, please click the button
+        below
+      </p>
+      <button
+        type="button"
+        className="continue-button"
+        onClick={(): void => {
+          navigate('/');
+        }}
+      >
+        Continue
+      </button>
+
+      <a className="footer" href="https://bitsofgood.org/">
+        <img
+          alt="Bits of Good Logo"
+          height={44}
+          width={243}
+          src="/bitsOfGood.svg"
+        />
+      </a>
+    </div>
+  );
 }
diff --git a/src/components/InviteBackLink/stylesheet.scss b/src/components/InviteBackLink/stylesheet.scss
@@ -0,0 +1,79 @@
+@import '../../variables';
+
+body {
+  background-color: $theme-dark-background;
+  color: $theme-dark-foreground;
+}
+
+.Loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+
+  h4 {
+    font-size: 1.4rem;
+    margin-top: 12px;
+    margin-bottom: 8px;
+  }
+}
+
+.EmailInviteConfirmation {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20vh;
+  padding-left: 32px;
+  padding-right: 32px;
+  font-size: 24px;
+  height: 100%;
+  text-align: center;
+
+  @media (max-width: 720px) {
+    padding-top: 60px;
+  }
+
+  @media (max-width: 450px) {
+    padding-top: 60px;
+    font-size: 18px;
+  }
+
+  @media (max-width: 300px) {
+    font-size: 16px;
+  }
+
+  @media (max-height: 600px) {
+    padding-top: 60px;
+  }
+
+  h1 {
+    font-size: 36px;
+    font-weight: 600;
+
+    @media (max-width: 450px) {
+      font-size: 30px;
+    }
+
+    @media (max-width: 300px) {
+      font-size: 24px;
+    }
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 38px;
+  }
+
+  .continue-button {
+    background-color: #fe7c53;
+    color: white;
+    margin-top: 96px;
+    padding: 8px 24px;
+    border: none;
+    border-radius: 16px;
+    cursor: pointer;
+    font-size: 24px;
+    font-weight: 600;
+  }
+}