packages/pass/components/Onboarding/UserRenewal.tsx

   1 import { type FC } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
   8 import type { BaseSpotlightMessage } from '@proton/pass/components/Spotlight/SpotlightContent';
   9 import { usePassConfig } from '@proton/pass/hooks/usePassConfig';
  10 import { selectPlanDisplayName, selectUserPlan } from '@proton/pass/store/selectors';
  11 import { pipe } from '@proton/pass/utils/fp/pipe';
  12 import { epochToDate } from '@proton/pass/utils/time/format';
  13 import { PASS_APP_NAME } from '@proton/shared/lib/constants';
  14 import noop from '@proton/utils/noop';
  15
  16 export const UserRenewal: FC<BaseSpotlightMessage> = ({ onClose = noop }) => {
  17     const { onLink } = usePassCore();
  18     const { SSO_URL } = usePassConfig();
  19     const plan = useSelector(selectUserPlan);
  20     const planName = useSelector(selectPlanDisplayName);
  21
  22     if (!(plan && plan.SubscriptionEnd)) return;
  23
  24     const endDate = epochToDate(plan.SubscriptionEnd);
  25     const title = c('Title').t`Your ${planName} subscription will end on ${endDate}`;
  26
  27     const upgrade = () => onLink(`${SSO_URL}/pass/dashboard?source=banner#your-subscriptions`);
  28
  29     return (
  30         <div className="flex-1">
  31             <strong className="block color-invert">{title}</strong>
  32             <span className="block text-sm color-invert">
  33                 {c('Info')
  34                     .t`You will no longer have access to sharing, 2FA, credit card and other advanced features in ${PASS_APP_NAME}`}
  35             </span>
  36             <div className="mt-2">
  37                 <Button
  38                     pill
  39                     shape="solid"
  40                     color="norm"
  41                     size="small"
  42                     className="text-sm px-3"
  43                     onClick={pipe(onClose, upgrade)}
  44                     style={{ backgroundColor: 'var(--interaction-norm-major-3)' }}
  45                 >
  46                     {c('Action').t`Reactivate now`}
  47                 </Button>
  48             </div>
  49         </div>
  50     );
  51 };