fix: merge errors

src/features/authorization/components/UserCompletionForm/EmailSection.tsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import {
+  TextField,
+  Box,
+  Button,
+  Switch,
+  FormGroup,
+  Typography,
+  InputAdornment,
+  IconButton,
+  CircularProgress,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { TickCircle, Edit } from 'iconsax-react';
+import { Icon } from '@rkheftan/harmony-ui';
+import { type EmailSectionProps } from '../../types/settingForm';
+
+export function EmailSection({
+  showEmail,
+  setShowEmail,
+  email,
+  setEmail,
+  correctEmail,
+  codeSent,
+  verificationCode,
+  setVerificationCode,
+  buttonState,
+  getButtonLabel,
+  handleSendCode,
+  handleVerifyCode,
+  emailVerified,
+  loading,
+  handleEditEmail,
+}: EmailSectionProps) {
+  const { t } = useTranslation('completionForm');
+
+  const onSendCodeClick = () => {
+    if (!correctEmail) return;
+    handleSendCode();
+  };
+
+  const handleToggleEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setShowEmail(e.target.checked);
+  };
+
+  return (
+    <>
+      <FormGroup>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            px: { xs: 2, sm: 0 },
+          }}
+        >
+          <Switch checked={showEmail} onChange={handleToggleEmail} />
+          <Typography
+            sx={{ color: showEmail ? 'primary.main' : 'text.primary' }}
+          >
+            {t('completion.determineEmail')}
+          </Typography>
+        </Box>
+      </FormGroup>
+      {showEmail && (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            px: { xs: 2, sm: 0 },
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 2,
+              justifyContent: { xs: 'center', sm: 'flex-start' },
+            }}
+          >
+            <TextField
+              label={t('completion.email')}
+              variant="outlined"
+              fullWidth
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              error={email.length > 0 && !correctEmail}
+              sx={{ flex: '1 1 260px' }}
+              slotProps={{
+                input: {
+                  startAdornment:
+                    !loading && emailVerified ? (
+                      <InputAdornment position="end">
+                        <Icon
+                          Component={TickCircle}
+                          size="medium"
+                          variant="Bold"
+                          color="success.main"
+                        />
+                      </InputAdornment>
+                    ) : null,
+                  endAdornment:
+                    buttonState === 'counting' ? (
+                      <InputAdornment position="start">
+                        <IconButton onClick={handleEditEmail}>
+                          <Icon
+                            Component={Edit}
+                            color="primary.main"
+                            size="medium"
+                          />
+                        </IconButton>
+                      </InputAdornment>
+                    ) : null,
+                  sx: {
+                    paddingLeft: buttonState === 'counting' ? 0 : undefined,
+                  },
+                },
+              }}
+            />
+            {!loading && !emailVerified && (
+              <Button
+                type="button"
+                variant="text"
+                onClick={onSendCodeClick}
+                sx={{
+                  minWidth: '140px',
+                  width: { xs: '100%', sm: '156px' },
+                  alignSelf: 'center',
+                  textTransform: 'none',
+                }}
+              >
+                {getButtonLabel()}
+              </Button>
+            )}
+          </Box>
+          {email && (
+            <Typography
+              sx={{ color: correctEmail ? 'success.main' : 'error.main' }}
+              variant="caption"
+            >
+              {correctEmail ? '' : t('completion.emailCorrectForm')}
+            </Typography>
+          )}
+          {!emailVerified && codeSent && correctEmail && (
+            <Box
+              sx={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 2,
+                justifyContent: { xs: 'center', sm: 'flex-start' },
+              }}
+            >
+              <TextField
+                label={t('completion.verificationCode')}
+                variant="outlined"
+                value={verificationCode}
+                onChange={(e) => setVerificationCode(e.target.value)}
+                sx={{ flex: '1 1 260px' }}
+                disabled={loading}
+              />
+              <Button
+                variant="contained"
+                onClick={handleVerifyCode}
+                disabled={loading}
+                sx={{
+                  width: { xs: '100%', sm: '156px' },
+                  border: 0.5,
+                  textTransform: 'none',
+                }}
+              >
+                {loading ? (
+                  <CircularProgress size={20} />
+                ) : (
+                  t('completion.checkCodeButton')
+                )}
+              </Button>
+            </Box>
+          )}
+        </Box>
+      )}
+    </>
+  );
+}