packages/components/containers/organization/OrganizationNameModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import Form from '@proton/components/components/form/Form';
   7 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   8 import Modal from '@proton/components/components/modalTwo/Modal';
   9 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
  10 import ModalFooter from '@proton/components/components/modalTwo/ModalFooter';
  11 import ModalHeader from '@proton/components/components/modalTwo/ModalHeader';
  12 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
  13 import useFormErrors from '@proton/components/components/v2/useFormErrors';
  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 { updateOrganizationName } from '@proton/shared/lib/api/organization';
  19 import { requiredValidator } from '@proton/shared/lib/helpers/formValidators';
  20 import type { Organization } from '@proton/shared/lib/interfaces';
  21 import { getOrganizationDenomination } from '@proton/shared/lib/organization/helper';
  22 import noop from '@proton/utils/noop';
  23
  24 interface Props extends ModalProps {
  25     organization: Organization;
  26 }
  27
  28 const OrganizationNameModal = ({ onClose, organization, ...rest }: Props) => {
  29     const api = useApi();
  30     const { call } = useEventManager();
  31     const [loading, withLoading] = useLoading();
  32     const { validator, onFormSubmit } = useFormErrors();
  33     const [name, setName] = useState(organization.Name);
  34     const { createNotification } = useNotifications();
  35
  36     const isFamilyOrg = getOrganizationDenomination(organization) === 'familyGroup';
  37
  38     const handleSubmit = async () => {
  39         await api(updateOrganizationName(name));
  40         await call();
  41         let message = c('Success').t`Organization name updated`;
  42         if (isFamilyOrg) {
  43             message = c('familyOffer_2023:Success').t`Family name updated`;
  44         }
  45         createNotification({ text: message });
  46
  47         onClose?.();
  48     };
  49
  50     const handleClose = loading ? noop : onClose;
  51
  52     const header = isFamilyOrg
  53         ? c('familyOffer_2023:Title').t`Change family name`
  54         : c('Title').t`Change organization name`;
  55     const label = isFamilyOrg ? c('familyOffer_2023:Title').t`Family name` : c('Title').t`Organization name`;
  56
  57     return (
  58         <Modal
  59             as={Form}
  60             onSubmit={() => {
  61                 if (!onFormSubmit()) {
  62                     return;
  63                 }
  64                 void withLoading(handleSubmit());
  65             }}
  66             onClose={handleClose}
  67             size="small"
  68             {...rest}
  69         >
  70             <ModalHeader title={header} />
  71             <ModalContent>
  72                 <InputFieldTwo
  73                     id="organization-name"
  74                     label={label}
  75                     placeholder={c('Placeholder').t`Choose a name`}
  76                     error={validator([requiredValidator(name)])}
  77                     autoFocus
  78                     disableChange={loading}
  79                     value={name}
  80                     onValue={(value: string) => setName(value)}
  81                 />
  82             </ModalContent>
  83             <ModalFooter>
  84                 <Button onClick={handleClose} disabled={loading}>
  85                     {c('Action').t`Cancel`}
  86                 </Button>
  87                 <Button loading={loading} type="submit" color="norm">
  88                     {c('Action').t`Save`}
  89                 </Button>
  90             </ModalFooter>
  91         </Modal>
  92     );
  93 };
  94
  95 export default OrganizationNameModal;