From 86e79354d7a969c8bca4a07418b151a916e88ab3 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Mon, 31 Oct 2022 12:14:22 -0400
Subject: [PATCH] Add new Welcome experience

---
 .../chats/components/chat-page/chat-page.tsx  | 58 ++++++++-------
 .../chat-page/components/chat-page-main.tsx   | 10 +--
 .../chat-page/components/welcome.tsx          | 71 +++++++++++++------
 3 files changed, 85 insertions(+), 54 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index f26bb2e5af..728f4bfc24 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/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,32 +66,36 @@ 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'
     >
-      <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', {
-            'hidden sm:block': chat,
-          })}
-        >
-          <ChatPageSidebar />
-        </Stack>
+      {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', {
+              'hidden sm:block': chat,
+            })}
+          >
+            <ChatPageSidebar />
+          </Stack>
 
-        <Stack className={classNames('col-span-9 sm:col-span-6 h-full overflow-hidden', {
-          'hidden sm:block': !chat,
-        })}
-        >
-          <Switch>
-            <Route path='/chats/new'>
-              <ChatPageNew />
-            </Route>
-            <Route path='/chats/settings'>
-              <Welcome />
-            </Route>
-            <Route>
-              <ChatPageMain />
-            </Route>
-          </Switch>
-        </Stack>
-      </div>
+          <Stack className={classNames('col-span-9 sm:col-span-6 h-full overflow-hidden', {
+            'hidden sm:block': !chat,
+          })}
+          >
+            <Switch>
+              <Route path='/chats/new'>
+                <ChatPageNew />
+              </Route>
+              <Route path='/chats/settings'>
+                <Welcome />
+              </Route>
+              <Route>
+                <ChatPageMain />
+              </Route>
+            </Switch>
+          </Stack>
+        </div>
+      ) : (
+        <Welcome />
+      )}
     </div>
   );
 };
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index 2c7647663b..7ecaf9b4a2 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/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 />;
   }
diff --git a/app/soapbox/features/chats/components/chat-page/components/welcome.tsx b/app/soapbox/features/chats/components/chat-page/components/welcome.tsx
index ff545b825f..b096cf9aba 100644
--- a/app/soapbox/features/chats/components/chat-page/components/welcome.tsx
+++ b/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,28 +37,48 @@ const Welcome = () => {
   };
 
   return (
-    <Stack className='h-full p-6 space-y-8'>
-      <CardTitle title='Message Settings' />
+    <Stack className='py-20 px-4 sm:px-0'>
+      <img
+        src='/instance/images/chats/welcome.svg'
+        className='mx-auto w-32 md:w-40 h-auto mb-10'
+        alt='Chats'
+      />
 
-      <Form onSubmit={handleSubmit}>
-        <CardTitle title='Privacy' />
+      <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>
 
-        <CardBody>
-          <List>
-            <ListItem
-              label='Allow others to message me'
-              hint='Only people I follow can send me messages'
-            >
-              <Toggle
-                checked={data.accepting_messages}
-                onChange={(event) => setData((prevData) => ({ ...prevData, accepting_messages: event.target.checked }))}
-              />
-            </ListItem>
-          </List>
-        </CardBody>
+        <Text align='center' theme='muted'>
+          {intl.formatMessage(messages.subtitle)}
+        </Text>
+      </div>
 
-        <Button type='submit' theme='primary'>
-          Save & Continue
+      <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={intl.formatMessage(messages.acceptingMessageLabel)}
+                hint={intl.formatMessage(messages.acceptingMessageHint)}
+              >
+                <Toggle
+                  checked={data.accepting_messages}
+                  onChange={(event) => setData((prevData) => ({ ...prevData, accepting_messages: event.target.checked }))}
+                />
+              </ListItem>
+            </List>
+          </CardBody>
+        </Stack>
+
+        <Text align='center' theme='muted'>
+          {intl.formatMessage(messages.notice)}
+        </Text>
+
+        <Button type='submit' theme='primary' block size='lg'>
+          {intl.formatMessage(messages.submit)}
         </Button>
       </Form>
     </Stack>