packages/components/containers/organization/EditOrganizationIdentityModal.tsx

   1 import type { FormEvent } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { changeOrganizationSignature } from '@proton/account';
   7 import { getIsEligibleOrganizationIdentityAddress } from '@proton/account/organizationKey/actions';
   8 import { Button } from '@proton/atoms';
   9 import type { ModalProps } from '@proton/components';
  10 import {
  11     InputFieldTwo,
  12     ModalTwo as Modal,
  13     ModalTwoContent as ModalContent,
  14     ModalTwoFooter as ModalFooter,
  15     ModalTwoHeader as ModalHeader,
  16     SelectTwo,
  17     useFormErrors,
  18 } from '@proton/components';
  19 import SettingsLink from '@proton/components/components/link/SettingsLink';
  20 import Option from '@proton/components/components/option/Option';
  21 import { useAddresses, useErrorHandler, useNotifications } from '@proton/components/hooks';
  22 import useLoading from '@proton/hooks/useLoading';
  23 import { useDispatch } from '@proton/redux-shared-store';
  24 import { getIsAddressConfirmed } from '@proton/shared/lib/helpers/address';
  25 import { requiredValidator } from '@proton/shared/lib/helpers/formValidators';
  26
  27 interface Props extends ModalProps<'div'> {
  28     signatureAddress?: string;
  29 }
  30
  31 const EditOrganizationIdentityModal = ({ signatureAddress: initialSignatureAddress, ...rest }: Props) => {
  32     const [submitting, withSubmitting] = useLoading();
  33     const [addresses] = useAddresses();
  34     const { validator, onFormSubmit } = useFormErrors();
  35     const eligibleAddresses = (addresses || []).filter(getIsEligibleOrganizationIdentityAddress);
  36     const [addressID, setAddressID] = useState<string | null>(() => {
  37         return eligibleAddresses.find((address) => address.Email === initialSignatureAddress)?.ID || null;
  38     });
  39     const dispatch = useDispatch();
  40     const errorHandler = useErrorHandler();
  41     const { createNotification } = useNotifications();
  42
  43     const handleSubmit = async (event: FormEvent) => {
  44         event.preventDefault();
  45         event.stopPropagation();
  46         if (!onFormSubmit()) {
  47             return;
  48         }
  49
  50         const address = addresses?.find((address) => address.ID === addressID);
  51         if (address) {
  52             const handleSubmit = async () => {
  53                 await dispatch(changeOrganizationSignature({ address }));
  54                 createNotification({ text: c('orgidentity').t`Organization identity updated` });
  55                 rest.onClose?.();
  56             };
  57             withSubmitting(handleSubmit()).catch(errorHandler);
  58         }
  59     };
  60
  61     return (
  62         <Modal as="form" size="small" {...rest} onSubmit={handleSubmit}>
  63             <ModalHeader title={c('orgidentity').t`Edit organization identity`} />
  64             <ModalContent>
  65                 {initialSignatureAddress && (
  66                     <div className="mb-6">
  67                         <div className="text-semibold mb-1">{c('orgidentity').t`Current organization identity`}</div>
  68                         <div className="text-ellipsis" title={initialSignatureAddress}>
  69                             {initialSignatureAddress}
  70                         </div>
  71                     </div>
  72                 )}
  73                 {(() => {
  74                     if (!eligibleAddresses.length) {
  75                         const primaryAddress = addresses?.[0];
  76                         if (!initialSignatureAddress && primaryAddress && !getIsAddressConfirmed(primaryAddress)) {
  77                             const verify = (
  78                                 <SettingsLink path="/account-password" key="verify">
  79                                     {c('orgidentity').t`Verify`}
  80                                 </SettingsLink>
  81                             );
  82                             const email = <strong key="email">({primaryAddress.Email})</strong>;
  83                             return (
  84                                 <div className="text-break">
  85                                     {c('orgidentity')
  86                                         .jt`${verify} your email address ${email} to set organization identity.`}
  87                                 </div>
  88                             );
  89                         }
  90                         return null;
  91                     }
  92                     return (
  93                         <InputFieldTwo
  94                             id="organizationIdentity"
  95                             as={SelectTwo<string | null>}
  96                             error={validator([requiredValidator(addressID)])}
  97                             value={addressID}
  98                             onValue={(addressID: string | null) => {
  99                                 if (addressID) {
 100                                     setAddressID(addressID);
 101                                 }
 102                             }}
 103                             label={c('orgidentity').t`New organization identity`}
 104                         >
 105                             {eligibleAddresses.map((address) => (
 106                                 <Option title={address.Email} key={address.ID} value={address.ID} />
 107                             ))}
 108                         </InputFieldTwo>
 109                     );
 110                 })()}
 111             </ModalContent>
 112             <ModalFooter>
 113                 <Button onClick={rest.onClose} disabled={submitting}>{c('Action').t`Cancel`}</Button>
 114                 <Button color="norm" type="submit" loading={submitting}>{c('Action').t`Save`}</Button>
 115             </ModalFooter>
 116         </Modal>
 117     );
 118 };
 119
 120 export default EditOrganizationIdentityModal;