packages/components/containers/payments/Cash.tsx

   1 import { c } from 'ttag';
   2
   3 import useConfig from '@proton/components/hooks/useConfig';
   4 import { APPS } from '@proton/shared/lib/constants';
   5 import envelopSvg from '@proton/styles/assets/img/illustrations/welcome-pane.svg';
   6
   7 import Bordered from '../../components/container/Bordered';
   8
   9 const Cash = () => {
  10     const { APP_NAME } = useConfig();
  11     const email = (
  12         <b key="email-contact">
  13             {APP_NAME === APPS.PROTONVPN_SETTINGS ? 'contact@protonvpn.com' : 'contact@proton.me'}
  14         </b>
  15     );
  16
  17     return (
  18         <Bordered className="bg-weak rounded">
  19             <div className="mb-4">{c('Info for cash payment method')
  20                 .jt`Please contact us at ${email} for instructions on how to pay us with cash.`}</div>
  21             <div className="text-center">
  22                 <img src={envelopSvg} alt="" />
  23             </div>
  24         </Bordered>
  25     );
  26 };
  27
  28 export default Cash;