-
{dueTasks.nodes.map((task) => (
-
- ); + expect(getByTestId('TaskDrawerCommentListItemAvatar')).toBeInTheDocument(); + expect(getByText('The quick brown fox jumped over the lazy dog.')).toBeInTheDocument(); + expect(getByText('B')).toBeInTheDocument(); + expect(getByText('1 day ago')).toBeInTheDocument(); + }); + + it('has correct overrides', () => { + const { queryByTestId } = render(
- ); + expect(queryByTestId('TaskDrawerCommentListItemAvatar')).not.toBeInTheDocument(); + }); + + it('has loading state', () => { + const { queryByTestId } = render(
- ); + expect(queryByTestId('TaskDrawerCommentListItemAvatar')).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/Task/Drawer/CommentList/Item/Item.tsx b/src/components/Task/Drawer/CommentList/Item/Item.tsx new file mode 100644 index 0000000000..ee3dbcdc2e --- /dev/null +++ b/src/components/Task/Drawer/CommentList/Item/Item.tsx @@ -0,0 +1,142 @@ +import React, { ReactElement } from 'react'; +import { makeStyles, Theme, Avatar, Typography, Box, Tooltip, Slide } from '@material-ui/core'; +import { formatDistanceToNow, isSameHour } from 'date-fns'; +import { compact } from 'lodash/fp'; +import { Skeleton } from '@material-ui/lab'; +import { GetCommentsForTaskDrawerCommentListQuery_task_comments_nodes as Comment } from '../../../../../../types/GetCommentsForTaskDrawerCommentListQuery'; + +const useStyles = makeStyles((theme: Theme) => ({ + container: { + display: 'grid', + gridTemplateColumns: '40px 5px 1fr', + alignItems: 'end', + marginBottom: theme.spacing(2), + }, + triangle: { + width: '0', + height: '0', + borderTop: '5px solid transparent', + borderRight: `5px solid ${theme.palette.divider}`, + }, + box: { + display: 'inline-block', + backgroundColor: theme.palette.divider, + padding: theme.spacing(2), + borderRadius: '8px', + borderBottomLeftRadius: 0, + maxWidth: '80%', + }, + typography: { + gridColumn: 3, + display: 'flex', + }, + content: {}, + avatar: {}, + reverse: { + gridTemplateColumns: '1fr 5px', + '& $triangle': { + gridColumn: 2, + gridRow: 1, + borderLeft: `5px solid ${theme.palette.primary.main}`, + borderRight: 0, + }, + '& $content': { + gridColumn: 1, + gridRow: 1, + textAlign: 'right', + }, + '& $box': { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + borderBottomLeftRadius: '8px', + borderBottomRightRadius: 0, + }, + '& $typography': { + gridColumn: 1, + justifyContent: 'flex-end', + }, + }, + compact: { + marginBottom: 4, + '& $triangle': { + border: 0, + }, + '& $box': { + borderRadius: '8px', + }, + '& $typography': { + display: 'none', + }, + '& $avatar': { + display: 'none', + }, + }, +})); + +interface Props { + comment?: Comment; + reverse?: boolean; + nextComment?: Comment; +} + +const TaskDrawerCommentListItem = ({ comment, reverse, nextComment }: Props): ReactElement => { + const classes = useStyles(); + + const nextCommentMatches = + comment?.person && + nextComment?.person && + nextComment.person.id === comment.person.id && + isSameHour(new Date(nextComment.createdAt), new Date(comment.createdAt)); + + return ( +
- ); + expect(getByTestId('TaskDrawerContactListItemCard')).toBeInTheDocument(); + }); + + it('displays minimal contact', () => { + const { getByTestId, getByText, queryByTestId, rerender } = render(
- ); + expect(getByTestId('TaskDrawerContactListItemCard')).toBeInTheDocument(); + expect(queryByTestId('TaskDrawerContactListItemAddress')).not.toBeInTheDocument(); + expect(queryByTestId('TaskDrawerContactListItemEmailAddress')).not.toBeInTheDocument(); + expect(queryByTestId('TaskDrawerContactListItemPhoneNumber')).not.toBeInTheDocument(); + expect(queryByTestId('TaskDrawerContactListItemSendNewsletter')).not.toBeInTheDocument(); + expect(queryByTestId('TaskDrawerContactListItemPledge')).not.toBeInTheDocument(); + expect(queryByTestId('TaskDrawerContactListItemLastDonation')).not.toBeInTheDocument(); + expect(queryByTestId('TaskDrawerContactListItemTags')).not.toBeInTheDocument(); + expect(getByText('Phillips, Guy')).toBeInTheDocument(); + rerender(
- ); + expect(getByTestId('TaskDrawerContactListItemAddress')).toBeInTheDocument(); + rerender( +
- , + ); + expect(getByTestId('TaskDrawerContactListItemEmailAddress')).toBeInTheDocument(); + rerender( +
- , + ); + expect(getByTestId('TaskDrawerContactListItemPhoneNumber')).toBeInTheDocument(); + rerender(
- ); + expect(getByTestId('TaskDrawerContactListItemSendNewsletter')).toBeInTheDocument(); + rerender(
- ); + expect(getByTestId('TaskDrawerContactListItemLastDonation')).toBeInTheDocument(); + rerender(
- ); + expect(getByTestId('TaskDrawerContactListItemTags')).toBeInTheDocument(); + rerender( +
- , + ); + expect(getByText('NZ$20')).toBeInTheDocument(); + rerender( +
- , + ); + expect(getByText('NZ$20 MONTHLY')).toBeInTheDocument(); + rerender( +
- , + ); + expect(getByText('PARTNER_FINANCIAL')).toBeInTheDocument(); + }); + + it('has loading state', () => { + const { queryByTestId } = render(
- ); + expect(queryByTestId('TaskDrawerContactListItemCard')).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/Task/Drawer/ContactList/Item/Item.tsx b/src/components/Task/Drawer/ContactList/Item/Item.tsx new file mode 100644 index 0000000000..b3cb000938 --- /dev/null +++ b/src/components/Task/Drawer/ContactList/Item/Item.tsx @@ -0,0 +1,231 @@ +import React, { ReactElement } from 'react'; +import { + makeStyles, + Theme, + Card, + Avatar, + IconButton, + CardHeader, + Grid, + CardContent, + Chip, + List, + ListItem, + ListItemText, + ListItemSecondaryAction, + ListItemAvatar, + Typography, + Divider, +} from '@material-ui/core'; +import { useTranslation } from 'react-i18next'; +import { compact } from 'lodash/fp'; +import CallIcon from '@material-ui/icons/Call'; +import TextsmsIcon from '@material-ui/icons/Textsms'; +import EmailIcon from '@material-ui/icons/Email'; +import LocationOnIcon from '@material-ui/icons/LocationOn'; +import { Skeleton } from '@material-ui/lab'; +import { GetContactsForTaskDrawerContactListQuery_contacts_nodes as Contact } from '../../../../../../types/GetContactsForTaskDrawerContactListQuery'; +import InfoBlock from '../../../../InfoBlock'; +import { currencyFormat } from '../../../../../lib/intlFormat'; +import { dateFormat } from '../../../../../lib/intlFormat/intlFormat'; + +const useStyles = makeStyles((theme: Theme) => ({ + cardContent: { + padding: theme.spacing(3, 3, 3, 9), + }, + chip: { + marginRight: theme.spacing(0.5), + marginBottom: theme.spacing(0.5), + }, +})); + +interface Props { + contact?: Contact; +} + +const TaskDrawerContactListItem = ({ contact }: Props): ReactElement => { + const classes = useStyles(); + const { t } = useTranslation(); + + return contact ? ( +
@@ -75,16 +81,36 @@ const SideBar = ({ mobileOpen, handleDrawerToggle }: Props): ReactElement => {
);
diff --git a/src/components/Layouts/Primary/TopBar/TopBar.stories.tsx b/src/components/Layouts/Primary/TopBar/TopBar.stories.tsx
index 9922f33c35..8d1023288b 100644
--- a/src/components/Layouts/Primary/TopBar/TopBar.stories.tsx
+++ b/src/components/Layouts/Primary/TopBar/TopBar.stories.tsx
@@ -1,13 +1,18 @@
import React, { ReactElement } from 'react';
import { Box, Container } from '@material-ui/core';
import { MockedProvider } from '@apollo/client/testing';
-import { InMemoryCache } from '@apollo/client';
-import GET_LOCAL_STATE_QUERY from '../../../../queries/getLocalStateQuery.graphql';
+import withDispatch from '../../../../decorators/withDispatch';
import { GET_TOP_BAR_QUERY } from './TopBar';
import TopBar from '.';
export default {
title: 'Layouts/Primary/TopBar',
+ decorators: [
+ withDispatch(
+ { type: 'updateAccountListId', accountListId: '1' },
+ { type: 'updateBreadcrumb', breadcrumb: 'Dashboard' },
+ ),
+ ],
};
const Content = (): ReactElement => (
@@ -45,18 +50,9 @@ export const Default = (): ReactElement => {
},
];
- const cache = new InMemoryCache({ addTypename: false });
- cache.writeQuery({
- query: GET_LOCAL_STATE_QUERY,
- data: {
- currentAccountListId: '1',
- breadcrumb: 'Dashboard',
- },
- });
-
return (
<>
- -
-
})
+ {t('No Comments to show.')}
+
+ {t('No Contacts to show.')}
+ -
+ <>
+ {contact.primaryAddress && (
+
})
+ {t('No tasks to show.')}
+