packages/components/containers/desktop/freeTrial/InboxDesktopFreeTrialTopBanner.tsx

   1 import { differenceInDays, format, startOfDay } from 'date-fns';
   2 import { c } from 'ttag';
   3
   4 import { Button } from '@proton/atoms';
   5 import {
   6     FIRST_REMINDER_DAYS,
   7     SECOND_REMINDER_DAYS,
   8     THIRD_REMINDER_DAYS,
   9 } from '@proton/components/containers/desktop/freeTrial/constants';
  10 import TopBanner from '@proton/components/containers/topBanners/TopBanner';
  11 import { APP_UPSELL_REF_PATH, MAIL_UPSELL_PATHS, UPSELL_COMPONENT } from '@proton/shared/lib/constants';
  12 import { getUpsellRef } from '@proton/shared/lib/helpers/upsell';
  13
  14 import { freeTrialUpgradeClick } from '../openExternalLink';
  15 import useInboxFreeTrial from './useInboxFreeTrial';
  16
  17 const UpgradeButton = () => {
  18     const upsellRef = getUpsellRef({
  19         app: APP_UPSELL_REF_PATH.INBOX_DESKTOP_REF_PATH,
  20         component: UPSELL_COMPONENT.MODAL,
  21         feature: MAIL_UPSELL_PATHS.TRIAL_BANNER,
  22     });
  23
  24     return (
  25         <Button shape="underline" onClick={() => freeTrialUpgradeClick(upsellRef)} className="py-0 align-baseline">{c(
  26             'Action'
  27         ).t`Upgrade Now`}</Button>
  28     );
  29 };
  30
  31 const getTopBannerMessage = (daysDifference: number, endDate: Date) => {
  32     const upgradeButton = <UpgradeButton key="upgrade-button" />;
  33
  34     if (daysDifference === FIRST_REMINDER_DAYS) {
  35         const formattedEndDate = format(endDate, 'MMMM dd yyyy');
  36         return c('Action').jt`Your desktop app free trial ends on ${formattedEndDate}. ${upgradeButton}`;
  37     } else if (daysDifference === SECOND_REMINDER_DAYS) {
  38         return c('Action').jt`Your desktop app free trial ends in 5 days. ${upgradeButton}`;
  39     } else if (daysDifference === THIRD_REMINDER_DAYS) {
  40         return c('Action').jt`Your desktop app free trial ends in 2 days. ${upgradeButton}`;
  41     }
  42
  43     return undefined;
  44 };
  45
  46 export const InboxDesktopFreeTrialTopBanner = () => {
  47     const { freeTrialDates, firstLogin, updateReminderFlag, displayReminder } = useInboxFreeTrial();
  48     const today = startOfDay(new Date());
  49
  50     // Do not display if first reminder or no reminders to display
  51     if (firstLogin || !displayReminder) {
  52         return null;
  53     }
  54     // Do not display if the dates are missing
  55     else if (!freeTrialDates || !freeTrialDates.Value?.trialEndDate) {
  56         return null;
  57     }
  58
  59     const endDate = startOfDay(new Date(freeTrialDates.Value.trialEndDate));
  60     const daysDifference = differenceInDays(endDate, today);
  61     const message = getTopBannerMessage(daysDifference, new Date(freeTrialDates.Value.trialEndDate));
  62
  63     if (!message) {
  64         return null;
  65     }
  66
  67     const handleClose = () => {
  68         updateReminderFlag({
  69             first: daysDifference <= FIRST_REMINDER_DAYS,
  70             second: daysDifference <= SECOND_REMINDER_DAYS,
  71             third: daysDifference <= THIRD_REMINDER_DAYS,
  72         });
  73     };
  74
  75     return (
  76         <TopBanner onClose={handleClose} className="bg-info">
  77             {message}
  78         </TopBanner>
  79     );
  80 };