chore: change styles and add Api for user profile

src/features/profile/components/userInformation/socialMedia/SocialMediaDialog.tsx

@@ -2,6 +2,7 @@ import React, { type ReactElement, type ElementType } from 'react';
 import {
   Box,
   Button,
+  CircularProgress,
   Dialog,
   DialogContent,
   DialogTitle,
@@ -27,10 +28,15 @@ interface SocialMediaDialogProps {
   t: (key: string) => string;
   emailInput: string;
   setEmailInput: (val: string) => void;
-  emailError: boolean;
-  setEmailError: (val: boolean) => void;
   fullScreen: boolean;
   computedMaxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  verificationCode: string;
+  setVerificationCode: (value: string) => void;
+  apiError: string | null;
+  isLoading: boolean;
+  dialogStep: 'enterEmail' | 'enterCode';
+  onSendCode: () => void;
+  onConfirmEmail: () => void;
 }
 
 export default function SocialMediaDialog({
@@ -39,17 +45,16 @@ export default function SocialMediaDialog({
   t,
   emailInput,
   setEmailInput,
-  emailError,
-  setEmailError,
   fullScreen,
   computedMaxWidth,
+  verificationCode,
+  setVerificationCode,
+  apiError,
+  isLoading,
+  dialogStep,
+  onSendCode,
+  onConfirmEmail,
 }: SocialMediaDialogProps) {
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setEmailInput(value);
-    setEmailError(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
-  };
-
   return (
     <Dialog
       open={open}
@@ -64,7 +69,7 @@ export default function SocialMediaDialog({
         sx: {
           borderRadius: { xs: 0, sm: 2 },
           width: { xs: '100%', sm: '30%' },
-          height: { xs: '100%', sm: '43%' },
+          height: 'auto',
         },
       }}
     >
@@ -79,7 +84,7 @@ export default function SocialMediaDialog({
           bgcolor: 'background.default',
         }}
       >
-        <IconButton onClick={onClose} aria-label="Close">
+        <IconButton onClick={onClose} aria-label="Close" disabled={isLoading}>
           <Icon Component={CloseCircle} size="medium" color="primary.main" />
         </IconButton>
         {t('settingForm.addEmailButton')}
@@ -105,24 +110,53 @@ export default function SocialMediaDialog({
           fullWidth
           type="email"
           value={emailInput}
-          onChange={handleEmailChange}
-          error={emailError}
-          helperText={emailError ? t('settingForm.emailError') : ''}
+          onChange={(e) => setEmailInput(e.target.value)}
           label={t('settingForm.email')}
           placeholder="abc@email.com"
           autoComplete="email"
           inputMode="email"
           sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
           autoFocus
+          disabled={isLoading || dialogStep === 'enterCode'}
         />
 
+        {dialogStep === 'enterCode' && (
+          <>
+            <TextField
+              fullWidth
+              type="text"
+              value={verificationCode}
+              onChange={(e) => setVerificationCode(e.target.value)}
+              label={t('settingForm.verificationCode')}
+              autoComplete="one-time-code"
+              inputMode="numeric"
+              sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+              autoFocus
+              disabled={isLoading}
+            />
+          </>
+        )}
+
+        {apiError && (
+          <Typography color="error" variant="caption" sx={{ mt: 1 }}>
+            {apiError}
+          </Typography>
+        )}
+
         <Button
           variant="contained"
           fullWidth
-          sx={{ textTransform: 'none', borderRadius: 2 }}
-          disabled={emailError || emailInput === ''}
+          sx={{ textTransform: 'none', borderRadius: 2, mt: 1 }}
+          disabled={isLoading || (dialogStep === 'enterEmail' && !emailInput)}
+          onClick={dialogStep === 'enterEmail' ? onSendCode : onConfirmEmail}
         >
-          {t('settingForm.verificationCodeButton')}
+          {isLoading ? (
+            <CircularProgress size={24} color="inherit" />
+          ) : dialogStep === 'enterEmail' ? (
+            t('settingForm.verificationCodeButton')
+          ) : (
+            t('settingForm.confirmAndSave')
+          )}
         </Button>
       </DialogContent>
     </Dialog>