SignUpForm.tsx

import React, { useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { BaseForm } from '@app/components/common/forms/BaseForm/BaseForm';
import { useAppDispatch } from '@app/hooks/reduxHooks';
import { doSignUp } from '@app/store/slices/authSlice';
import { useFeedback } from '@app/hooks/useFeedback';
import GoogleIcon from '@app/assets/icons/google.svg';
import * as Auth from '@app/components/layouts/AuthLayout/AuthLayout.styles';
import * as S from './SignUpForm.styles';
import {
  BITBUCKET_OAUTH2_URL,
  GITHUB_OAUTH_URL,
  GOOGLE_OAUTH_URL,
  handleOauth2Submit,
  handleOauthSubmit,
} from '@app/constants/oauthHandler';
import { useResponsive } from '@app/hooks/useResponsive';
import { GithubOutlined } from '@ant-design/icons';
import { BitBucketOutlined } from '@app/components/dashboard/common/VendorDropdown/vendorIcons/VendorIcons';

interface SignUpFormData {
  firstName: string;
  lastName: string;
  email: string;
  password: string;
  termOfUse: boolean;
}

const initValues = {
  firstName: '',
  lastName: '',
  email: '',
  password: '',
  confirmPassword: '',
  termOfUse: true,
};

export const SignUpForm: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const [isLoading, setLoading] = useState(false);

  const { t } = useTranslation();
  const { notification } = useFeedback();

  const { isDesktop } = useResponsive();

  const handleSubmit = useCallback(
    async (values: SignUpFormData) => {
      if (!values.termOfUse) {
        notification.error({ message: t('auth.signup.tou') });
        return;
      }

      setLoading(true);

      try {
        await dispatch(doSignUp(values)).unwrap();
        notification.success({
          message: t('auth.signup.signUpSuccessMessage'),
          description: t('auth.signup.signUpSuccessDescription'),
        });
        navigate('/auth/login');
      } catch (err) {
        notification.error({ message: err instanceof Error ? err.message : 'Sign up failed' });
      } finally {
        setLoading(false);
      }
    },
    [dispatch, navigate, notification, t]
  );

  const handleGoogleSignUp = useCallback(() => {
    handleOauthSubmit({}, GOOGLE_OAUTH_URL, isDesktop);
  }, [isDesktop]);

  const handleGithubSignUp = useCallback(() => {
    handleOauthSubmit({}, GITHUB_OAUTH_URL, isDesktop);
  }, [isDesktop]);

  const handleBitBucketSignUp = useCallback(() => {
    handleOauth2Submit(BITBUCKET_OAUTH2_URL, isDesktop);
  }, [isDesktop]);

  const privacyPolicyUrl = `${import.meta.env.VITE_BASE_URL}/privacy-policy`;
  const tocUrl = `${import.meta.env.VITE_BASE_URL}/toc`;

  return (
    <Auth.FormWrapper>
      <BaseForm
        layout="vertical"
        onFinish={handleSubmit}
        requiredMark="optional"
        initialValues={initValues}
      >
        <S.Title style={{textAlign: "center"}}>{t('auth.common.signUp')}</S.Title>
        <hr></hr>
        <BaseForm.Item noStyle>
          <Auth.SocialButton type="default" htmlType="button" onClick={handleGoogleSignUp}>
            <Auth.SocialIconWrapper>
              <GoogleIcon />
            </Auth.SocialIconWrapper>
            {t('auth.signup.googleLink')}
          </Auth.SocialButton>
        </BaseForm.Item>
        <BaseForm.Item noStyle>
          <Auth.SocialButton type="default" htmlType="button" onClick={handleGithubSignUp}>
            <Auth.SocialIconWrapper>
              <GithubOutlined />
            </Auth.SocialIconWrapper>
            {t('auth.signup.githubLink')}
          </Auth.SocialButton>
        </BaseForm.Item>
        <BaseForm.Item noStyle>
          <Auth.SocialButton type="default" htmlType="button" onClick={handleBitBucketSignUp}>
            <Auth.SocialIconWrapper>
              <BitBucketOutlined />
            </Auth.SocialIconWrapper>
            {t('auth.signup.bitbucketLink')}
          </Auth.SocialButton>
        </BaseForm.Item>
        
        <Auth.FooterWrapper>
              
          <Auth.Text>
            {t('auth.signup.alreadyHaveAccount')}{' '}
            <Link to="/auth/login">
              <Auth.LinkText>{t('auth.common.here')}</Auth.LinkText>
            </Link>
          </Auth.Text>
        </Auth.FooterWrapper>
        <Auth.FooterWrapper>
          <Auth.Text style={{fontSize: "11px"}}>
            {t('auth.signup.agree')}{' '}
            <Link to={tocUrl} target="_blank" >
              <Auth.LinkText style={{fontSize: "11px"}}>{t('auth.signup.termOfUse')}</Auth.LinkText>
            </Link>{' '}
            {t('auth.signup.and')}{' '}
            <Link to={privacyPolicyUrl} target="_blank">
              <Auth.LinkText style={{fontSize: "11px"}}>{t('auth.signup.privacyOPolicy')}</Auth.LinkText>
            </Link>
          </Auth.Text>
        </Auth.FooterWrapper>
      </BaseForm>
    </Auth.FormWrapper>
  );
};