applications/calendar/src/app/components/eventModal/BusySlotsSpotlight.tsx

   1 import { useRef } from 'react';
   2
   3 import { addDays, fromUnixTime } from 'date-fns';
   4 import { c } from 'ttag';
   5
   6 import { useWelcomeFlags } from '@proton/account';
   7 import { useUser } from '@proton/account/user/hooks';
   8 import { Href } from '@proton/atoms';
   9 import {
  10     Spotlight,
  11     useActiveBreakpoint,
  12     useBusySlotsAvailable,
  13     useSpotlightOnFeature,
  14     useSpotlightShow,
  15 } from '@proton/components';
  16 import { FeatureCode } from '@proton/features';
  17 import type { VIEWS } from '@proton/shared/lib/calendar/constants';
  18 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  19 import spotlightImg from '@proton/styles/assets/img/illustrations/spotlight-stars.svg';
  20
  21 interface Props {
  22     children: React.ReactNode;
  23     view: VIEWS;
  24     isDisplayedInPopover: boolean;
  25 }
  26
  27 const BusySlotsSpotlight = ({ children, view, isDisplayedInPopover }: Props) => {
  28     const anchorRef = useRef<HTMLDivElement>(null);
  29     const [user] = useUser();
  30     const { viewportWidth } = useActiveBreakpoint();
  31     const { welcomeFlags: { isDone } } = useWelcomeFlags();
  32     const userAccountHasMoreThanTwoDays = new Date() > addDays(fromUnixTime(user.CreateTime), 2);
  33     const isBusySlotsAvailable = useBusySlotsAvailable(view);
  34
  35     /**
  36      * Display conditions:
  37      * 1. User is not on a mobile screen
  38      * 2. User has done the welcome flow
  39      * 3. User has created his account more than 2 days ago
  40      * 4. Feature available for sure
  41      * 5. Is in the popover modal
  42      */
  43     const displaySpotlight =
  44         !viewportWidth['<=small'] &&
  45         isDone &&
  46         userAccountHasMoreThanTwoDays &&
  47         isBusySlotsAvailable &&
  48         isDisplayedInPopover;
  49
  50     const { show, onDisplayed, onClose } = useSpotlightOnFeature(
  51         FeatureCode.CalendarBusySlotsSpotlight,
  52         displaySpotlight
  53     );
  54
  55     const shouldShowSpotlight = useSpotlightShow(show);
  56
  57     return (
  58         <Spotlight
  59             originalPlacement="right"
  60             show={shouldShowSpotlight}
  61             onDisplayed={onDisplayed}
  62             anchorRef={anchorRef}
  63             onClose={onClose}
  64             size="large"
  65             isAboveModal
  66             content={
  67                 <div className="flex flex-nowrap my-2">
  68                     <div className="shrink-0 mr-4">
  69                         <img src={spotlightImg} alt="" />
  70                     </div>
  71                     <div>
  72                         <p className="mt-0 mb-2 text-bold">{c('Spotlight').t`No more scheduling conflicts`}</p>
  73                         <p className="m-0">{c('Spotlight')
  74                             .t`Now you can see when participants are free to attend your meeting.`}</p>
  75                         <Href href={getKnowledgeBaseUrl('/calendar-availability')}>{c('Info').t`Learn more`}</Href>
  76                     </div>
  77                 </div>
  78             }
  79         >
  80             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
  81             <div ref={anchorRef} onClick={onClose}>
  82                 {children}
  83             </div>
  84         </Spotlight>
  85     );
  86 };
  87
  88 export default BusySlotsSpotlight;