feat: hidden chat

Author: Exerbaind

frontend/src/Routes.tsx

@@ -10,6 +10,7 @@ import {
   ClientWalletsListPage,
   ClientJoinPage,
   NotFound,
+  ClientChatHidden,
 } from '@pages'
 import { Route, Routes } from 'react-router-dom'
 
@@ -26,6 +27,7 @@ export const ROUTES_NAME = {
   CLIENT_WALLETS_LIST: '/client/:clientChatSlug/wallets-list',
   CLIENT_JOIN: '/client/:clientChatSlug/join',
   NOT_FOUND: '/not-found',
+  CLIENT_CHAT_HIDDEN: '/chat-hidden',
 }
 
 export default (
@@ -57,5 +59,9 @@ export default (
     />
     <Route path={ROUTES_NAME.CLIENT_JOIN} element={<ClientJoinPage />} />
     <Route path={ROUTES_NAME.NOT_FOUND} element={<NotFound />} />
+    <Route
+      path={ROUTES_NAME.CLIENT_CHAT_HIDDEN}
+      element={<ClientChatHidden />}
+    />
   </Routes>
 )

frontend/src/pages/admin/ChatPage/ChatPage.tsx

@@ -11,7 +11,7 @@ import {
 import { useAppNavigation, useError } from '@hooks'
 import { ROUTES_NAME } from '@routes'
 import { goTo } from '@utils'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { useApp, useAppActions, useChat, useChatActions } from '@store'
@@ -24,14 +24,15 @@ export const ChatPage = () => {
 
   const { isLoading } = useApp()
   const { toggleIsLoadingAction } = useAppActions()
-  const { showToast } = useToast()
+  const [updateChatVisibilityLoading, setUpdateChatVisibilityLoading] =
+    useState(false)
 
   const { adminChatNotFound } = useError()
 
   const { rules, chat } = useChat()
-  const { fetchChatAction } = useChatActions()
+  const { fetchChatAction, updateChatVisibilityAction } = useChatActions()
 
-  const isChatVisible = true
+  const { showToast } = useToast()
 
   const fetchChat = async () => {
     if (!chatSlug) return
@@ -43,6 +44,24 @@ export const ChatPage = () => {
     }
   }
 
+  const updateChatVisibility = async () => {
+    if (!chatSlug) return
+    try {
+      setUpdateChatVisibilityLoading(true)
+      await updateChatVisibilityAction(chatSlug, {
+        isEnabled: !chat?.isEnabled,
+      })
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setUpdateChatVisibilityLoading(false)
+      showToast({
+        message: 'Chat visibility updated',
+        type: 'success',
+      })
+    }
+  }
+
   useEffect(() => {
     toggleIsLoadingAction(true)
     fetchChat()
@@ -58,13 +77,6 @@ export const ChatPage = () => {
     goTo(chat?.joinUrl)
   }
 
-  const handleChatVisibility = () => {
-    showToast({
-      message: 'Chat visibility is not available yet',
-      type: 'error',
-    })
-  }
-
   return (
     <PageLayout>
       <TelegramBackButton
@@ -80,14 +92,15 @@ export const ChatPage = () => {
       <Block margin="top" marginValue={24}>
         <Block margin="bottom" marginValue={24}>
           <ListItem
+            disabled={updateChatVisibilityLoading}
             text={
-              <Text type="text" color={isChatVisible ? 'danger' : 'accent'}>
-                {isChatVisible ? 'Hide Bot From Chat' : 'Show Bot in Chat'}
+              <Text type="text" color={chat?.isEnabled ? 'danger' : 'accent'}>
+                {chat?.isEnabled ? 'Hide Bot From Chat' : 'Show Bot in Chat'}
               </Text>
             }
-            onClick={handleChatVisibility}
+            onClick={updateChatVisibility}
             before={
-              <Icon name={isChatVisible ? 'eyeCrossed' : 'eye'} size={28} />
+              <Icon name={chat?.isEnabled ? 'eyeCrossed' : 'eye'} size={28} />
             }
           />
         </Block>

frontend/src/pages/client/ClientChatHidden/ClientChatHidden.tsx

@@ -0,0 +1,36 @@
+import sneezeLottie from '@assets/sneeze.json'
+import {
+  Block,
+  StickerPlayer,
+  TelegramBackButton,
+  TelegramMainButton,
+  Text,
+} from '@components'
+import { PageLayout } from '@components'
+
+const webApp = window.Telegram.WebApp
+
+export const ClientChatHidden = () => {
+  const handleCloseApp = () => {
+    webApp.close()
+  }
+
+  return (
+    <PageLayout center>
+      <TelegramBackButton />
+      <TelegramMainButton text="Close" onClick={handleCloseApp} />
+      <StickerPlayer lottie={sneezeLottie} />
+      <Block margin="top" marginValue={16}>
+        <Text type="title" align="center" weight="bold">
+          Chat or Channel Access Is Temporarily Disabled
+        </Text>
+      </Block>
+      <Block margin="top" marginValue={12}>
+        <Text type="text" align="center">
+          The admin has temporarily hidden this chat or channel. Please try
+          again later or contact them directly.
+        </Text>
+      </Block>
+    </PageLayout>
+  )
+}

frontend/src/pages/client/ClientChatHidden/index.ts

@@ -0,0 +1 @@
+export * from './ClientChatHidden'

frontend/src/pages/client/ClientTasksPage/ClientTasksPage.tsx

@@ -45,6 +45,14 @@ export const ClientTasksPage = () => {
   }, [clientChatSlug])
 
   useEffect(() => {
+    if (!chat?.isEnabled) {
+      appNavigate({
+        path: ROUTES_NAME.CLIENT_CHAT_HIDDEN,
+        params: { clientChatSlug },
+      })
+      return
+    }
+
     if (chat?.isEligible) {
       appNavigate({
         path: ROUTES_NAME.CLIENT_JOIN,

frontend/src/pages/client/index.ts

@@ -1,3 +1,4 @@
+export * from './ClientChatHidden'
 export * from './ClientTasksPage'
 export * from './ClientConnectedWalletPage'
 export * from './ClientWalletsListPage'

frontend/src/pages/not-found/NotFound.tsx

@@ -27,8 +27,8 @@ export const NotFound = () => {
       </Block>
       <Block margin="top" marginValue={12}>
         <Text type="text" align="center">
-          The page you’re looking for doesn’t exist or the link is broken. But
-          don’t worry — you’re still in the right universe.
+          The page you`re looking for doesn`t exist or the link is broken. But
+          don`t worry — you`re still in the right universe.
         </Text>
       </Block>
     </PageLayout>

frontend/src/store/chat/api.ts

@@ -43,3 +43,15 @@ export const fetchUserChatAPI = async (
 
   return response
 }
+
+export const updateChatVisibilityAPI = async (
+  slug: string,
+  data: Partial<ChatInstance>
+): Promise<ApiServiceResponse<ChatInstance>> => {
+  const response = await ApiService.put<ChatInstance>({
+    endpoint: `/admin/chats/${slug}/visibility`,
+    data,
+  })
+
+  return response
+}

frontend/src/store/chat/chat.ts

@@ -7,6 +7,7 @@ import {
   fetchChatAPI,
   fetchUserChatAPI,
   updateChatAPI,
+  updateChatVisibilityAPI,
 } from './api'
 import { AdminChat, ChatInstance } from './types'
 
@@ -26,6 +27,10 @@ interface ChatActions {
     updateChatAction: (slug: string, data: Partial<ChatInstance>) => void
     fetchAdminUserChatsAction: () => Promise<AdminChat[]>
     fetchUserChatAction: (slug: string) => void
+    updateChatVisibilityAction: (
+      slug: string,
+      data: Partial<ChatInstance>
+    ) => void
   }
 }
 
@@ -81,6 +86,19 @@ const useChatStore = create<ChatStore & ChatActions>((set) => ({
 
       set({ chat: data?.chat, rules: data?.rules, chatWallet: data?.wallet })
     },
+    updateChatVisibilityAction: async (slug, values) => {
+      const { data, ok, error } = await updateChatVisibilityAPI(slug, values)
+
+      if (!ok) {
+        throw new Error(error)
+      }
+
+      if (!data) {
+        throw new Error('Chat data not found')
+      }
+
+      set({ chat: data })
+    },
   },
 }))
 

frontend/src/store/chat/types.ts

@@ -19,6 +19,7 @@ export interface ChatInstance {
   title: string
   username: string | null
   membersCount: number
+  isEnabled: boolean
 }
 
 export interface ChatRuleAttribute {