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 (<>
+
+ >
+ );
+}