packages/components/containers/contacts/edit/fields/ContactFieldAdr.tsx

   1 import type { ChangeEvent } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Input } from '@proton/atoms';
   7 import type { VCardAddress, VCardProperty } from '@proton/shared/lib/interfaces/contacts/VCard';
   8 import generateUID from '@proton/utils/generateUID';
   9
  10 interface Props {
  11     vCardProperty: VCardProperty<VCardAddress>;
  12     onChange: (vCardProperty: VCardProperty) => void;
  13 }
  14 const ContactFieldAdr = ({ vCardProperty, onChange }: Props) => {
  15     const [uid] = useState(generateUID('contact-adr'));
  16
  17     const handleChange =
  18         (part: keyof VCardAddress) =>
  19         ({ target }: ChangeEvent<HTMLInputElement>) => {
  20             onChange({ ...vCardProperty, value: { ...vCardProperty.value, [part]: target.value } });
  21         };
  22
  23     const address = vCardProperty.value || {};
  24
  25     return (
  26         <>
  27             <div className="mb-2">
  28                 <Input
  29                     id={`${uid}-street`}
  30                     value={address.streetAddress || ''}
  31                     placeholder={c('Label').t`Street address`}
  32                     onChange={handleChange('streetAddress')}
  33                     data-testid="street"
  34                 />
  35             </div>
  36             {address.extendedAddress ? (
  37                 <div className="mb-2">
  38                     <Input
  39                         id={`${uid}-extended`}
  40                         value={address.extendedAddress || ''}
  41                         placeholder={c('Label').t`Extended address`}
  42                         onChange={handleChange('extendedAddress')}
  43                         data-testid="extended"
  44                     />
  45                 </div>
  46             ) : null}
  47             <div className="mb-2 flex gap-2">
  48                 <Input
  49                     id={`${uid}-postalCode`}
  50                     value={address.postalCode || ''}
  51                     placeholder={c('Label').t`Postal code`}
  52                     onChange={handleChange('postalCode')}
  53                     data-testid="postalCode"
  54                 />
  55                 <Input
  56                     id={`${uid}-locality`}
  57                     value={address.locality || ''}
  58                     placeholder={c('Label').t`City`}
  59                     onChange={handleChange('locality')}
  60                     data-testid="city"
  61                     className="grow-2"
  62                 />
  63             </div>
  64             {address.postOfficeBox ? (
  65                 <div className="mb-2">
  66                     <Input
  67                         id={`${uid}-postBox`}
  68                         value={address.postOfficeBox || ''}
  69                         placeholder={c('Label').t`Post office box`}
  70                         onChange={handleChange('postOfficeBox')}
  71                         data-testid="postBox"
  72                     />
  73                 </div>
  74             ) : null}
  75             <div className="mb-2 flex gap-2">
  76                 <Input
  77                     id={`${uid}-region`}
  78                     value={address.region || ''}
  79                     placeholder={c('Label').t`Region`}
  80                     onChange={handleChange('region')}
  81                     data-testid="region"
  82                 />
  83                 <Input
  84                     id={`${uid}-country`}
  85                     value={address.country || ''}
  86                     placeholder={c('Label').t`Country`}
  87                     onChange={handleChange('country')}
  88                     data-testid="country"
  89                 />
  90             </div>
  91         </>
  92     );
  93 };
  94
  95 export default ContactFieldAdr;