applications/calendar/src/app/components/onboarding/CalendarOnboardingModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { OnboardingStepRenderCallback } from '@proton/components';
   5 import { OnboardingContent, OnboardingModal, OnboardingStep } from '@proton/components';
   6 import { getWelcomeToText } from '@proton/shared/lib/apps/text';
   7 import { CALENDAR_APP_NAME } from '@proton/shared/lib/constants';
   8 import onboardingWelcome from '@proton/styles/assets/img/onboarding/calendar-welcome.svg';
   9
  10 interface Props {
  11     showGenericSteps?: boolean;
  12     onDone?: () => void;
  13     open?: boolean;
  14 }
  15
  16 const CalendarOnboardingModal = (props: Props) => {
  17     const appName = CALENDAR_APP_NAME;
  18
  19     return (
  20         <OnboardingModal {...props}>
  21             {[
  22                 ({ onNext, displayGenericSteps }: OnboardingStepRenderCallback) => {
  23                     return (
  24                         <OnboardingStep>
  25                             <OnboardingContent
  26                                 title={getWelcomeToText(appName)}
  27                                 description={c('Onboarding').t`Where you can take control of your time and your data.`}
  28                                 img={<img src={onboardingWelcome} alt={appName} />}
  29                             />
  30                             <footer className="flex flex-nowrap">
  31                                 <Button size="large" color="norm" fullWidth onClick={onNext}>
  32                                     {displayGenericSteps
  33                                         ? c('Onboarding Action').t`Next`
  34                                         : c('Onboarding Action').t`Start using ${appName}`}
  35                                 </Button>
  36                             </footer>
  37                         </OnboardingStep>
  38                     );
  39                 },
  40             ]}
  41         </OnboardingModal>
  42     );
  43 };
  44
  45 export default CalendarOnboardingModal;