packages/components/containers/overview/SummarySection.tsx

   1 import { c, msgid } from 'ttag';
   2
   3 import Icon from '@proton/components/components/icon/Icon';
   4 import SettingsLink from '@proton/components/components/link/SettingsLink';
   5 import Loader from '@proton/components/components/loader/Loader';
   6 import useConfig from '@proton/components/hooks/useConfig';
   7 import { PLAN_SERVICES } from '@proton/payments';
   8 import { APPS, CALENDAR_APP_NAME, MAIL_APP_NAME, VPN_APP_NAME } from '@proton/shared/lib/constants';
   9 import { getInitials } from '@proton/shared/lib/helpers/string';
  10 import { getPlan } from '@proton/shared/lib/helpers/subscription';
  11 import { getClosestLocaleCode } from '@proton/shared/lib/i18n/helper';
  12 import type {
  13     Organization,
  14     Subscription,
  15     SubscriptionPlan,
  16     UserModel,
  17     UserSettings,
  18 } from '@proton/shared/lib/interfaces';
  19
  20 interface Props {
  21     user: UserModel;
  22     userSettings: UserSettings;
  23     organization?: Partial<Organization>;
  24     subscription?: Subscription;
  25 }
  26
  27 const SummarySection = ({ user, userSettings, organization, subscription }: Props) => {
  28     const { APP_NAME, LOCALES = {} } = useConfig();
  29     const { Email, DisplayName, Name, canPay, isAdmin } = user;
  30     const { UsedMembers = 0, UsedDomains = 0, MaxMembers = 0, MaxDomains = 0 } = organization || {};
  31     const initials = getInitials(DisplayName || Name || Email || '');
  32     const vpnPlan = subscription ? getPlan(subscription, PLAN_SERVICES.VPN) : undefined;
  33     const mailPlan = subscription ? getPlan(subscription, PLAN_SERVICES.MAIL) : undefined;
  34
  35     const getPlanTitle = (plan: SubscriptionPlan | undefined, service: string) => {
  36         if (!plan) {
  37             return `${service} Free`;
  38         }
  39
  40         return plan.Title;
  41     };
  42
  43     const closestLocale = getClosestLocaleCode(userSettings?.Locale, LOCALES);
  44     const languageText = LOCALES[closestLocale];
  45
  46     return (
  47         <div className="border bg-norm shadow-norm p-6">
  48             <div className="mb-8 text-center">
  49                 <span className="user-initials rounded text-semibold p-1 mb-2 inline-flex bg-primary">
  50                     <span className="dropdown-logout-text m-auto">{initials}</span>
  51                 </span>
  52                 <h3 className="mb-2 lh-rg text-ellipsis" title={DisplayName || Name}>
  53                     {DisplayName || Name}
  54                 </h3>
  55                 {organization?.Name ? (
  56                     <p className="mt-0 mb-2 text-ellipsis" title={organization.Name}>
  57                         {organization.Name}
  58                     </p>
  59                 ) : null}
  60                 <p className="my-0 text-ellipsis" title={Email}>
  61                     {Email}
  62                 </p>
  63             </div>
  64             {canPay ? (
  65                 <div className="mb-4">
  66                     <strong className="block mb-2">{c('Title').t`Plans`}</strong>
  67                     {!subscription ? (
  68                         <Loader />
  69                     ) : (
  70                         <ul className="unstyled my-0">
  71                             <li className="flex flex-nowrap items-center">
  72                                 <Icon name="brand-proton-vpn" className="mr-2 shrink-0" />
  73                                 <span className="flex-1">{getPlanTitle(vpnPlan, VPN_APP_NAME)}</span>
  74                             </li>
  75                             <li className="flex flex-nowrap items-center">
  76                                 <Icon name="brand-proton-mail" className="mr-2 shrink-0" />
  77                                 <span className="flex-1">{getPlanTitle(mailPlan, MAIL_APP_NAME)}</span>
  78                             </li>
  79                         </ul>
  80                     )}
  81                 </div>
  82             ) : null}
  83             {languageText ? (
  84                 <div className="mb-4">
  85                     <strong className="block mb-2">{c('Title').t`Default language`}</strong>
  86                     <ul className="unstyled my-0">
  87                         <li className="flex flex-nowrap items-center">
  88                             <Icon name="globe" className="mr-2 shrink-0" />
  89                             <span className="flex-1">{languageText}</span>
  90                         </li>
  91                     </ul>
  92                 </div>
  93             ) : null}
  94             {isAdmin ? (
  95                 <div className="mb-4">
  96                     <strong className="block mb-2">{c('Title').t`Your organization`}</strong>
  97                     {!organization ? (
  98                         <Loader />
  99                     ) : (
 100                         <ul className="unstyled my-0">
 101                             <li>
 102                                 {c('Organization attribute').ngettext(
 103                                     msgid`${UsedMembers}/${MaxMembers} active user`,
 104                                     `${UsedMembers}/${MaxMembers} active users`,
 105                                     MaxMembers
 106                                 )}
 107                             </li>
 108                             <li>
 109                                 {c('Organization attribute').ngettext(
 110                                     msgid`${UsedDomains}/${MaxDomains} custom domain`,
 111                                     `${UsedDomains}/${MaxDomains} custom domains`,
 112                                     MaxDomains
 113                                 )}
 114                             </li>
 115                         </ul>
 116                     )}
 117                 </div>
 118             ) : null}
 119             {APP_NAME === APPS.PROTONACCOUNT ? (
 120                 <div className="mb-4">
 121                     <strong className="block mb-2">{c('Title').t`Application settings`}</strong>
 122                     <ul className="unstyled my-0">
 123                         <li className="flex flex-nowrap items-center">
 124                             <Icon name="brand-proton-mail" className="mr-2 shrink-0" />
 125                             <SettingsLink path="/general" app={APPS.PROTONMAIL}>
 126                                 {c('Link').t`${MAIL_APP_NAME} settings`}
 127                             </SettingsLink>
 128                         </li>
 129                         <li className="flex flex-nowrap items-center">
 130                             <Icon name="brand-proton-calendar" className="mr-2 shrink-0" />
 131                             <SettingsLink path="/general" app={APPS.PROTONCALENDAR}>
 132                                 {c('Link').t`${CALENDAR_APP_NAME} settings`}
 133                             </SettingsLink>
 134                         </li>
 135                     </ul>
 136                 </div>
 137             ) : null}
 138             {APP_NAME === APPS.PROTONACCOUNT ? null : (
 139                 <div className="mb-4">
 140                     <SettingsLink path="/dashboard">{c('Link').t`Manage account`}</SettingsLink>
 141                 </div>
 142             )}
 143         </div>
 144     );
 145 };
 146
 147 export default SummarySection;