fix: api call and change the props of components

src/features/authentication/components/UserCompletionForm.tsx

@@ -6,14 +6,22 @@ import { PasswordSection } from './PasswordSection';
 import { EmailSection } from './EmailSection';
 import { SubmitSection } from './SubmitSection';
 import Logo from '@/components/Logo';
+import apiClient from '@/lib/apiClient';
 
 export function UserCompletionForm() {
   const { t } = useTranslation('completionForm');
-  const [sex, setSex] = useState('');
+
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [nationalId, setNationalId] = useState('');
+  const [birthDate, setBirthDate] = useState<Date | null>(null);
+  const [sex, setSex] = useState<'female' | 'male'>('female');
   const [country, setCountry] = useState('');
+
   const [showPasswordSection, setShowPasswordSection] = useState(false);
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+
   const [showEmail, setShowEmail] = useState(false);
   const [email, setEmail] = useState('');
   const [codeSent, setCodeSent] = useState(false);
@@ -24,6 +32,7 @@ export function UserCompletionForm() {
   const [countdown, setCountdown] = useState(60);
   const [emailVerified, setEmailVerified] = useState(false);
   const [isVerifyingCode, setIsVerifyingCode] = useState(false);
+  const correctEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 
   const matchPassword = password === confirmPassword;
   const hasNumber = /\d/.test(password);
@@ -33,7 +42,10 @@ export function UserCompletionForm() {
   const validPassword =
     hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar;
   const [showPasswordValidations, setShowPasswordValidations] = useState(false);
-  const correctEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
 
   useEffect(() => {
     if (password) {
@@ -96,6 +108,44 @@ export function UserCompletionForm() {
     setCodeSent(false);
     setEmailVerified(false);
   };
+  const STATICTOKEN = 'Bearer abcdef1234567890';
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+    try {
+      const { data } = await apiClient.post<{
+        success: boolean;
+        errorCode: number;
+        message: string;
+        validations: { property: string; message: string }[];
+      }>(
+        '/User/CompleteUserInformation',
+        {
+          firstName,
+          lastName,
+          gender: sex === 'female' ? 2 : 1,
+          nationalId,
+          savePassword: showPasswordSection,
+          password: showPasswordSection ? password : undefined,
+          saveEmail: showEmail,
+          email: showEmail ? email : undefined,
+          birthDate,
+        },
+        { headers: { Authorization: STATICTOKEN } },
+      );
+      if (data.success) {
+        setSuccess(true);
+      } else {
+        setError(data.message || 'Validation error');
+      }
+    } catch (err) {
+      setError((err as Error).message || 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
 
   return (
     <Box
@@ -140,14 +190,20 @@ export function UserCompletionForm() {
             {t('completion.description')}
           </Typography>
         </Box>
-
         <PersonalInfoFields
+          firstName={firstName}
+          setFirstName={setFirstName}
+          lastName={lastName}
+          setLastName={setLastName}
+          nationalId={nationalId}
+          setNationalId={setNationalId}
+          birthDate={birthDate}
+          setBirthDate={setBirthDate}
           sex={sex}
           setSex={setSex}
           country={country}
           setCountry={setCountry}
         />
-
         <PasswordSection
           showPasswordSection={showPasswordSection}
           setShowPasswordSection={setShowPasswordSection}
@@ -163,7 +219,6 @@ export function UserCompletionForm() {
           validPassword={validPassword}
           showValidations={showPasswordValidations}
         />
-
         <EmailSection
           showEmail={showEmail}
           setShowEmail={setShowEmail}
@@ -181,8 +236,12 @@ export function UserCompletionForm() {
           isVerifyingCode={isVerifyingCode}
           handleEditEmail={handleEditEmail}
         />
-
-        <SubmitSection />
+        <SubmitSection
+          onSubmit={handleSubmit}
+          loading={loading}
+          error={error}
+          success={success}
+        />
       </Box>
     </Box>
   );