packages/components/containers/onboarding/useGenericSteps.tsx

   1 import React from 'react';
   2
   3 import { useOrganization } from '@proton/account/organization/hooks';
   4 import { useSubscription } from '@proton/account/subscription/hooks';
   5 import { useUser } from '@proton/account/user/hooks';
   6 import useConfig from '@proton/components/hooks/useConfig';
   7 import { isElectronOnSupportedApps } from '@proton/shared/lib/helpers/desktop';
   8 import { hasVisionary } from '@proton/shared/lib/helpers/subscription';
   9
  10 import OnboardingDiscoverApps from './OnboardingDiscoverApps';
  11 import type OnboardingModal from './OnboardingModal';
  12 import OnboardingSetupOrganization from './OnboardingSetupOrganization';
  13 import OnboardingThemes from './OnboardingThemes';
  14 import type { OnboardingStepRenderCallback } from './interface';
  15
  16 type OnboardingModalProps = React.ComponentProps<typeof OnboardingModal>;
  17
  18 interface UseGenericStepsProps
  19     extends OnboardingStepRenderCallback,
  20         Pick<OnboardingModalProps, 'hideDiscoverApps' | 'hideOrganizationSetup' | 'genericSteps'> {}
  21
  22 const useGenericSteps = ({
  23     onNext,
  24     onBack,
  25     hideDiscoverApps,
  26     hideOrganizationSetup,
  27     genericSteps,
  28 }: UseGenericStepsProps): (React.JSX.Element | null)[] => {
  29     const { APP_NAME } = useConfig();
  30     const [user] = useUser();
  31     const [organization, loadingOrganization] = useOrganization();
  32     const [subscription, loadingSubscription] = useSubscription();
  33     const canSetupOrganization =
  34         !loadingOrganization &&
  35         !loadingSubscription &&
  36         user.isAdmin &&
  37         (organization?.MaxMembers || 0) > 1 &&
  38         organization?.UsedMembers === 1 &&
  39         !organization?.HasKeys &&
  40         !hasVisionary(subscription);
  41
  42     const setupOrganizationStep = () => {
  43         if (!canSetupOrganization || hideOrganizationSetup) {
  44             return null;
  45         }
  46         const Component = genericSteps?.organizationStep || OnboardingSetupOrganization;
  47         return <Component onNext={onNext} onBack={onBack} />;
  48     };
  49
  50     const setupThemeStep = () => {
  51         if (isElectronOnSupportedApps(APP_NAME)) {
  52             return null;
  53         }
  54         const Component = genericSteps?.setupThemeStep || OnboardingThemes;
  55         return <Component onNext={onNext} onBack={onBack} />;
  56     };
  57
  58     const setupDiscoverAppsStep = () => {
  59         if (hideDiscoverApps) {
  60             return null;
  61         }
  62         const Component = genericSteps?.discoverAppsStep || OnboardingDiscoverApps;
  63
  64         return <Component onNext={onNext} onBack={onBack} />;
  65     };
  66
  67     return [setupThemeStep(), setupOrganizationStep(), setupDiscoverAppsStep()];
  68 };
  69
  70 export default useGenericSteps;