applications/calendar/src/app/hooks/useVideoConferenceSpotlight.tsx

   1 import { addDays, fromUnixTime } from 'date-fns';
   2 import { c } from 'ttag';
   3
   4 import { useWelcomeFlags } from '@proton/account';
   5 import { useOrganization } from '@proton/account/organization/hooks';
   6 import { useUser } from '@proton/account/user/hooks';
   7 import { useActiveBreakpoint, useSpotlightOnFeature, useSpotlightShow } from '@proton/components';
   8 import { FeatureCode } from '@proton/features/interface';
   9 import spotlightVideoConfImg from '@proton/styles/assets/img/illustrations/spotlight-video-conference.svg';
  10 import useFlag from '@proton/unleash/useFlag';
  11
  12 const useVideoConferenceSpotlight = () => {
  13     const [user] = useUser();
  14     const { viewportWidth } = useActiveBreakpoint();
  15     const [organization] = useOrganization();
  16     const isZoomIntegrationEnabled = useFlag('ZoomIntegration');
  17     const { welcomeFlags: { isDone: hasUserFinishedWelcomeFlow } } = useWelcomeFlags();
  18     const userAccountHasMoreThanTwoDays = new Date() > addDays(fromUnixTime(user.CreateTime), 2);
  19     const hasAccessToZoomIntegration =
  20         isZoomIntegrationEnabled && user.hasPaidMail && organization?.Settings.VideoConferencingEnabled;
  21
  22     const isSmallViewport = viewportWidth['<=small'];
  23
  24     const {
  25         show: showVideoConferenceSpotlight,
  26         onDisplayed,
  27         onClose,
  28     } = useSpotlightOnFeature(
  29         FeatureCode.CalendarVideoConferenceSpotlight,
  30         hasAccessToZoomIntegration && !isSmallViewport && hasUserFinishedWelcomeFlow && userAccountHasMoreThanTwoDays
  31     );
  32
  33     const shouldShowVideoConferenceSpotlight = useSpotlightShow(showVideoConferenceSpotlight, 3000);
  34
  35     const getSpotlightContent = () => {
  36         return (
  37             <>
  38                 <div className="flex flex-nowrap items-start mb-1 gap-4">
  39                     <div className="shrink-0">
  40                         <img
  41                             alt=""
  42                             src={spotlightVideoConfImg}
  43                             className="w-custom"
  44                             style={{ '--w-custom': '2.75rem' }}
  45                         />
  46                     </div>
  47                     <div className="flex flex-column flex-nowrap items-start">
  48                         <p className="text-lg text-bold m-0 mb-1">{c('Spotlight').t`Video conferencing is here!`}</p>
  49                         <p className="m-0">{c('Spotlight')
  50                             .t`Seamlessly create and add video meeting links to your events.`}</p>
  51                     </div>
  52                 </div>
  53             </>
  54         );
  55     };
  56
  57     return {
  58         spotlightContent: getSpotlightContent(),
  59         shouldShowSotlight: shouldShowVideoConferenceSpotlight,
  60         onDisplayed,
  61         onClose,
  62     };
  63 };
  64
  65 export default useVideoConferenceSpotlight;