packages/components/containers/calendar/CalendarLimitReachedModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button, ButtonLike } from '@proton/atoms';
   4 import SettingsLink from '@proton/components/components/link/SettingsLink';
   5 import Prompt from '@proton/components/components/prompt/Prompt';
   6 import { getCalendarsLimitReachedText } from '@proton/shared/lib/calendar/calendarLimits';
   7 import { getCalendarsSettingsPath } from '@proton/shared/lib/calendar/settingsRoutes';
   8 import { APP_UPSELL_REF_PATH, CALENDAR_UPSELL_PATHS, UPSELL_COMPONENT } from '@proton/shared/lib/constants';
   9 import { addUpsellPath, getUpgradePath, getUpsellRef } from '@proton/shared/lib/helpers/upsell';
  10 import type { Subscription, UserModel } from '@proton/shared/lib/interfaces';
  11
  12 interface Props {
  13     onClose?: () => void;
  14     open?: boolean;
  15     isFreeUser: boolean;
  16     user: UserModel;
  17     subscription?: Subscription;
  18 }
  19
  20 const CalendarLimitReachedModal = ({ open, onClose, isFreeUser, user, subscription }: Props) => {
  21     const { maxReachedText, addNewCalendarText } = getCalendarsLimitReachedText(isFreeUser);
  22     const upsellRef = getUpsellRef({
  23         app: APP_UPSELL_REF_PATH.CALENDAR_UPSELL_REF_PATH,
  24         component: UPSELL_COMPONENT.MODAL,
  25         feature: CALENDAR_UPSELL_PATHS.MAX_CAL,
  26     });
  27     const upgradeLink = addUpsellPath(getUpgradePath({ user, subscription }), upsellRef);
  28     const submitButtonPath = isFreeUser ? upgradeLink : getCalendarsSettingsPath();
  29     const submitButtonText = isFreeUser ? c('Modal action').t`Upgrade` : c('Modal action').t`Manage calendars`;
  30
  31     return (
  32         <Prompt
  33             open={open}
  34             title={c('Modal title').t`Cannot add more calendars`}
  35             buttons={[
  36                 <ButtonLike color="norm" as={SettingsLink} path={submitButtonPath}>
  37                     {submitButtonText}
  38                 </ButtonLike>,
  39                 <Button onClick={onClose}>{c('Modal action').t`Cancel`}</Button>,
  40             ]}
  41             onClose={onClose}
  42         >
  43             <p>{maxReachedText}</p>
  44             <p>{addNewCalendarText}</p>
  45         </Prompt>
  46     );
  47 };
  48
  49 export default CalendarLimitReachedModal;