packages/components/containers/credentialLeak/UnlockBreachReportCard.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
   5 import { useSubscriptionModal } from '@proton/components/containers/payments/subscription/SubscriptionModalProvider';
   6 import { SUBSCRIPTION_STEPS } from '@proton/components/containers/payments/subscription/constants';
   7 import sentinelBoltShield from '@proton/styles/assets/img/illustrations/sentinel-shield-bolt-breach-alert.svg';
   8
   9 import './UnlockReportModal.scss';
  10
  11 const UnlockBreachReportCard = () => {
  12     const [openSubscriptionModal] = useSubscriptionModal();
  13
  14     const metrics = {
  15         source: 'plans',
  16     } as const;
  17
  18     const handleUnlockBreachReport = () => {
  19         openSubscriptionModal({
  20             step: SUBSCRIPTION_STEPS.PLAN_SELECTION,
  21             metrics,
  22             mode: 'upsell-modal',
  23         });
  24     };
  25
  26     return (
  27         <div
  28             className="breach-upsell-modal absolute inset-x-center top-custom p-4 md:p-6 w-1/2 tooltips flex items-center justify-center overflow-hidden rounded-lg shadow-lifted "
  29             style={{ '--top-custom': '4.675rem' }}
  30         >
  31             <ModalContent>
  32                 <div className="text-center flex flex-col justify-center">
  33                     <div className="mb-4 rounded">
  34                         <img src={sentinelBoltShield} className="w-full block" alt="" />
  35                     </div>
  36                     <p className="color-weak mt-0 mb-4 px-4">
  37                         {c('Description')
  38                             .t`To view the full report including personalized recommendations, upgrade to a paid plan.`}
  39                     </p>
  40                     <Button
  41                         onClick={handleUnlockBreachReport}
  42                         size="large"
  43                         shape="solid"
  44                         color="norm"
  45                         fullWidth
  46                         data-testid="explore-other-plan"
  47                     >{c('Action').t`Unlock Breach Report`}</Button>
  48                 </div>
  49             </ModalContent>
  50         </div>
  51     );
  52 };
  53
  54 export default UnlockBreachReportCard;