From 03c471d3e8b43092cf199bf67bbb754df1759e73 Mon Sep 17 00:00:00 2001 From: terryli0095 Date: Thu, 29 Jun 2023 13:39:57 -0700 Subject: [PATCH 1/2] fix quest preview --- .../src/pages/discord/callback/index.tsx | 109 ++++++++---------- .../src/pages/quests/QuestResultsPage.tsx | 25 +++- wondrous-bot-admin/src/utils/constants.tsx | 5 +- 3 files changed, 71 insertions(+), 68 deletions(-) diff --git a/wondrous-bot-admin/src/pages/discord/callback/index.tsx b/wondrous-bot-admin/src/pages/discord/callback/index.tsx index 25b7afea68..38a5258981 100644 --- 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,22 +20,14 @@ 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, @@ -41,19 +35,9 @@ function DiscordCallback() { }, }) .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 ( - - - Connecting Discord - - - + + + Connecting Discord + + + + ); } diff --git a/wondrous-bot-admin/src/pages/quests/QuestResultsPage.tsx b/wondrous-bot-admin/src/pages/quests/QuestResultsPage.tsx index 6266f09662..62c2427cff 100644 --- a/wondrous-bot-admin/src/pages/quests/QuestResultsPage.tsx +++ b/wondrous-bot-admin/src/pages/quests/QuestResultsPage.tsx @@ -22,13 +22,19 @@ import { getDiscordUrl } from "utils/discord"; import { getBaseUrl } from "utils/common"; import { useTour } from "@reactour/tour"; import { useMe } from "components/Auth"; +import useAlerts from "utils/hooks"; + const QuestResultsPage = () => { const navigate = useNavigate(); const [errors, setErrors] = useState({}); const location = useLocation(); const { user } = useMe() || {}; - const isEditInQuery = new URLSearchParams(location.search).get("edit") === "true"; + const { setSnackbarAlertMessage, setSnackbarAlertOpen } = useAlerts(); + const searchParams = new URLSearchParams(location.search); + const isEditInQuery = searchParams.get("edit") === "true"; + const discordError = searchParams.get("discordError") === "true"; + const discordUserExists = searchParams.get("discordUserExists") === "true"; const [isEditMode, setIsEditMode] = useState(isEditInQuery); const [connectDiscordModalOpen, setConnectDiscordModalOpen] = useState(false); const [notInGuildError, setNotInGuildError] = useState(false); @@ -38,7 +44,16 @@ const QuestResultsPage = () => { const headerActionsRef = useRef(null); const { setIsOpen } = useTour(); const [getQuestRewards, { data: questRewardsData }] = useLazyQuery(GET_QUEST_REWARDS); - + useEffect(() => { + if (discordError) { + setSnackbarAlertMessage("Error connecting Discord"); + setSnackbarAlertOpen(true); + } + if (discordUserExists){ + setSnackbarAlertMessage("This Discord account is already connected to another account"); + setSnackbarAlertOpen(true); + } + }, [discordError, discordUserExists]); useEffect(() => { if (id) { getQuestRewards({ @@ -136,7 +151,6 @@ const QuestResultsPage = () => { }, [getQuestById?.steps, isEditMode]); const shareUrl = `${getBaseUrl()}/quest?id=${getQuestById?.id}`; - console.log("questSteps", questSteps); return ( { onClick={() => { const discordUrl = `${getDiscordUrl()}&state=${encodeURIComponent( JSON.stringify({ - callbackType: DISCORD_CONNECT_TYPES.connectSettings, + callbackType: DISCORD_CONNECT_TYPES.questPreview, + questId: id, }) )}`; - window.open(discordUrl, "_blank"); + window.location.href = discordUrl; }} > Connect diff --git a/wondrous-bot-admin/src/utils/constants.tsx b/wondrous-bot-admin/src/utils/constants.tsx index ead5000d1c..19aef85b8b 100644 --- a/wondrous-bot-admin/src/utils/constants.tsx +++ b/wondrous-bot-admin/src/utils/constants.tsx @@ -64,10 +64,7 @@ export const DAY_STRING_MONTH_SHORT_YEAR = "DD/MMM/YY"; export const DISCORD_CONNECT_TYPES = { signup: "signup", login: "login", - loginMethod: "login-method", - connectSettings: "connectSettings", - connectOnboarding: "connectOnboarding", - connectOnboardingDao: "connectOnboardingDao", + questPreview: "questPreview", }; export const GRAPHQL_ERRORS = { From 86c24090e71a14066718461864d4275b8434debe Mon Sep 17 00:00:00 2001 From: Andros Date: Sat, 1 Jul 2023 12:08:42 -0700 Subject: [PATCH 2/2] feat: add tool tips for max approvals and max submissions --- .../components/CreateTemplate/MaxInput.tsx | 52 +++++++++----- .../src/components/Icons/information.svg | 4 ++ .../src/components/Shared/Tooltip/index.tsx | 26 +++++++ .../ViewQuestResults/ViewCampaignOverview.tsx | 67 ++++++++++++++----- 4 files changed, 117 insertions(+), 32 deletions(-) create mode 100644 wondrous-bot-admin/src/components/Icons/information.svg create mode 100644 wondrous-bot-admin/src/components/Shared/Tooltip/index.tsx diff --git a/wondrous-bot-admin/src/components/CreateTemplate/MaxInput.tsx b/wondrous-bot-admin/src/components/CreateTemplate/MaxInput.tsx index aa52a3e250..96388cc893 100644 --- 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 ( - + { setQuestSettings((prev) => ({ @@ -30,8 +28,32 @@ const MaxInput = (props) => { /> + {stateKey === "maxSubmission" && ( + + information + + )} + {stateKey === "maxApproval" && ( + + information + + )} ); }; -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 new file mode 100644 index 0000000000..7f677020da --- /dev/null +++ b/wondrous-bot-admin/src/components/Icons/information.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wondrous-bot-admin/src/components/Shared/Tooltip/index.tsx b/wondrous-bot-admin/src/components/Shared/Tooltip/index.tsx new file mode 100644 index 0000000000..1dc0a640ec --- /dev/null +++ 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 ( + + {children} + + ); +}; diff --git a/wondrous-bot-admin/src/components/ViewQuestResults/ViewCampaignOverview.tsx b/wondrous-bot-admin/src/components/ViewQuestResults/ViewCampaignOverview.tsx index 17cdad489a..cc6545dd0b 100644 --- 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 ( - {quest.type !== 'rewards' ? ( - - {quest.type === 'boolean' ? getBooleanText(quest.value) : null} - {quest.type === 'text' ? quest.value : null} - + {quest.type !== "rewards" ? ( + <> + + {quest.type === "boolean" ? getBooleanText(quest.value) : null} + {quest.type === "text" ? quest.value : null} + {quest.label === "Max Submissions" && ( + + information + + )} + {quest.label === "Max Approvals" && ( + + information + + )} + + ) : null} - {quest.type === 'rewards' + {quest.type === "rewards" ? quest.value.map((reward, key) => ( - + {reward.value} {reward.type} ))