Merge branch 'develop' into feature/1897-psk

CHANGELOG.md

@@ -2,8 +2,12 @@
 
 * 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
 
+* Display a shorter invite link on a mobile
+
 * Removed registration attempts selector and corresponding usage.
 
 * Revert adjusting bootstrap scripts for developing on Windows

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,7 +2,6 @@ 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'
 
@@ -16,6 +15,7 @@ export const ContextMenu: FC<ContextMenuProps> = ({
   linkAction = () => {
     console.log('No action attached for link tap gesture.')
   },
+  children,
 }) => {
   const [show, setShow] = React.useState<boolean>(false)
   const slidingAnimation = React.useRef(new Animated.Value(0)).current
@@ -133,31 +133,37 @@ export const ContextMenu: FC<ContextMenuProps> = ({
                 <Typography
                   fontSize={14}
                   fontWeight={'normal'}
+                  numberOfLines={1}
                   style={{ lineHeight: 20, color: defaultPalette.typography.gray50 }}
                   onPress={linkAction}
                 >
                   {link}
                 </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>
+            )}
+
+            {children}
           </View>
         </TouchableWithoutFeedback>
       </Animated.View>

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

@@ -60,7 +60,7 @@ storiesOf('ContextMenu', module)
         title={'Add members'}
         items={invitation_items}
         hint={'Anyone with Quiet app can follow this link to join this community. Only share with people you trust.'}
-        link={'https://chat.quiet.org/quiet://?code=bidrmzr3ee6qa2vvrlcnqvvvsk2gmjktcqkunba326parszr44gibwyd'}
+        link={`https://tryquiet.org/join#QmNzTe4kwwq7yDrC9GRXWFT5JoBSGukWAcLSTMYPmrensB=vag3ot2imv7lrwsqesv2qykyx2fxenvjfcawgngab6gjzo2gg5o5vqqd&QmZx8actcU9E49Dff3PDVyXTCrVor9iBQryxfasfN4Drxo=sdiy7sermcmtaomn4w3bnxlmdqoun5bxre34xfcaxckhy7obhphcypad&QmQGCuEB5ChnqYCGu5nuBhtyzd9BmDdVUH9neaHNuCDd1M=pr42dxkelrs5iy2a4n4ycv2ptzk4yur274hq2zfshvgxu5rpay6lghqd&QmZgT4AbyPZjEPvMkpjCvfRSDYcrcyUiwTMDNF8rEigqHT=ka5m3rho2gvldgmigp7jn5taok7nwyp5v2fix3jdirpsyf7rdm547cqd`}
         visible={true}
         handleClose={() => {
           console.log('closing menu')

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,47 @@
+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'
+import { View } from 'react-native'
+import { Typography } from '../../Typography/Typography.component'
+import { Button } from '../../Button/Button.component'
+import { defaultPalette } from '../../../styles/palettes/default.palette'
+
+export const UnregisteredUsernameContextMenu: FC = () => {
+  const title = 'Unregistered username'
+  const usernameTakenContextMenu = useContextMenu<UnregisteredUsernameArgs>(MenuName.UnregisteredUsername)
+
+  return (
+    <ContextMenu title={title} items={[]} {...usernameTakenContextMenu}>
+      <View
+        style={{ padding: 20, alignItems: 'center', borderTopWidth: 1, borderColor: defaultPalette.background.gray06 }}
+      >
+        <View>
+          <Typography fontSize={14} style={{ textAlign: 'center', lineHeight: 20 }}>
+            The username{' '}
+            <Typography fontSize={14} fontWeight={'bold'}>
+              @{usernameTakenContextMenu.username}
+            </Typography>{' '}
+            has not been registered yet with the community owner, so it’s still possible for someone else to register
+            the same username.
+          </Typography>
+        </View>
+
+        <View style={{ marginTop: 20 }}>
+          <Typography fontSize={14} style={{ textAlign: 'center', lineHeight: 20 }}>
+            When the community owner is online,{' '}
+            <Typography fontSize={14} fontWeight={'bold'}>
+              @{usernameTakenContextMenu.username}
+            </Typography>{' '}
+            will be registered automatically and this alert will go away.
+          </Typography>
+        </View>
+
+        <View style={{ marginTop: 20 }}>
+          <Button width={160} title={'OK'} onPress={usernameTakenContextMenu.handleClose} />
+        </View>
+      </View>
+    </ContextMenu>
+  )
+}