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

   1 import { c } from 'ttag';
   2
   3 import { EasySwitchOauthImportButton, EasySwitchProvider } from '@proton/activation';
   4 import { EASY_SWITCH_SOURCES, ImportProvider, ImportType } from '@proton/activation/src/interface';
   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 useModalState from '@proton/components/components/modalTwo/useModalState';
   9 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
  10 import SettingsSection from '@proton/components/containers/account/SettingsSection';
  11 import { getProbablyActiveCalendars, getWritableCalendars } from '@proton/shared/lib/calendar/calendar';
  12 import { IMPORT_CALENDAR_FAQ_URL } from '@proton/shared/lib/calendar/constants';
  13 import { CALENDAR_APP_NAME } from '@proton/shared/lib/constants';
  14 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  15 import type { UserModel } from '@proton/shared/lib/interfaces';
  16 import type { VisualCalendar } from '@proton/shared/lib/interfaces/calendar';
  17 import { useFlag } from '@proton/unleash';
  18
  19 import { ImportModal } from '../importModal';
  20
  21 interface Props {
  22     calendars: VisualCalendar[];
  23     initialCalendar?: VisualCalendar;
  24     user: UserModel;
  25 }
  26
  27 const CalendarImportSection = ({ calendars, initialCalendar, user }: Props) => {
  28     const { hasNonDelinquentScope } = user;
  29     const isImporterInMaintenance = useFlag('MaintenanceImporter');
  30
  31     const activeWritableCalendars = getWritableCalendars(getProbablyActiveCalendars(calendars));
  32     const hasActiveCalendars = !!activeWritableCalendars.length;
  33
  34     const [importModal, setIsImportModalOpen, renderImportModal] = useModalState();
  35
  36     const handleManualImport = () => setIsImportModalOpen(true);
  37
  38     return (
  39         <SettingsSection>
  40             {renderImportModal && initialCalendar && (
  41                 <ImportModal
  42                     isOpen={importModal.open}
  43                     initialCalendar={initialCalendar}
  44                     calendars={calendars}
  45                     {...importModal}
  46                 />
  47             )}
  48
  49             {hasNonDelinquentScope && !hasActiveCalendars ? (
  50                 <Alert className="mb-4" type="warning">
  51                     {c('Info').t`You need to have an active personal calendar to import your events from ICS.`}
  52                 </Alert>
  53             ) : null}
  54
  55             <SettingsParagraph>
  56                 {c('Calendar import section description')
  57                     .t`You can import ICS files from another calendar to ${CALENDAR_APP_NAME}. This lets you quickly import one event or your entire agenda.`}
  58                 <br />
  59                 <Href href={getKnowledgeBaseUrl(IMPORT_CALENDAR_FAQ_URL)}>{c('Knowledge base link label')
  60                     .t`Here's how`}</Href>
  61             </SettingsParagraph>
  62
  63             {!isImporterInMaintenance && (
  64                 <EasySwitchProvider>
  65                     <EasySwitchOauthImportButton
  66                         className="mr-4 mb-2"
  67                         source={EASY_SWITCH_SOURCES.CALENDAR_WEB_SETTINGS}
  68                         defaultCheckedTypes={[ImportType.CALENDAR]}
  69                         displayOn={'GoogleCalendar'}
  70                         provider={ImportProvider.GOOGLE}
  71                     />
  72                 </EasySwitchProvider>
  73             )}
  74
  75             <PrimaryButton
  76                 className="mb-2"
  77                 onClick={handleManualImport}
  78                 disabled={!hasNonDelinquentScope || !hasActiveCalendars}
  79             >
  80                 {c('Action').t`Import from ICS`}
  81             </PrimaryButton>
  82         </SettingsSection>
  83     );
  84 };
  85
  86 export default CalendarImportSection;