packages/components/hooks/useNewFeatureOnboarding.tsx

   1 import { useState } from 'react';
   2
   3 import { isAfter, isBefore } from 'date-fns';
   4
   5 import { useWelcomeFlags } from '@proton/account';
   6 import { getItem, setItem } from '@proton/shared/lib/helpers/storage';
   7
   8 type Props = {
   9     key: string;
  10     featureFlagsEnabled?: boolean;
  11     shouldWelcomeFlowBeDone?: boolean;
  12     startDate?: string;
  13     expirationDate?: string;
  14 };
  15
  16 const getIsActive = (startDate?: string, expirationDate?: string) => {
  17     const today = new Date();
  18
  19     if (startDate && isBefore(today, new Date(startDate))) {
  20         return false;
  21     }
  22
  23     if (expirationDate && isAfter(today, new Date(expirationDate))) {
  24         return false;
  25     }
  26
  27     return true;
  28 };
  29
  30 export default function useNewFeatureOnboarding({
  31     key,
  32     featureFlagsEnabled = true,
  33     shouldWelcomeFlowBeDone = true,
  34     startDate,
  35     expirationDate,
  36 }: Props) {
  37     const onboardingKey = `onboarding-${key}`;
  38     const [wasShown, setWasShown] = useState<boolean>(Boolean(getItem(onboardingKey, 'false')));
  39     const { welcomeFlags } = useWelcomeFlags();
  40
  41     const isActive = getIsActive(startDate, expirationDate);
  42     const isWelcomeDone = shouldWelcomeFlowBeDone && welcomeFlags.isDone;
  43     const showOnboarding = !wasShown && isActive && featureFlagsEnabled && isWelcomeDone;
  44
  45     const onWasShown = () => {
  46         if (!wasShown) {
  47             setItem(onboardingKey, 'true');
  48             setWasShown(true);
  49         }
  50     };
  51
  52     return {
  53         showOnboarding,
  54         onWasShown,
  55     };
  56 }