packages/components/containers/addresses/IdentitySection.tsx

   1 import { useEffect, useMemo, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useAddresses } from '@proton/account/addresses/hooks';
   6 import { useUser } from '@proton/account/user/hooks';
   7 import { useUserSettings } from '@proton/account/userSettings/hooks';
   8 import Info from '@proton/components/components/link/Info';
   9 import Loader from '@proton/components/components/loader/Loader';
  10 import Option from '@proton/components/components/option/Option';
  11 import SelectTwo from '@proton/components/components/selectTwo/SelectTwo';
  12 import UpsellIcon from '@proton/components/components/upsell/UpsellIcon';
  13 import SettingsLayout from '@proton/components/containers/account/SettingsLayout';
  14 import SettingsLayoutLeft from '@proton/components/containers/account/SettingsLayoutLeft';
  15 import SettingsLayoutRight from '@proton/components/containers/account/SettingsLayoutRight';
  16 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
  17 import SettingsSectionWide from '@proton/components/containers/account/SettingsSectionWide';
  18 import { useMailSettings } from '@proton/mail/mailSettings/hooks';
  19 import { MAIL_APP_NAME } from '@proton/shared/lib/constants';
  20 import { getIsAddressActive } from '@proton/shared/lib/helpers/address';
  21 import type { Address } from '@proton/shared/lib/interfaces';
  22 import clsx from '@proton/utils/clsx';
  23
  24 import EditAddressesSection from './EditAddressesSection';
  25 import PMSignature from './PMSignatureField';
  26
  27 const IdentitySection = () => {
  28     const [addresses, loading] = useAddresses();
  29     const [mailSettings] = useMailSettings();
  30     const [userSettings] = useUserSettings();
  31     const [user] = useUser();
  32
  33     const [addressID, setAddressID] = useState<string>();
  34
  35     const filteredAddresses = useMemo<Address[]>(() => {
  36         return addresses?.filter(getIsAddressActive) || [];
  37     }, [addresses]);
  38
  39     const selectedAddress = filteredAddresses.find((address) => address.ID === addressID) || filteredAddresses[0];
  40
  41     const hasPaidMail = user.hasPaidMail;
  42
  43     useEffect(() => {
  44         if (!addressID && filteredAddresses.length) {
  45             setAddressID(filteredAddresses[0].ID);
  46         }
  47     }, [addressID, filteredAddresses]);
  48
  49     if (!loading && !filteredAddresses.length) {
  50         return <SettingsParagraph>{c('Info').t`No addresses exist`}</SettingsParagraph>;
  51     }
  52
  53     return (
  54         <SettingsSectionWide>
  55             {loading || !Array.isArray(addresses) ? (
  56                 <Loader />
  57             ) : (
  58                 <>
  59                     <SettingsLayout>
  60                         <SettingsLayoutLeft>
  61                             <label className="pb-0 text-semibold" htmlFor="addressSelector">
  62                                 {c('Label').t`Email address`}
  63                             </label>
  64                         </SettingsLayoutLeft>
  65                         <SettingsLayoutRight className="pb-0 flex flex-row flex-nowrap">
  66                             <SelectTwo<Address>
  67                                 id="addressSelector"
  68                                 onValue={(address) => {
  69                                     setAddressID(address.ID);
  70                                 }}
  71                                 value={selectedAddress}
  72                                 data-testid="settings:identity-section:address"
  73                             >
  74                                 {filteredAddresses.map((address) => (
  75                                     <Option key={address.ID} value={address} title={address.Email} />
  76                                 ))}
  77                             </SelectTwo>
  78                         </SettingsLayoutRight>
  79                     </SettingsLayout>
  80
  81                     {selectedAddress && <EditAddressesSection address={selectedAddress} />}
  82
  83                     <SettingsLayout>
  84                         <SettingsLayoutLeft className={clsx([!hasPaidMail && 'settings-layout-left--has-upsell'])}>
  85                             <label
  86                                 htmlFor="pmSignatureToggle"
  87                                 className="text-semibold"
  88                                 data-testid="settings:identity-section:signature-toggle-label"
  89                             >
  90                                 <span className="mr-2">{c('Label').t`${MAIL_APP_NAME} footer`}</span>
  91                                 <Info title={c('Info').t`Let your contacts know you care about their privacy.`} />
  92                                 {!hasPaidMail && <UpsellIcon className="ml-1 mt-1" />}
  93                             </label>
  94                         </SettingsLayoutLeft>
  95                         <SettingsLayoutRight>
  96                             <div className={clsx([hasPaidMail && 'pt-0.5'])}>
  97                                 <PMSignature
  98                                     id="pmSignatureToggle"
  99                                     mailSettings={mailSettings}
 100                                     userSettings={userSettings}
 101                                 />
 102                             </div>
 103                         </SettingsLayoutRight>
 104                     </SettingsLayout>
 105                 </>
 106             )}
 107         </SettingsSectionWide>
 108     );
 109 };
 110
 111 export default IdentitySection;