packages/components/containers/support/FreeUserLiveChatModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button, ButtonLike } from '@proton/atoms';
   4 import Icon from '@proton/components/components/icon/Icon';
   5 import SettingsLink from '@proton/components/components/link/SettingsLink';
   6 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   7 import Modal from '@proton/components/components/modalTwo/Modal';
   8 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
   9 import ModalHeader from '@proton/components/components/modalTwo/ModalHeader';
  10 import useModalState from '@proton/components/components/modalTwo/useModalState';
  11 import { PLANS, PLAN_NAMES } from '@proton/shared/lib/constants';
  12
  13 import AuthenticatedBugModal from '../support/AuthenticatedBugModal';
  14
  15 export interface Props {
  16     onClose: ModalProps['onClose'];
  17     onExit: ModalProps['onExit'];
  18     open: ModalProps['open'];
  19 }
  20
  21 const FreeUserLiveChatModal = ({ open, onExit, onClose }: Props) => {
  22     const handleClose = onClose;
  23     const [bugReportModal, setBugReportModal, render] = useModalState();
  24
  25     const handleBugReportClick = () => {
  26         setBugReportModal(true);
  27     };
  28
  29     const onCloseChildModal = () => {
  30         bugReportModal.onClose();
  31         handleClose?.();
  32     };
  33
  34     const planName = PLAN_NAMES[PLANS.VPN];
  35
  36     return (
  37         <>
  38             {render && <AuthenticatedBugModal {...bugReportModal} onClose={onCloseChildModal} />}
  39             <Modal open={open} onExit={onExit} onClose={handleClose} size="small">
  40                 <ModalHeader />
  41                 <ModalContent className="flex flex-column items-center mb-8">
  42                     <div className="flex flex-row justify-center items-center p-4 rounded-full bg-weak">
  43                         <Icon name="speech-bubble" size={5} className="color-primary" />
  44                     </div>
  45                     <h3 className="text-3xl color-primary text-center mt-4 mb-1">
  46                         {c('Live Chat Modal').t`Live chat is available with ${planName}`}
  47                     </h3>
  48                     <p className="text-center text-lg color-weak">
  49                         {c('Live Chat Modal')
  50                             .t`Upgrade to unlock chat support and other premium features, or use our free support form to report your issue.`}
  51                     </p>
  52                     <ButtonLike
  53                         as={SettingsLink}
  54                         className="text-bold mt-8"
  55                         size="small"
  56                         pill
  57                         color="norm"
  58                         path={`/dashboard?plan=${PLANS.VPN2024}&cycle=1`}
  59                         onClick={handleClose}
  60                     >
  61                         {c('Live Chat Modal').t`Upgrade subscription`}
  62                     </ButtonLike>
  63                     <Button
  64                         shape="ghost"
  65                         pill
  66                         size="small"
  67                         className="color-primary mt-4 text-bold"
  68                         onClick={handleBugReportClick}
  69                     >{c('Live Chat Modal').t`Open support form`}</Button>
  70                 </ModalContent>
  71             </Modal>
  72         </>
  73     );
  74 };
  75
  76 export default FreeUserLiveChatModal;