fix: api calls

2025-08-09 14:08:02 -07:00
parent fb9d691f6a
commit ca0680c78f
7 changed files with 398 additions and 53 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
        "@mui/material": "^7.2.0",
        "@mui/stylis-plugin-rtl": "^7.2.0",
        "@rkheftan/harmony-ui": "^0.1.5",
-        "@mui/x-date-pickers": "^8.9.0",
+        "@mui/x-date-pickers": "^8.10.0",
        "@mui/x-date-pickers-pro": "^8.9.0",
        "axios": "^1.11.0",
        "date-fns": "^4.1.0",
@@ -1452,6 +1452,281 @@
        }
      }
    },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-8.10.0.tgz",
+      "integrity": "sha512-3nY+SS2/JtqcptQodECIyWKsTvPBDAcXKkyW65R4rQUCrnV6tuzriSrzy/FEYqTK0hyXYPIGJhQ6A0FbtQ9AkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.2.0",
+        "@mui/x-internals": "8.10.0",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2 || ^3.0.0",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers-pro": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-8.9.0.tgz",
+      "integrity": "sha512-Penske7PIdAgFUjD6J15O3sJqkAju6htogQNuEG4Jp1Fk1rQrqF6ZCG9jHDVeyf45ZeEt/1rDUEgyGKPtjyFAA==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@mui/utils": "^7.2.0",
+        "@mui/x-date-pickers": "8.9.0",
+        "@mui/x-internals": "8.8.0",
+        "@mui/x-license": "8.9.0",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2 || ^3.0.0",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers-pro/node_modules/@mui/x-date-pickers": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-8.9.0.tgz",
+      "integrity": "sha512-MD2/F63Tdsodygp3Z2VtfvvQhAiEVXvleuK9mqXuD6a1cCPOENICCJC98y2AKbOcsbVd37o6HCvWFOQsfsy7TQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@mui/utils": "^7.2.0",
+        "@mui/x-internals": "8.8.0",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2 || ^3.0.0",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/x-internals": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.10.0.tgz",
+      "integrity": "sha512-stYhWBeCKfV2/ltAWShZ3ZJ51otbqpMpC+krWWoIsxM8TuvGzwXw5YMU9L2fTb8hRstsiOCQfEzIn12Ii7+N0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.2.0",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-internals": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.8.0.tgz",
+      "integrity": "sha512-qTRK5oINkAjZ7sIHpSnESLNq1xtQUmmfmGscYUSEP0uHoYh6pKkNWH9+7yzggRHuTv+4011VBwN9s+efrk+xZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@mui/utils": "^7.2.0",
+        "reselect": "^5.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-license": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-license/-/x-license-8.9.0.tgz",
+      "integrity": "sha512-mtCWT1l9rNTvs3N2NYd2liRN4IrbgB/E1QkF3BW3dL1rgBAOMamaCoQPAtK+L8UEPvB+zie3rs77/LAbdyS7oA==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@mui/utils": "^7.2.0",
+        "@mui/x-internals": "8.8.0",
+        "@mui/x-telemetry": "8.5.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-telemetry": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@mui/x-telemetry/-/x-telemetry-8.5.3.tgz",
+      "integrity": "sha512-vBLVBXCBWY44HonjRefpYjowEXa25k2AtAXkWk2tHfL3/unnnexrYPosuo/p4giIWer0pMy/bPqGY2qM0xlM+g==",
+      "hasInstallScript": true,
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@fingerprintjs/fingerprintjs": "^3.4.2",
+        "ci-info": "^4.2.0",
+        "conf": "^11.0.2",
+        "is-docker": "^3.0.0",
+        "node-machine-id": "^1.1.12"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
--- a/public/locales/en/completionForm.json
+++ b/public/locales/en/completionForm.json
@@ -28,6 +28,10 @@
    "agreementPart2": ".",
    "sent": "sent",
    "country": "country",
-    "dateOfBirth": "Date of birth(optional)"
+    "dateOfBirth": "Date of birth(optional)",
+    "submitSuccess": "Information successfully registered",
+    "submitError": "Error in registering information",
+    "submitting": "Submitting...",
+    "success": "Success"
  }
 }
--- a/public/locales/fa/completionForm.json
+++ b/public/locales/fa/completionForm.json
@@ -31,6 +31,10 @@
    "dateOfBirth": "تاریخ تولد(اختیاری)",
    "invalidCountry": "کشور انتخاب شده صحیح نیست",
    "rules": "قوانین و مقررات",
-    "alertSuccess": "ایمیل با موفقیت تایید شد"
+    "alertSuccess": "ایمیل با موفقیت تایید شد",
+    "submitSuccess": "اطلاعات با موفقیت ثبت شد",
+    "submitError": "خطا در ثبت اطلاعات",
+    "submitting": "در حال تایید...",
+    "success": "موفقیت"
  }
 }
--- a/src/features/authentication/components/EmailSection.tsx
+++ b/src/features/authentication/components/EmailSection.tsx
@@ -163,6 +163,7 @@ export function EmailSection({

            {!isVerifyingCode && !emailVerified && (
              <Button
+                type="button"
                variant="text"
                onClick={onSendCodeClick}
                sx={{
--- a/src/features/authentication/components/SubmitSection.tsx
+++ b/src/features/authentication/components/SubmitSection.tsx
@@ -74,15 +74,6 @@ export function SubmitSection({ onSubmit, loading, error, success }: Props) {
          {t('completion.agreementPart2')}
        </Typography>

-        {/* <Button
-          variant="contained"
-          sx={{
-            width: { xs: '100%', sm: '247px' },
-            alignSelf: { xs: 'stretch', sm: 'center' },
-          }}
-        >
-          {t('completion.registerButton')}
-        </Button> */}
        <Button
          variant="contained"
          onClick={onSubmit}
@@ -95,7 +86,7 @@ export function SubmitSection({ onSubmit, loading, error, success }: Props) {
          {loading
            ? t('completion.submitting')
            : success
-              ? t('completion.success')
+              ? t('completion.registerButton')
              : t('completion.registerButton')}
        </Button>
        {error && <Typography color="error">{error}</Typography>}
--- a/src/features/authentication/components/UserCompletionForm.tsx
+++ b/src/features/authentication/components/UserCompletionForm.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Box, Typography, Button } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import Logo from '@/components/Logo';
 import { PersonalInfoFields } from './PersonalInfoFields';
@@ -7,7 +7,7 @@ import { PasswordSection } from './PasswordSection';
 import { EmailSection } from './EmailSection';
 import { SubmitSection } from './SubmitSection';
 import apiClient from '@/lib/apiClient';
-import { sendEmailOtp, fetchAuthToken } from '@/lib/authToken';
+import { Toast } from '@/components/Toast';

 export function UserCompletionForm() {
  const { t } = useTranslation('completionForm');
@@ -48,6 +48,15 @@ export function UserCompletionForm() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
+  const [showSuccessToast, setShowSuccessToast] = useState(false);
+  const [showErrorToast, setShowErrorToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+
+  const [showVerifyCodeSectionSuccess, setShowVerifyCodeSectionSuccess] =
+    useState(false);
+  const [showVerifyCodeSectionError, setShowVerifyCodeSectionError] =
+    useState(false);
+  const [sentVerificationCode, setSentVerificationCode] = useState('');

  useEffect(() => {
    if (password) {
@@ -65,8 +74,7 @@ export function UserCompletionForm() {
  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (buttonState === 'counting' && countdown > 0) {
-      timer = setInterval(
-        () =>
+      timer = setInterval(() => {
        setCountdown((prev) => {
          if (prev <= 1) {
            setButtonState('default');
@@ -74,9 +82,8 @@ export function UserCompletionForm() {
            return 0;
          }
          return prev - 1;
-          }),
-        1000,
-      );
+        });
+      }, 1000);
    }
    return () => clearInterval(timer);
  }, [buttonState, countdown]);
@@ -97,29 +104,67 @@ export function UserCompletionForm() {
    setError(null);
    setLoading(true);
    setSuccess(false);
-
    try {
-      await sendEmailOtp(EMAIL);
+      const response = await apiClient.post('/User/SendEmailOtp', { email });
+      if (response.data?.success) {
+        setSentVerificationCode(response.data.message);
+        setShowVerifyCodeSectionSuccess(true);
+        setCodeSent(true);
+        setButtonState('counting');
+        setCountdown(120);
        setSuccess(true);
-    } catch {
-      setError('Failed to send OTP');
+        setSentVerificationCode(
+          response.data.message || 'کد با موفقیت ارسال شد',
+        );
+      } else {
+        setShowVerifyCodeSectionError(true);
+        setSentVerificationCode(response.data.message || 'مشکلی پیش آمده');
+        // setError(
+        //   response.data?.message || t('completion.verificationCodeError'),
+        // );
+      }
+    } catch (err: any) {
+      setShowVerifyCodeSectionError(true);
+      setSentVerificationCode(err.response?.data?.message || 'مشکلی پیش آمده');
+      // setError(
+      //   err.response?.data?.message || t('completion.verificationCodeError'),
+      // );
    } finally {
      setLoading(false);
    }
  };

  const handleVerifyCode = async () => {
-    if (!verificationCode) return;
+    if (!verificationCode.trim()) {
+      setError('Please enter the verification code');
+      return;
+    }
+
    setIsVerifyingCode(true);
    setError(null);
+
    try {
-      const tokenRes = await fetchAuthToken(email, verificationCode);
-      localStorage.setItem('authToken', tokenRes.access_token);
-      apiClient.defaults.headers.common['Authorization'] =
-        `Bearer ${tokenRes.access_token}`;
+      const res = await apiClient.post('/User/ConfirmEmailOtp', {
+        email,
+        otp: verificationCode,
+      });
+
+      if (res.data?.success) {
        setEmailVerified(true);
-    } catch {
-      setError('Invalid verification code');
+        setSuccess(true);
+        if (res.data.access_token) {
+          localStorage.setItem('authToken', res.data.access_token);
+          apiClient.defaults.headers.common['Authorization'] =
+            `Bearer ${res.data.access_token}`;
+        }
+      } else {
+        setError(res.data?.message || 'Invalid verification code');
+      }
+    } catch (err: any) {
+      setError(
+        err.response?.data?.message ||
+          'Something went wrong while verifying the code',
+      );
    } finally {
      setIsVerifyingCode(false);
    }
@@ -143,6 +188,7 @@ export function UserCompletionForm() {
        message: string;
        validations: { property: string; message: string }[];
      }>('/User/CompleteUserInformation', {
+        userId: '9cb8ae51-95f9-4f66-99b4-1c7c4d48251b',
        firstName,
        lastName,
        gender: sex === 'female' ? 2 : 1,
@@ -155,21 +201,22 @@ export function UserCompletionForm() {
        country,
      });
      if (data.success) {
-        setSuccess(true);
+        setToastMessage(data.message || t('completion.submitSuccess'));
+        setShowSuccessToast(true);
      } else {
-        setError(data.message || 'Validation error');
+        setToastMessage(data.message || t('completion.submitError'));
+        setShowErrorToast(true);
      }
    } catch (err: any) {
-      setError(
-        err.response?.data?.message || err.message || 'An error occurred',
+      setToastMessage(
+        err.response?.data?.message || err.message || 'خطای ناشناخته',
      );
+      setShowErrorToast(true);
    } finally {
      setLoading(false);
    }
  };

-  const EMAIL = 'klahouti81@gmail.com';
-
  return (
    <Box
      sx={{
@@ -238,6 +285,21 @@ export function UserCompletionForm() {
          showValidations={showPasswordValidations}
        />

+        <Toast
+          color="success"
+          open={showVerifyCodeSectionSuccess}
+          onClose={() => setShowVerifyCodeSectionSuccess(false)}
+        >
+          {sentVerificationCode}
+        </Toast>
+
+        <Toast
+          color="error"
+          open={showVerifyCodeSectionError}
+          onClose={() => setShowVerifyCodeSectionError(false)}
+        >
+          {sentVerificationCode}
+        </Toast>
        <EmailSection
          showEmail={showEmail}
          setShowEmail={setShowEmail}
@@ -255,10 +317,20 @@ export function UserCompletionForm() {
          isVerifyingCode={isVerifyingCode}
          handleEditEmail={handleEditEmail}
        />
-
-        <Button onClick={handleSendCode} variant="contained" disabled={loading}>
-          {loading ? 'Sending…' : 'Send OTP'}
-        </Button>
+        <Toast
+          color="success"
+          open={showSuccessToast}
+          onClose={() => setShowSuccessToast(false)}
+        >
+          {toastMessage}
+        </Toast>
+        <Toast
+          color="error"
+          open={showErrorToast}
+          onClose={() => setShowErrorToast(false)}
+        >
+          {toastMessage}
+        </Toast>

        <SubmitSection
          onSubmit={handleSubmit}
--- a/src/lib/authToken.ts
+++ b/src/lib/authToken.ts
@@ -35,8 +35,6 @@ export async function fetchAuthToken(
  email: string,
  otpCode: string,
 ): Promise<TokenResponse> {
-  await sendEmailOtp(email);
-
  const body = new URLSearchParams({
    grant_type: 'otp',
    client_id: 'harmony_identity',