Feat/quest steps - TELEGRAM WEB APP

wondrous-app/components/Settings/Integrations/Helpers/TelegramIntegrationFooter.tsx

@@ -1,13 +1,46 @@
 import { useContext } from 'react';
 import { getTelegramBotLink } from 'utils/index';
-import ConnectionContext from './ConnectionContext';
+import * as yup from 'yup';
+import { CONNECT_TELEGRAM_BOT } from 'graphql/mutations';
+import { useMutation } from '@apollo/client';
 import FooterButtons from './FooterButtons';
+import ConnectionContext from './ConnectionContext';
+
+const telegramGroupIdSchema = yup
+  .number()
+  .integer('ID must be an integer.')
+  .negative('ID must be negative.')
+  .required('ID is required.');
+
+const validateTelegramGroupId = async (groupId) => {
+  try {
+    await telegramGroupIdSchema.validate(groupId);
+    return true;
+  } catch (error) {
+    console.error(error.message);
+    return false;
+  }
+};
 
 const TelegramIntegrationFooter = () => {
-  const { onClose, data } = useContext(ConnectionContext);
-  const tgLink = getTelegramBotLink();
-  const handleOnClick = () => window.open(tgLink, '_blank');
-  return <FooterButtons title="Connect Telegram" onClose={onClose} action={handleOnClick} />;
+  const [connectTelegram] = useMutation(CONNECT_TELEGRAM_BOT, {
+    refetchQueries: ['getOrgIntegrations', 'getPodIntegrations'],
+  });
+
+  const { onClose, data, setData, orgId, podId } = useContext(ConnectionContext);
+  const handleConnect = () => {
+    const { tgValue } = data;
+    validateTelegramGroupId(tgValue).then((isValid) => {
+      if (isValid) {
+        connectTelegram({ variables: { chatId: `${tgValue}`, orgId, podId } });
+        onClose();
+      } else {
+        setData((prev) => ({ ...prev, tgError: 'Invalid Group ID' }));
+      }
+    });
+  };
+
+  return <FooterButtons title="Connect Telegram" onClose={onClose} action={handleConnect} />;
 };
 
 export default TelegramIntegrationFooter;

wondrous-app/components/Settings/Integrations/TelegramIntegration.tsx

@@ -1,88 +1,65 @@
-import { Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 import GradientHeading from 'components/GradientHeading';
 import { UnstyledLink } from 'components/WorkspacePicker/styles';
 import { NewTabIcon } from 'components/Icons/taskModalIcons';
 import palette from 'theme/palette';
 import { CopyContainer, CopyTypography } from 'components/Common/InviteLinkModal/styles';
 import CopyIcon from 'components/Icons/copy';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { useMutation } from '@apollo/client';
-import { CONNECT_TELEGRAM } from 'graphql/mutations';
+import { CONNECT_TELEGRAM_BOT } from 'graphql/mutations';
 import { getTelegramBotLink } from 'utils/index';
-import { TelegramBotInfo, TelegramLabel } from './styles';
+import { ErrorText } from 'components/Common';
+import { GroupInput, TelegramBotInfo, TelegramLabel } from './styles';
 import ConnectionContext from './Helpers/ConnectionContext';
 
 const TelegramIntegration = () => {
-  const { orgId, podId } = useContext(ConnectionContext);
-
-  const [copied, setCopied] = useState(false);
-
-  const [connectTelegram, { data }] = useMutation(CONNECT_TELEGRAM, {
-    variables: {
-      orgId,
-      podId,
-    },
-  });
-
-  const token = `token:${data?.connectTelegram}`;
-
-  useEffect(() => {
-    if (orgId) {
-      connectTelegram();
-    }
-  }, [orgId, podId]);
-
-  const handleOnCopy = () => {
-    navigator.clipboard.writeText(`${token}`);
-    setCopied(true);
-  };
+  const { data, setData } = useContext(ConnectionContext);
+  const { tgError } = data;
 
   const tgLink = getTelegramBotLink();
 
   return (
     <Grid display="flex" direction="column" gap="12px">
       <GradientHeading fontSize={16}>Setup instructions</GradientHeading>
-      <TelegramLabel>Step 1 speak to our bot</TelegramLabel>
-      <UnstyledLink href={tgLink} target="__blank">
-        <Grid
-          display="flex"
-          gap="8px"
-          alignItems="center"
-          bgcolor={palette.grey920}
-          borderRadius="6px"
-          padding="6px 10px 6px 8px"
-          height="32px"
-          width="fit-content"
-        >
-          <TelegramBotInfo>@wonderverse_bot</TelegramBotInfo>
-          <NewTabIcon />
-        </Grid>
-      </UnstyledLink>
-      <TelegramLabel>Step 2</TelegramLabel>
-      <Grid display="flex" gap="14px" alignItems="center">
-        <Grid
-          display="flex"
-          gap="8px"
-          alignItems="center"
-          bgcolor={palette.grey920}
-          borderRadius="6px"
-          padding="6px 10px 6px 8px"
-          height="32px"
-          width="100%"
-        >
-          <TelegramBotInfo>{token}</TelegramBotInfo>
-        </Grid>
-        <CopyContainer
-          $copied={copied}
-          onClick={handleOnCopy}
-          style={{
-            height: '32px',
-          }}
-        >
-          <CopyIcon color={copied ? palette.green30 : palette.blue20} />
-          <CopyTypography $copied={copied}>{copied ? 'Code copied' : 'Copy code'}</CopyTypography>
-        </CopyContainer>
+      <Grid display="flex" gap="12px">
+        <Box display="flex" flexDirection="column" gap="12px" width="100%" flex="1">
+          <TelegramLabel>Link WonderBot</TelegramLabel>
+          <UnstyledLink href={tgLink} target="__blank">
+            <Grid
+              display="flex"
+              gap="8px"
+              alignItems="center"
+              bgcolor={palette.grey920}
+              borderRadius="6px"
+              padding="6px 10px 6px 8px"
+              height="32px"
+              width="100%"
+            >
+              <TelegramBotInfo>@wonderverse_bot</TelegramBotInfo>
+              <NewTabIcon />
+            </Grid>
+          </UnstyledLink>
+        </Box>
+        <Box display="flex" flexDirection="column" gap="12px" width="100%" flex="1">
+          <TelegramLabel>Group ID</TelegramLabel>
+          <Grid display="flex" gap="14px" alignItems="center">
+            <Grid
+              display="flex"
+              gap="8px"
+              alignItems="center"
+              bgcolor={palette.grey920}
+              borderRadius="6px"
+              padding="6px 10px 6px 8px"
+              height="32px"
+              width="100%"
+            >
+              <GroupInput type="number" onChange={(e) => setData((prev) => ({ ...prev, tgValue: e.target.value }))} />
+            </Grid>
+          </Grid>
+        </Box>
       </Grid>
+      {tgError ? <ErrorText>{tgError}</ErrorText> : null}
     </Grid>
   );
 };

wondrous-app/components/Settings/Integrations/styles.tsx

@@ -218,3 +218,13 @@ export const TelegramBotInfo = styled(Typography)`
     line-height: 17px;
   }
 `;
+
+export const GroupInput = styled(InputBase)`
+  && {
+    color: ${palette.white};
+    font-family: ${typography.fontFamily};
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 17px;
+  }
+`;

wondrous-app/graphql/mutations/integration.ts

@@ -162,9 +162,11 @@ export const CONNECT_COORDINAPE_TO_ORG = gql`
   }
 `;
 
-export const CONNECT_TELEGRAM = gql`
-  mutation connectTelegram($orgId: ID, $podId: ID) {
-    connectTelegram(orgId: $orgId, podId: $podId)
+export const CONNECT_TELEGRAM_BOT = gql`
+  mutation connectTelegram($orgId: ID, $chatId: String, $podId: ID) {
+    connectTelegram(orgId: $orgId, chatId: $chatId, podId: $podId) {
+      success
+    }
   }
 `;
 

wondrous-app/utils/index.ts

@@ -91,7 +91,7 @@ export const getBoardType = ({ orgBoard, podBoard, userBoard }) => {
 
 export const getTelegramBotLink = () => {
   if (process.env.NEXT_PUBLIC_PRODUCTION) {
-    return 'https://t.me/wonderverse_bot';
+    return 'https://t.me/wonderverse_bot?startgroup=true&admin=post_messages';
   }
-  return 'https://t.me/wonderverse_staging_bot';
+  return 'https://t.me/wonderverse_test_bot?startgroup=true&admin=post_messages';
 };

wondrous-bot-admin/index.html

@@ -10,10 +10,13 @@
       rel="stylesheet"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://telegram.org/js/telegram-web-app.js"></script>
+
     <title>Wonderverse Communities</title>
   </head>
   <body>
     <div id="root"></div>
+
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

wondrous-bot-admin/src/App.tsx

@@ -44,6 +44,8 @@ import VerifyLinkPage from "pages/verify-link";
 import AnalyticsPage from "pages/analytics";
 import PremiumFeatureDialog from "components/PremiumFeatureDialog";
 import PaywallContext from "utils/context/PaywallContext";
+import ConnectPage from "pages/settings/connect";
+import TelegramStatQuest from "pages/telegram/start-quest";
 import PaywallContextProvider from "utils/context/PaywallContext";
 
 const router = createBrowserRouter([
@@ -74,6 +76,10 @@ const router = createBrowserRouter([
         path: "/settings/billing",
         element: <BillingPage />,
       },
+      {
+        path: "/settings/connect",
+        element: <ConnectPage />,
+      },
       {
         path: "/",
         element: <Home />,
@@ -162,6 +168,10 @@ const router = createBrowserRouter([
         path: "/analytics",
         element: <AnalyticsPage />,
       },
+      {
+        path: "/telegram/start-quest/:id",
+        element: <TelegramStatQuest />,
+      },
     ],
   },
 ]);