mobile/1649 - feat:use context menu for information about unregistered username instead screen

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 * Fixed mobile bugs - joining by QR code and not showing username taken screen for user who has unique name
 
+* Use context menu for information about unregistered username instead screen
+
 * Shorter dots-placeholder for invite link
 
 * Removed registration attempts selector and corresponding usage.

packages/mobile/src/App.tsx

@@ -45,10 +45,11 @@ import StoreProvider from './Provider'
 import { RootStackParamList } from './route.params'
 import ConnectionProcessScreen from './screens/ConnectionProcess/ConnectionProcess.screen'
 import { DuplicatedUsernameScreen } from './screens/DuplicatedUsername/DuplicatedUsername.screen'
-import { UnregisteredUsernameScreen } from './screens/UnregisteredUsername/UnregisteredUsername.screen'
+
 import UsernameTakenScreen from './screens/UsernameTaken/UsernameTaken.screen'
 import NewUsernameRequestedScreen from './screens/NewUsernameRequested/NewUsernameRequested.screen'
 import { PossibleImpersonationAttackScreen } from './screens/PossibleImpersonationAttack/PossibleImpersonationAttack.screen'
+import { UnregisteredUsernameContextMenu } from './components/ContextMenu/menus/UnregisteredUsernameContextMenu.container'
 
 LogBox.ignoreAllLogs()
 
@@ -105,7 +106,6 @@ function App(): JSX.Element {
                 <Screen component={SuccessScreen} name={ScreenNames.SuccessScreen} />
                 <Screen component={ErrorScreen} name={ScreenNames.ErrorScreen} />
                 <Screen component={DuplicatedUsernameScreen} name={ScreenNames.DuplicatedUsernameScreen} />
-                <Screen component={UnregisteredUsernameScreen} name={ScreenNames.UnregisteredUsernameScreen} />
                 <Screen component={UsernameTakenScreen} name={ScreenNames.UsernameTakenScreen} />
                 <Screen component={NewUsernameRequestedScreen} name={ScreenNames.NewUsernameRequestedScreen} />
                 <Screen
@@ -116,6 +116,7 @@ function App(): JSX.Element {
               <CommunityContextMenu />
               <ChannelContextMenu />
               <InvitationContextMenu />
+              <UnregisteredUsernameContextMenu />
               <ConfirmationBox {...confirmationBox} />
             </ThemeProvider>
           </MenuProvider>

packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx

@@ -2,9 +2,9 @@ import React, { FC } from 'react'
 import { View, Image, FlatList, TouchableWithoutFeedback, TouchableOpacity, Animated } from 'react-native'
 import { Typography } from '../Typography/Typography.component'
 import { ContextMenuItemProps, ContextMenuProps } from './ContextMenu.types'
-
 import { defaultPalette } from '../../styles/palettes/default.palette'
 import { appImages } from '../../assets'
+import { Button } from '../Button/Button.component'
 
 export const ContextMenu: FC<ContextMenuProps> = ({
   visible,
@@ -16,6 +16,8 @@ export const ContextMenu: FC<ContextMenuProps> = ({
   linkAction = () => {
     console.log('No action attached for link tap gesture.')
   },
+  unregisteredUsername,
+  username,
 }) => {
   const [show, setShow] = React.useState<boolean>(false)
   const slidingAnimation = React.useRef(new Animated.Value(0)).current
@@ -140,24 +142,45 @@ export const ContextMenu: FC<ContextMenuProps> = ({
                 </Typography>
               </View>
             )}
-            <View style={{ width: '100%', paddingBottom: 10 }}>
-              <FlatList
-                data={items}
-                keyExtractor={item => item.title}
-                renderItem={({ item, index }) => (
-                  <View
-                    style={[
-                      { borderTopWidth: 1, borderColor: defaultPalette.background.gray06 },
-                      index === items.length - 1 ? { borderBottomWidth: 1 } : { borderBottomWidth: 0 },
-                    ]}
-                  >
-                    <ContextMenuItem {...item} />
-                  </View>
-                )}
-                style={{ backgroundColor: defaultPalette.background.white }}
-                showsVerticalScrollIndicator={false}
-              />
-            </View>
+
+            {items.length !== 0 && (
+              <View style={{ width: '100%', paddingBottom: 10 }}>
+                <FlatList
+                  data={items}
+                  keyExtractor={item => item.title}
+                  renderItem={({ item, index }) => (
+                    <View
+                      style={[
+                        { borderTopWidth: 1, borderColor: defaultPalette.background.gray06 },
+                        index === items.length - 1 ? { borderBottomWidth: 1 } : { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <ContextMenuItem {...item} />
+                    </View>
+                  )}
+                  style={{ backgroundColor: defaultPalette.background.white }}
+                  showsVerticalScrollIndicator={false}
+                />
+              </View>
+            )}
+
+            {unregisteredUsername && username && (
+              <View style={{ padding: 20, alignItems: 'center' }}>
+                <Typography fontSize={14} style={{ textAlign: 'center' }}>
+                  The username{' '}
+                  <Typography fontSize={14} fontWeight={'bold'}>
+                    @{username}
+                  </Typography>{' '}
+                  has not been registered yet with the community owner, so it’s still possible for someone else to
+                  register the same username. When the community owner is online,{' '}
+                  <Typography fontSize={14} fontWeight={'bold'}>
+                    @{username}
+                  </Typography>{' '}
+                  will be registered automatically and this alert will go away.
+                </Typography>
+                <Button width={60} title={'OK'} onPress={handleClose} />
+              </View>
+            )}
           </View>
         </TouchableWithoutFeedback>
       </Animated.View>

packages/mobile/src/components/ContextMenu/ContextMenu.types.ts

@@ -9,9 +9,15 @@ export interface ContextMenuProps {
   link?: string
   linkAction?: () => void
   style?: TextStyle
+  unregisteredUsername?: boolean
+  username?: string
 }
 
 export interface ContextMenuItemProps {
   title: string
   action: () => void
 }
+
+export type UnregisteredUsernameArgs = {
+  username: string
+}

packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react'
+import { useContextMenu } from '../../../hooks/useContextMenu'
+import { MenuName } from '../../../const/MenuNames.enum'
+import { ContextMenu } from '../ContextMenu.component'
+import { UnregisteredUsernameArgs } from '../ContextMenu.types'
+
+export const UnregisteredUsernameContextMenu: FC = () => {
+  const title = 'Unregistered username'
+  const usernameTakenContextMenu = useContextMenu<UnregisteredUsernameArgs>(MenuName.UnregisteredUsername)
+
+  return (
+    <ContextMenu
+      title={title}
+      items={[]}
+      {...usernameTakenContextMenu}
+      unregisteredUsername
+      username={usernameTakenContextMenu.username}
+    />
+  )
+}