packages/components/components/drawer/views/SecurityCenter/ProtonSentinel/modal/ProtonSentinelUpsellModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { ButtonLike, Href } from '@proton/atoms';
   4 import SettingsLink from '@proton/components/components/link/SettingsLink';
   5 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   6 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
   7 import ModalFooter from '@proton/components/components/modalTwo/ModalFooter';
   8 import ModalHeader from '@proton/components/components/modalTwo/ModalHeader';
   9 import type { ModalStateProps } from '@proton/components/components/modalTwo/useModalState';
  10 import { useUser } from '@proton/components/hooks';
  11 import {
  12     APP_UPSELL_REF_PATH,
  13     MAIL_UPSELL_PATHS,
  14     PROTON_SENTINEL_NAME,
  15     UPSELL_COMPONENT,
  16 } from '@proton/shared/lib/constants';
  17 import { addUpsellPath, getUpgradePath, getUpsellRef } from '@proton/shared/lib/helpers/upsell';
  18 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  19 import protonSentinelImage from '@proton/styles/assets/img/illustrations/upsell-proton-sentinel.svg';
  20
  21 interface Props {
  22     modalProps: ModalStateProps;
  23     upsellComponent?: UPSELL_COMPONENT;
  24 }
  25
  26 const ProtonSentinelUpsellModal = ({ modalProps, upsellComponent }: Props) => {
  27     const [user] = useUser();
  28
  29     return (
  30         <ModalTwo size="small" {...modalProps} data-testid="security-center:proton-sentinel:upsell-modal">
  31             <ModalHeader />
  32             <ModalContent>
  33                 <div className="text-center">
  34                     <div className="mb-4 rounded">
  35                         <img src={protonSentinelImage} className="w-full block" alt="" />
  36                     </div>
  37                     <h1 className="h3 text-bold mb-4">{c('Title').t`Get advanced protection`}</h1>
  38                     <p className="color-weak mt-0 mb-4 px-4">
  39                         {c('Description')
  40                             .t`Upgrade your account to activate ${PROTON_SENTINEL_NAME}, our cutting-edge AI-driven security solution with dedicated 24/7 expert support.`}
  41                     </p>
  42                     <p className="color-weak my-0 px-4 text-bold">
  43                         {c('Description').t`Designed for users seeking heightened protection for their accounts.`}
  44                     </p>
  45                     <ButtonLike
  46                         as={Href}
  47                         color="norm"
  48                         shape="underline"
  49                         fullWidth
  50                         href={getKnowledgeBaseUrl('/proton-sentinel')}
  51                     >
  52                         {c('Link').t`Learn more`}
  53                     </ButtonLike>
  54                 </div>
  55             </ModalContent>
  56             <ModalFooter>
  57                 <ButtonLike
  58                     as={SettingsLink}
  59                     path={addUpsellPath(
  60                         getUpgradePath({ user }),
  61                         getUpsellRef({
  62                             app: APP_UPSELL_REF_PATH.MAIL_UPSELL_REF_PATH,
  63                             component: upsellComponent ?? UPSELL_COMPONENT.MODAL,
  64                             feature: MAIL_UPSELL_PATHS.PROTON_SENTINEL,
  65                         })
  66                     )}
  67                     onClick={() => {
  68                         modalProps.onClose();
  69                     }}
  70                     size="large"
  71                     color="norm"
  72                     shape="solid"
  73                     fullWidth
  74                 >
  75                     {c('new_plans: Action').t`Upgrade now`}
  76                 </ButtonLike>
  77             </ModalFooter>
  78         </ModalTwo>
  79     );
  80 };
  81
  82 export default ProtonSentinelUpsellModal;