packages/components/containers/gmailSyncModal/GmailSyncModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { SYNC_G_OAUTH_SCOPES, SYNC_SUCCESS_NOTIFICATION } from '@proton/activation/src/constants';
   4 import useOAuthPopup from '@proton/activation/src/hooks/useOAuthPopup';
   5 import type { EASY_SWITCH_SOURCES, OAuthProps } from '@proton/activation/src/interface';
   6 import { ImportProvider } from '@proton/activation/src/interface';
   7 import { useEasySwitchDispatch, useEasySwitchSelector } from '@proton/activation/src/logic/store';
   8 import { changeCreateLoadingState, createSyncItem } from '@proton/activation/src/logic/sync/sync.actions';
   9 import { selectCreateSyncState } from '@proton/activation/src/logic/sync/sync.selectors';
  10 import { Button } from '@proton/atoms';
  11 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
  12 import ModalTwo from '@proton/components/components/modalTwo/Modal';
  13 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
  14 import ModalHeader from '@proton/components/components/modalTwo/ModalHeader';
  15
  16 import GmailSyncModalAnimation from './GmailSyncModalAnimation';
  17 import SignInWithGoogle from './SignInWithGoogle';
  18
  19 interface Props extends ModalProps {
  20     source: EASY_SWITCH_SOURCES;
  21     reduceHeight?: boolean;
  22     onSyncCallback?: (hasError: boolean) => void;
  23     onSyncSkipCallback?: () => void;
  24     noSkip?: boolean;
  25 }
  26
  27 const GmailSyncModal = ({ onSyncCallback, onSyncSkipCallback, source, reduceHeight, noSkip, ...rest }: Props) => {
  28     const dispatch = useEasySwitchDispatch();
  29     const syncState = useEasySwitchSelector(selectCreateSyncState);
  30     const loading = syncState === 'pending';
  31
  32     const { triggerOAuthPopup, loadingConfig } = useOAuthPopup({
  33         errorMessage: c('loc_nightly:Error').t`Your sync will not be processed.`,
  34     });
  35
  36     const handleGoogleSync = () => {
  37         triggerOAuthPopup({
  38             provider: ImportProvider.GOOGLE,
  39             scope: SYNC_G_OAUTH_SCOPES.join(' '),
  40             callback: async (oAuthProps: OAuthProps) => {
  41                 const { Code, Provider, RedirectUri } = oAuthProps;
  42                 dispatch(changeCreateLoadingState('pending'));
  43                 const res = await dispatch(
  44                     createSyncItem({
  45                         Code,
  46                         Provider,
  47                         RedirectUri,
  48                         Source: source,
  49                         notification: SYNC_SUCCESS_NOTIFICATION,
  50                     })
  51                 );
  52
  53                 const hasError = res.type.endsWith('rejected');
  54                 if (!hasError) {
  55                     rest?.onClose?.();
  56                 }
  57                 onSyncCallback?.(hasError);
  58             },
  59         });
  60     };
  61
  62     const handleSyncSkip = () => {
  63         onSyncSkipCallback?.();
  64         rest?.onClose?.();
  65     };
  66
  67     const handleClose = () => {
  68         onSyncSkipCallback?.();
  69         rest?.onClose?.();
  70     };
  71
  72     return (
  73         <ModalTwo size="xlarge" fullscreenOnMobile {...rest} onClose={handleClose}>
  74             <ModalHeader />
  75             <ModalContent className="m-8 mt-0 flex flex-row items-center flex-nowrap gap-7">
  76                 <div className="flex flex-column flex-1 gap-7">
  77                     <h1 className="text-break text-4xl">
  78                         <strong>{c('Gmail forwarding').t`Automatically forward`}</strong>
  79                         &nbsp;
  80                         <br className="lg:hidden" />
  81                         {c('Gmail forwarding').t`Gmail messages to your inbox`}
  82                     </h1>
  83                     <div className="lg:hidden grow-2">
  84                         <GmailSyncModalAnimation reduceHeight={reduceHeight} />
  85                     </div>
  86                     <div className="flex flex-column items-center gap-4">
  87                         <SignInWithGoogle
  88                             onClick={handleGoogleSync}
  89                             loading={loading}
  90                             disabled={loadingConfig}
  91                             fullWidth
  92                         />
  93                         {!noSkip && (
  94                             <Button shape="ghost" color="norm" fullWidth onClick={handleSyncSkip}>{c('Action')
  95                                 .t`Skip`}</Button>
  96                         )}
  97                     </div>
  98                 </div>
  99                 <div className="hidden lg:block w-6/10">
 100                     <GmailSyncModalAnimation reduceHeight={reduceHeight} />
 101                 </div>
 102             </ModalContent>
 103         </ModalTwo>
 104     );
 105 };
 106
 107 export default GmailSyncModal;