infisical/frontend/components/signup/TeamInviteStep.tsx

import React, { useState } from "react";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";

import addUserToOrg from "~/pages/api/organization/addUserToOrg";
import getWorkspaces from "~/pages/api/workspace/getWorkspaces";

import Button from "../basic/buttons/Button";


/**
 * This is the last step of the signup flow. People can optionally invite their teammates here.
 */
export default function TeamInviteStep(): JSX.Element {
  const [emails, setEmails] = useState("");
  const { t } = useTranslation();
  const router = useRouter();

  // Redirect user to the getting started page
  const redirectToHome = async () => {
    const userWorkspaces = await getWorkspaces();
    const userWorkspace = userWorkspaces[0]._id;
    router.push("/home/" + userWorkspace);

  }

  const inviteUsers = async ({ emails }: { emails: string; }) => {
    emails 
      .split(',')
      .map(email => email.trim())
      .map(async (email) => await addUserToOrg(email, String(localStorage.getItem('orgData.id'))));

    await redirectToHome();
  }

  return (
    <div className="bg-bunker w-max mx-auto h-7/12 pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-32">
      <p className="text-4xl font-semibold flex justify-center text-primary">
        {t("signup:step5-invite-team")}
      </p>
      <p className="text-center flex justify-center text-bunker-300 max-w-xs md:max-w-sm md:mx-8 mb-6 mt-4">
        {t("signup:step5-subtitle")}
      </p>
      <div>
        <div className="overflow-auto bg-bunker-800">
          <div className="whitespace-pre-wrap break-words bg-transparent">

          </div>
        </div>
        <textarea 
          className="bg-bunker-800 h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
          value={emails}
          onChange={(e) => setEmails(e.target.value)}
          placeholder="[email protected], [email protected]..."
        />
      </div>
      <div className="flex flex-row max-w-max min-w-28 items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
        <div 
          className="text-md md:text-sm mx-3 text-bunker-300 bg-mineshaft-700 py-3 md:py-3.5 px-5 rounded-md cursor-pointer hover:bg-mineshaft-500 duration-200"
          onClick={redirectToHome}
        >
          {t("signup:step5-skip")}
        </div>
        <Button
          text={t("signup:step5-send-invites") ?? ""}
          onButtonPressed={() => inviteUsers({ emails})}
          size="lg"
        />
      </div>
    </div>
  );
}