Add new Welcome experience
This commit is contained in:
Chewbacca
parent
0c0d568056
commit
86e79354d7
3 changed files with 85 additions and 54 deletions
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue