packages/components/containers/vpn/gateways/GatewayAddServersModal.tsx

   1 import { useMemo, useState } from 'react';
   2
   3 import { c, msgid } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import Form from '@proton/components/components/form/Form';
   7 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   8 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
   9 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
  10 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
  11 import type { ModalStateProps } from '@proton/components/components/modalTwo/useModalState';
  12
  13 import type { CountryOptions } from '../../../helpers/countries';
  14 import { GatewayCountrySelection } from './GatewayCountrySelection';
  15 import type { GatewayDto } from './GatewayDto';
  16 import type { GatewayUser } from './GatewayUser';
  17 import { getInitialModel } from './helpers';
  18 import { useAddedQuantities } from './useAddedQuantities';
  19 import { useSpecificCountryCount } from './useSpecificCountryCount';
  20
  21 interface Props extends ModalStateProps {
  22     countries: readonly string[];
  23     deletedInCountries: Record<string, number>;
  24     ownedCount: number;
  25     usedCount: number;
  26     users: readonly GatewayUser[];
  27     countryOptions: CountryOptions;
  28     singleServer?: boolean;
  29     showCancelButton?: boolean;
  30     onSubmitDone: (quantities: Record<string, number>) => void;
  31     onUpsell: () => void;
  32 }
  33
  34 const GatewayAddServersModal = ({
  35     countries,
  36     deletedInCountries,
  37     ownedCount,
  38     usedCount,
  39     users,
  40     countryOptions,
  41     onSubmitDone,
  42     onUpsell,
  43     singleServer = false,
  44     showCancelButton = false,
  45     ...rest
  46 }: Props) => {
  47     const [model, setModel] = useState(getInitialModel(countries));
  48     const remainingCount = useMemo(() => ownedCount - usedCount, [ownedCount, usedCount]);
  49     const numberOfAddedServers = useAddedQuantities(model);
  50     const totalCountExceeded = useMemo(
  51         () => numberOfAddedServers > remainingCount,
  52         [numberOfAddedServers, remainingCount]
  53     );
  54     const specificCountryCount = useSpecificCountryCount(model, remainingCount, deletedInCountries);
  55     const needUpsell = useMemo(
  56         () => totalCountExceeded || specificCountryCount > 0,
  57         [totalCountExceeded, specificCountryCount]
  58     );
  59
  60     const changeModel = (diff: Partial<GatewayDto>) => setModel((model) => ({ ...model, ...diff }));
  61
  62     const handleSubmit = async () => {
  63         onSubmitDone(model.quantities || {});
  64         rest.onClose?.();
  65     };
  66
  67     return (
  68         <ModalTwo size="large" as={Form} onSubmit={handleSubmit} {...rest}>
  69             <ModalTwoHeader title={c('Title').t`Add servers`} />
  70             <ModalTwoContent>
  71                 <GatewayCountrySelection
  72                     singleServer={singleServer}
  73                     countries={countries}
  74                     ownedCount={ownedCount}
  75                     usedCount={usedCount}
  76                     addedCount={numberOfAddedServers}
  77                     needUpsell={needUpsell}
  78                     specificCountryCount={specificCountryCount}
  79                     countryOptions={countryOptions}
  80                     onUpsell={() => {
  81                         rest.onClose?.();
  82                         onUpsell();
  83                     }}
  84                     model={model}
  85                     changeModel={changeModel}
  86                 />
  87             </ModalTwoContent>
  88             <ModalTwoFooter>
  89                 {showCancelButton ? (
  90                     <Button color="weak" onClick={rest.onClose}>
  91                         {c('Action').t`Cancel`}
  92                     </Button>
  93                 ) : (
  94                     <div />
  95                 )}
  96                 {!needUpsell && numberOfAddedServers >= 1 ? (
  97                     <Button color="norm" type="submit">
  98                         {c('Feature').ngettext(
  99                             msgid`Add (${numberOfAddedServers})`,
 100                             `Add (${numberOfAddedServers})`,
 101                             numberOfAddedServers
 102                         )}
 103                     </Button>
 104                 ) : (
 105                     <Button color="norm" type="submit" disabled>
 106                         {c('Feature').t`Add`}
 107                     </Button>
 108                 )}
 109             </ModalTwoFooter>
 110         </ModalTwo>
 111     );
 112 };
 113
 114 export default GatewayAddServersModal;