packages/components/containers/desktop/freeTrial/InboxDesktopFreeTrialOnboardingModal.tsx

   1 import { useEffect } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useUser } from '@proton/account/user/hooks';
   6 import { Button } from '@proton/atoms';
   7 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   8 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
   9 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
  10 import useModalState from '@proton/components/components/modalTwo/useModalState';
  11 import { APP_UPSELL_REF_PATH, MAIL_APP_NAME, MAIL_UPSELL_PATHS, UPSELL_COMPONENT } from '@proton/shared/lib/constants';
  12 import { getUpsellRef } from '@proton/shared/lib/helpers/upsell';
  13 import protonDesktop from '@proton/styles/assets/img/illustrations/proton-desktop.svg';
  14
  15 import { freeTrialUpgradeClick } from '../openExternalLink';
  16 import useInboxFreeTrial from './useInboxFreeTrial';
  17
  18 export const InboxDesktopFreeTrialOnboardingModal = () => {
  19     const { firstLogin, startFreeTrial } = useInboxFreeTrial();
  20     const [user] = useUser();
  21     const [modalState, setModalState, render] = useModalState();
  22
  23     const upsellRef = getUpsellRef({
  24         app: APP_UPSELL_REF_PATH.INBOX_DESKTOP_REF_PATH,
  25         component: UPSELL_COMPONENT.MODAL,
  26         feature: MAIL_UPSELL_PATHS.TRIAL_WELCOME,
  27     });
  28
  29     useEffect(() => {
  30         if (firstLogin) {
  31             setModalState(true);
  32         }
  33     }, [firstLogin]);
  34
  35     if (user.hasPaidMail) {
  36         return null;
  37     }
  38
  39     const handleClose = () => {
  40         setModalState(false);
  41         startFreeTrial();
  42     };
  43
  44     return (
  45         <>
  46             {render && (
  47                 <ModalTwo size="small" {...modalState} onClose={startFreeTrial}>
  48                     <ModalTwoContent className="text-center mt-8 mb-4 flex gap-6 flex-column">
  49                         <img src={protonDesktop} alt={c('Free trial desktop').t`${MAIL_APP_NAME} desktop app`} />
  50                         <div>
  51                             <h1 className="text-bold mb-2 text-2xl">{c('Free trial desktop')
  52                                 .t`Try the new desktop app`}</h1>
  53                             <p className="my-0">{c('Free trial desktop')
  54                                 .t`Enjoy fast, secure, and distraction-free access to your inbox and calendar.`}</p>
  55                         </div>
  56                         <div>
  57                             <Button color="norm" size="large" onClick={handleClose} fullWidth>{c('Free trial desktop')
  58                                 .t`Start free trial`}</Button>
  59                             <div className="text-center flex flex-column color-weak text-sm gap-0.5 mt-4">
  60                                 <p className="m-0">{c('Free trial desktop').t`14-day desktop app trial.`}</p>
  61                                 <p className="m-0">{c('Free trial desktop').t`No credit card required.`}</p>
  62                             </div>
  63                         </div>
  64                     </ModalTwoContent>
  65                     <ModalTwoFooter className="flex text-sm text-center mb-8 flex-column mt-0">
  66                         <hr className="mb-4" />
  67                         <p className="m-0 color-weak">{c('Free trial desktop')
  68                             .t`Get unlimited access with any ${MAIL_APP_NAME} plan.`}</p>
  69                         <Button
  70                             color="norm"
  71                             shape="underline"
  72                             className="m-0 p-0 text-semibold"
  73                             onClick={() => freeTrialUpgradeClick(upsellRef)}
  74                         >{c('Free trial desktop').t`Upgrade now`}</Button>
  75                     </ModalTwoFooter>
  76                 </ModalTwo>
  77             )}
  78         </>
  79     );
  80 };