applications/drive/src/app/components/modals/RevisionsModal/RevisionsModal.tsx

   1 import { useMemo } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useUser } from '@proton/account/user/hooks';
   6 import { ButtonLike, CircleLoader } from '@proton/atoms';
   7 import type { ModalStateProps } from '@proton/components';
   8 import {
   9     AppLink,
  10     FreeUpgradeBanner,
  11     ModalTwo,
  12     ModalTwoContent,
  13     ModalTwoHeader,
  14     getRetentionLabel,
  15     useModalTwoStatic,
  16 } from '@proton/components';
  17 import { APPS } from '@proton/shared/lib/constants';
  18 import { getIsOwner } from '@proton/shared/lib/drive/permissions';
  19 import type { RevisionRetentionDaysSetting } from '@proton/shared/lib/interfaces/drive/userSettings';
  20
  21 import type { DecryptedLink } from '../../../store';
  22 import { useUserSettings } from '../../../store';
  23 import { RevisionList, RevisionsProvider, useRevisionsProvider } from '../../revisions';
  24
  25 import './RevisionsModal.scss';
  26
  27 interface Props {
  28     link: DecryptedLink;
  29 }
  30
  31 const RevisionsSettingsBanner = ({
  32     revisionRetentionDays,
  33 }: {
  34     revisionRetentionDays: RevisionRetentionDaysSetting;
  35 }) => {
  36     const retentionLabel = getRetentionLabel(revisionRetentionDays);
  37     return (
  38         <div className="flex items-center justify-space-between">
  39             <p className="m-0 color-weak">
  40                 {revisionRetentionDays === 0
  41                     ? c('Info').t`Previous versions are not saved`
  42                     : c('Info').t`Previous versions are kept for ${retentionLabel}`}
  43             </p>
  44             <ButtonLike
  45                 as={AppLink}
  46                 to="/drive/version-history"
  47                 toApp={APPS.PROTONACCOUNT}
  48                 shape="solid"
  49                 size="small"
  50             >{c('Action').t`Change`}</ButtonLike>
  51         </div>
  52     );
  53 };
  54
  55 const RevisionsModalContent = () => {
  56     const [{ hasPaidDrive }] = useUser();
  57     const { revisionRetentionDays } = useUserSettings();
  58     const { isLoading, currentRevision, permissions, categorizedRevisions } = useRevisionsProvider();
  59     const isOwner = useMemo(() => getIsOwner(permissions), [permissions]);
  60     return (
  61         <>
  62             {isOwner &&
  63                 (hasPaidDrive ? (
  64                     <RevisionsSettingsBanner revisionRetentionDays={revisionRetentionDays} />
  65                 ) : (
  66                     <FreeUpgradeBanner />
  67                 ))}
  68             {isLoading && <CircleLoader className="w-full m-auto mt-5" size="large" />}
  69             {!isLoading && currentRevision ? (
  70                 <RevisionList currentRevision={currentRevision} categorizedRevisions={categorizedRevisions} />
  71             ) : null}
  72         </>
  73     );
  74 };
  75
  76 const RevisionsModal = ({ link, ...modalProps }: Props & ModalStateProps) => {
  77     return (
  78         <ModalTwo size="large" {...modalProps}>
  79             <ModalTwoHeader title={c('Title').t`Version history`} />
  80             <ModalTwoContent className="mb-8">
  81                 <RevisionsProvider link={link}>
  82                     <RevisionsModalContent />
  83                 </RevisionsProvider>
  84             </ModalTwoContent>
  85         </ModalTwo>
  86     );
  87 };
  88
  89 export default RevisionsModal;
  90
  91 export const useRevisionsModal = () => {
  92     return useModalTwoStatic(RevisionsModal);
  93 };