Merge pull request #1834 from wondrous-dev/staging

Staging
wondrous-dev · Jul 1, 2023 · ea85df5 · ea85df5 · vercel · Jul 1, 2023
2 parents 06c47c8 + 0d27fba
commit ea85df5
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 100 deletions.
diff --git a/wondrous-bot-admin/src/components/CreateTemplate/MaxInput.tsx b/wondrous-bot-admin/src/components/CreateTemplate/MaxInput.tsx
@@ -1,25 +1,23 @@
-import { Box } from '@mui/material';
-import { CustomTextField } from 'components/AddFormEntity/components/styles';
-import Switch from 'components/Shared/Switch';
-
+import { Box } from "@mui/material";
+import { CustomTextField } from "components/AddFormEntity/components/styles";
+import Switch from "components/Shared/Switch";
+import Tooltip from "@mui/material/Tooltip";
+import InformationTooltip from "components/Icons/information.svg";
+import { StyledInformationTooltip } from "components/Shared/Tooltip";
 const MaxInput = (props) => {
   const { keyValue, stateKey, setQuestSettings } = props;
   return (
-    <Box
-      display='flex'
-      gap={keyValue ? '10px' : '0px'}
-      alignItems='center'
-    >
+    <Box display="flex" gap={keyValue ? "10px" : "0px"} alignItems="center">
       <Box
         sx={{
-          width: keyValue ? '100%' : '0px',
-          visibility: keyValue ? 'visible' : 'hidden',
-          transition: 'width 0.3s ease-in-out, visibility 0.3s ease-in-out',
+          width: keyValue ? "100%" : "0px",
+          visibility: keyValue ? "visible" : "hidden",
+          transition: "width 0.3s ease-in-out, visibility 0.3s ease-in-out",
         }}
       >
         <CustomTextField
-        autoFocus
-          type='number'
+          autoFocus
+          type="number"
           value={keyValue}
           onChange={(e) => {
             setQuestSettings((prev) => ({
@@ -30,8 +28,32 @@ const MaxInput = (props) => {
         />
       </Box>
       <Switch {...props} />
+      {stateKey === "maxSubmission" && (
+        <StyledInformationTooltip
+          placement="right"
+          title="The maximum number of approved submissions each user can submit for this quest"
+        >
+          <img
+            src={InformationTooltip}
+            alt="information"
+            style={{ width: "16px", height: "16px", marginLeft: "8px" }}
+          />
+        </StyledInformationTooltip>
+      )}
+      {stateKey === "maxApproval" && (
+        <StyledInformationTooltip
+          placement="right"
+          title="The total number of approved submissions allowed for this quest"
+        >
+          <img
+            src={InformationTooltip}
+            alt="information"
+            style={{ width: "16px", height: "16px", marginLeft: "8px" }}
+          />
+        </StyledInformationTooltip>
+      )}
     </Box>
   );
 };
 
-export default MaxInput
+export default MaxInput;
diff --git a/wondrous-bot-admin/src/components/Icons/information.svg b/wondrous-bot-admin/src/components/Icons/information.svg
diff --git a/wondrous-bot-admin/src/components/Shared/Tooltip/index.tsx b/wondrous-bot-admin/src/components/Shared/Tooltip/index.tsx
@@ -0,0 +1,26 @@
+import { Tooltip } from "@mui/material";
+
+export const StyledInformationTooltip = ({ children, ...props }) => {
+  return (
+    <Tooltip
+      arrow
+      title={props?.title}
+      {...props}
+      componentsProps={{
+        tooltip: {
+          sx: {
+            bgcolor: "#2a8d5c",
+            fontFamily: "Poppins",
+            fontWeight: 500,
+            fontSize: "13px",
+            "& .MuiTooltip-arrow": {
+              color: "#2a8d5c",
+            },
+          },
+        },
+      }}
+    >
+      {children}
+    </Tooltip>
+  );
+};
diff --git a/wondrous-bot-admin/src/components/ViewQuestResults/ViewCampaignOverview.tsx b/wondrous-bot-admin/src/components/ViewQuestResults/ViewCampaignOverview.tsx
@@ -1,32 +1,65 @@
-import { Grid } from '@mui/material';
-import { Label } from 'components/CreateTemplate/styles';
-import { StyledViewQuestResults } from './styles';
+import { Grid, Tooltip } from "@mui/material";
+import { Label } from "components/CreateTemplate/styles";
+import InformationTooltip from "components/Icons/information.svg";
+import { StyledViewQuestResults } from "./styles";
+import { StyledInformationTooltip } from "components/Shared/Tooltip";
 
-const getBooleanText = (value) => (value ? 'Yes' : 'No');
+const getBooleanText = (value) => (value ? "Yes" : "No");
 
 const ViewCampaignOverview = ({ questSettings }) => {
   return (
     <>
       {questSettings?.map((quest, idx) => {
+        console.log("quest, qe", quest);
         return (
           <Grid
-            display='flex'
-            justifyContent='flex-start'
-            alignItems='center'
-            width='100%'
-            key={idx + 'quest'}
-            gap='10%'
+            display="flex"
+            justifyContent="flex-start"
+            alignItems="center"
+            width="100%"
+            key={idx + "quest"}
+            gap="10%"
           >
             <Label>{quest.label}</Label>
-            {quest.type !== 'rewards' ? (
-              <StyledViewQuestResults>
-                {quest.type === 'boolean' ? getBooleanText(quest.value) : null}
-                {quest.type === 'text' ? quest.value : null}
-              </StyledViewQuestResults>
+            {quest.type !== "rewards" ? (
+              <>
+                <StyledViewQuestResults
+                  style={{
+                    position: "relative",
+                  }}
+                >
+                  {quest.type === "boolean" ? getBooleanText(quest.value) : null}
+                  {quest.type === "text" ? quest.value : null}
+                  {quest.label === "Max Submissions" && (
+                    <StyledInformationTooltip
+                      placement="right"
+                      title="The maximum number of approved submissions each user can submit for this quest"
+                    >
+                      <img
+                        src={InformationTooltip}
+                        alt="information"
+                        style={{ width: "16px", height: "16px", marginLeft: "8px", position: "absolute", right: -26 }}
+                      />
+                    </StyledInformationTooltip>
+                  )}
+                  {quest.label === "Max Approvals" && (
+                    <StyledInformationTooltip
+                      placement="right"
+                      title="The total number of approved submissions allowed for this quest"
+                    >
+                      <img
+                        src={InformationTooltip}
+                        alt="information"
+                        style={{ width: "16px", height: "16px", marginLeft: "8px", position: "absolute", right: -26 }}
+                      />
+                    </StyledInformationTooltip>
+                  )}
+                </StyledViewQuestResults>
+              </>
             ) : null}
-            {quest.type === 'rewards'
+            {quest.type === "rewards"
               ? quest.value.map((reward, key) => (
-                  <StyledViewQuestResults $isReward key={reward.type + 'reward'}>
+                  <StyledViewQuestResults $isReward key={reward.type + "reward"}>
                     {reward.value} {reward.type}
                   </StyledViewQuestResults>
                 ))

diff --git a/wondrous-bot-admin/src/pages/discord/callback/index.tsx b/wondrous-bot-admin/src/pages/discord/callback/index.tsx
@@ -7,6 +7,8 @@ import { DISCORD_CONNECT_TYPES, GRAPHQL_ERRORS } from "utils/constants";
 import { useLocation, useNavigate } from "react-router-dom";
 import PageSpinner from "components/PageSpinner";
 import { handleUserOnboardingRedirect } from "utils/common";
+import PageWrapper from "components/Shared/PageWrapper";
+import { BG_TYPES } from "utils/constants";
 
 function DiscordCallback() {
   const location = useLocation();
@@ -18,42 +20,24 @@ function DiscordCallback() {
   const [discordSignupLogin, { data, loading }] = useMutation(USER_DISOCRD_SIGNUP_LOGIN);
 
   const parsedState = state ? JSON.parse(state) : {};
-  console.log(parsedState, 'parsed state')
   const returnToPage = useCallback(() => {
-    navigate(
-      `/login?discordConnectError=true&${new URLSearchParams(parsedState)?.toString()}`
-    );
+    navigate(`/login?discordConnectError=true&${new URLSearchParams(parsedState)?.toString()}`);
   }, [state, navigate]);
 
   useEffect(() => {
     if (code && state && !data?.discordSignupLogin && !loading) {
       const parsedState = JSON.parse(state);
-      if (
-        parsedState.callbackType === DISCORD_CONNECT_TYPES.connectOnboarding ||
-        parsedState.callbackType === DISCORD_CONNECT_TYPES.loginMethod ||
-        parsedState.callbackType === DISCORD_CONNECT_TYPES.connectOnboardingDao ||
-        parsedState.callbackType === DISCORD_CONNECT_TYPES.connectSettings
-      ) {
+      if (parsedState.callbackType === DISCORD_CONNECT_TYPES.questPreview) {
         connectUserDiscord({
           variables: {
             discordAuthCode: code,
             communities: true,
           },
         })
           .then((result) => {
-            if (parsedState.callbackType === DISCORD_CONNECT_TYPES.connectSettings) {
+            if (parsedState.callbackType === DISCORD_CONNECT_TYPES.questPreview) {
               // Only place to change this is in settings
-              window.location.href = `/profile/settings`;
-            } else if (parsedState.callbackType === DISCORD_CONNECT_TYPES.loginMethod) {
-              window.location.href = `/profile/login-methods`;
-            } else if (parsedState.callbackType === DISCORD_CONNECT_TYPES.connectOnboarding) {
-              navigate(
-                `/onboarding/discord?success${
-                  parsedState?.collabInvite ? `&collabInvite=${parsedState?.collabInvite}` : ""
-                }`
-              );
-            } else if (parsedState.callbackType === DISCORD_CONNECT_TYPES.connectOnboardingDao) {
-              navigate("/");
+              window.location.href = `/quests/${parsedState?.questId}`;
             }
           })
           .catch((err) => {
@@ -62,24 +46,13 @@ function DiscordCallback() {
               err?.graphQLErrors &&
               err?.graphQLErrors[0]?.extensions.errorCode === GRAPHQL_ERRORS.DISCORD_USER_ALREADY_EXISTS;
 
-            if (parsedState.callbackType === DISCORD_CONNECT_TYPES.connectSettings) {
+            if (parsedState.callbackType === DISCORD_CONNECT_TYPES.questPreview) {
               // Only place to change this is in settings
               if (alreadyExists) {
-                window.location.href = `/profile/settings?discordUserExists=true`;
+                window.location.href = `/quests/${parsedState?.questId}?discordUserExists=true`;
               } else {
-                window.location.href = `/profile/settings?discordError=true`;
+                window.location.href = `/quests/${parsedState?.questId}?discordError=true`;
               }
-            } else if (parsedState.callbackType === DISCORD_CONNECT_TYPES.loginMethod) {
-              // Only place to change this is in settings
-              if (alreadyExists) {
-                window.location.href = `/profile/login-methods?discordUserExists=true`;
-              } else {
-                window.location.href = `/profile/login-methods?discordError=true`;
-              }
-            } else if (parsedState.callbackType === DISCORD_CONNECT_TYPES.connectOnboarding) {
-              navigate("/");
-            } else if (parsedState.callbackType === DISCORD_CONNECT_TYPES.connectOnboardingDao) {
-              navigate("/");
             }
           });
       } else if (
@@ -100,15 +73,24 @@ function DiscordCallback() {
             const discordUser = response?.user;
             await storeAuthHeader(token, discordUser);
             if (parsedState.callbackType === DISCORD_CONNECT_TYPES.login) {
-              return handleUserOnboardingRedirect(null, navigate, {
-                token: inviteToken
-              }, "/")
+              return handleUserOnboardingRedirect(
+                null,
+                navigate,
+                {
+                  token: inviteToken,
+                },
+                "/"
+              );
             }
-            if(parsedState.callbackType === DISCORD_CONNECT_TYPES.signup) {
-              return handleUserOnboardingRedirect(null, navigate, {
-                token: inviteToken
-              }, "/onboarding/welcome")
-
+            if (parsedState.callbackType === DISCORD_CONNECT_TYPES.signup) {
+              return handleUserOnboardingRedirect(
+                null,
+                navigate,
+                {
+                  token: inviteToken,
+                },
+                "/onboarding/welcome"
+              );
             }
           })
           .catch((err) => {
@@ -119,22 +101,31 @@ function DiscordCallback() {
     }
   }, [data?.discordSignupLogin, loading]);
   return (
-    <Grid
-      width="100%"
-      height="100%"
-      minWidth="100vw"
-      minHeight="100vh"
-      display="flex"
-      flexDirection="column"
-      justifyContent="center"
-      alignItems="center"
-      gap="24px"
+    <PageWrapper
+      bgType={BG_TYPES.DEFAULT}
+      containerProps={{
+        minHeight: "100vh",
+        flexDirection: "column",
+        gap: "42px",
+        padding: {
+          xs: "14px 14px 120px 14px",
+          sm: "24px 56px",
+        },
+      }}
     >
-      <Typography fontFamily="Poppins" fontWeight="700" fontSize="62px" color="black">
-        Connecting Discord
-      </Typography>
-      <PageSpinner />
-    </Grid>
+      <Grid
+        width="100%"
+        display="flex"
+        flexDirection="column"
+        justifyContent="flex-start"
+        alignItems="center"
+      >
+        <Typography fontFamily="Poppins" fontWeight="600" fontSize="50px" color="white">
+          Connecting Discord
+        </Typography>
+        <PageSpinner />
+      </Grid>
+    </PageWrapper>
   );
 }