Merge pull request #2262 from wondrous-dev/staging

Staging

wondrous-bot-admin/src/components/StartReferralQuests/ReferralAction.tsx

@@ -0,0 +1,75 @@
+import { Masonry } from "@mui/lab";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+import IndividualQuestComponent from "./IndividualQuestComponent";
+import { useDiscordConnect } from "./utils/hooks";
+import { SharedSecondaryButton } from "components/Shared/styles";
+import { shouldDisplayJoinDiscordButton } from "./utils/customization";
+
+const EndedCampaignPrompt = ({ orgId }) => {
+  const { isMember, handleJoinDiscord } = useDiscordConnect({
+    orgId,
+  });
+
+  const handleClick = () => {
+    return handleJoinDiscord({
+      shouldVerify: false,
+    });
+  };
+
+  return (
+    <Box height="100%">
+      <SharedSecondaryButton onClick={handleClick}>{isMember ? "Visit Discord" : "Join Discord"}</SharedSecondaryButton>
+    </Box>
+  );
+};
+
+const ReferralAction = ({ quests, onStartQuest, hasEnded = false, orgId }) => {
+  const masonryColumnsConfig = useMemo(() => {
+    if (quests?.length <= 1) {
+      return { xs: 1 };
+    } else if (quests?.length <= 2) {
+      return { xs: 1, sm: 2 };
+    }
+    return { xs: 1, sm: 2, md: 2, lg: 3 };
+  }, [quests?.length]);
+
+  const showDiscordButton = shouldDisplayJoinDiscordButton(orgId);
+  if (hasEnded && showDiscordButton) return <EndedCampaignPrompt orgId={orgId} />;
+  return (
+    <Box
+      bgcolor="#AF9EFF"
+      height="100%"
+      padding="32px 56px"
+      display="flex"
+      width="100%"
+      flex="1"
+      justifyContent="center"
+      alignItems="flex-start"
+    >
+      <Masonry
+        spacing={4}
+        columns={masonryColumnsConfig}
+        sx={{
+          alignContent: "center",
+          width: "100%",
+        }}
+      >
+        {quests?.map((quest, index) => (
+          <Box
+            width="100%"
+            display="flex"
+            justifyContent="center"
+            sx={{
+              maxWidth: "350px",
+            }}
+          >
+            <IndividualQuestComponent quest={quest} key={index} onStartQuest={onStartQuest} />
+          </Box>
+        ))}
+      </Masonry>
+    </Box>
+  );
+};
+
+export default ReferralAction;

wondrous-bot-admin/src/components/StartReferralQuests/index.tsx

@@ -12,9 +12,20 @@ import useStartQuest from "./utils/hooks";
 import SafeImage from "components/SafeImage";
 import InactiveQuestInfoModal from "./InactiveQuest";
 import moment from "moment";
+import ReferralAction from "./ReferralAction";
+import { shouldDisplayJoinDiscordButton } from "./utils/customization";
 
-const TopBarMessage = ({ displayName, hasEnded }) => {
-  if (hasEnded) return <>This campaign has ended, but you can still complete the quests below!</>;
+const TopBarMessage = ({ displayName, hasEnded, orgId }) => {
+  const showDiscordButton = shouldDisplayJoinDiscordButton(orgId);
+
+  if (hasEnded)
+    return (
+      <>
+        {showDiscordButton
+          ? "This campaign is no longer active, but join our Discord to discover more quests!"
+          : "This campaign has ended, but you can still complete the quests below!"}
+      </>
+    );
   return (
     <>
       <strong>{displayName}</strong> referred you, complete the quests below!
@@ -68,15 +79,6 @@ const StartReferralQuests = ({ referralCampaign, referralCode, referralCampaignE
   const quests = referralCampaign?.quests || [];
   const rewardsValue = constructRewards({ rewards: referredRewards || [] });
 
-  const masonryColumnsConfig = useMemo(() => {
-    if (quests?.length <= 1) {
-      return { xs: 1 };
-    } else if (quests?.length <= 2) {
-      return { xs: 1, sm: 2 };
-    }
-    return { xs: 1, sm: 2, md: 2, lg: 3 };
-  }, [quests?.length]);
-
   const referralBannerImage = referralCampaign?.media?.[0]?.slug;
 
   const endDate = referralCampaign?.endDate ? moment(referralCampaign?.endDate) : null;
@@ -110,7 +112,6 @@ const StartReferralQuests = ({ referralCampaign, referralCode, referralCampaignE
           display="flex"
           width="calc(100% - 40px)"
           position="sticky"
-          flex="1 0 0"
           alignItems="center"
           justifyContent="center"
           zIndex="10"
@@ -134,7 +135,11 @@ const StartReferralQuests = ({ referralCampaign, referralCode, referralCampaignE
           >
             <Box />
             <Typography color="black" fontSize="14px" fontFamily="Poppins" fontWeight={500} textAlign={"center"}>
-              <TopBarMessage hasEnded={hasEnded} displayName={referralCodeInfo?.referrerDisplayName} />
+              <TopBarMessage
+                orgId={referralCampaign?.orgId}
+                hasEnded={hasEnded}
+                displayName={referralCodeInfo?.referrerDisplayName}
+              />
             </Typography>
             <ButtonBase
               onClick={() => setDisplayReferrer(false)}
@@ -222,50 +227,24 @@ const StartReferralQuests = ({ referralCampaign, referralCode, referralCampaignE
             {org?.description}
           </Typography>
         ) : null}
-        {referredRewards?.length ? (
+        {referredRewards?.length && !hasEnded ? (
           <Box display="flex" gap="14px" alignItems="center" justifyContent="center" flexDirection="column">
             <Typography fontFamily="Poppins" fontSize="13px" color="black" fontWeight={500}>
               Earn rewards for completing these quests!
             </Typography>
-            {!hasEnded &&<Grid container alignItems="center" gap="14px" flex="1" justifyContent="center">
+            <Grid container alignItems="center" gap="14px" flex="1" justifyContent="center">
               {rewardsValue.map(Reward)}
-            </Grid>}
+            </Grid>
           </Box>
         ) : null}
         {/* //TODO: REPLACE THIS WITH NEWEST CARD */}
 
-        <Box
-          bgcolor="#AF9EFF"
-          height="100%"
-          padding="32px 56px"
-          display="flex"
-          width="100%"
-          flex="1"
-          justifyContent="center"
-          alignItems="flex-start"
-        >
-          <Masonry
-            spacing={4}
-            columns={masonryColumnsConfig}
-            sx={{
-              alignContent: "center",
-              width: "100%",
-            }}
-          >
-            {quests?.map((quest, index) => (
-              <Box
-                width="100%"
-                display="flex"
-                justifyContent="center"
-                sx={{
-                  maxWidth: "350px",
-                }}
-              >
-                <IndividualQuestComponent quest={quest} key={index} onStartQuest={onStartQuest} />
-              </Box>
-            ))}
-          </Masonry>
-        </Box>
+        <ReferralAction
+          hasEnded={hasEnded}
+          orgId={referralCampaign?.orgId}
+          quests={quests}
+          onStartQuest={onStartQuest}
+        />
       </Grid>
     </>
   );

wondrous-bot-admin/src/components/StartReferralQuests/utils/customization.ts

@@ -0,0 +1,5 @@
+import { EXOCORE_ORG_ID } from "utils/constants";
+
+export const shouldDisplayJoinDiscordButton = (orgId) => {
+  return [EXOCORE_ORG_ID, '113598456040259806', '112829438976065706'].includes(orgId);
+};

wondrous-bot-admin/src/components/StartReferralQuests/utils/hooks.tsx

@@ -23,6 +23,72 @@ interface IProps {
   discordUrlParams: any;
 }
 
+export const useDiscordConnect = ({ orgId, discordUrlParams = {} }) => {
+  const [getOrgDiscordInviteLink, { data: orgDiscordInviteLinkData }] = useLazyQuery(GET_ORG_DISCORD_INVITE_LINK);
+
+  const { setSnackbarAlertMessage, setSnackbarAlertOpen } = useAlerts();
+  const [isDiscordConneceted, setIsDiscordConnected] = useState(false);
+  const [isMember, setIsMember] = useState(false);
+  const [isConnectionLoading, setIsConnectionLoading] = useState(false);
+
+  const handleOnCheckMembershipCompleted = async (data) => {
+    if (data?.checkCmtyUserGuildMembership?.isMember !== isMember) {
+      setIsMember(data?.checkCmtyUserGuildMembership?.isMember);
+    }
+    if (data?.checkCmtyUserGuildMembership?.isMember) {
+      setIsConnectionLoading(false);
+    }
+  };
+
+  const [checkCmtyUserGuildMembership, { startPolling: membershipStartPolling, stopPolling, data: membershipData }] =
+    useLazyQuery(CHECK_CMTY_USER_GUILD_MEMBERSHIP, {
+      notifyOnNetworkStatusChange: true,
+      fetchPolicy: "no-cache",
+      nextFetchPolicy: "no-cache",
+      onCompleted: handleOnCheckMembershipCompleted,
+    });
+
+  const handleJoinDiscord = async ({ shouldVerify } = { shouldVerify: true }) => {
+    setIsConnectionLoading(true);
+    try {
+      const { data } = await getOrgDiscordInviteLink({
+        variables: {
+          orgId: orgId,
+        },
+      });
+      const inviteLink = data?.getOrgDiscordInviteLink?.link;
+      window.open(inviteLink);
+      shouldVerify && membershipStartPolling(1000);
+    } catch (error) {
+      setIsConnectionLoading(false);
+      setSnackbarAlertMessage("Something went wrong. Please try again.");
+    }
+  };
+
+  const handleOnConnect = () => {
+    setIsConnectionLoading(true);
+    const discordAuthUrl = getDiscordUrl(
+      "/discord/callback/cmty-user-connect",
+      `&state=${encodeURIComponent(JSON.stringify(discordUrlParams))}`
+    );
+    window.open(discordAuthUrl);
+  };
+
+  return {
+    isDiscordConneceted,
+    isMember,
+    isConnectionLoading,
+    handleJoinDiscord,
+    handleOnConnect,
+    orgDiscordInviteLinkData,
+    setIsConnectionLoading,
+    handleOnCheckMembershipCompleted,
+    setIsDiscordConnected,
+    setIsMember,
+    getOrgDiscordInviteLink,
+  };
+};
+
 const useStartQuest = ({
   setInfoModalQuestId,
   orgId,
@@ -33,22 +99,22 @@ const useStartQuest = ({
   discordUrlParams,
 }: IProps) => {
   const [isQuestInactive, setIsQuestInactive] = useState(false);
-  const [isDiscordConneceted, setIsDiscordConnected] = useState(false);
-  const [isMember, setIsMember] = useState(false);
-  const [isConnectionLoading, setIsConnectionLoading] = useState(false);
-
-  const [getOrgDiscordInviteLink, { data: orgDiscordInviteLinkData }] = useLazyQuery(GET_ORG_DISCORD_INVITE_LINK);
 
   const { setSnackbarAlertMessage } = useAlerts();
 
-  const handleOnCheckMembershipCompleted = async (data) => {
-    if (data?.checkCmtyUserGuildMembership?.isMember !== isMember) {
-      setIsMember(data?.checkCmtyUserGuildMembership?.isMember);
-    }
-    if (data?.checkCmtyUserGuildMembership?.isMember) {
-      setIsConnectionLoading(false);
-    }
-  };
+  const {
+    isDiscordConneceted,
+    isMember,
+    isConnectionLoading,
+    handleJoinDiscord,
+    handleOnConnect,
+    orgDiscordInviteLinkData,
+    setIsConnectionLoading,
+    handleOnCheckMembershipCompleted,
+    setIsDiscordConnected,
+    setIsMember,
+    getOrgDiscordInviteLink,
+  } = useDiscordConnect({ orgId, discordUrlParams });
 
   const [checkCmtyUserGuildMembership, { startPolling: membershipStartPolling, stopPolling, data: membershipData }] =
     useLazyQuery(CHECK_CMTY_USER_GUILD_MEMBERSHIP, {
@@ -211,32 +277,6 @@ const useStartQuest = ({
     return () => window.removeEventListener("storage", onStorageChange);
   }, []);
 
-  const handleJoinDiscord = async () => {
-    setIsConnectionLoading(true);
-    try {
-      const { data } = await getOrgDiscordInviteLink({
-        variables: {
-          orgId: orgId,
-        },
-      });
-      const inviteLink = data?.getOrgDiscordInviteLink?.link;
-      window.open(inviteLink);
-      membershipStartPolling(1000);
-    } catch (error) {
-      setIsConnectionLoading(false);
-      setSnackbarAlertMessage("Something went wrong. Please try again.");
-    }
-  };
-
-  const handleOnConnect = () => {
-    setIsConnectionLoading(true);
-    const discordAuthUrl = getDiscordUrl(
-      "/discord/callback/cmty-user-connect",
-      `&state=${encodeURIComponent(JSON.stringify(discordUrlParams))}`
-    );
-    window.open(discordAuthUrl);
-  };
-
   const handleInfoModalClose = () => {
     setInfoModalQuestId(null);
     stopPolling?.();

wondrous-bot-admin/src/utils/constants.tsx

@@ -556,3 +556,5 @@ export const LOCKED_PATHS = ["/store", "/store/items/create", "/store/items/:id"
 export const LOCAL_STORAGE_ORG_ID_KEY = "default-org-id";
 
 export const ALLOWLIST_ADMIN_IDS = ["46108748309069853", "54694658413953389"];
+
+export const EXOCORE_ORG_ID = '113885254110937338'