Merge pull request #26 from tonalty/added-error-message-earn-points

src/api/queries.ts

@@ -177,6 +177,21 @@ export function useBotInfo() {
   });
 }
 
+export function useBotStatus(chatId: number | undefined) {
+  return useQuery({
+    queryKey: ['botInfo', chatId],
+    queryFn: async ({ signal }) => {
+      const result = await apiClient.GET('/backend/telegram/botInfo/{chatId}', {
+        signal,
+        params: { path: { chatId: Number(chatId) } }
+      });
+
+      return result.data as unknown as { isAdmin: boolean };
+    },
+    enabled: !!chatId
+  });
+}
+
 export function useUserRewardById(rewardId: string, chatId?: number | string) {
   return useQuery({
     queryKey: ['userRewardById', rewardId, chatId],

src/api/schema.d.ts

@@ -36,6 +36,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/backend/telegram/botInfo/{chatId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["TelegramController_getBotStatus"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/backend/community/admin-user": {
         parameters: {
             query?: never;
@@ -443,6 +459,25 @@ export interface operations {
             };
         };
     };
+    TelegramController_getBotStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                chatId: number;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     CommunityController_getAdminCommunities: {
         parameters: {
             query?: never;

src/components/ReferralLink.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { Divider, IconButton, InputBase, Paper } from '@mui/material';
-import { Caption } from '@telegram-apps/telegram-ui';
 import axios from 'axios';
 import styled from 'styled-components';
 
@@ -52,15 +51,6 @@ export function ReferralLink(props: Props) {
     }
   };
 
-  if (!referral) {
-    return (
-      <Caption style={{ color: 'red' }}>
-        Please, make sure that bot has admin rights inside group! Without it link could not be
-        generated.
-      </Caption>
-    );
-  }
-
   return (
     <Container>
       <Paper elevation={5} sx={{ display: 'flex', 'align-items': 'center' }}>

src/components/SectionWithCaptionContainer.tsx

@@ -4,8 +4,13 @@ import { Section } from './telegram-ui/Blocks';
 
 interface Props {
   title: ReactNode;
+  className?: string;
 }
 
 export const SectionWithTitleContainer: FC<PropsWithChildren<Props>> = (props) => {
-  return <Section header={props.title}>{props.children}</Section>;
+  return (
+    <Section header={props.title} className={props.className}>
+      {props.children}
+    </Section>
+  );
 };

src/components/modals/ModalEarnPoints.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Caption, ModalProps, Placeholder } from '@telegram-apps/telegram-ui';
+import { ModalProps, Placeholder } from '@telegram-apps/telegram-ui';
 
 import { TriggerType } from '@/enums/TriggerType';
 import { CommunityUser } from '@/interfaces/CommunityUser';
@@ -38,12 +38,6 @@ export const ModalEarnPoints: FC<Props> = ({
             style={{ paddingBottom: '10px' }}
             header={`Set any ${threshold}+ available or premium reactions and earn points`}
           />
-          {/* TODO handle this case from backend */}
-          <Caption
-            style={{ color: 'red', textAlign: 'center', display: 'flex', padding: '0 12px 12px' }}>
-            Please, make sure that bot has admin rights inside group! Without it you will not get
-            your points.
-          </Caption>
         </>
       ) : (
         <Placeholder

src/components/sections/EarnPointsSection.module.css

@@ -0,0 +1,25 @@
+.wrapper {
+  position: relative;
+}
+
+.msg {
+  display: flex;
+  font-size: 16px;
+  line-height: 22px;
+  align-items: center;
+  background: #ffeaea;
+  text-align: left;
+  padding-left: 16px;
+  height: 68px;
+  border-radius: 16px;
+}
+
+.msgDark {
+  color: black;
+}
+
+.svgWrapper {
+  position: absolute;
+  top: 20px;
+  left: 110px;
+}

src/components/sections/EarnPointsSection.tsx

@@ -1,20 +1,41 @@
 import { FC, useState } from 'react';
+import { classNames, useMiniApp } from '@tma.js/sdk-react';
 
+import { useBotStatus } from '@/api/queries';
 import { EarnPointsButton } from '@/components/EarnPointsButton';
 import { SectionWithTitleContainer } from '@/components/SectionWithCaptionContainer';
 import { TriggerType } from '@/enums/TriggerType';
+import { ErrorIcon } from '@/icons/ErrorIcon';
 import { CommunityUser } from '@/interfaces/CommunityUser';
 import { Triggers } from '@/interfaces/Triggers';
 import { ModalEarnPoints } from '../modals/ModalEarnPoints';
+import styles from './EarnPointsSection.module.css';
 
 interface Props {
   communityUser: CommunityUser;
   triggers: Triggers;
+  chatId?: number;
 }
 
-export const EarnPointsSection: FC<Props> = ({ communityUser, triggers }: Props) => {
+export const EarnPointsSection: FC<Props> = ({ communityUser, triggers, chatId }: Props) => {
   const [currentTriggerType, setCurrentTriggerType] = useState<TriggerType>();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const miniApp = useMiniApp();
+
+  const { data: status } = useBotStatus(chatId);
+
+  if (status && !status.isAdmin) {
+    return (
+      <SectionWithTitleContainer className={classNames(styles.wrapper)} title="Earn points">
+        <div className={classNames(styles.svgWrapper)}>
+          <ErrorIcon></ErrorIcon>
+        </div>
+        <div className={classNames(styles.msg, miniApp.isDark ? styles.msgDark : '')}>
+          To get bonus rewards, the bot should has an administrator access to the group.
+        </div>
+      </SectionWithTitleContainer>
+    );
+  }
 
   const handleModalOpen = (value: boolean) => {
     setIsModalOpen(value);

src/icons/ErrorIcon.tsx

@@ -0,0 +1,32 @@
+interface Props {
+  [key: string]: unknown;
+}
+
+export const ErrorIcon = (props: Props) => {
+  return (
+    <svg
+      {...props}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 14.6909C11.6953 14.6909 14.6909 11.6953 14.6909 8C14.6909 4.30471 11.6953 1.30909 8 1.30909C4.30471 1.30909 1.30909 4.30471 1.30909 8C1.30909 11.6953 4.30471 14.6909 8 14.6909ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+        fill="#FF3A30"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 3.70909C8.3615 3.70909 8.65455 4.00214 8.65455 4.36364V8.36364C8.65455 8.72513 8.3615 9.01818 8 9.01818C7.6385 9.01818 7.34546 8.72513 7.34546 8.36364V4.36364C7.34546 4.00214 7.6385 3.70909 8 3.70909Z"
+        fill="#FF3A30"
+      />
+      <path
+        d="M8.90909 11.4545C8.90909 11.9566 8.50208 12.3636 8 12.3636C7.49792 12.3636 7.09091 11.9566 7.09091 11.4545C7.09091 10.9525 7.49792 10.5455 8 10.5455C8.50208 10.5455 8.90909 10.9525 8.90909 11.4545Z"
+        fill="#FF3A30"
+      />
+    </svg>
+  );
+};

src/pages/CommunityUser.tsx

@@ -84,7 +84,11 @@ export const CommunityUser: FC = () => {
       </Section>
 
       {userCommunity && (triggers?.reaction?.isEnabled || triggers?.referral?.isEnabled) ? (
-        <EarnPointsSection triggers={triggers} communityUser={userCommunity} />
+        <EarnPointsSection
+          chatId={Number(chatId)}
+          triggers={triggers}
+          communityUser={userCommunity}
+        />
       ) : null}
 
       <div