chore: add icons and toast

src/features/authentication/components/UserCompletionForm.tsx

@@ -7,7 +7,8 @@ import { PasswordSection } from './PasswordSection';
 import { EmailSection } from './EmailSection';
 import { SubmitSection } from './SubmitSection';
 import apiClient from '@/lib/apiClient';
-import { Toast } from '@/components/Toast';
+import { useToast } from '@rkheftan/harmony-ui';
+import { AxiosError } from 'axios';
 
 export function UserCompletionForm() {
   const { t } = useTranslation('completionForm');
@@ -48,19 +49,8 @@ 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('');
-
-  const [showVerifiedSuccess, setShowVerifiedSuccess] = useState(false);
-  const [showVerifiedError, setShowVerifiedError] = useState(false);
-  const [emailVerifiedMessage, setEmailVerifiedMessage] = useState('');
+  const showToast = useToast();
 
   useEffect(() => {
     if (password) {
@@ -111,28 +101,34 @@ export function UserCompletionForm() {
     try {
       const response = await apiClient.post('/User/SendEmailOtp', { email });
       if (response.data?.success) {
-        setShowVerifyCodeSectionSuccess(true);
-        setSentVerificationCode(
-          response.data.message || 'کد با موفقیت ارسال شد',
-        );
+        showToast({
+          message: response.data.message || t('completion.successfullCodeSent'),
+          severity: 'success',
+        });
         setCodeSent(true);
         setButtonState('counting');
         setCountdown(120);
       } else if (response.data?.codeSentAnyway) {
-        setShowVerifyCodeSectionSuccess(true);
-        setSentVerificationCode(
-          'کد ارسال شد، اما: ' + (response.data.message || ''),
-        );
+        showToast({
+          message: t('completion.codeSentBut') + (response.data.message || ''),
+          severity: 'warning',
+        });
         setCodeSent(true);
         setButtonState('counting');
         setCountdown(120);
       } else {
-        setShowVerifyCodeSectionError(true);
-        setSentVerificationCode(response.data.message || 'مشکلی پیش آمده');
+        showToast({
+          message: response.data.message || t('completion.problem'),
+          severity: 'error',
+        });
       }
-    } catch (err: any) {
-      setShowVerifyCodeSectionError(true);
-      setSentVerificationCode(err.response?.data?.message || 'مشکلی پیش آمده');
+    } catch (error: unknown) {
+      const err = error as AxiosError<{ message?: string }>;
+
+      showToast({
+        message: err.response?.data?.message || t('completion.problem'),
+        severity: 'error',
+      });
     } finally {
       setLoading(false);
     }
@@ -141,6 +137,7 @@ export function UserCompletionForm() {
   const handleVerifyCode = async () => {
     if (!verificationCode.trim()) {
       setError('Please enter the verification code');
+
       return;
     }
 
@@ -156,18 +153,23 @@ export function UserCompletionForm() {
       if (res.data?.success) {
         setEmailVerified(true);
         setSuccess(true);
-        setShowVerifiedSuccess(true);
-        setEmailVerifiedMessage(res.data.message || 'کد با موفقیت تایید شد');
+        showToast({
+          message: res.data.message || t('completion.codeVerified'),
+          severity: 'success',
+        });
       } else {
-        // setError(res.data?.message || 'Invalid verification code');
-        setShowVerifiedError(true);
-        setEmailVerifiedMessage(res.data?.message || 'کد تایید نامعتبر است');
+        showToast({
+          message: res.data?.message || t('completion.invalidCode'),
+          severity: 'error',
+        });
         setEmailVerified(false);
       }
-    } catch (err: any) {
-      setError(err.response?.data?.message || 'خطای ناشناخته');
-      setShowVerifiedError(true);
-      setEmailVerifiedMessage(err.response?.data?.message || 'خطای ناشناخته');
+    } catch (error: unknown) {
+      const err = error as AxiosError<{ message?: string }>;
+      showToast({
+        message: err.response?.data?.message || '',
+        severity: 'error',
+      });
       setEmailVerified(false);
     } finally {
       setIsVerifyingCode(false);
@@ -205,17 +207,23 @@ export function UserCompletionForm() {
         country,
       });
       if (data.success) {
-        setToastMessage(data.message || t('completion.submitSuccess'));
-        setShowSuccessToast(true);
+        showToast({
+          message: data.message || t('completion.submitSuccess'),
+          severity: 'success',
+        });
       } else {
-        setToastMessage(data.message || t('completion.submitError'));
-        setShowErrorToast(true);
+        showToast({
+          message: data.message || t('completion.submitError'),
+          severity: 'success',
+        });
       }
-    } catch (err: any) {
-      setToastMessage(
-        err.response?.data?.message || err.message || 'خطای ناشناخته',
-      );
-      setShowErrorToast(true);
+    } catch (error: unknown) {
+      const err = error as AxiosError<{ message?: string }>;
+      showToast({
+        message:
+          err.response?.data?.message || err.message || t('completion.problem'),
+        severity: 'error',
+      });
     } finally {
       setLoading(false);
     }
@@ -289,37 +297,6 @@ 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>
-
-        <Toast
-          color="success"
-          open={showVerifiedSuccess}
-          onClose={() => setShowVerifiedSuccess(false)}
-        >
-          {emailVerifiedMessage}
-        </Toast>
-
-        <Toast
-          color="error"
-          open={showVerifiedError}
-          onClose={() => setShowVerifiedError(false)}
-        >
-          {emailVerifiedMessage}
-        </Toast>
         <EmailSection
           showEmail={showEmail}
           setShowEmail={setShowEmail}
@@ -337,21 +314,6 @@ export function UserCompletionForm() {
           isVerifyingCode={isVerifyingCode}
           handleEditEmail={handleEditEmail}
         />
-        <Toast
-          color="success"
-          open={showSuccessToast}
-          onClose={() => setShowSuccessToast(false)}
-        >
-          {toastMessage}
-        </Toast>
-        <Toast
-          color="error"
-          open={showErrorToast}
-          onClose={() => setShowErrorToast(false)}
-        >
-          {toastMessage}
-        </Toast>
-
         <SubmitSection
           onSubmit={handleSubmit}
           loading={loading}