packages/components/containers/organization/OrganizationSectionUpsell.tsx

   1 import { c } from 'ttag';
   2
   3 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
   4 import SettingsSectionWide from '@proton/components/containers/account/SettingsSectionWide';
   5 import UpgradeBanner from '@proton/components/containers/account/UpgradeBanner';
   6 import useConfig from '@proton/components/hooks/useConfig';
   7 import type { APP_NAMES } from '@proton/shared/lib/constants';
   8 import { BRAND_NAME, SHARED_UPSELL_PATHS, UPSELL_COMPONENT } from '@proton/shared/lib/constants';
   9 import { getUpsellRefFromApp } from '@proton/shared/lib/helpers/upsell';
  10 import type { Organization } from '@proton/shared/lib/interfaces';
  11 import { Audience } from '@proton/shared/lib/interfaces';
  12
  13 interface Props {
  14     app: APP_NAMES;
  15     organization?: Organization;
  16 }
  17
  18 const OrganizationSectionUpsell = ({ app }: Props) => {
  19     const { APP_NAME } = useConfig();
  20
  21     return (
  22         <SettingsSectionWide>
  23             <SettingsParagraph>
  24                 {c('new_plans: info')
  25                     .t`${BRAND_NAME} lets you create email addresses and manage accounts for sub-users. Ideal for families and organizations.`}
  26             </SettingsParagraph>
  27
  28             <UpgradeBanner
  29                 audience={Audience.B2B}
  30                 upsellPath={getUpsellRefFromApp({
  31                     app: APP_NAME,
  32                     feature: SHARED_UPSELL_PATHS.MULTI_USER,
  33                     component: UPSELL_COMPONENT.BANNER,
  34                     fromApp: app,
  35                 })}
  36             >{c('new_plans: upgrade').t`Included with multiple users ${BRAND_NAME} for Business plans.`}</UpgradeBanner>
  37         </SettingsSectionWide>
  38     );
  39 };
  40
  41 export default OrganizationSectionUpsell;