wisemapping-frontend/packages/webapp/src/components/registration-callback/index.tsx

import React, { useEffect, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import FormContainer from '../layout/form-container';
import Header from '../layout/header';
import Footer from '../layout/footer';
import { Link as RouterLink } from 'react-router-dom';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import ReactGA from 'react-ga4';
import Client, { Oauth2CallbackResult } from '../../classes/client';
import { useSelector } from 'react-redux';
import { activeInstance } from '../../redux/clientSlice';
import { useNavigate } from 'react-router-dom';
import { CircularProgress } from '@mui/material';
import GlobalError from '../form/global-error';
import { buttonsStyle } from './style';

const RegistrationCallbackPage = (): React.ReactElement => {
  const intl = useIntl();
  const client: Client = useSelector(activeInstance);

  const [showError, setShowError] = useState(false);
  const [callbackResult, setCallbackResult] = useState<Oauth2CallbackResult>(undefined);
  const navigate = useNavigate();

  useEffect(() => {
    document.title = intl.formatMessage({
      id: 'registation.success-title',
      defaultMessage: 'Registation Success | WiseMapping',
    });
    ReactGA.send({
      hitType: 'pageview',
      page: window.location.pathname,
      title: 'Registration:Success',
    });
  });

  useEffect(() => {
    const googleOauthCode = new URLSearchParams(window.location.search).get('code');
    client
      .processGoogleCallback(googleOauthCode)
      .then((result) => {
        if (result.googleSync) {
          // if service reports that user already has sync accounts, go to maps page
          navigate('/c/maps/');
        }
        setCallbackResult(result);
      })
      .catch((error) => {
        console.log('ERROR', error);
        setShowError(true);
        window.newrelic?.noticeError(error);
      });
  }, []);

  const confirmAccountSynching = () => {
    client
      .confirmAccountSync(callbackResult.email, callbackResult.syncCode)
      .then(() => {
        navigate('/c/maps/');
      })
      .catch((error) => {
        console.log('ERROR', error);
        window.newrelic?.noticeError(error);
      });
  };

  // if service reports that user doesnt sync accounts yet, we need to show the options
  const needConfirmLinking = !showError && callbackResult?.email && !callbackResult?.googleSync;

  return (
    <div>
      <Header type="none" />
      <FormContainer>
        <Typography variant="h4" component="h1">
          {needConfirmLinking ? (
            <FormattedMessage id="registration.callback.confirm.title" defaultMessage="Confirm" />
          ) : (
            <FormattedMessage
              id="registration.callback.waiting.title"
              defaultMessage="Finishing..."
            />
          )}
        </Typography>
        <Typography paragraph>
          {needConfirmLinking ? (
            <FormattedMessage
              id="registration.callback.confirm.description"
              defaultMessage="An account with the same email was previously registered. Do you want to link your google account to that WiseMapping account?"
            />
          ) : (
            <FormattedMessage
              id="registration.callback.waiting.description"
              defaultMessage="Please wait while we validate your identity"
            />
          )}
        </Typography>

        {showError && (
          <>
            <GlobalError
              error={{
                msg: intl.formatMessage({
                  id: 'registation.callback.error.message',
                  defaultMessage:
                    'An error occurred validating your identity with Google, you can try again from the login page',
                }),
              }}
            />
            <Button
              color="primary"
              size="medium"
              variant="contained"
              component={RouterLink}
              to="/c/login"
              disableElevation={true}
              css={buttonsStyle}
            >
              <FormattedMessage id="registration.callback.back" defaultMessage="Back to login" />
            </Button>
          </>
        )}

        {!needConfirmLinking && !showError && <CircularProgress />}

        {needConfirmLinking && (
          <>
            <Button
              color="secondary"
              size="medium"
              variant="contained"
              component={RouterLink}
              to="/c/login"
              disableElevation={true}
              css={buttonsStyle}
            >
              <FormattedMessage id="registration.callback.back" defaultMessage="Back to login" />
            </Button>
            <Button
              onClick={() => {
                confirmAccountSynching();
              }}
              color="primary"
              size="medium"
              variant="contained"
              disableElevation={true}
              css={buttonsStyle}
            >
              <FormattedMessage id="registration.callback.sync" defaultMessage="Sync account" />
            </Button>
          </>
        )}
      </FormContainer>
      <Footer />
    </div>
  );
};

export default RegistrationCallbackPage;