Show a *Quest was deleted* alert if a deleted quest is viewed

packages/web/pages/quest/[id].tsx

@@ -1,4 +1,8 @@
 import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
   Box,
   Flex,
   Grid,
@@ -7,6 +11,7 @@ import {
   HStack,
   LoadingState,
   MetaButton,
+  Text,
 } from '@metafam/ds';
 import { httpLink } from '@metafam/utils';
 import { PageContainer } from 'components/Container';
@@ -21,6 +26,7 @@ import { QuestDetailsRequirementsRewards } from 'components/Quest/QuestDetailsRe
 import { HeadComponent } from 'components/Seo';
 import {
   QuestRepetition_Enum,
+  QuestStatus_Enum,
   useGetQuestWithCompletionsQuery,
 } from 'graphql/autogen/types';
 import { getSsrClient } from 'graphql/client';
@@ -35,7 +41,7 @@ import {
 import { useRouter } from 'next/router';
 import { SSRData } from 'next-urql';
 import DefaultQuestImage from 'public/assets/QuestsDefaultImage_900x900.jpg';
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { canCompleteQuest } from 'utils/questHelpers';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
@@ -65,6 +71,39 @@ export const QuestPage: React.FC<Props> = ({ quest_id }) => {
   // Quest image is used in QuestDetailsImage and the share image
   const questImage = httpLink(quest.image) ?? DefaultQuestImage.src;
 
+  // 'Quest was deleted' note
+  // A note is shown if we're viewing a quest that has been deleted
+  const isQuestSetAsDeleted = quest.status === QuestStatus_Enum.Deleted;
+
+  // Here's the content of the Quest was deleted note, which is shown if isQuestSetAsDeleted = true
+  function showDeletedAlert() {
+    return (
+      <Alert
+        mb={8}
+        p={6}
+        status="warning"
+        variant="subtle"
+        bgColor="whiteAlpha.100"
+      >
+        <AlertIcon boxSize="60px" mr={6} color="blue.50" />
+        <Box>
+          <AlertTitle fontSize="2xl" mb={3}>
+            Heads up!
+          </AlertTitle>
+          <AlertDescription>
+            <Text as="p" mb={2}>
+              This quest was deleted by its owner. You can view the quest
+              details, and try out the quest if you feel like it.
+            </Text>
+            <Text as="p" mb={2}>
+              You won’t be able to claim the quest or get any rewards.
+            </Text>
+          </AlertDescription>
+        </Box>
+      </Alert>
+    );
+  }
+
   return (
     <PageContainer sx={questArticleCss}>
       <HeadComponent
@@ -104,7 +143,11 @@ export const QuestPage: React.FC<Props> = ({ quest_id }) => {
               <QuestDetailsRequirementsRewards {...{ quest }} />
             </GridItem>
             <GridItem>
-              <QuestDetailsDescription {...{ quest }} />
+              <>
+                {/* Show a message if the quest has been deleted */}
+                {isQuestSetAsDeleted && showDeletedAlert()}
+                <QuestDetailsDescription {...{ quest }} />
+              </>
             </GridItem>
           </Grid>