packages/components/containers/challenge/Challenge.tsx

   1 import { useRef, useState } from 'react';
   2
   3 import { getApiSubdomainUrl } from '@proton/shared/lib/helpers/url';
   4 import randomIntFromInterval from '@proton/utils/randomIntFromInterval';
   5
   6 import ChallengeError from './ChallengeError';
   7 import type { Props as ChallengeProps } from './ChallengeFrame';
   8 import ChallengeFrame from './ChallengeFrame';
   9 import type { ChallengeLog } from './interface';
  10
  11 interface Props extends Omit<ChallengeProps, 'src' | 'onError' | 'onSuccess'> {
  12     type: number;
  13     name: string;
  14     iframeClassName?: string;
  15     onSuccess: (challengeLog: ChallengeLog[]) => void;
  16     onError: (challengeLog: ChallengeLog[]) => void;
  17 }
  18
  19 const Challenge = ({
  20     children,
  21     style,
  22     onSuccess,
  23     onError,
  24     bodyClassName,
  25     iframeClassName,
  26     name,
  27     type,
  28     ...rest
  29 }: Props) => {
  30     const [error, setError] = useState(false);
  31     const [errorRetry, setErrorRetry] = useState(0);
  32     const challengeLogRef = useRef<ChallengeLog[]>([]);
  33
  34     const challengeSrc = (() => {
  35         const url = getApiSubdomainUrl('/challenge/v4/html', window.location.origin);
  36         url.searchParams.set('Type', `${type}`);
  37         url.searchParams.set('Name', name);
  38         if (errorRetry) {
  39             url.searchParams.set('Retry', `${errorRetry}`);
  40         }
  41         return url.toString();
  42     })();
  43
  44     // Loading error timeouts in intervals of [12, 15], [17, 20], [22, 25]
  45     const jitter = randomIntFromInterval(0, 3);
  46     const errorTimeout = (15 + errorRetry * 5 - jitter) * 1000;
  47
  48     if (error) {
  49         if (rest.empty) {
  50             return null;
  51         }
  52         return <ChallengeError />;
  53     }
  54
  55     return (
  56         <ChallengeFrame
  57             key={errorRetry}
  58             src={challengeSrc}
  59             errorTimeout={errorTimeout}
  60             className={iframeClassName ? iframeClassName : 'w-full'}
  61             bodyClassName={bodyClassName}
  62             style={style}
  63             onSuccess={() => {
  64                 onSuccess?.(challengeLogRef.current);
  65             }}
  66             onError={(challengeLog) => {
  67                 challengeLogRef.current = challengeLogRef.current.concat(challengeLog);
  68                 if (errorRetry < 2) {
  69                     setErrorRetry(errorRetry + 1);
  70                     return;
  71                 }
  72                 setError(true);
  73                 onError?.(challengeLogRef.current);
  74             }}
  75             {...rest}
  76         >
  77             {children}
  78         </ChallengeFrame>
  79     );
  80 };
  81
  82 export default Challenge;