packages/pass/components/Upsell/UpsellingModal.tsx

   1 import type { FC, ReactNode } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import monitorSVG from '@proton/pass/assets/monitor/upgrade.svg';
   6 import onboardingSVG from '@proton/pass/assets/onboarding.svg';
   7 import { UpgradeButton } from '@proton/pass/components/Layout/Button/UpgradeButton';
   8 import { type AdapativeModalProps, AdaptiveModal } from '@proton/pass/components/Layout/Modal/AdaptiveModal';
   9 import { type UpsellRef } from '@proton/pass/constants';
  10
  11 import { FreeTrialActions } from './FreeTrialActions';
  12 import { UpsellFeatures } from './UpsellFeatures';
  13
  14 type UpsellModalContent = {
  15     description?: string;
  16     title: string;
  17     upgradeLabel: string;
  18     image: string;
  19 };
  20
  21 export type UpsellType = 'free-trial' | 'pass-plus' | 'early-access' | 'pass-monitor' | 'pass-monitor-business';
  22
  23 export type Props = Omit<AdapativeModalProps, 'actions'> & {
  24     extraActions?: (props: AdapativeModalProps) => ReactNode[];
  25     features?: ReactNode;
  26     upgradePath?: string;
  27     upsellRef: UpsellRef;
  28     upsellType: UpsellType;
  29 };
  30
  31 const getContent = (type: UpsellType): UpsellModalContent =>
  32     ({
  33         'free-trial': {
  34             title: c('Title').t`Your welcome gift`,
  35             description: undefined,
  36             upgradeLabel: c('Action').t`Upgrade now`,
  37             image: onboardingSVG,
  38         },
  39         'pass-plus': {
  40             title: 'Pass Plus',
  41             description: c('Info')
  42                 .t`Get unlimited aliases, enjoy exclusive features, and support us by subscribing to Pass Plus.`,
  43             upgradeLabel: c('Action').t`Upgrade`,
  44             image: onboardingSVG,
  45         },
  46         'early-access': {
  47             title: c('Info').t`Upgrade Now to Unlock Premium Features`,
  48             description: undefined,
  49             upgradeLabel: c('Action').t`Upgrade now`,
  50             image: onboardingSVG,
  51         },
  52         'pass-monitor': {
  53             title: c('Title').t`Stay safer online`,
  54             description: c('Description')
  55                 .t`Dark Web Monitoring is available with a paid plan. Upgrade for immediate access.`,
  56             upgradeLabel: c('Action').t`Get Pass Plus`,
  57             image: monitorSVG,
  58         },
  59         'pass-monitor-business': {
  60             title: c('Title').t`Stay safer online`,
  61             description: c('Description')
  62                 .t`Unlock advanced security features and detailed logs to safeguard your online presence.`,
  63             upgradeLabel: c('Action').t`Get Pass Business`,
  64             image: monitorSVG,
  65         },
  66     })[type];
  67
  68 export const UpsellingModal: FC<Props> = ({
  69     extraActions,
  70     features,
  71     size = 'medium',
  72     type,
  73     upgradePath,
  74     upsellRef,
  75     upsellType,
  76     ...props
  77 }) => {
  78     const { title, description, upgradeLabel, image } = getContent(upsellType);
  79
  80     return (
  81         <AdaptiveModal
  82             {...props}
  83             type={type}
  84             size={size}
  85             actions={[
  86                 <UpgradeButton
  87                     key="upgrade-button"
  88                     label={upgradeLabel}
  89                     onClick={props.onClose}
  90                     path={upgradePath}
  91                     upsellRef={upsellRef}
  92                 />,
  93                 ...(extraActions?.(props) ?? []),
  94             ]}
  95         >
  96             <div className="flex flex-column items-center w-full gap-4 m-auto">
  97                 <img src={image} className="w-3/5 " alt="user onboarding graphic" />
  98                 <h4 className="text-bold">{title}</h4>
  99                 {description && <p className="m-2 text-md">{description}</p>}
 100                 {features ?? <UpsellFeatures upsellType={upsellType} />}
 101                 {upsellType === 'free-trial' && <FreeTrialActions />}
 102             </div>
 103         </AdaptiveModal>
 104     );
 105 };