diff --git a/src/APIFunctions/MembershipPayment.js b/src/APIFunctions/MembershipPayment.js new file mode 100644 index 000000000..2da88e46b --- /dev/null +++ b/src/APIFunctions/MembershipPayment.js @@ -0,0 +1,27 @@ +import { ApiResponse } from './ApiResponses'; +import { BASE_API_URL } from '../Enums'; + +export async function verifyMembershipFromDb(token, confirmationCode) { + let status = new ApiResponse(); + try { + const url = new URL('/api/MembershipPayment/verifyMembership', BASE_API_URL); + const res = await fetch(url.href, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}` + }, + body: JSON.stringify({ confirmationCode }) + }); + if (res.ok) { + const result = await res.json(); + status.responseData = result; + } else { + status.error = true; + } + } catch (err) { + status.error = true; + status.responseData = err; + } + return status; +} diff --git a/src/Pages/Profile/MemberView/Profile.js b/src/Pages/Profile/MemberView/Profile.js index fc5ff3482..fcb4b72bc 100644 --- a/src/Pages/Profile/MemberView/Profile.js +++ b/src/Pages/Profile/MemberView/Profile.js @@ -3,6 +3,7 @@ import { getUserById } from '../../../APIFunctions/User'; import ChangePasswordModal from './ChangePassword'; import DeleteAccountModal from './DeleteAccountModal'; import GetApiKeyModal from './GetApiKeyModal'; +import VerifyMembershipModal from './VerifyMembershipModal'; import { membershipState, membershipStateToString } from '../../../Enums'; import { useSCE } from '../../../Components/context/SceContext'; @@ -53,6 +54,14 @@ export default function Profile() { {response.firstName} {response.lastName}
+
+ { + setBannerMessage(message); + setBannerColor(color); + setTimeout(() => { + setBannerMessage(''); + setBannerColor(''); + }, delay); + }} + accessLevel={response.accessLevel} + onVerificationSuccess={getUserFromApi} + /> { setBannerMessage(message); diff --git a/src/Pages/Profile/MemberView/VerifyMembershipModal.js b/src/Pages/Profile/MemberView/VerifyMembershipModal.js new file mode 100644 index 000000000..e8f0f0a2b --- /dev/null +++ b/src/Pages/Profile/MemberView/VerifyMembershipModal.js @@ -0,0 +1,99 @@ +import React, { useEffect, useState } from 'react'; +import { useSCE } from '../../../Components/context/SceContext'; +import { verifyMembershipFromDb } from '../../../APIFunctions/MembershipPayment'; + +export default function VerifyMembershipModal(props) { + const { bannerCallback = (message, color) => { }, confirmClassAddons, accessLevel, onVerificationSuccess = () => {} } = props; + const [confirmationCode, setConfirmationCode] = useState(''); + const { user } = useSCE(); + + const INPUT_CLASS_NAME = 'indent-2 block w-full rounded-md border-0 py-1.5 bg-white text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'; + + async function verifyMembership() { + const apiResponse = await verifyMembershipFromDb( + user.token, + confirmationCode, + ); + if (apiResponse.error) { + bannerCallback('Unable to verify membership. Please try again later.'); + return; + } + bannerCallback('Congrats, you confirmed your membership!'); + setConfirmationCode(''); + document.getElementById('verify-membership-modal').close(); + onVerificationSuccess(); + } + + return (<> + +
+

Verify Membership

+ {accessLevel > 0 ? ( + <> +

+ You are already verified!!! +

+
+
+
+ +
+
+
+ + ) : ( + <> +

+ Please enter the confirmation code you received via email. +

+ +
+ { + setConfirmationCode(e.target.value); + }} + className={INPUT_CLASS_NAME} + /> +
+ +
+
+
+ + +
+
+
+ + )} +
+
+ + ); +}