packages/components/containers/payments/ScribeAddon.tsx

   1 import type { ReactElement } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button, Href } from '@proton/atoms';
   6 import Icon from '@proton/components/components/icon/Icon';
   7 import {
   8     getScribeUpsellLearnMore,
   9     getScribeUpsellText,
  10 } from '@proton/components/containers/payments/subscription/assistant/helpers';
  11 import { BRAND_NAME } from '@proton/shared/lib/constants';
  12 import type { Plan } from '@proton/shared/lib/interfaces';
  13 import { Audience } from '@proton/shared/lib/interfaces';
  14
  15 import { AccountSizeCustomiser } from './planCustomizer/AccountSizeCustomiser';
  16
  17 const ScribeB2BBanner = ({ onClick, price }: { onClick: () => void; price: ReactElement }) => (
  18     <div
  19         className="border p-4 flex flex-column lg:flex-row gap-2 flex-nowrap items-start lg:items-center rounded-lg"
  20         style={{ background: 'linear-gradient(85deg, rgb(112 76 255 / 0.15) 0%, rgb(70 26 255 / 0.04) 100%)' }}
  21     >
  22         <div className="w-full">
  23             <p className="m-0 mb-1 text-lg">
  24                 {/* {translator: Full sentence: Add writing assistant for ${price} per user per month } */}
  25                 <strong className="block lg:inline">{c('mail_signup_2024: Info')
  26                     .t`Add ${BRAND_NAME} Scribe writing assistant`}</strong>{' '}
  27                 {c('mail_signup_2024: Info').jt`for ${price}`}
  28             </p>
  29             <p className="m-0 text-sm color-weak">
  30                 {getScribeUpsellText()}{' '}
  31                 <Href href={getScribeUpsellLearnMore()} className="inline-block color-weak text-normal">
  32                     {c('Link').t`Learn more`}
  33                 </Href>
  34             </p>
  35         </div>
  36         <Button color="norm" shape="outline" className="shrink-0 flex items-center gap-1" pill onClick={onClick}>
  37             <Icon name="plus" className="shrink-0" />
  38             <span>{c('Action').t`Add`}</span>
  39         </Button>
  40     </div>
  41 );
  42
  43 interface Props {
  44     addon: Plan;
  45     maxUsers: number;
  46     price: ReactElement;
  47     input: ReactElement;
  48     showDescription?: boolean;
  49     showTooltip?: boolean;
  50     audience?: Audience;
  51     showScribeBanner?: boolean;
  52     onShowScribeBanner: () => void;
  53     value: number;
  54 }
  55
  56 const ScribeAddon = ({
  57     addon,
  58     input,
  59     value,
  60     price,
  61     maxUsers,
  62     showDescription,
  63     showTooltip,
  64     audience,
  65     showScribeBanner,
  66     onShowScribeBanner,
  67 }: Props) => {
  68     if (audience === Audience.B2B && showScribeBanner) {
  69         return <ScribeB2BBanner price={price} onClick={onShowScribeBanner} />;
  70     }
  71
  72     return (
  73         <AccountSizeCustomiser
  74             key={`${addon.Name}-size`}
  75             addon={addon}
  76             price={price}
  77             input={input}
  78             value={value}
  79             maxUsers={maxUsers}
  80             showDescription={showDescription}
  81             showTooltip={showTooltip}
  82             mode="gpt-seats"
  83         />
  84     );
  85 };
  86
  87 export default ScribeAddon;