Merge pull request #62 from CruGlobal/MPDX-6971

MPDX-6971: Improve Contact Details Tab Bar UI

Author: reldredge71

src/components/Contacts/ContactDetails/ContactDetails.tsx

@@ -1,6 +1,7 @@
-import { AppBar, Box, Tab, Tabs } from '@material-ui/core';
+import { Box, styled, Tab, Tabs } from '@material-ui/core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import theme from '../../../theme';
 import { ContactDetailsHeader } from './ContactDetailsHeader/ContactDetailsHeader';
 
 interface Props {
@@ -9,27 +10,74 @@ interface Props {
   onClose: () => void;
 }
 
+const ContactDetailsWrapper = styled(Box)(({}) => ({
+  width: '100%',
+}));
+
+const ContactTabsWrapper = styled(Box)(({}) => ({
+  width: '100%',
+  backgroundColor: 'transparent',
+  boxShadow: 'none',
+  borderBottom: '1px solid #DCDCDC',
+}));
+
+const ContactTabs = styled(Tabs)(({}) => ({
+  width: '100%',
+  minHeight: 40,
+  indicator: {
+    display: 'flex',
+    '& > span': {
+      width: '100%',
+      height: 2,
+      backgroundColor: '#FFCF07',
+    },
+  },
+}));
+
+const ContactTab = styled(Tab)(({}) => ({
+  textTransform: 'none',
+  minWidth: 64,
+  minHeight: 40,
+  marginRight: theme.spacing(1),
+  color: theme.palette.text.primary,
+  opacity: 0.75,
+  '&:hover': { opacity: 1 },
+}));
+
 export const ContactDetails: React.FC<Props> = ({
   accountListId,
   contactId,
 }: Props) => {
   const { t } = useTranslation();
 
+  const [selectedTabIndex, setSelectedTabIndex] = React.useState(0);
+
+  const handleChange = (
+    _event: React.ChangeEvent<Record<string, unknown>>,
+    newIndex: number,
+  ) => {
+    setSelectedTabIndex(newIndex);
+  };
+
   return (
-    <Box position="fixed">
+    <ContactDetailsWrapper>
       <ContactDetailsHeader
         accountListId={accountListId}
         contactId={contactId}
       />
-      <AppBar position="static">
-        <Tabs>
-          <Tab label={t('Tasks')} />
-          <Tab label={t('Donations')} />
-          <Tab label={t('Referrals')} />
-          <Tab label={t('Contact Details')} />
-          <Tab label={t('Notes')} />
-        </Tabs>
-      </AppBar>
-    </Box>
+      <ContactTabsWrapper>
+        <ContactTabs
+          value={selectedTabIndex}
+          onChange={handleChange}
+          TabIndicatorProps={{ children: <span /> }}
+        >
+          <ContactTab label={t('Tasks')} />
+          <ContactTab label={t('Donations')} />
+          <ContactTab label={t('Referrals')} />
+          <ContactTab label={t('Contact Details')} />
+          <ContactTab label={t('Notes')} />
+        </ContactTabs>
+      </ContactTabsWrapper>
+    </ContactDetailsWrapper>
   );
 };

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx

@@ -73,7 +73,7 @@ export const ContactDetailsHeader: React.FC<Props> = ({
   const { t } = useTranslation();
 
   return (
-    <Box style={{ padding: 24 }}>
+    <Box style={{ padding: 24, backgroundColor: 'transparent' }}>
       <HeaderBar>
         <ContactAvatar src={data?.contact?.avatar || ''} />
         <HeaderBarContactWrap>

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.stories.tsx

@@ -20,5 +20,5 @@ export const Default = (): ReactElement => {
 };
 
 export const Loading = (): ReactElement => {
-  return <ContactHeaderAddressSection loading={true} contact={null} />;
+  return <ContactHeaderAddressSection loading={true} contact={undefined} />;
 };

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.test.tsx

@@ -14,18 +14,20 @@ const contact = gqlMock<ContactDetailsHeaderFragment>(
 describe('ContactHeaderAddressSection', () => {
   it('should show loading state', async () => {
     const { queryByText } = render(
-      <ContactHeaderAddressSection loading={true} contact={null} />,
+      <ContactHeaderAddressSection loading={true} contact={undefined} />,
     );
 
-    expect(queryByText(contact.primaryAddress.street)).toBeNull();
+    expect(queryByText(contact.primaryAddress?.street || '')).toBeNull();
   });
 
   it('should render with contact details', async () => {
     const { queryByText } = render(
       <ContactHeaderAddressSection loading={false} contact={contact} />,
     );
 
-    expect(queryByText(contact.greeting)).toBeInTheDocument();
-    expect(queryByText(contact.primaryAddress.street)).toBeInTheDocument();
+    expect(queryByText(contact.greeting || '')).toBeInTheDocument();
+    expect(
+      queryByText(contact.primaryAddress?.street || ''),
+    ).toBeInTheDocument();
   });
 });

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.tsx

@@ -32,6 +32,9 @@ export const ContactHeaderAddressSection = ({
 }: Props): ReactElement => {
   const { t } = useTranslation();
 
+  const greeting = contact?.greeting;
+  const primaryAddress = contact?.primaryAddress;
+
   if (loading) {
     return (
       <ContactHeaderSection icon={<LocationIcon />}>
@@ -40,13 +43,10 @@ export const ContactHeaderAddressSection = ({
         <TextSkeleton variant="text" />
       </ContactHeaderSection>
     );
-  } else if (contact) {
-    const {
-      greeting,
-      primaryAddress: { street, city, state, postalCode } = {},
-    } = contact;
+  } else if (greeting && primaryAddress) {
+    const { street, city, state, postalCode } = primaryAddress;
 
-    if (!!greeting && !!street && !!city && !!state && !!postalCode) {
+    if (street && city && state && postalCode) {
       return (
         <ContactHeaderSection icon={<LocationIcon />}>
           <Typography variant="subtitle1">{greeting}</Typography>

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderEmailSection.stories.tsx

@@ -20,5 +20,5 @@ export const Default = (): ReactElement => {
 };
 
 export const Loading = (): ReactElement => {
-  return <ContactHeaderEmailSection loading={true} contact={null} />;
+  return <ContactHeaderEmailSection loading={true} contact={undefined} />;
 };

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderEmailSection.test.tsx

@@ -14,11 +14,11 @@ const contact = gqlMock<ContactDetailsHeaderFragment>(
 describe('ContactHeaderEmailSection', () => {
   it('should show loading state', async () => {
     const { queryByText } = render(
-      <ContactHeaderEmailSection loading={true} contact={null} />,
+      <ContactHeaderEmailSection loading={true} contact={undefined} />,
     );
 
     expect(
-      queryByText(contact.primaryPerson.primaryEmailAddress.email),
+      queryByText(contact.primaryPerson?.primaryEmailAddress?.email || ''),
     ).toBeNull();
   });
 
@@ -28,7 +28,7 @@ describe('ContactHeaderEmailSection', () => {
     );
 
     expect(
-      queryByText(contact.primaryPerson.primaryEmailAddress.email),
+      queryByText(contact.primaryPerson?.primaryEmailAddress?.email || ''),
     ).toBeInTheDocument();
   });
 });

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderEmailSection.tsx

@@ -29,24 +29,20 @@ export const ContactHeaderEmailSection = ({
   loading,
   contact,
 }: Props): ReactElement => {
+  const email = contact?.primaryPerson?.primaryEmailAddress?.email;
+
   if (loading) {
     return (
       <ContactHeaderSection icon={<EmailIcon />}>
         <TextSkeleton variant="text" />
       </ContactHeaderSection>
     );
-  } else if (contact) {
-    const {
-      primaryPerson: { primaryEmailAddress: { email } = {} } = {},
-    } = contact;
-
-    if (!!email) {
-      return (
-        <ContactHeaderSection icon={<EmailIcon />}>
-          <Typography variant="subtitle1">{email}</Typography>
-        </ContactHeaderSection>
-      );
-    }
+  } else if (email) {
+    return (
+      <ContactHeaderSection icon={<EmailIcon />}>
+        <Typography variant="subtitle1">{email}</Typography>
+      </ContactHeaderSection>
+    );
   }
 
   return <ContactHeaderSection icon={<EmailIcon />} />;

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderPhoneSection.stories.tsx

@@ -20,5 +20,5 @@ export const Default = (): ReactElement => {
 };
 
 export const Loading = (): ReactElement => {
-  return <ContactHeaderPhoneSection loading={true} contact={null} />;
+  return <ContactHeaderPhoneSection loading={true} contact={undefined} />;
 };

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderPhoneSection.test.tsx

@@ -14,11 +14,11 @@ const contact = gqlMock<ContactDetailsHeaderFragment>(
 describe('ContactHeaderPhoneSection', () => {
   it('should show loading state', async () => {
     const { queryByText } = render(
-      <ContactHeaderPhoneSection loading={true} contact={null} />,
+      <ContactHeaderPhoneSection loading={true} contact={undefined} />,
     );
 
     expect(
-      queryByText(contact.primaryPerson.primaryPhoneNumber.number),
+      queryByText(contact.primaryPerson?.primaryPhoneNumber?.number || ''),
     ).toBeNull();
   });
 
@@ -28,7 +28,7 @@ describe('ContactHeaderPhoneSection', () => {
     );
 
     expect(
-      queryByText(contact.primaryPerson.primaryPhoneNumber.number),
+      queryByText(contact.primaryPerson?.primaryPhoneNumber?.number || ''),
     ).toBeInTheDocument();
   });
 });