soapbox/src/features/chats/components/chat-message-list-intro.tsx

import clsx from 'clsx';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';

import { openModal } from 'soapbox/actions/modals';
import Link from 'soapbox/components/link';
import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
import { useChatContext } from 'soapbox/contexts/chat-context';
import { useAppDispatch, useFeatures } from 'soapbox/hooks';
import { useChatActions } from 'soapbox/queries/chats';
import { secondsToDays } from 'soapbox/utils/numbers';

const messages = defineMessages({
  leaveChatHeading: { id: 'chat_message_list_intro.leave_chat.heading', defaultMessage: 'Leave Chat' },
  leaveChatMessage: { id: 'chat_message_list_intro.leave_chat.message', defaultMessage: 'Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' },
  leaveChatConfirm: { id: 'chat_message_list_intro.leave_chat.confirm', defaultMessage: 'Leave Chat' },
  intro: { id: 'chat_message_list_intro.intro', defaultMessage: 'wants to start a chat with you' },
  accept: { id: 'chat_message_list_intro.actions.accept', defaultMessage: 'Accept' },
  leaveChat: { id: 'chat_message_list_intro.actions.leave_chat', defaultMessage: 'Leave chat' },
  report: { id: 'chat_message_list_intro.actions.report', defaultMessage: 'Report' },
  messageLifespan: { id: 'chat_message_list_intro.actions.message_lifespan', defaultMessage: 'Messages older than {day, plural, one {# day} other {# days}} are deleted.' },
});

const ChatMessageListIntro = () => {
  const dispatch = useAppDispatch();
  const intl = useIntl();
  const features = useFeatures();
  const history = useHistory();

  const { chat, isUsingMainChatPage, needsAcceptance } = useChatContext();
  const { acceptChat, deleteChat } = useChatActions(chat?.id as string);

  const handleLeaveChat = () => {
    dispatch(openModal('CONFIRM', {
      heading: intl.formatMessage(messages.leaveChatHeading),
      message: intl.formatMessage(messages.leaveChatMessage),
      confirm: intl.formatMessage(messages.leaveChatConfirm),
      confirmationTheme: 'primary',
      onConfirm: () => {
        deleteChat.mutate(undefined, {
          onSuccess() {
            if (isUsingMainChatPage) {
              history.push('/chats');
            }
          },
        });
      },
    }));
  };

  if (!chat || !features.chatAcceptance) {
    return null;
  }

  return (
    <Stack
      data-testid='chat-message-list-intro'
      justifyContent='center'
      alignItems='center'
      space={4}
      className={
        clsx({
          'w-3/4 mx-auto': needsAcceptance,
          'py-6': true, // needs to be padding to prevent Virtuoso bugs
        })
      }
    >
      <Stack alignItems='center' space={2}>
        <Link to={`/@${chat.account.acct}`}>
          <Avatar src={chat.account.avatar_static} size={75} />
        </Link>

        <Text size='lg' align='center'>
          {needsAcceptance ? (
            <>
              <Text tag='span' weight='semibold'>@{chat.account.acct}</Text>
              {' '}
              <Text tag='span'>{intl.formatMessage(messages.intro)}</Text>
            </>
          ) : (
            <Link to={`/@${chat.account.acct}`}>
              <Text tag='span' theme='inherit' weight='semibold'>@{chat.account.acct}</Text>
            </Link>
          )}
        </Text>
      </Stack>

      {needsAcceptance ? (
        <HStack alignItems='center' space={2} className='w-full'>
          <Button
            theme='primary'
            block
            onClick={() => acceptChat.mutate()}
            disabled={acceptChat.isPending}
          >
            {intl.formatMessage(messages.accept)}
          </Button>

          <Button
            theme='danger'
            block
            onClick={handleLeaveChat}
          >
            {intl.formatMessage(messages.leaveChat)}
          </Button>
        </HStack>
      ) : (
        <HStack justifyContent='center' alignItems='center' space={1} className='shrink-0'>
          <Icon src={require('@tabler/icons/clock.svg')} className='h-4 w-4 text-gray-600' />
          {chat.message_expiration && (
            <Text size='sm' theme='muted'>
              {intl.formatMessage(messages.messageLifespan, { day: secondsToDays(chat.message_expiration) })}
            </Text>
          )}
        </HStack>
      )}
    </Stack>
  );
};

export default ChatMessageListIntro;