packages/components/containers/addresses/PMSignatureField.tsx

   1 import { c } from 'ttag';
   2
   3 import { useUser } from '@proton/account/user/hooks';
   4 import { NewUpsellModal, useUpsellConfig } from '@proton/components';
   5 import useModalState from '@proton/components/components/modalTwo/useModalState';
   6 import Toggle from '@proton/components/components/toggle/Toggle';
   7 import UpsellModal from '@proton/components/components/upsell/modal/UpsellModal';
   8 import useOneDollarConfig from '@proton/components/components/upsell/useOneDollarPromo';
   9 import useApi from '@proton/components/hooks/useApi';
  10 import useEventManager from '@proton/components/hooks/useEventManager';
  11 import useNotifications from '@proton/components/hooks/useNotifications';
  12 import useToggle from '@proton/components/hooks/useToggle';
  13 import { useLoading } from '@proton/hooks';
  14 import { updatePMSignature } from '@proton/shared/lib/api/mailSettings';
  15 import { APP_UPSELL_REF_PATH, MAIL_APP_NAME, MAIL_UPSELL_PATHS, UPSELL_COMPONENT } from '@proton/shared/lib/constants';
  16 import { getUpsellRef, useNewUpsellModalVariant } from '@proton/shared/lib/helpers/upsell';
  17 import type { MailSettings, UserSettings } from '@proton/shared/lib/interfaces';
  18 import { getProtonMailSignature } from '@proton/shared/lib/mail/signature';
  19 import signatureImg from '@proton/styles/assets/img/illustrations/new-upsells-img/tools.svg';
  20
  21 interface Props {
  22     id: string;
  23     mailSettings?: Partial<MailSettings>;
  24     userSettings?: Partial<UserSettings>;
  25 }
  26
  27 const PMSignature = ({ id, mailSettings = {}, userSettings = {} }: Props) => {
  28     const { call } = useEventManager();
  29     const { createNotification } = useNotifications();
  30     const api = useApi();
  31     const [loading, withLoading] = useLoading();
  32     const { state, toggle } = useToggle(!!mailSettings.PMSignature);
  33     const [user] = useUser();
  34
  35     const hasPaidMail = user.hasPaidMail;
  36
  37     const upsellRef = getUpsellRef({
  38         app: APP_UPSELL_REF_PATH.MAIL_UPSELL_REF_PATH,
  39         component: UPSELL_COMPONENT.MODAL,
  40         feature: MAIL_UPSELL_PATHS.MAIL_FOOTER,
  41         isSettings: true,
  42     });
  43
  44     const [upsellModalProps, handleUpsellModalDisplay, renderUpsellModal] = useModalState();
  45
  46     const handleChange = async (checked: number) => {
  47         await api(updatePMSignature(checked));
  48         await call();
  49         toggle();
  50         createNotification({ text: c('Success').t`Preference saved` });
  51     };
  52
  53     const oneDollarConfig = useOneDollarConfig();
  54     const upsellConfig = useUpsellConfig({ upsellRef, ...oneDollarConfig });
  55
  56     const displayNewUpsellModalsVariant = useNewUpsellModalVariant();
  57
  58     const modal = displayNewUpsellModalsVariant ? (
  59         <NewUpsellModal
  60             titleModal={c('Title').t`Personalize your email footer`}
  61             description={c('Description').t`Make your email footer your own — showcase your unique brand, not ours.`}
  62             modalProps={upsellModalProps}
  63             illustration={signatureImg}
  64             sourceEvent="BUTTON_MAIL_FOOTER"
  65             {...upsellConfig}
  66         />
  67     ) : (
  68         <UpsellModal
  69             title={c('Title').t`Personalise your e-mail footer`}
  70             description={c('Description')
  71                 .t`To remove the ${MAIL_APP_NAME} footer, upgrade and unlock even more premium features.`}
  72             modalProps={upsellModalProps}
  73             sourceEvent="BUTTON_MAIL_FOOTER"
  74             features={[
  75                 'unlimited-folders-and-labels',
  76                 'search-message-content',
  77                 'more-storage',
  78                 'more-email-addresses',
  79                 'custom-email-domains',
  80             ]}
  81             {...upsellConfig}
  82         />
  83     );
  84
  85     return (
  86         <div className="flex flex-1">
  87             <div
  88                 className="border-container flex-1 pr-4 py-2 mb-4"
  89                 // eslint-disable-next-line react/no-danger
  90                 dangerouslySetInnerHTML={{
  91                     __html: getProtonMailSignature({
  92                         isReferralProgramLinkEnabled: !!mailSettings.PMSignatureReferralLink,
  93                         referralProgramUserLink: userSettings.Referral?.Link,
  94                     }),
  95                 }}
  96             />
  97             <div className="ml-0 md:ml-2 pt-2" data-testid="settings:identity-section:signature-toggle">
  98                 <Toggle
  99                     loading={loading}
 100                     id={id}
 101                     checked={state}
 102                     onChange={({ target }) => {
 103                         if (hasPaidMail) {
 104                             withLoading(handleChange(+target.checked));
 105                         } else {
 106                             handleUpsellModalDisplay(true);
 107                         }
 108                     }}
 109                 />
 110             </div>
 111
 112             {renderUpsellModal && modal}
 113         </div>
 114     );
 115 };
 116
 117 export default PMSignature;