Condition polishing & chat visibility

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/admin/ConditionPage/ConditionPage.tsx

@@ -24,7 +24,9 @@ export const ConditionPage = () => {
     })
   }
 
-  if (!conditionIdParam)
+  const isNewCondition = !conditionIdParam
+
+  if (isNewCondition)
     return (
       <PageLayout>
         <TelegramBackButton onClick={navigateToChatPage} />

frontend/src/pages/admin/ConditionPage/components/Jettons/Jettons.tsx

@@ -55,7 +55,7 @@ export const Jettons = ({
 
       prefetchJetton(address)
     }, 150),
-    []
+    [conditionState?.address, conditionState?.blockchainAddress]
   )
 
   const fetchConditionCategories = async () => {
@@ -73,10 +73,14 @@ export const Jettons = ({
   }
 
   useEffect(() => {
-    if (!isNewCondition && conditionState?.blockchainAddress) {
+    if (
+      !isNewCondition &&
+      conditionState?.blockchainAddress &&
+      !prefetchedConditionData
+    ) {
       prefetchJetton(conditionState?.blockchainAddress)
     }
-  }, [conditionState])
+  }, [conditionState, isNewCondition])
 
   useEffect(() => {
     fetchConditionCategories()
@@ -86,7 +90,7 @@ export const Jettons = ({
   }, [])
 
   useEffect(() => {
-    if (categories?.length && (isNewCondition || condition)) {
+    if (categories?.length) {
       let updatedConditionState: Partial<Condition> = {
         type: 'jetton',
         asset: condition?.asset || categories[0].asset,
@@ -104,7 +108,7 @@ export const Jettons = ({
 
       setInitialState(updatedConditionState as Partial<Condition>)
     }
-  }, [categories?.length, condition])
+  }, [categories?.length, condition, isNewCondition])
 
   if (!categories?.length || !conditionState?.type) return null
 

frontend/src/pages/admin/ConditionPage/components/NFT/NFT.tsx

@@ -66,7 +66,10 @@ export const NFT = ({
   useEffect(() => {
     if (
       !isNewCondition &&
-      (conditionState?.blockchainAddress || conditionState?.address)
+      (conditionState?.blockchainAddress || conditionState?.address) &&
+      !prefetchedConditionData &&
+      !conditionState.asset &&
+      !conditionState.category
     ) {
       prefetchNFTCollection(
         conditionState?.blockchainAddress || conditionState?.address || ''
@@ -82,9 +85,8 @@ export const NFT = ({
   }, [])
 
   useEffect(() => {
-    if (categories?.length && (isNewCondition || condition)) {
+    if (categories?.length) {
       let updatedConditionState: Partial<Condition> = {
-        // ...conditionState,
         type: 'nft_collection',
         asset: condition?.asset || undefined,
         category: condition?.category || undefined,
@@ -101,7 +103,7 @@ export const NFT = ({
 
       setInitialState(updatedConditionState as Partial<Condition>)
     }
-  }, [categories?.length, condition])
+  }, [categories?.length, condition, isNewCondition])
 
   if (!categories?.length || !conditionState?.type) return null
 

frontend/src/pages/admin/ConditionPage/components/Premium/Premium.tsx

@@ -18,7 +18,7 @@ export const Premium = ({
       isEnabled: isNewCondition ? true : !!condition?.isEnabled,
     }
     setInitialState(updatedConditionState as Partial<Condition>)
-  }, [condition])
+  }, [condition, isNewCondition])
 
   if (!conditionState?.type) return null
 

frontend/src/pages/admin/ConditionPage/components/Toncoin/Toncoin.tsx

@@ -57,7 +57,7 @@ export const Toncoin = ({
 
       setInitialState(updatedConditionState as Partial<Condition>)
     }
-  }, [categories?.length, condition])
+  }, [categories?.length, condition, isNewCondition])
 
   if (!categories?.length || !conditionState?.type) return null
 

frontend/src/pages/admin/ConditionPage/components/Whitelist/Whitelist.tsx

@@ -17,9 +17,8 @@ export const Whitelist = ({
   const { showToast } = useToast()
 
   useEffect(() => {
-    if (isNewCondition || condition) {
+    if (isNewCondition) {
       let updatedConditionState: Partial<Condition> = {
-        // ...conditionState,
         type: 'whitelist',
         description: condition?.description || '',
         name: condition?.name || '',
@@ -35,7 +34,7 @@ export const Whitelist = ({
 
       setInitialState(updatedConditionState as Partial<Condition>)
     }
-  }, [condition])
+  }, [condition, isNewCondition])
 
   if (!conditionState?.type) return null
 

frontend/src/pages/admin/ConditionPage/modules/NewConditionModule/NewConditionModule.tsx

@@ -106,12 +106,9 @@ export const NewConditionModule = () => {
     })
   }
 
-  const setInitialState = useCallback(
-    (value: Partial<Condition>) => {
-      setConditionState(value)
-    },
-    [conditionState?.type]
-  )
+  const setInitialState = (value: Partial<Condition>) => {
+    setConditionState(value)
+  }
 
   const payload: ConditionComponentProps = {
     isNewCondition: true,

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 {