packages/components/containers/contacts/widget/ContactsWidgetPlaceholder.tsx

   1 import type { MouseEvent, ReactNode } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { InlineLinkButton } from '@proton/atoms';
   6 import { useTheme } from '@proton/components/containers/themes/ThemeProvider';
   7 import { getPlaceholderSrc } from '@proton/mail';
   8 import noContactsImgDark from '@proton/styles/assets/img/placeholders/contacts-empty-cool-dark.svg';
   9 import noContactsImgLight from '@proton/styles/assets/img/placeholders/contacts-empty-cool-light.svg';
  10 import noContactsImgWarm from '@proton/styles/assets/img/placeholders/contacts-empty-warm-light.svg';
  11 import noResultsImgDark from '@proton/styles/assets/img/placeholders/search-empty-cool-dark.svg';
  12 import noResultsImgLight from '@proton/styles/assets/img/placeholders/search-empty-cool-light.svg';
  13 import noResultsImgWarm from '@proton/styles/assets/img/placeholders/search-empty-warm-light.svg';
  14
  15 import IllustrationPlaceholder from '../../illustration/IllustrationPlaceholder';
  16
  17 export enum EmptyType {
  18     All,
  19     Search,
  20     AllGroups,
  21 }
  22
  23 interface Props {
  24     type: EmptyType | undefined;
  25     onClearSearch: (event: MouseEvent) => void;
  26     onCreate: () => void;
  27     onImport: () => void;
  28 }
  29
  30 const ContactsWidgetPlaceholder = ({ type, onClearSearch, onImport, onCreate }: Props) => {
  31     const theme = useTheme();
  32     let imgUrl: string;
  33     let actions: ReactNode;
  34
  35     switch (type) {
  36         case EmptyType.AllGroups: {
  37             imgUrl = getPlaceholderSrc({
  38                 theme: theme.information.theme,
  39                 warmLight: noContactsImgWarm,
  40                 coolLight: noContactsImgLight,
  41                 coolDark: noContactsImgDark,
  42             });
  43             actions = (
  44                 <div className="flex flex-column">
  45                     <p className="m-0" data-testid="groups:no-groups">{c('Actions message')
  46                         .t`You don't have any groups.`}</p>
  47                     <p className="m-0">
  48                         <InlineLinkButton key="add-contact" onClick={onCreate}>{c('Action')
  49                             .t`Add group`}</InlineLinkButton>
  50                     </p>
  51                 </div>
  52             );
  53             break;
  54         }
  55         case EmptyType.Search: {
  56             imgUrl = getPlaceholderSrc({
  57                 theme: theme.information.theme,
  58                 warmLight: noResultsImgWarm,
  59                 coolLight: noResultsImgLight,
  60                 coolDark: noResultsImgDark,
  61             });
  62             actions = (
  63                 <div className="flex flex-column">
  64                     <p className="m-0">{c('Actions message').t`No results found.`}</p>
  65                     <p className="m-0">{c('Actions message').jt`Please try another search term.`}</p>
  66                     <p className="m-0">
  67                         <InlineLinkButton onClick={onClearSearch}>{c('Action').t`Clear query`}</InlineLinkButton>
  68                     </p>
  69                 </div>
  70             );
  71             break;
  72         }
  73         case EmptyType.All:
  74         default: {
  75             imgUrl = getPlaceholderSrc({
  76                 theme: theme.information.theme,
  77                 warmLight: noContactsImgWarm,
  78                 coolLight: noContactsImgLight,
  79                 coolDark: noContactsImgDark,
  80             });
  81             const addContact = (
  82                 <InlineLinkButton key="add-contact" onClick={onCreate}>{c('Action').t`Add contact`}</InlineLinkButton>
  83             );
  84             const importContact = (
  85                 <InlineLinkButton key="import" onClick={onImport}>
  86                     {c('Action').t`import`}
  87                 </InlineLinkButton>
  88             );
  89             actions = (
  90                 <div className="flex flex-column">
  91                     <p className="m-0" data-testid="contacts:no-contacts">{c('Actions message')
  92                         .t`You don't have any contacts.`}</p>
  93                     <p className="m-0">{c('Actions message').jt`${addContact} or ${importContact}.`}</p>
  94                 </div>
  95             );
  96         }
  97     }
  98
  99     return (
 100         <div className="p-7 text-center w-full">
 101             <IllustrationPlaceholder url={imgUrl} height={128} className="w-auto">
 102                 <div className="flex items-center">{actions}</div>
 103             </IllustrationPlaceholder>
 104         </div>
 105     );
 106 };
 107
 108 export default ContactsWidgetPlaceholder;