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

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { ModalProps } from '@proton/components';
   5 import { ModalTwo, ModalTwoContent, ModalTwoFooter } from '@proton/components';
   6 import { DOCS_APP_NAME } from '@proton/shared/lib/constants';
   7 import sharingOnboardingWelcome from '@proton/styles/assets/img/onboarding/drive-docs-suggestion-mode.png';
   8
   9 import { useActiveShare } from '../../hooks/drive/useActiveShare';
  10 import { useDocumentActions } from '../../store/_documents';
  11 import { Actions, countActionWithTelemetry } from '../../utils/telemetry';
  12
  13 export const DocsSuggestionsOnboardingModal = ({ onClose, ...props }: ModalProps) => {
  14     const { activeFolder } = useActiveShare();
  15     const { createDocument } = useDocumentActions();
  16
  17     return (
  18         <ModalTwo {...props} size="small">
  19             <ModalTwoContent>
  20                 <section className="flex justify-center px-6">
  21                     <img className="my-4" src={sharingOnboardingWelcome} alt={DOCS_APP_NAME} />
  22                     <h1 className="text-4xl text-bold text-center">{c('Docs Info').t`Suggestion mode is here`}</h1>
  23                     <p className="text-center color-weak mt-4 mb-1">{c('Docs Info')
  24                         .t`Collaborating just got easier. Now anyone can suggest edits without changing the document.`}</p>
  25                 </section>
  26             </ModalTwoContent>
  27             <ModalTwoFooter className="flex gap-4 px-6">
  28                 <Button
  29                     className="mb-0"
  30                     size="large"
  31                     color="norm"
  32                     fullWidth
  33                     onClick={() => {
  34                         void createDocument({
  35                             shareId: activeFolder.shareId,
  36                             parentLinkId: activeFolder.linkId,
  37                         });
  38                         onClose?.();
  39                     }}
  40                 >
  41                     {c('Onboarding Action').t`Create a document`}
  42                 </Button>
  43                 <Button
  44                     size="large"
  45                     color="norm"
  46                     shape="ghost"
  47                     fullWidth
  48                     onClick={() => {
  49                         countActionWithTelemetry(Actions.DismissDocsSuggestionsOnboardingModal);
  50                         onClose?.();
  51                     }}
  52                     data-testid="drive-onboarding-dismiss"
  53                 >
  54                     {c('Onboarding Action').t`Maybe Later`}
  55                 </Button>
  56             </ModalTwoFooter>
  57         </ModalTwo>
  58     );
  59 };