session-desktop/ts/components/leftpane/overlay/OverlayInvite.tsx

import useKey from 'react-use/lib/useKey';
import styled from 'styled-components';

import { useState } from 'react';
import { getAppDispatch } from '../../../state/dispatch';
import { UserUtils } from '../../../session/utils';
import { Flex } from '../../basic/Flex';
import { SpacerLG, SpacerMD, SpacerSM } from '../../basic/Text';
import { HelpDeskButton } from '../../buttons';
import { CopyToClipboardButton } from '../../buttons/CopyToClipboardButton';
import { StyledLeftPaneOverlay } from './OverlayMessage';
import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { sectionActions } from '../../../state/ducks/section';
import { LucideIcon } from '../../icon/LucideIcon';
import { LUCIDE_ICONS_UNICODE } from '../../icon/lucide';
import { tr } from '../../../localization/localeTools';
import { SessionIDNotEditable } from '../../basic/SessionIdNotEditable';

const StyledHeadingContainer = styled(Flex)`
  gap: var(--margins-xs);

  .session-icon-button {
    border: 1px solid var(--text-primary-color);
    border-radius: 9999px;
    margin-inline-start: var(--margins-sm);
    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: 300;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--margins-sm);
`;

const StyledButtonContainer = styled.div`
  .session-button {
    width: 160px;
    height: 41px;
  }
`;

export const OverlayInvite = () => {
  const ourSessionID = UserUtils.getOurPubKeyStrFromCache();

  const [idCopied, setIdCopied] = useState(false);

  const dispatch = getAppDispatch();

  function closeOverlay() {
    dispatch(sectionActions.resetLeftOverlayMode());
  }

  useKey('Escape', closeOverlay);

  return (
    <StyledLeftPaneOverlay
      $container={true}
      $flexDirection={'column'}
      $flexGrow={1}
      $alignItems={'center'}
      $padding={'var(--margins-md)'}
    >
      {!idCopied ? (
        <>
          <Flex $container={true} width={'100%'} $justifyContent="center" $alignItems="center">
            <SessionIDNotEditable
              dataTestId="your-account-id"
              sessionId={ourSessionID}
              displayType="2lines"
              tooltipNode={null}
              // we need the font size to be smaller here (not enough space in the overlay)
              style={{ color: 'var(--text-primary-color)', fontSize: 'var(--font-size-sm)' }}
            />
          </Flex>
          <SpacerMD />
          <StyledDescription>{tr('accountIdCopyDescription')}</StyledDescription>
          <SpacerLG />
          <StyledButtonContainer>
            <CopyToClipboardButton
              buttonType={SessionButtonType.Outline}
              buttonColor={SessionButtonColor.PrimaryDark}
              copyContent={ourSessionID}
              onCopyComplete={() => setIdCopied(true)}
              hotkey={true}
              dataTestId="copy-button-account-id"
            />
          </StyledButtonContainer>
        </>
      ) : (
        <>
          <LucideIcon
            unicode={LUCIDE_ICONS_UNICODE.CIRCLE_CHECK}
            iconSize={'huge2'}
            iconColor={'var(--primary-color)'}
          />
          <SpacerMD />
          <StyledHeadingContainer $container={true} $justifyContent="center" $alignItems="center">
            <StyledHeading>{tr('accountIdCopied')}</StyledHeading>
            <HelpDeskButton
              style={{ display: 'inline-flex' }}
              iconSize="small"
              iconColor="var(--text-primary-color)"
            />
          </StyledHeadingContainer>
          <SpacerSM />
          <StyledDescription>{tr('shareAccountIdDescriptionCopied')}</StyledDescription>
        </>
      )}
    </StyledLeftPaneOverlay>
  );
};