packages/components/containers/calendar/settings/CalendarExportSection.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Href } from '@proton/atoms';
   6 import Alert from '@proton/components/components/alert/Alert';
   7 import PrimaryButton from '@proton/components/components/button/PrimaryButton';
   8 import CalendarSelect from '@proton/components/components/calendarSelect/CalendarSelect';
   9 import useModalState from '@proton/components/components/modalTwo/useModalState';
  10 import type { SelectChangeEvent } from '@proton/components/components/selectTwo/select';
  11 import { ExportModal } from '@proton/components/containers/calendar/exportModal';
  12 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  13 import type { VisualCalendar } from '@proton/shared/lib/interfaces/calendar';
  14
  15 import { SettingsParagraph, SettingsSection } from '../../account';
  16
  17 interface Props {
  18     fallbackCalendar?: VisualCalendar;
  19     personalCalendars: VisualCalendar[];
  20 }
  21
  22 const CalendarExportSection = ({ personalCalendars, fallbackCalendar }: Props) => {
  23     const [calendar, setCalendar] = useState(fallbackCalendar);
  24     const [exportModal, setIsExportModalOpen, renderExportModal] = useModalState();
  25
  26     const calendarOptions = personalCalendars.map(({ ID: id, Name: name, Color: color }) => ({ id, name, color }));
  27
  28     const handleSelectCalendar = ({ value: id }: SelectChangeEvent<string>) => {
  29         const selectedCalendar = personalCalendars.find(({ ID }) => ID === id);
  30         setCalendar(selectedCalendar || fallbackCalendar);
  31     };
  32
  33     const handleExport = () => {
  34         setIsExportModalOpen(true);
  35     };
  36
  37     const selectedCalendar = calendar || fallbackCalendar;
  38
  39     return (
  40         <SettingsSection>
  41             {renderExportModal && selectedCalendar && (
  42                 <ExportModal isOpen={exportModal.open} calendar={selectedCalendar} {...exportModal} />
  43             )}
  44
  45             {!selectedCalendar && (
  46                 <Alert className="mb-4" type="warning">
  47                     {c('Info').t`You have no calendars to export.`}
  48                 </Alert>
  49             )}
  50
  51             <SettingsParagraph>
  52                 {c('Calendar export section description')
  53                     .t`Download an ICS file with all the events from the selected calendar.`}
  54                 <br />
  55                 <Href href={getKnowledgeBaseUrl('/protoncalendar-calendars')}>{c('Knowledge base link label')
  56                     .t`Here's how`}</Href>
  57             </SettingsParagraph>
  58
  59             <div className="flex">
  60                 {selectedCalendar && (
  61                     <span className="flex-1 mr-4 relative">
  62                         <label
  63                             id={`label-calendar-${selectedCalendar.ID}`}
  64                             htmlFor={`calendar-${selectedCalendar.ID}`}
  65                             className="sr-only"
  66                         >{c('Action').t`Select a calendar to export`}</label>
  67                         <CalendarSelect
  68                             calendarID={selectedCalendar.ID}
  69                             options={calendarOptions}
  70                             onChange={handleSelectCalendar}
  71                             freeze={false}
  72                             aria-describedby={`label-calendar-${selectedCalendar.ID}`}
  73                         />
  74                     </span>
  75                 )}
  76                 <span className="shrink-0">
  77                     <PrimaryButton onClick={handleExport} disabled={!selectedCalendar}>{c('Action')
  78                         .t`Download ICS`}</PrimaryButton>
  79                 </span>
  80             </div>
  81         </SettingsSection>
  82     );
  83 };
  84
  85 export default CalendarExportSection;