packages/components/containers/addresses/EditAddressModal.tsx

   1 import type { ChangeEvent } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import Field from '@proton/components/components/container/Field';
   7 import Row from '@proton/components/components/container/Row';
   8 import Editor from '@proton/components/components/editor/Editor';
   9 import { useToolbar } from '@proton/components/components/editor/hooks/useToolbar';
  10 import type { EditorActions } from '@proton/components/components/editor/interface';
  11 import Input from '@proton/components/components/input/Input';
  12 import Label from '@proton/components/components/label/Label';
  13 import FormModal from '@proton/components/components/modal/FormModal';
  14 import useApi from '@proton/components/hooks/useApi';
  15 import useEventManager from '@proton/components/hooks/useEventManager';
  16 import useNotifications from '@proton/components/hooks/useNotifications';
  17 import { useLoading } from '@proton/hooks';
  18 import { updateAddress } from '@proton/shared/lib/api/addresses';
  19 import type { Address } from '@proton/shared/lib/interfaces';
  20
  21 const EMPTY_VALUES = [/^(<div><br><\/div>)+$/, /^(<div>\s*<\/div>)+$/];
  22
  23 const formatSignature = (value: string) => (EMPTY_VALUES.some((regex) => regex.test(value)) ? '' : value);
  24
  25 interface Props {
  26     onClose?: () => void;
  27     address: Address;
  28 }
  29 const EditAddressModal = ({ onClose, address, ...rest }: Props) => {
  30     const api = useApi();
  31     const { call } = useEventManager();
  32     const [loading, withLoading] = useLoading();
  33     const [model, updateModel] = useState({
  34         displayName: address.DisplayName,
  35         signature: address.Signature,
  36     });
  37     const { createNotification } = useNotifications();
  38
  39     const handleReady = (actions: EditorActions) => {
  40         actions.setContent(model.signature);
  41     };
  42
  43     const handleDisplayName = ({ target }: ChangeEvent<HTMLInputElement>) =>
  44         updateModel({ ...model, displayName: target.value });
  45
  46     const handleSignature = (value: string) => updateModel({ ...model, signature: value });
  47
  48     const handleSubmit = async () => {
  49         await api(
  50             updateAddress(address.ID, { DisplayName: model.displayName, Signature: formatSignature(model.signature) })
  51         );
  52         await call();
  53         onClose?.();
  54         createNotification({ text: c('Success').t`Address updated` });
  55     };
  56
  57     const { openEmojiPickerRef, toolbarConfig, setToolbarConfig, modalLink, modalImage, modalDefaultFont } = useToolbar(
  58         {}
  59     );
  60
  61     return (
  62         <FormModal
  63             onClose={onClose}
  64             onSubmit={() => withLoading(handleSubmit())}
  65             title={c('Title').t`Edit address`}
  66             submit={c('Action').t`Save address`}
  67             loading={loading}
  68             {...rest}
  69         >
  70             <Row>
  71                 <Label>{c('Label').t`Address`}</Label>
  72                 <div className="relative pt-2 text-ellipsis max-w-full" title={address.Email}>
  73                     {address.Email}
  74                 </div>
  75             </Row>
  76             <Row>
  77                 <Label>{c('Label').t`Display name`}</Label>
  78                 <Field>
  79                     <Input
  80                         value={model.displayName}
  81                         placeholder={c('Placeholder').t`Choose display name`}
  82                         onChange={handleDisplayName}
  83                     />
  84                 </Field>
  85             </Row>
  86             <Row>
  87                 <Editor
  88                     onReady={handleReady}
  89                     onChange={handleSignature}
  90                     simple
  91                     openEmojiPickerRef={openEmojiPickerRef}
  92                     toolbarConfig={toolbarConfig}
  93                     setToolbarConfig={setToolbarConfig}
  94                     modalLink={modalLink}
  95                     modalImage={modalImage}
  96                     modalDefaultFont={modalDefaultFont}
  97                 />
  98             </Row>
  99         </FormModal>
 100     );
 101 };
 102
 103 export default EditAddressModal;