feat: invite a friend screen is mostly done

pull/3083/head
William Grant 11 months ago
parent 44cc8594a5
commit dd7f13ed1f

@ -104,8 +104,8 @@
"contactsNone": "You don't have any contacts yet",
"contextMenuNoSuggestions": "No Suggestions",
"continue": "Continue",
"conversationsHeader": "Contacts and Groups: $count$",
"conversationId": "Conversation ID",
"conversationsHeader": "Contacts and Groups: $count$",
"conversationsNone": "You don't have any conversations yet",
"conversationsSettingsTitle": "Conversations",
"copiedToClipboard": "Copied",
@ -458,6 +458,8 @@
"sendMessage": "Message",
"sent": "Sent",
"serverId": "Server ID",
"sessionInviteAFriend": "Invite a Friend",
"sessionInviteAFriendDescription": "Copy your Account ID then share it with your friends so they can message you.",
"sessionMessenger": "Session",
"sessionRecoveryPassword": "Recovery Password",
"set": "Set",

@ -107,8 +107,8 @@ type IconProps = {
export const icons: Record<SessionIconType, IconProps> = {
addUser: {
path: 'M8.85,2.17c-1.73,0-3.12,1.4-3.12,3.12s1.4,3.12,3.12,3.12c1.73,0,3.13-1.4,3.13-3.12S10.58,2.17,8.85,2.17z M8.85,0.08c2.88,0,5.21,2.33,5.21,5.21s-2.33,5.21-5.21,5.21s-5.2-2.33-5.2-5.21C3.65,2.42,5.98,0.08,8.85,0.08z M20.83,5.29 c0.54,0,0.98,0.41,1.04,0.93l0.01,0.11v2.08h2.08c0.54,0,0.98,0.41,1.04,0.93v0.12c0,0.54-0.41,0.98-0.93,1.04l-0.11,0.01h-2.08 v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08h-2.08c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11 c0-0.54,0.41-0.98,0.93-1.04l0.11-0.01h2.08V6.34C19.79,5.76,20.26,5.29,20.83,5.29z M12.5,12.58c2.8,0,5.09,2.21,5.2,4.99v0.22 v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08c0-1.67-1.3-3.03-2.95-3.12h-0.18H5.21 c-1.67,0-3.03,1.3-3.12,2.95v0.18v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93L0,19.88V17.8 c0-2.8,2.21-5.09,4.99-5.2h0.22h7.29V12.58z',
viewBox: '0 0 25 21',
path: 'M21.403 26.276c6.38 0 11.578-5.105 11.578-11.388C32.98 8.605 27.783 3.5 21.403 3.5c-6.38 0-11.578 5.105-11.578 11.388 0 6.283 5.19 11.388 11.578 11.388Zm0-19.755c4.691 0 8.507 3.753 8.507 8.367 0 4.614-3.816 8.368-8.507 8.368-4.69 0-8.507-3.754-8.507-8.368 0-4.614 3.816-8.367 8.507-8.367ZM45.564 35.467h-6.932v-6.82c0-.777-.638-1.404-1.428-1.404-.791 0-1.429.627-1.429 1.404v6.82h-6.932c-.791 0-1.428.626-1.428 1.404 0 .778.637 1.405 1.428 1.405h6.932v6.82c0 .777.638 1.404 1.428 1.404.791 0 1.428-.627 1.428-1.405v-6.82h6.933c.791 0 1.428-.626 1.428-1.404 0-.778-.637-1.404-1.428-1.404Z M29.956 32.446h2.756v-2.213a11.843 11.843 0 0 0-4.99-1.102h-12.93C8.275 29.13 3 34.327 3 40.73v3.05c0 .461.376.831.845.831h1.374c.468 0 .844-.37.844-.83V40.73c0-4.742 3.908-8.578 8.722-8.578h12.921c.776 0 1.52.105 2.242.294h.008Z',
viewBox: '0 0 50 50',
ratio: 1,
},
addModerator: {

@ -13,6 +13,7 @@ import { StyledLeftPaneList } from './LeftPaneList';
import { ConversationListItem } from './conversation-list-item/ConversationListItem';
import { OverlayClosedGroup } from './overlay/OverlayClosedGroup';
import { OverlayCommunity } from './overlay/OverlayCommunity';
import { OverlayInvite } from './overlay/OverlayInvite';
import { OverlayMessage } from './overlay/OverlayMessage';
import { OverlayMessageRequest } from './overlay/OverlayMessageRequest';
import { OverlayChooseAction } from './overlay/choose-action/OverlayChooseAction';
@ -53,6 +54,8 @@ const ClosableOverlay = () => {
return <OverlayMessage />;
case 'message-requests':
return <OverlayMessageRequest />;
case 'invite-a-friend':
return <OverlayInvite />;
case undefined:
return null;
default:

@ -148,6 +148,9 @@ export const LeftPaneSectionHeader = () => {
case 'message-requests':
leftOverlayHeading = window.i18n('messageRequests');
break;
case 'invite-a-friend':
leftOverlayHeading = window.i18n('sessionInviteAFriend');
break;
case 'choose-action':
default:
leftOverlayHeading = window.i18n('messagesHeader');

@ -0,0 +1,75 @@
import useKey from 'react-use/lib/useKey';
import styled from 'styled-components';
import { useDispatch } from 'react-redux';
import { resetLeftOverlayMode } from '../../../state/ducks/section';
import { SessionButton } from '../../basic/SessionButton';
import { ToastUtils, UserUtils } from '../../../session/utils';
import { SpacerLG, SpacerMD } from '../../basic/Text';
import { SessionInput } from '../../inputs';
import { StyledLeftPaneOverlay } from './OverlayMessage';
const StyledDescription = styled.div`
color: var(--text-secondary-color);
font-family: var(--font-default);
font-style: normal;
font-weight: 400;
font-size: 12px;
text-align: center;
margin: 0 auto;
text-align: center;
padding: 0 var(--margins-md);
`;
const StyledButtonerContainer = styled.div`
.session-button {
width: 160px;
height: 41px;
}
`;
export const OverlayInvite = () => {
const ourSessionID = UserUtils.getOurPubKeyStrFromCache();
const dispatch = useDispatch();
function closeOverlay() {
dispatch(resetLeftOverlayMode());
}
useKey('Escape', closeOverlay);
return (
<StyledLeftPaneOverlay
container={true}
flexDirection={'column'}
flexGrow={1}
alignItems={'center'}
padding={'var(--margins-md)'}
>
<SessionInput
autoFocus={true}
type="text"
value={ourSessionID}
isSpecial={true}
centerText={true}
editable={false}
inputDataTestId="invite-account-id"
/>
<SpacerMD />
<StyledDescription>{window.i18n('sessionInviteAFriendDescription')}</StyledDescription>
<SpacerLG />
<StyledButtonerContainer>
<SessionButton
text={window.i18n('editMenuCopy')}
onClick={() => {
window.clipboard.writeText(ourSessionID);
ToastUtils.pushCopiedToClipBoard();
}}
dataTestId="invite-account-id-copy"
/>
</StyledButtonerContainer>
</StyledLeftPaneOverlay>
);
};

@ -18,14 +18,14 @@ const StyledActionRow = styled.button`
export const StyledChooseActionTitle = styled.span`
color: var(--text-primary-color);
font-size: 18px;
padding: var(--margins-sm) 0;
padding: var(--margins-md) 0;
text-align: start;
width: 100%;
`;
const StyledIcon = styled.div`
width: 58px;
margin: var(--margins-sm);
margin: var(--margins-md) var(--margins-sm);
`;
const StyledHR = styled.hr`

@ -27,6 +27,10 @@ export const OverlayChooseAction = () => {
dispatch(setLeftOverlayMode('open-group'));
}, [dispatch]);
const inviteAFriend = useCallback(() => {
dispatch(setLeftOverlayMode('invite-a-friend'));
}, [dispatch]);
useKey('Escape', closeOverlay);
useEffect(() => {
@ -84,6 +88,13 @@ export const OverlayChooseAction = () => {
onClick={openJoinCommunity}
dataTestId="chooser-new-community"
/>
<ActionRow
title={window.i18n('sessionInviteAFriend')}
ariaLabel={window.i18n('sessionInviteAFriend')}
iconType={'addUser'}
onClick={inviteAFriend}
dataTestId="invite-a-friend"
/>
</StyledActionRowContainer>
<SpacerSM />
<ContactsListWithBreaks />

@ -71,7 +71,8 @@ export type LeftOverlayMode =
| 'message'
| 'open-group'
| 'closed-group'
| 'message-requests';
| 'message-requests'
| 'invite-a-friend';
export function setLeftOverlayMode(overlayMode: LeftOverlayMode): LeftOverlayModeActionType {
return {

@ -458,6 +458,8 @@ export type LocalizerKeys =
| 'sending'
| 'sent'
| 'serverId'
| 'sessionInviteAFriend'
| 'sessionInviteAFriendDescription'
| 'sessionMessenger'
| 'sessionRecoveryPassword'
| 'set'

Loading…
Cancel
Save