Function OnboardingForm

apps/web/ui/OnboardingForm/index.tsx:21–245

({ api }: Props)

}

export default function OnboardingForm({ api }: Props) {
  const [loading, setLoading] = useState(false);
  const [channels, setChannels] = useState<string[]>([]);
  const [emails, setEmails] = useState<string[]>([]);
  const [suggestion, setSuggestion] = useState<string>('');

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);
    try {
      const target = e.target as typeof e.target & {
        name: { value: string };
        slackDomain: { value: string };
        description: { value: string };
      };
      const name = target.name.value;
      const slackDomain = target.slackDomain.value.toLowerCase();
      const description = target.description.value;

      const response = await api.createAccount({
        name,
        slackDomain,
        channels,
        description,
        members: emails,
      });
      if (response.id) {
        // FIXME: it only works on nextjs
        window.location.href = `/s/${slackDomain}/configurations`;
      }
    } catch (error: any) {
      Toast.error(error.message || 'Something went wrong');
    } finally {
      setLoading(false);
    }
  }

  async function addChannel() {
    const input = document.getElementById(
      'new-channel-onboarding'
    ) as HTMLInputElement;
    if (input.value && input.checkValidity()) {
      const channel = input.value.toLowerCase();
      if (channels.includes(channel)) {
        Toast.error('Channel already added.');
      } else {
        setChannels((channels) => [...channels, channel]);
        input.value = '';
      }
    } else {
      return input.reportValidity();
    }
  }

  async function addEmail() {
    const input = document.getElementById(
      'new-email-onboarding'
    ) as HTMLInputElement;