packages/pass/components/Onboarding/OnboardingModal.tsx

   1 import type { FC } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms/Button/Button';
   7 import Step from '@proton/atoms/Stepper/Step';
   8 import Stepper from '@proton/atoms/Stepper/Stepper';
   9 import { type ModalProps, ModalTwoFooter } from '@proton/components';
  10 import Icon from '@proton/components/components/icon/Icon';
  11 import { ModalTwoContent, ModalTwoHeader } from '@proton/components/index';
  12 import { PassModal } from '@proton/pass/components/Layout/Modal/PassModal';
  13 import { wait } from '@proton/shared/lib/helpers/promise';
  14
  15 import { useOnboarding } from './OnboardingProvider';
  16
  17 import './OnboardingModal.scss';
  18
  19 export const OnboardingModal: FC<ModalProps> = ({ size = 'xlarge', ...props }) => {
  20     const { acknowledge, steps, markCompleted } = useOnboarding();
  21     const [loading, setLoading] = useState(false);
  22     const [step, setStep] = useState(0);
  23
  24     const currentStep = steps[step];
  25
  26     const onComplete = () => {
  27         setLoading(true);
  28         acknowledge();
  29         void wait(250).then(props.onClose);
  30     };
  31
  32     const onStep = (offset: 1 | -1) => {
  33         if (offset === 1) markCompleted(steps[step].key);
  34
  35         const nextStep = step + offset;
  36         if (nextStep < steps.length) setStep(Math.max(0, nextStep));
  37         else onComplete();
  38     };
  39
  40     const onContinue = () => {
  41         currentStep.action?.();
  42         onStep(1);
  43     };
  44
  45     const backButton =
  46         step > 0 ? (
  47             <Button className="mr-auto" icon pill shape="ghost" onClick={() => onStep(-1)}>
  48                 <Icon name="arrow-left" />
  49             </Button>
  50         ) : undefined;
  51
  52     return (
  53         <PassModal {...props} onClose={props.onClose} size={size} className="pass-onboarding-modal">
  54             <ModalTwoHeader actions={backButton} closeButtonProps={{ pill: true, icon: true }} />
  55
  56             <Stepper activeStep={step}>
  57                 {steps.map((step) => (
  58                     <Step key={step.key} />
  59                 ))}
  60             </Stepper>
  61
  62             <ModalTwoContent>
  63                 {/* height accommodates largest content without layout shifts */}
  64                 <div className="h-custom flex items-center" style={{ '--h-custom': '23rem' }}>
  65                     <div className="flex flex-column w-full">
  66                         <div className="flex items-center gap-6 text-left w-full">
  67                             <div className="flex-1">
  68                                 <p className="text-uppercase text-sm text-bold m-0 mb-3 pass-onboarding-modal--group">
  69                                     {currentStep.group}
  70                                 </p>
  71                                 <p className="text-4xl text-bold m-0 mb-3">{currentStep.title}</p>
  72                                 <p className="text-weak text-pre-wrap m-0">{currentStep.description}</p>
  73                             </div>
  74
  75                             <div className="flex-1">{currentStep.component}</div>
  76                         </div>
  77                     </div>
  78                 </div>
  79             </ModalTwoContent>
  80             <ModalTwoFooter className="mt-0">
  81                 <div className="flex justify-end w-full">
  82                     <Button
  83                         className="mr-auto pass-onboarding-modal--skip"
  84                         pill
  85                         shape="ghost"
  86                         onClick={() => onStep(1)}
  87                         disabled={loading}
  88                     >
  89                         {c('Action').t`Skip`}
  90                     </Button>
  91
  92                     <Button pill shape="solid" onClick={onContinue} disabled={loading}>
  93                         {currentStep.actionText ?? 'Continue'}
  94                     </Button>
  95                 </div>
  96             </ModalTwoFooter>
  97         </PassModal>
  98     );
  99 };