applications/drive/src/app/components/SharedPage/Bookmarks/SaveToDriveButton.tsx

   1 import { useEffect, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Icon, Spotlight, Tooltip } from '@proton/components';
   7 import useLoading from '@proton/hooks/useLoading';
   8 import { getAppHref } from '@proton/shared/lib/apps/helper';
   9 import { APPS, DRIVE_APP_NAME, DRIVE_SHORT_APP_NAME } from '@proton/shared/lib/constants';
  10 import { openNewTab } from '@proton/shared/lib/helpers/browser';
  11 import clsx from '@proton/utils/clsx';
  12
  13 import { usePublicSessionUser } from '../../../store';
  14 import {
  15     needPublicRedirectSpotlight,
  16     publicRedirectSpotlightWasShown,
  17     setPublicRedirectSpotlightToShown,
  18 } from '../../../utils/publicRedirectSpotlight';
  19 import { Actions, countActionWithTelemetry } from '../../../utils/telemetry';
  20 import { useSignupFlowModal } from '../../modals/SignupFlowModal/SignupFlowModal';
  21
  22 interface Props {
  23     onClick: () => Promise<void>;
  24     alreadyBookmarked: boolean;
  25     className?: string;
  26     loading?: boolean;
  27     customPassword?: string;
  28 }
  29 export const SaveToDriveButton = ({ className, alreadyBookmarked, customPassword, loading, onClick }: Props) => {
  30     const [isAdding, withAdding] = useLoading();
  31     const [signupFlowModal, showSignupFlowModal] = useSignupFlowModal();
  32     const [showSpotlight, setShowSpotlight] = useState(needPublicRedirectSpotlight());
  33     const { user } = usePublicSessionUser();
  34     const buttonText = alreadyBookmarked
  35         ? c('drive:action').t`Open in ${DRIVE_SHORT_APP_NAME}`
  36         : c('drive:action').t`Save for later`;
  37
  38     useEffect(() => {
  39         if (showSpotlight) {
  40             setPublicRedirectSpotlightToShown();
  41         }
  42     }, [showSpotlight]);
  43     return (
  44         <>
  45             <Spotlight
  46                 show={showSpotlight}
  47                 content={c('Spotlight')
  48                     .t`A link to this item has been saved in your drive. You can access it later in the 'Shared with me' section.`}
  49                 originalPlacement="bottom-end"
  50             >
  51                 <Tooltip
  52                     title={
  53                         alreadyBookmarked
  54                             ? ''
  55                             : c('Tooltip').t`Add this shared file to your ${DRIVE_APP_NAME} for easy access later.`
  56                     }
  57                 >
  58                     <Button
  59                         loading={loading || isAdding}
  60                         className={clsx('flex items-center', className)}
  61                         onClick={async () => {
  62                             if (!user) {
  63                                 countActionWithTelemetry(Actions.AddToBookmarkTriggeredModal);
  64                                 showSignupFlowModal({ customPassword });
  65                             } else if (alreadyBookmarked) {
  66                                 openNewTab(getAppHref('/shared-with-me', APPS.PROTONDRIVE));
  67                             } else {
  68                                 await withAdding(onClick);
  69                                 if (!publicRedirectSpotlightWasShown()) {
  70                                     setShowSpotlight(true);
  71                                     setPublicRedirectSpotlightToShown();
  72                                 }
  73                             }
  74                         }}
  75                         color="norm"
  76                         data-testid="save-in-drive-button"
  77                     >
  78                         {!isAdding && <Icon className="mr-2" name="folder-arrow-in" />}
  79                         {isAdding ? c('Info').t`Saving...` : buttonText}
  80                     </Button>
  81                 </Tooltip>
  82             </Spotlight>
  83             {signupFlowModal}
  84         </>
  85     );
  86 };