packages/components/containers/credentialLeak/BreachListUpgradeLink.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import { useSubscriptionModal } from '@proton/components/containers/payments/subscription/SubscriptionModalProvider';
   5 import { SUBSCRIPTION_STEPS } from '@proton/components/containers/payments/subscription/constants';
   6
   7 interface Props {
   8     total: number;
   9 }
  10
  11 const BreachListUpgradeLink = ({ total }: Props) => {
  12     const [openSubscriptionModal] = useSubscriptionModal();
  13     const metrics = {
  14         source: 'plans',
  15     } as const;
  16
  17     const handleUpgradeClick = () => {
  18         openSubscriptionModal({
  19             step: SUBSCRIPTION_STEPS.PLAN_SELECTION,
  20             metrics,
  21             mode: 'upsell-modal',
  22         });
  23     };
  24     const numOfBreaches = total - 1;
  25
  26     return (
  27         <div className="text-center color-weak">
  28             <span className="block text-md text-bold ">{c('Info').jt`Plus ${numOfBreaches} more`}</span>
  29             <Button
  30                 onClick={handleUpgradeClick}
  31                 size="small"
  32                 shape="underline"
  33                 color="norm"
  34                 data-testid="explore-other-plan"
  35             >{c('Action').t`Upgrade to view all`}</Button>
  36         </div>
  37     );
  38 };
  39
  40 export default BreachListUpgradeLink;