applications/calendar/src/app/containers/setup/CalendarResetSection.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Href } from '@proton/atoms';
   6 import {
   7     Collapsible,
   8     CollapsibleContent,
   9     CollapsibleHeader,
  10     CollapsibleHeaderIconButton,
  11     Icon,
  12 } from '@proton/components';
  13 import CalendarSelectIcon from '@proton/components/components/calendarSelect/CalendarSelectIcon';
  14 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  15 import type { VisualCalendar } from '@proton/shared/lib/interfaces/calendar';
  16 import encryptedEventSvg from '@proton/styles/assets/img/illustrations/encrypted-event.svg';
  17
  18 const getFirstParagraphText = (resetAll: boolean) => {
  19     if (resetAll) {
  20         return c('Info; reset calendar keys modal; part 1')
  21             .t`Your calendars will not show details of previously created events.`;
  22     }
  23     return c('Info; reset calendar keys modal; part 1')
  24         .t`Some of your calendars will not show details of previously created events.`;
  25 };
  26
  27 interface Props {
  28     calendarsToReset: VisualCalendar[];
  29     resetAll: boolean;
  30 }
  31 const CalendarResetSection = ({ calendarsToReset = [], resetAll }: Props) => {
  32     const altText = c('Title').t`Encrypted event`;
  33
  34     const [show, setShow] = useState(false);
  35     const clickShow = () => setShow((show) => !show);
  36
  37     const calendarsList = (
  38         <div>
  39             {calendarsToReset.map(({ ID, Name, Color }) => (
  40                 <div key={ID} className="flex flex-nowrap w-full items-center mb-2">
  41                     <span className="flex shrink-0">
  42                         <CalendarSelectIcon color={Color} className="mr-2" />
  43                     </span>
  44                     <span className="text-ellipsis" title={Name}>
  45                         {Name}
  46                     </span>
  47                 </div>
  48             ))}
  49         </div>
  50     );
  51
  52     return (
  53         <>
  54             <p>{getFirstParagraphText(resetAll)}</p>
  55             {!resetAll && (
  56                 <div>
  57                     <Collapsible>
  58                         <CollapsibleHeader
  59                             suffix={
  60                                 <CollapsibleHeaderIconButton onClick={clickShow}>
  61                                     <Icon name="chevron-down" />
  62                                 </CollapsibleHeaderIconButton>
  63                             }
  64                             disableFullWidth
  65                             onClick={clickShow}
  66                         >
  67                             {show ? c('Action').t`Hide affected calendars` : c('Action').t`Show affected calendars`}
  68                         </CollapsibleHeader>
  69                         <CollapsibleContent>{calendarsList}</CollapsibleContent>
  70                     </Collapsible>
  71                 </div>
  72             )}
  73             <div className="flex w-full">
  74                 <img src={encryptedEventSvg} alt={altText} className="m-auto" />
  75             </div>
  76             <p>
  77                 {c('Info; reset calendar keys modal; part 2')
  78                     .t`This is because your password was recently reset without using a recovery method.`}
  79             </p>
  80             <p>
  81                 {c('Info; reset calendar keys modal; part 3')
  82                     .t`You can recover your encrypted data with a recovery file, recovery phrase, or your old password.`}
  83             </p>
  84             <p className="mb-2">
  85                 <Href href={getKnowledgeBaseUrl('/set-account-recovery-methods')}>
  86                     {c('Link; reset calendar keys modal').t`What's a recovery method?`}
  87                 </Href>
  88             </p>
  89         </>
  90     );
  91 };
  92
  93 export default CalendarResetSection;