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

   1 import { c, msgid } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Form from '@proton/components/components/form/Form';
   5 import Icon from '@proton/components/components/icon/Icon';
   6 import Label from '@proton/components/components/label/Label';
   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 import type { CountryOptions } from '@proton/components/helpers/countries';
  13
  14 import { CountryFlagAndName } from './CountryFlagAndName';
  15 import type { GatewayLocation } from './GatewayLocation';
  16 import { getLocationDisplayName, getLocationFromId } from './helpers';
  17
  18 interface Props extends ModalStateProps {
  19     totalQuantities: Record<string, number>;
  20     countryOptions: CountryOptions;
  21     onSubmitDone: () => void;
  22 }
  23
  24 const RemoveServerConfirmationModal = ({ totalQuantities, countryOptions, onSubmitDone, ...rest }: Props) => {
  25     const handleSubmit = async () => {
  26         onSubmitDone();
  27         rest.onClose?.();
  28     };
  29
  30     const locations: [locationName: GatewayLocation, count: number][] = [];
  31     let totalServerCount = 0;
  32
  33     Object.keys(totalQuantities).forEach((locationId) => {
  34         locations.push([getLocationFromId(locationId), totalQuantities[locationId]]);
  35
  36         totalServerCount += totalQuantities[locationId];
  37     });
  38
  39     return (
  40         <ModalTwo as={Form} size="small" onSubmit={handleSubmit} {...rest}>
  41             <ModalTwoHeader
  42                 title={c('Title').ngettext(
  43                     msgid`Add ${totalServerCount} server?`,
  44                     `Add ${totalServerCount} servers?`,
  45                     totalServerCount
  46                 )}
  47             />
  48             <ModalTwoContent>
  49                 <>
  50                     {locations.map((location) => {
  51                         const number = location[1];
  52
  53                         return (
  54                             <div className="flex *:min-size-auto md:flex-nowrap items-center mb-4">
  55                                 <Label className="flex-1">
  56                                     <CountryFlagAndName
  57                                         countryCode={location[0].Country}
  58                                         countryName={getLocationDisplayName(location[0], countryOptions)}
  59                                     />
  60                                 </Label>
  61                                 <>{c('Info').ngettext(msgid`${number} server`, `${number} servers`, number)}</>
  62                             </div>
  63                         );
  64                     })}
  65                 </>
  66                 <div className="flex flex-nowrap mb-4 rounded p-2 bg-weak">
  67                     <Icon name="exclamation-triangle-filled" className="color-warning shrink-0" />
  68                     <div className="ml-2">
  69                         {c('Info')
  70                             .t`It takes 10 days to change a server's country, so make sure your selection is correct.`}
  71                     </div>
  72                 </div>
  73             </ModalTwoContent>
  74             <ModalTwoFooter>
  75                 <Button color="weak" onClick={rest.onClose}>
  76                     {c('Action').t`Cancel`}
  77                 </Button>
  78                 <Button color="norm" type="submit">
  79                     {c('Feature').t`Continue`}
  80                 </Button>
  81             </ModalTwoFooter>
  82         </ModalTwo>
  83     );
  84 };
  85
  86 export default RemoveServerConfirmationModal;