feat: finished invite a friend overlay

_locales/en/messages.json

@@ -2,6 +2,7 @@
   "about": "About",
   "accept": "Accept",
   "accountIDCopy": "Copy Account ID",
+  "accountIDCopied": "Account ID Copied",
   "accountIdEnter": "Enter Account ID",
   "accountIdErrorInvalid": "This Account ID is invalid. Please check and try again.",
   "accountIdOrOnsEnter": "Enter Account ID or ONS",
@@ -460,6 +461,7 @@
   "serverId": "Server ID",
   "sessionInviteAFriend": "Invite a Friend",
   "sessionInviteAFriendDescription": "Copy your Account ID then share it with your friends so they can message you.",
+  "sessionInviteAFriendIDCopied": "Share with your friends wherever you usually speak with them — then move the conversation here.",
   "sessionMessenger": "Session",
   "sessionRecoveryPassword": "Recovery Password",
   "set": "Set",

ts/components/icon/Icons.tsx

@@ -12,6 +12,7 @@ export type SessionIconType =
   | 'caret'
   | 'chatBubble'
   | 'check'
+  | 'checkCircle'
   | 'chevron'
   | 'circle'
   | 'circleCheck'
@@ -161,6 +162,11 @@ export const icons: Record<SessionIconType, IconProps> = {
     viewBox: '0 0 7 6',
     ratio: 1,
   },
+  checkCircle: {
+    path: 'M19.9749 38.9783c10.4085 0 19.0017-8.6057 19.0017-19 0-10.40942-8.6082-19.000029-19.0168-19.000029C9.56973.978271.976562 9.56888.976562 19.9783c0 10.3943 8.608258 19 18.998338 19Zm0-3.7427c-8.4659 0-15.24085-6.7908-15.24085-15.2573 0-8.4667 6.75985-15.25728 15.22575-15.25728S35.2342 11.5116 35.2342 19.9783c0 8.4665-6.7934 15.2573-15.2593 15.2573Z M17.9848 28.7219c.66 0 1.2346-.3274 1.6255-.9341l8.2265-12.8509c.2322-.3977.4547-.8255.4547-1.2401 0-.9204-.8152-1.5333-1.6803-1.5333-.5392 0-1.0388.3208-1.428.9271L17.9213 24.758l-3.4181-4.3592c-.4513-.582-.8857-.7622-1.4404-.7622-.8869 0-1.6016.7198-1.6016 1.6218 0 .4444.1721.844.476 1.2432l4.3486 5.2996c.4929.6269 1.0325.9207 1.699.9207Z',
+    viewBox: '0 0 39 39',
+    ratio: 1,
+  },
   chevron: {
     path: 'M12,13.5857864 L6.70710678,8.29289322 C6.31658249,7.90236893 5.68341751,7.90236893 5.29289322,8.29289322 C4.90236893,8.68341751 4.90236893,9.31658249 5.29289322,9.70710678 L11.2928932,15.7071068 C11.6834175,16.0976311 12.3165825,16.0976311 12.7071068,15.7071068 L18.7071068,9.70710678 C19.0976311,9.31658249 19.0976311,8.68341751 18.7071068,8.29289322 C18.3165825,7.90236893 17.6834175,7.90236893 17.2928932,8.29289322 L12,13.5857864 Z',
     viewBox: '1.5 5.5 21 12',

ts/components/leftpane/overlay/OverlayInvite.tsx

@@ -1,21 +1,44 @@
 import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 
+import { shell } from 'electron';
+import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { resetLeftOverlayMode } from '../../../state/ducks/section';
 import { SessionButton } from '../../basic/SessionButton';
 
 import { UserUtils } from '../../../session/utils';
-import { SpacerLG, SpacerMD } from '../../basic/Text';
+import { Flex } from '../../basic/Flex';
+import { SpacerLG, SpacerMD, SpacerSM } from '../../basic/Text';
+import { SessionIcon, SessionIconButton } from '../../icon';
 import { SessionInput } from '../../inputs';
 import { StyledLeftPaneOverlay } from './OverlayMessage';
 
+const StyledHeadingContainer = styled(Flex)`
+  .session-icon-button {
+    border: 1px solid var(--text-primary-color);
+    border-radius: 9999px;
+    margin-inline-start: var(--margins-sm);
+    margin-bottom:
+    transition-duration: var(--default-duration);
+  }`;
+
+const StyledHeading = styled.h3`
+  color: var(--text-primary-color);
+  font-family: var(--font-default)
+  font-size: var(--font-size-sm);
+  font-weight: 300;
+  margin: 0 auto;
+  padding: 0;
+`;
+
 const StyledDescription = styled.div`
   color: var(--text-secondary-color);
   font-family: var(--font-default);
   font-style: normal;
-  font-weight: 400;
+  font-weight: 300;
   font-size: 12px;
+  line-height: 15px;
   text-align: center;
   margin: 0 auto;
   text-align: center;
@@ -32,6 +55,8 @@ const StyledButtonerContainer = styled.div`
 export const OverlayInvite = () => {
   const ourSessionID = UserUtils.getOurPubKeyStrFromCache();
 
+  const [idCopied, setIdCopied] = useState(false);
+
   const dispatch = useDispatch();
 
   function closeOverlay() {
@@ -48,28 +73,60 @@ export const OverlayInvite = () => {
       alignItems={'center'}
       padding={'var(--margins-md)'}
     >
-      <SessionInput
-        autoFocus={true}
-        type="text"
-        value={ourSessionID}
-        centerText={true}
-        editable={false}
-        isTextArea={true}
-        inputDataTestId="invite-account-id"
-      />
-      <SpacerMD />
-      <StyledDescription>{window.i18n('sessionInviteAFriendDescription')}</StyledDescription>
-      <SpacerLG />
-      <StyledButtonerContainer>
-        <SessionButton
-          text={window.i18n('editMenuCopy')}
-          onClick={() => {
-            window.clipboard.writeText(ourSessionID);
-            // TODO[epic=SES-955] update to next screen
-          }}
-          dataTestId="invite-account-id-copy"
-        />
-      </StyledButtonerContainer>
+      {!idCopied ? (
+        <>
+          <SessionInput
+            autoFocus={true}
+            type="text"
+            value={ourSessionID}
+            centerText={true}
+            editable={false}
+            isTextArea={true}
+            inputDataTestId="invite-account-id"
+          />
+          <SpacerMD />
+          <StyledDescription>{window.i18n('sessionInviteAFriendDescription')}</StyledDescription>
+          <SpacerLG />
+          <StyledButtonerContainer>
+            <SessionButton
+              text={window.i18n('editMenuCopy')}
+              onClick={() => {
+                window.clipboard.writeText(ourSessionID);
+                setIdCopied(true);
+              }}
+              dataTestId="invite-account-id-copy"
+            />
+          </StyledButtonerContainer>
+        </>
+      ) : (
+        <>
+          <SessionIcon
+            iconType={'checkCircle'}
+            iconSize={'huge2'}
+            iconColor={'var(--primary-color)'}
+          />
+          <SpacerMD />
+          <StyledHeadingContainer container={true} justifyContent="center" alignItems="center">
+            <StyledHeading>{window.i18n('accountIDCopied')}</StyledHeading>
+            <SessionIconButton
+              aria-label="external link to Session Zendesk article explaing how Account IDs work"
+              iconType="question"
+              iconColor={'var(--text-primary-color)'}
+              iconSize={10}
+              iconPadding="2px"
+              padding={'0'}
+              dataTestId="session-zendesk-account-ids"
+              onClick={() => {
+                void shell.openExternal(
+                  'https://sessionapp.zendesk.com/hc/en-us/articles/4439132747033-How-do-Session-ID-usernames-work'
+                );
+              }}
+            />
+          </StyledHeadingContainer>
+          <SpacerSM />
+          <StyledDescription>{window.i18n('sessionInviteAFriendIDCopied')}</StyledDescription>
+        </>
+      )}
     </StyledLeftPaneOverlay>
   );
 };

ts/types/LocalizerKeys.ts

@@ -1,6 +1,7 @@
 export type LocalizerKeys =
   | 'about'
   | 'accept'
+  | 'accountIDCopied'
   | 'accountIDCopy'
   | 'accountIdEnter'
   | 'accountIdErrorInvalid'
@@ -460,6 +461,7 @@ export type LocalizerKeys =
   | 'serverId'
   | 'sessionInviteAFriend'
   | 'sessionInviteAFriendDescription'
+  | 'sessionInviteAFriendIDCopied'
   | 'sessionMessenger'
   | 'sessionRecoveryPassword'
   | 'set'