packages/components/containers/general/PmMeSection.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 useSettingsLink from '@proton/components/components/link/useSettingsLink';
   6 import useModalState from '@proton/components/components/modalTwo/useModalState';
   7 import MailUpsellButton from '@proton/components/components/upsell/MailUpsellButton';
   8 import PmMeUpsellModal from '@proton/components/components/upsell/modal/types/PmMeUpsellModal';
   9 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
  10 import SettingsSection from '@proton/components/containers/account/SettingsSection';
  11 import { APP_UPSELL_REF_PATH, MAIL_APP_NAME, MAIL_UPSELL_PATHS, UPSELL_COMPONENT } from '@proton/shared/lib/constants';
  12 import { addUpsellPath, getUpgradePath, getUpsellRef } from '@proton/shared/lib/helpers/upsell';
  13 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  14
  15 import PmMeButton, { getActivateString } from './PmMeButton';
  16
  17 interface Props {
  18     isPMAddressActive: boolean;
  19 }
  20
  21 const PmMeSection = ({ isPMAddressActive }: Props) => {
  22     const goToSettings = useSettingsLink();
  23     const [user] = useUser();
  24     const [subscription] = useSubscription();
  25
  26     const [upsellModalProps, handleUpsellModalDisplay, renderUpsellModal] = useModalState();
  27
  28     const handleUpgrade = () => {
  29         const upsellRef = getUpsellRef({
  30             app: APP_UPSELL_REF_PATH.MAIL_UPSELL_REF_PATH,
  31             component: UPSELL_COMPONENT.BANNER,
  32             feature: MAIL_UPSELL_PATHS.PM_ME,
  33             isSettings: true,
  34         });
  35
  36         goToSettings(addUpsellPath(getUpgradePath({ user, subscription }), upsellRef), undefined, false);
  37     };
  38
  39     const display: 'can-enable' | 'has-enabled' | 'free-needs-upgrade' | 'free-can-only-receive' = (() => {
  40         if (user.hasPaidMail) {
  41             if (!isPMAddressActive) {
  42                 return 'can-enable';
  43             } else {
  44                 return 'has-enabled';
  45             }
  46         } else {
  47             if (!isPMAddressActive) {
  48                 return 'free-needs-upgrade';
  49             } else {
  50                 return 'free-can-only-receive';
  51             }
  52         }
  53     })();
  54
  55     if (display === 'has-enabled') {
  56         return null;
  57     }
  58
  59     return (
  60         <SettingsSection>
  61             {display === 'can-enable' && (
  62                 <>
  63                     <SettingsParagraph className="mb-4" learnMoreUrl={getKnowledgeBaseUrl('/pm-me-addresses')}>
  64                         {c('Info')
  65                             .t`Add a @pm.me email address to your account. This simple, shorter domain stands for "${MAIL_APP_NAME} me" or "Private Message me."`}
  66                     </SettingsParagraph>
  67                     <PmMeButton>{getActivateString(user)}</PmMeButton>
  68                 </>
  69             )}
  70             {display === 'free-needs-upgrade' && (
  71                 <>
  72                     <SettingsParagraph className="mb-4" learnMoreUrl={getKnowledgeBaseUrl('/pm-me-addresses')}>
  73                         {c('Info')
  74                             .t`Upgrade to add a shorter @pm.me address to your account that is easier to share. It stands for “${MAIL_APP_NAME} me” or “Private Message me”.`}
  75                     </SettingsParagraph>
  76
  77                     <MailUpsellButton onClick={() => handleUpsellModalDisplay(true)} text={getActivateString(user)} />
  78                 </>
  79             )}
  80             {display === 'free-can-only-receive' && (
  81                 <>
  82                     <SettingsParagraph className="mb-4">
  83                         {c('Info')
  84                             .t`With your current plan, you can only receive messages with your @pm.me address. Upgrade to send messages and create additional addresses using @pm.me.`}
  85                     </SettingsParagraph>
  86
  87                     <MailUpsellButton onClick={handleUpgrade} text={c('Action').t`Send messages with @pm.me`} />
  88                 </>
  89             )}
  90
  91             {renderUpsellModal && (
  92                 <PmMeUpsellModal
  93                     modalProps={upsellModalProps}
  94                     upsellRefOptions={{
  95                         app: 'upsell_mail-',
  96                         component: 'modal-',
  97                         isSettings: true,
  98                     }}
  99                 />
 100             )}
 101         </SettingsSection>
 102     );
 103 };
 104
 105 export default PmMeSection;