applications/drive/src/app/components/modals/DriveOnboardingV2Modal/steps/PendingInvitationStep.tsx

   1 import { Fragment } from 'react';
   2
   3 import type { IconName } from 'packages/icons';
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms/index';
   7 import { Icon } from '@proton/components/index';
   8
   9 import { Container } from '../Container';
  10 import type { OnboardingProps } from '../interface';
  11
  12 import './PendingInvitationStep.scss';
  13
  14 export const PendingInvitationStep = () => {
  15     const steps: { icon: IconName; text: string; isDone: boolean }[] = [
  16         {
  17             icon: 'envelope',
  18             text: c('Onboarding Info').t`Invitation received`,
  19             isDone: true,
  20         },
  21         {
  22             icon: 'envelope-open',
  23             text: c('Onboarding Info').t`Invitation accepted`,
  24             isDone: true,
  25         },
  26         {
  27             icon: 'key',
  28             text: c('Onboarding Info').t`Final approval pending`,
  29             isDone: false,
  30         },
  31     ];
  32
  33     return (
  34         <Container
  35             title={c('Onboarding Info').t`Final approval in progress`}
  36             subtitle={c('Onboarding Info').t`Hang tight`}
  37             rightContent={
  38                 <div className="flex flex-column justify-center ratio-square w-full p-8">
  39                     {steps.map(({ icon, text, isDone }, index) => {
  40                         const isLastStep = index === steps.length - 1;
  41
  42                         return (
  43                             <Fragment key={text}>
  44                                 <div className={'rounded bg-weak p-4 text-xl flex items-center justify-space-between'}>
  45                                     <div className="flex items-center gap-2">
  46                                         <Icon name={icon} size={6} />
  47                                         {text}
  48                                     </div>
  49                                     <Icon
  50                                         size={6}
  51                                         className={isDone ? 'color-success' : 'color-warning'}
  52                                         name={isDone ? 'checkmark-circle-filled' : 'clock-circle-filled'}
  53                                     />
  54                                 </div>
  55                                 {!isLastStep && <div className="steps-line p-4 ml-8" />}
  56                             </Fragment>
  57                         );
  58                     })}
  59                 </div>
  60             }
  61         >
  62             <p>
  63                 {c('Onboarding Info').t`The owner needs to confirm sharing access. You'll get an email once it's done.`}
  64             </p>
  65         </Container>
  66     );
  67 };
  68
  69 export const PendingInvitationStepButtons = ({ onNext }: OnboardingProps) => {
  70     return (
  71         <div className="w-full flex justify-end">
  72             <Button size="large" color="norm" onClick={onNext}>
  73                 {c('Onboarding Action').t`Continue`}
  74             </Button>
  75         </div>
  76     );
  77 };