diff --git a/public/bitsOfGood.png b/public/bitsOfGood.png deleted file mode 100644 index 3c1115d3..00000000 Binary files a/public/bitsOfGood.png and /dev/null differ diff --git a/public/bitsOfGood.svg b/public/bitsOfGood.svg new file mode 100644 index 00000000..ccf0ba51 --- /dev/null +++ b/public/bitsOfGood.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/InviteBackLink/index.tsx b/src/components/InviteBackLink/index.tsx index e05d8a02..105259ca 100644 --- 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 => - // 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 => { + 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
; + if (state === LoadingState.LOADING) { + return ( +
+ +

Loading

+
friend schedule invite
+
+ ); + } + + return ( +
+ {state === LoadingState.SUCCESS ? ( +

Congratulations on Adding a New Schedule to your View!

+ ) : ( +

We've Encountered an Error, Please Try Again

+ )} +

You are being redirected to our main site, please wait...

+

+ If you have not been redirected in 30 seconds, please click the button + below +

+ + + + Bits of Good Logo + +
+ ); } diff --git a/src/components/InviteBackLink/stylesheet.scss b/src/components/InviteBackLink/stylesheet.scss new file mode 100644 index 00000000..22368c54 --- /dev/null +++ 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; + } +}