packages/pass/components/Upsell/UpsellFloatingModal.tsx

   1 import { type FC, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { ModalTwoHeader } from '@proton/components';
   7 import PassLogo from '@proton/components/components/logo/PassLogo';
   8 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
   9 import { PASS_BLOG_TRIAL_URL } from '@proton/pass/constants';
  10 import { PASS_APP_NAME } from '@proton/shared/lib/constants';
  11 import clsx from '@proton/utils/clsx';
  12
  13 import './UpsellFloatingModal.scss';
  14
  15 type UpsellFloatingModalProps = {
  16     className?: string;
  17     title: string;
  18     subtitle?: string;
  19     badgeText?: string;
  20 };
  21
  22 export const UpsellFloatingModal: FC<UpsellFloatingModalProps> = ({ className, title, subtitle, badgeText }) => {
  23     const { onLink } = usePassCore();
  24     const [showModal, setShowModal] = useState(true);
  25
  26     return (
  27         <div
  28             className={clsx(
  29                 'fixed bottom-custom right-custom rounded-xl overflow-hidden',
  30                 showModal ? className : 'hidden'
  31             )}
  32             style={{ '--bottom-custom': '2rem', '--right-custom': '2rem' }}
  33         >
  34             <div className="w-custom" style={{ '--w-custom': '20rem' }}>
  35                 <header className="pass-upsell-floating-modal--header p-10">
  36                     <ModalTwoHeader
  37                         closeButtonProps={{ pill: true, icon: true }}
  38                         className="absolute top-custom right-custom"
  39                         style={{ '--top-custom': '1rem', '--right-custom': '1rem' }}
  40                         onClick={() => setShowModal(false)}
  41                     />
  42                     <PassLogo
  43                         width={300}
  44                         height={80}
  45                         style={{ '--logo-text-product-color': 'white', '--logo-text-proton-color': 'white' }}
  46                     />
  47                 </header>
  48                 <div className="pass-upsell-floating-modal--content text-left flex flex-column items-start gap-2 p-4 color-invert">
  49                     {badgeText && (
  50                         <span className="pass-upsell-floating-modal--label rounded-lg text-bold text-sm py-1 px-4">
  51                             {badgeText}
  52                         </span>
  53                     )}
  54
  55                     <h1 className="text-lg text-bold">{title}</h1>
  56                     {subtitle && <span className="text-sm">{subtitle}</span>}
  57
  58                     <Button
  59                         className="pass-upsell-floating-modal--button w-full mt-2"
  60                         color="norm"
  61                         size="large"
  62                         shape="solid"
  63                         onClick={() => onLink(PASS_BLOG_TRIAL_URL)}
  64                     >
  65                         {c('Action').t`Get ${PASS_APP_NAME}`}
  66                     </Button>
  67                 </div>
  68             </div>
  69         </div>
  70     );
  71 };