packages/components/containers/onboarding/OnboardingSetupOrganization.tsx

   1 import { c } from 'ttag';
   2
   3 import { useOrganization } from '@proton/account/organization/hooks';
   4 import { Button } from '@proton/atoms';
   5 import useSettingsLink from '@proton/components/components/link/useSettingsLink';
   6 import { isMobile } from '@proton/shared/lib/helpers/browser';
   7 import { getOrganizationDenomination } from '@proton/shared/lib/organization/helper';
   8 import onboardingFamilyPlan from '@proton/styles/assets/img/onboarding/familyPlan.svg';
   9 import onboardingOrganization from '@proton/styles/assets/img/onboarding/organization.svg';
  10 import clsx from '@proton/utils/clsx';
  11
  12 import OnboardingContent from './OnboardingContent';
  13 import OnboardingStep from './OnboardingStep';
  14 import type { OnboardingStepRenderCallback } from './interface';
  15
  16 interface Props extends OnboardingStepRenderCallback {}
  17
  18 const OnboardingSetupOrganization = (props: Props) => {
  19     const [organization] = useOrganization();
  20     const hasFamilyOrg = getOrganizationDenomination(organization) === 'familyGroup';
  21     const goToSettings = useSettingsLink();
  22
  23     const title = hasFamilyOrg
  24         ? c('familyOffer_2023:Onboarding Proton').t`Set up your family account`
  25         : c('Onboarding Proton').t`Set up your organization`;
  26
  27     const description = hasFamilyOrg
  28         ? c('familyOffer_2023:Onboarding Proton').t`Configure your family account and invite users`
  29         : c('Onboarding Proton')
  30               .t`Configure your organization, link your domain name, and create accounts to ensure all members of your organization are protected.`;
  31
  32     const imgAlt = hasFamilyOrg
  33         ? c('familyOffer_2023:Onboarding Proton').t`Set up your family`
  34         : c('Onboarding Proton').t`Set up your organization`;
  35
  36     const img = hasFamilyOrg ? onboardingFamilyPlan : onboardingOrganization;
  37
  38     return (
  39         <OnboardingStep>
  40             <OnboardingContent title={title} description={description} {...props}>
  41                 <div className={clsx('text-center', isMobile() ? 'pt-4' : 'pt-12')}>
  42                     <img
  43                         src={img}
  44                         alt={imgAlt}
  45                         className="w-full mb-2 max-w-custon"
  46                         style={{
  47                             '--max-w-custon': isMobile() ? '15em' : '20em',
  48                         }}
  49                     />
  50                     <Button
  51                         size="large"
  52                         color="norm"
  53                         fullWidth
  54                         onClick={() => {
  55                             goToSettings('/multi-user-support', undefined, true);
  56                             props.onNext();
  57                         }}
  58                     >
  59                         {c('Action').t`Start setup`}
  60                     </Button>
  61                 </div>
  62             </OnboardingContent>
  63             <footer>
  64                 <footer className="flex flex-nowrap">
  65                     <Button size="large" fullWidth onClick={props.onNext}>
  66                         {c('Action').t`Skip`}
  67                     </Button>
  68                 </footer>
  69             </footer>
  70         </OnboardingStep>
  71     );
  72 };
  73
  74 export default OnboardingSetupOrganization;