packages/components/containers/organization/OrganizationScheduleCallSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { useGetScheduleCall } from '@proton/account/scheduleCall/hooks';
   4 import { useUser } from '@proton/account/user/hooks';
   5 import { Button, Href } from '@proton/atoms';
   6 import SettingsSection from '@proton/components/containers/account/SettingsSection';
   7 import useLoading from '@proton/hooks/useLoading';
   8 import { openCalendlyLink } from '@proton/shared/lib/helpers/support';
   9 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  10 import illustration from '@proton/styles/assets/img/illustrations/account-support-phone.svg';
  11
  12 interface Props {
  13     onOpenChat?: () => void;
  14 }
  15
  16 const OrganizationScheduleCallSection = ({ onOpenChat }: Props) => {
  17     const [user] = useUser();
  18     const [generatingCalendlyLink, withGeneratingCalendlyLink] = useLoading();
  19     const getScheduleCall = useGetScheduleCall();
  20
  21     const handleScheduleCallClick = async () => {
  22         const { CalendlyLink } = await getScheduleCall();
  23
  24         openCalendlyLink(CalendlyLink, user);
  25     };
  26
  27     const boldPhoneCall = (
  28         <b key="bold-phone-call">{
  29             // translator: Full sentence is 'Request a phone call or Zoom meeting with one of our support specialists, ...'
  30             c('Info').t`Request a phone call`
  31         }</b>
  32     );
  33
  34     const boldZoomMeeting = (
  35         <b key="bold-zoom-meeting">{
  36             // translator: Full sentence is 'Request a phone call or Zoom meeting with one of our support specialists, ...'
  37             c('Info').t`Zoom meeting`
  38         }</b>
  39     );
  40
  41     const boldLiveChat = (
  42         <b key="bold-live-chat">{
  43             // translator: Request a phone call or Zoom meeting with one of our support specialists, or open a Live chat for chat support.'
  44             c('Info').t`Live chat`
  45         }</b>
  46     );
  47
  48     return (
  49         <SettingsSection className="border rounded-lg p-4 lg:p-6 flex flex-column lg:flex-row items-center lg:items-start flex-nowrap text-center lg:text-left gap-4">
  50             <img src={illustration} alt="" className="w-custom shrink-0" style={{ '--w-custom': '3rem' }} />
  51             <div>
  52                 <h2 className="text-lg text-bold mb-4">{c('Headline').t`Contact us`}</h2>
  53                 <p className="mb-5">
  54                     {onOpenChat
  55                         ? // translator: Full sentence is 'If you’re having trouble, we’re here to help. Request a phone call or Zoom meeting with one of our support specialists, or open a Live chat for chat support.'
  56                           c('Info')
  57                               .jt`If you’re having trouble, we’re here to help. ${boldPhoneCall} or ${boldZoomMeeting} with one of our support specialists, or open a ${boldLiveChat} for chat support.`
  58                         : // translator: Full sentence is 'If you’re having trouble, we’re here to help. Request a phone call or Zoom meeting with one of our support specialists.'
  59                           c('Info')
  60                               .jt`If you’re having trouble, we’re here to help. ${boldPhoneCall} or ${boldZoomMeeting} with one of our support specialists.`}{' '}
  61                     <Href className="inline-block" href={getKnowledgeBaseUrl('/request-b2b-phone-support')}>
  62                         {c('Link').t`Learn more`}
  63                     </Href>
  64                 </p>
  65                 <div className="flex gap-4 justify-center lg:justify-start">
  66                     <Button
  67                         onClick={() => withGeneratingCalendlyLink(handleScheduleCallClick)}
  68                         color="norm"
  69                         shape="outline"
  70                         loading={generatingCalendlyLink}
  71                     >
  72                         {c('Action').t`Request a call`}
  73                     </Button>
  74                     {onOpenChat && (
  75                         <Button color="norm" shape="outline" onClick={onOpenChat}>
  76                             {c('Action').t`Start live chat`}
  77                         </Button>
  78                     )}
  79                 </div>
  80             </div>
  81         </SettingsSection>
  82     );
  83 };
  84
  85 export default OrganizationScheduleCallSection;