From 3de6479b2aa7050620a20dec15a26bc11276412e Mon Sep 17 00:00:00 2001
From: Terry Li <terryli0095@gmail.com>
Date: Sat, 6 Apr 2024 14:33:36 -0700
Subject: [PATCH] add member modal (#2247)

---
 .../src/graphql/mutations/org.ts              |  10 ++
 .../pages/quests/members/MemberAddModal.tsx   | 145 ++++++++++++++++++
 .../src/pages/quests/members/index.tsx        |  19 +++
 3 files changed, 174 insertions(+)
 create mode 100644 wondrous-bot-admin/src/pages/quests/members/MemberAddModal.tsx

diff --git a/wondrous-bot-admin/src/graphql/mutations/org.ts b/wondrous-bot-admin/src/graphql/mutations/org.ts
index 650565c8f..241b8b981 100644
--- a/wondrous-bot-admin/src/graphql/mutations/org.ts
+++ b/wondrous-bot-admin/src/graphql/mutations/org.ts
@@ -1,5 +1,6 @@
 import { gql } from "@apollo/client";
 import { OrgFragment } from "graphql/fragments/org";
+import { CmtyUserFragment } from "graphql/fragments";
 
 export const UPDATE_ORG = gql`
   mutation updateOrg($orgId: ID!, $input: OrgInput) {
@@ -75,6 +76,15 @@ export const RESET_ORG_CMTY_USER_POINTS = gql`
   }
 `;
 
+export const ADD_CMTY_USER_TO_ORG = gql`
+  mutation addCmtyUserToOrg($orgId: ID!, $discordUsername: String, $points: Int) {
+    addCmtyUserToOrg(orgId: $orgId, discordUsername: $discordUsername, points: $points) {
+      ...CmtyUserFragment
+    }
+  }
+  ${CmtyUserFragment}
+`;
+
 export const UPDATE_ORG_MODULES = gql`
   mutation updateOrgModules($orgId: ID!, $input: ModulesInput) {
     updateOrgModules(orgId: $orgId, input: $input) {
diff --git a/wondrous-bot-admin/src/pages/quests/members/MemberAddModal.tsx b/wondrous-bot-admin/src/pages/quests/members/MemberAddModal.tsx
new file mode 100644
index 000000000..9489a62ef
--- /dev/null
+++ b/wondrous-bot-admin/src/pages/quests/members/MemberAddModal.tsx
@@ -0,0 +1,145 @@
+import { Box, Grid, Typography } from "@mui/material";
+import { useContext, useState } from "react";
+import { Label } from "components/CreateTemplate/styles";
+import { SharedSecondaryButton } from "components/Shared/styles";
+import Modal from "components/Shared/Modal";
+import { useMutation } from "@apollo/client";
+import useAlerts from "utils/hooks";
+import TextField from "components/Shared/TextField";
+import GlobalContext from "utils/context/GlobalContext";
+import { redColors } from "utils/theme/colors";
+import { ADD_CMTY_USER_TO_ORG } from "graphql/mutations";
+
+const MemberAddBody = ({ onClose }) => {
+  const { setSnackbarAlertOpen, setSnackbarAlertMessage, setSnackbarAlertAnchorOrigin, setSnackbarAlertSeverity } = useAlerts();
+  const [addCmtyUserToOrg] = useMutation(ADD_CMTY_USER_TO_ORG, {
+    onCompleted: () => {
+      setSnackbarAlertOpen(true);
+      setSnackbarAlertMessage("Success!");
+      setSnackbarAlertAnchorOrigin({
+        vertical: "top",
+        horizontal: "center",
+      });
+      onClose();
+    },
+    onError: (error) => {
+      setError('Could not find the Discord user in the server');
+    },
+    refetchQueries: ["getCmtyUsersForOrg", "searchCmtyUsersForOrg"],
+  });
+  const { activeOrg } = useContext(GlobalContext);
+  const [discordUsername, setDiscordUsername] = useState("");
+  const [points, setPoints] = useState("");
+  const [error, setError] = useState("");
+
+  return (
+    <Grid display="flex" flexDirection="column" gap="10px">
+      <Box></Box>
+      <Box>
+        <Label
+          style={{
+            marginBottom: "10px",
+          }}
+        >
+          Discord Username
+        </Label>
+        <TextField
+          placeholder="Enter Discord Username without discriminator"
+          value={discordUsername}
+          onChange={(value) => {
+            setDiscordUsername(value);
+          }}
+          multiline={false}
+          // style={TextInputStyle}
+        />
+        <Label
+          style={{
+            marginTop: "20px",
+            marginBottom: "10px",
+          }}
+        >
+          Starting Points
+        </Label>
+        <TextField
+          placeholder="Enter Discord Username without discriminator"
+          number
+          value={points}
+          onChange={(value) => {
+            setPoints(value);
+          }}
+          multiline={false}
+          // style={TextInputStyle}
+        />
+      </Box>
+      {error && (
+        <Typography
+          fontFamily={"Poppins"}
+          fontWeight={500}
+          fontSize="12px"
+          lineHeight="14px"
+          color={redColors.red400}
+          paddingLeft="4px"
+        >
+          {error}
+        </Typography>
+      )}
+
+      <Box display="flex" gap="10px" alignItems="center" width="100%" marginTop="8px">
+        <SharedSecondaryButton
+          sx={{
+            flex: 1,
+          }}
+          $reverse
+          onClick={onClose}
+        >
+          Cancel
+        </SharedSecondaryButton>
+        <SharedSecondaryButton
+          sx={{
+            flex: 1,
+          }}
+          onClick={() => {
+            setError("");
+            if (!discordUsername) {
+              setError("Discord Username is required");
+              return;
+            }
+            if (points) {
+              const integerPoints = parseInt(points);
+              if (!integerPoints || integerPoints < 0) {
+                setError("Points must be a positive integer");
+                return;
+              }
+            }
+            addCmtyUserToOrg({
+              variables: {
+                orgId: activeOrg?.id,
+                discordUsername,
+                points: parseInt(points),
+              },
+            });
+
+          }}
+        >
+          Add Member
+        </SharedSecondaryButton>
+      </Box>
+    </Grid>
+  );
+};
+const MemberAddModal = ({ openMemberAddModal, setOpenMemberAddModal }) => {
+  return (
+    <>
+      <Modal
+        maxWidth={600}
+        open={openMemberAddModal}
+        onClose={() => setOpenMemberAddModal(false)}
+        title={"Add discord user to community"}
+      >
+        <MemberAddBody onClose={() => setOpenMemberAddModal(false)} />
+      </Modal>
+    </>
+  );
+};
+
+export default MemberAddModal;
diff --git a/wondrous-bot-admin/src/pages/quests/members/index.tsx b/wondrous-bot-admin/src/pages/quests/members/index.tsx
index 7ae735dfa..dda260dc2 100644
--- a/wondrous-bot-admin/src/pages/quests/members/index.tsx
+++ b/wondrous-bot-admin/src/pages/quests/members/index.tsx
@@ -13,6 +13,7 @@ import { EMPTY_STATE_TYPES, LIMIT } from "utils/constants";
 import GlobalContext from "utils/context/GlobalContext";
 import { MemberPageSearchBar } from "./MemberSearchBar";
 import ResetPointsModal from "./ResetPointsModal";
+import MemberAddModal from "./MemberAddModal";
 import MembersTutorial from "components/TutorialComponent/Tutorials/MembersTutorial";
 import { transformUser } from "utils/transformCmtyUserToMembers";
 import { FilterPill } from "components/ViewQuestResults/styles";
@@ -26,6 +27,7 @@ const MembersPage = () => {
   const [memberSearch, setMemberSearch] = useState(null);
   const [resetPointsBalance, setResetPointsBalance] = useState(null);
   const [openResetPointsModal, setOpenResetPointsModal] = useState(false);
+  const [openMemberAddModal, setOpenMemberAddModal] = useState(null);
   const [openExportModal, setOpenExportModal] = useState(false);
   const [memberInfo, setMemberInfo] = useState(null);
   const [getCmtyUsersForOrg, { data, fetchMore, refetch, loading }] = useLazyQuery(GET_COMMUNITY_USERS_FOR_ORG, {
@@ -81,6 +83,12 @@ const MembersPage = () => {
         setOpenResetPointsModal={setOpenResetPointsModal}
         pointsBalance={resetPointsBalance}
       />
+      <ResetPointsModal
+        openResetPointsModal={openResetPointsModal}
+        setOpenResetPointsModal={setOpenResetPointsModal}
+        pointsBalance={resetPointsBalance}
+      />
+      <MemberAddModal openMemberAddModal={openMemberAddModal} setOpenMemberAddModal={setOpenMemberAddModal} />
       <ExportModal isOpen={!!openExportModal} onClose={() => setOpenExportModal(false)} />
       {data?.getCmtyUsersForOrg ? (
         <MembersTutorial setMembersData={setMembersData} data={data?.getCmtyUsersForOrg} />
@@ -120,6 +128,7 @@ const MembersPage = () => {
             onClick={() => {
               setResetPointsBalance(false);
               setOpenResetPointsModal(true);
+              setOpenMemberAddModal(false);
             }}
           >
             Reset points
@@ -128,10 +137,20 @@ const MembersPage = () => {
             onClick={() => {
               setResetPointsBalance(true);
               setOpenResetPointsModal(true);
+              setOpenMemberAddModal(false);
             }}
           >
             Reset point balances
           </SharedSecondaryButton>
+          <SharedSecondaryButton
+            onClick={() => {
+              setResetPointsBalance(false);
+              setOpenResetPointsModal(false);
+              setOpenMemberAddModal(true);
+            }}
+          >
+            Add User
+          </SharedSecondaryButton>
           <Box flex={1} />
           <FilterPill
             style={{