Add new Welcome experience

app/soapbox/features/chats/components/chat-page/chat-page.tsx

@@ -4,6 +4,7 @@ import { Route, Switch } from 'react-router-dom';
 
 import { Stack } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
+import { useOwnAccount } from 'soapbox/hooks';
 import { useChat } from 'soapbox/queries/chats';
 
 import ChatPageMain from './components/chat-page-main';
@@ -16,6 +17,9 @@ interface IChatPage {
 }
 
 const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
+  const account = useOwnAccount();
+  const isOnboarded = account?.chats_onboarded;
+
   const { chat, setChat } = useChatContext();
   const { chat: chatQueryResult } = useChat(chatId);
 
@@ -62,6 +66,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
       style={{ height }}
       className='h-screen bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden sm:rounded-t-xl'
     >
+      {isOnboarded ? (
         <div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
           <Stack
             className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
@@ -88,6 +93,9 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
             </Switch>
           </Stack>
         </div>
+      ) : (
+        <Welcome />
+      )}
     </div>
   );
 };

app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -7,14 +7,13 @@ import List, { ListItem } from 'soapbox/components/list';
 import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { MessageExpirationValues, useChatActions } from 'soapbox/queries/chats';
 import { secondsToDays } from 'soapbox/utils/numbers';
 
 import Chat from '../../chat';
 
 import Blankslate from './blankslate';
-import Welcome from './welcome';
 
 const messages = defineMessages({
   blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
@@ -42,7 +41,6 @@ const messages = defineMessages({
 const ChatPageMain = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
-  const account = useOwnAccount();
 
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
@@ -83,12 +81,6 @@ const ChatPageMain = () => {
     }));
   };
 
-  if (!chat && !account?.chats_onboarded) {
-    return (
-      <Welcome />
-    );
-  }
-
   if (!chat) {
     return <Blankslate />;
   }

app/soapbox/features/chats/components/chat-page/components/welcome.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list';
-import { Button, CardBody, CardTitle, Form, Stack, Toggle } from 'soapbox/components/ui';
+import { Button, CardBody, CardTitle, Form, Stack, Text, Toggle } from 'soapbox/components/ui';
 import { useOwnAccount } from 'soapbox/hooks';
 import { useUpdateCredentials } from 'soapbox/queries/accounts';
 
@@ -10,8 +11,18 @@ type FormData = {
   chats_onboarded: boolean
 }
 
+const messages = defineMessages({
+  title: { id: 'chat.welcome.title', defaultMessage: 'Welcome to {br} Direct Messages!' },
+  subtitle: { id: 'chat.welcome.subtitle', defaultMessage: 'By default, all messages are automatically deleted after 14 days for your security.' },
+  acceptingMessageLabel: { id: 'chat.welcome.accepting_messages.label', defaultMessage: 'Allow others to message me' },
+  acceptingMessageHint: { id: 'chat.welcome.accepting_messages.hint', defaultMessage: 'Only people I follow can send me messages' },
+  notice: { id: 'chat.welcome.notice', defaultMessage: 'You can change these settings later.' },
+  submit: { id: 'chat.welcome.submit', defaultMessage: 'Save & Continue' },
+});
+
 const Welcome = () => {
   const account = useOwnAccount();
+  const intl = useIntl();
   const updateCredentials = useUpdateCredentials();
 
   const [data, setData] = useState<FormData>({
@@ -26,17 +37,32 @@ const Welcome = () => {
   };
 
   return (
-    <Stack className='h-full p-6 space-y-8'>
+    <Stack className='py-20 px-4 sm:px-0'>
-      <CardTitle title='Message Settings' />
+      <img
+        src='/instance/images/chats/welcome.svg'
+        className='mx-auto w-32 md:w-40 h-auto mb-10'
+        alt='Chats'
+      />
 
-      <Form onSubmit={handleSubmit}>
+      <div className='w-full sm:w-3/5 xl:w-2/5 mx-auto mb-10'>
+        <Text align='center' weight='bold' className='mb-6 text-2xl md:text-3xl leading-8'>
+          {intl.formatMessage(messages.title, { br: <br /> })}
+        </Text>
+
+        <Text align='center' theme='muted'>
+          {intl.formatMessage(messages.subtitle)}
+        </Text>
+      </div>
+
+      <Form onSubmit={handleSubmit} className='space-y-8 w-full sm:w-2/3 lg:w-3/5 sm:mx-auto'>
+        <Stack space={2}>
           <CardTitle title='Privacy' />
 
           <CardBody>
             <List>
               <ListItem
-              label='Allow others to message me'
+                label={intl.formatMessage(messages.acceptingMessageLabel)}
-              hint='Only people I follow can send me messages'
+                hint={intl.formatMessage(messages.acceptingMessageHint)}
               >
                 <Toggle
                   checked={data.accepting_messages}
@@ -45,9 +71,14 @@ const Welcome = () => {
               </ListItem>
             </List>
           </CardBody>
+        </Stack>
 
-        <Button type='submit' theme='primary'>
+        <Text align='center' theme='muted'>
-          Save & Continue
+          {intl.formatMessage(messages.notice)}
+        </Text>
+
+        <Button type='submit' theme='primary' block size='lg'>
+          {intl.formatMessage(messages.submit)}
         </Button>
       </Form>
     </Stack>