astuto/app/javascript/components/TenantSignUp/TenantSignUpP.tsx

import * as React from 'react';
import { useState } from 'react';

import TenantSignUpForm from './TenantSignUpForm';
import UserSignUpForm from './UserSignUpForm';
import ConfirmEmailSignUpPage from './ConfirmEmailSignUpPage';
import ConfirmOAuthSignUpPage from './ConfirmOAuthSignUpPage';
import { IOAuth } from '../../interfaces/IOAuth';
import HttpStatus from '../../constants/http_status';

interface Props {
  oAuthLoginCompleted: boolean;
  oauthUserEmail?: string;
  oauthUserName?: string;
  oAuths: Array<IOAuth>;

  isSubmitting: boolean;
  error: string;

  handleSubmit(
    userFullName: string,
    userEmail: string,
    userPassword: string,
    siteName: string,
    subdomain: string,
    isOAuthLogin: boolean,
    authenticityToken: string,
  ): Promise<any>;

  astutoLogoImage: string;
  feedbackSpaceCreatedImage: string;
  pendingTenantImage: string;

  baseUrl: string;
  trialPeriodDays: number;

  authenticityToken: string;
}

export interface ITenantSignUpUserForm {
  fullName: string;
  email: string;
  password: string;
  passwordConfirmation: string;
}

export interface ITenantSignUpTenantForm {
  siteName: string;
  subdomain: string;
}

export type AuthMethod = 'none' | 'email' | 'oauth';

const TenantSignUpP = ({
  oAuths,
  oAuthLoginCompleted,
  oauthUserEmail,
  oauthUserName,
  isSubmitting,
  error,
  handleSubmit,
  astutoLogoImage,
  feedbackSpaceCreatedImage,
  pendingTenantImage,
  baseUrl,
  trialPeriodDays,
  authenticityToken
}: Props) => {
  // authMethod is either 'none', 'email' or 'oauth'
  const [authMethod, setAuthMethod] = useState<AuthMethod>(oAuthLoginCompleted ? 'oauth' : 'none');

  // goneBack is set to true if the user goes back from the tenant form to the user form
  const [goneBack, setGoneBack] = useState(false);

  const [userData, setUserData] = useState({
    fullName: (oAuthLoginCompleted && oauthUserName) ? oauthUserName.slice(0, 64) : '',
    email: oAuthLoginCompleted ? oauthUserEmail : '',
    password: '',
    passwordConfirmation: '',
  });

  const [tenantData, setTenantData] = useState({
    siteName: '',
    subdomain: '',
  });

  const [currentStep, setCurrentStep] = useState(oAuthLoginCompleted ? 2 : 1);

  const handleSignUpSubmit = (siteName: string, subdomain: string) => {
    handleSubmit(
      userData.fullName,
      userData.email,
      userData.password,
      siteName,
      subdomain,
      authMethod == 'oauth',
      authenticityToken,
    ).then(res => {
      if (res?.status !== HttpStatus.Created) return;
      
      setTenantData({ siteName, subdomain });
      setCurrentStep(currentStep + 1);

      if (authMethod == 'oauth') {
        let redirectUrl = new URL(baseUrl);
        redirectUrl.hostname = `${subdomain}.${redirectUrl.hostname}`;
        redirectUrl.pathname = '/users/sign_in';
        
        // redirect after 3 seconds
        setTimeout(() => {
          window.location.href = redirectUrl.toString();
        }, 3000);

        return;
      }
    });
  }

  return (
    <>
    <img src={astutoLogoImage} width={64} height={64} className="astutoLogo" />
    
    <div className="tenantSignUpContainer">
      {
        (currentStep === 1 || currentStep === 2) &&
          <UserSignUpForm
            currentStep={currentStep}
            setCurrentStep={setCurrentStep}
            authMethod={authMethod}
            setAuthMethod={setAuthMethod}
            oAuths={oAuths}
            userData={userData}
            setUserData={setUserData}
            setGoneBack={setGoneBack}
          />
      }

      {
        (goneBack || currentStep === 2) &&
          <TenantSignUpForm
            isSubmitting={isSubmitting}
            error={error}
            handleSignUpSubmit={handleSignUpSubmit}
            trialPeriodDays={trialPeriodDays}
            currentStep={currentStep}
            setCurrentStep={setCurrentStep}
          />
      }

      {
        currentStep === 3 && authMethod === 'oauth' &&
          <ConfirmOAuthSignUpPage
            baseUrl={baseUrl}
            subdomain={tenantData.subdomain}
            feedbackSpaceCreatedImage={feedbackSpaceCreatedImage}
          />
      }

      {
        currentStep === 3 && authMethod === 'email' &&
          <ConfirmEmailSignUpPage
            subdomain={tenantData.subdomain}
            userEmail={userData.email}
            pendingTenantImage={pendingTenantImage}
          />
      }
    </div>
    </>
  );
}

export default TenantSignUpP;