packages/components/containers/addresses/AliasPromotionSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { useSubscription } from '@proton/account/subscription/hooks';
   4 import { useUser } from '@proton/account/user/hooks';
   5 import { Button, ButtonLike } from '@proton/atoms';
   6 import Icon from '@proton/components/components/icon/Icon';
   7 import { FeatureCode, useFeature } from '@proton/features';
   8 import { PASS_APP_NAME } from '@proton/shared/lib/constants';
   9 import { getIsB2BAudienceFromPlan } from '@proton/shared/lib/helpers/subscription';
  10 import { getStaticURL } from '@proton/shared/lib/helpers/url';
  11
  12 import './AliasPromotionSection.scss';
  13
  14 const AliasPromotionSection = () => {
  15     const [user] = useUser();
  16     const [subscription] = useSubscription();
  17     const { feature, loading, update } = useFeature(FeatureCode.AliasPromotion);
  18
  19     const title = user.hasPaidMail
  20         ? c('Alias promotion').t`Get unlimited aliases!`
  21         : c('Alias promotion').t`Get 10 aliases for free!`;
  22
  23     if (
  24         loading ||
  25         !feature ||
  26         !feature.Value ||
  27         !subscription ||
  28         !subscription.Plans ||
  29         user.hasPaidPass ||
  30         getIsB2BAudienceFromPlan(subscription.Plans[0].Name) // Exclude B2B users
  31     ) {
  32         return null;
  33     }
  34
  35     const handleClose = () => {
  36         void update(false);
  37     };
  38
  39     return (
  40         <>
  41             <div className="relative">
  42                 <Button shape="ghost" icon className="absolute right-0 top-0 mr-2 mt-2" onClick={handleClose}>
  43                     <Icon name="cross-big" />
  44                 </Button>
  45             </div>
  46             <div className="flex flex-column items-center text-center rounded-lg p-6 alias-promotion-section">
  47                 <h2 className="text-bold text-xl mb-2">{title}</h2>
  48                 <p className="mt-0 mb-4 max-w-custom" style={{ '--max-w-custom': '70ch' }}>
  49                     {/* translator: With Proton Pass you can generate unique aliases to hide your identity and forward emails to your main inbox. */}
  50                     {c('Alias promotion')
  51                         .t`With ${PASS_APP_NAME} you can generate unique aliases to hide your identity and forward emails to your main inbox.`}
  52                 </p>
  53                 <ButtonLike color="norm" as="a" href={getStaticURL('/pass/download')} target="_blank">
  54                     {/* translator: Try Proton Pass */}
  55                     {c('Alias promotion').t`Try ${PASS_APP_NAME}`}
  56                 </ButtonLike>
  57             </div>
  58         </>
  59     );
  60 };
  61
  62 export default AliasPromotionSection;