feat: layout padding and scroll added

src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -0,0 +1,233 @@
+import { useTranslation } from 'react-i18next';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { Edit2 } from 'iconsax-react';
+import DigitInput from '@/components/DigitsInput';
+import type { AuthMode, AuthType } from '../../types/authTypes';
+import { useEffect, useState } from 'react';
+import { AuthenticationCard } from '../AuthenticationCard';
+import type { LoginRequest } from '../../types/userTypes';
+import {
+  loginOrSignUpWithOtp,
+  sendEmailOtp,
+  sendSmsOtp,
+} from '../../api/authorizationAPI';
+import type { CountryCode, GUID } from '@/types/commonTypes';
+import { Icon, useToast } from '@rkheftan/harmony-ui';
+import { useApi } from '@/hooks/useApi';
+import { generateTokenWithOtp } from '../../api/identityAPI';
+import { useAuth } from '@/hooks/useAuth';
+
+interface OtpVerifyFormProps {
+  value: string;
+  countryCode: CountryCode;
+  authType: AuthType;
+  authMode: AuthMode;
+  onEditValue: () => void;
+  onOTPVerified: (userId: GUID) => void;
+  onVerifyPhoneNumber: (userId: GUID) => void;
+  authReturnUrl: string;
+}
+
+export function OtpVerifyForm({
+  value,
+  countryCode,
+  authType,
+  authMode,
+  onEditValue,
+  onOTPVerified,
+  onVerifyPhoneNumber,
+  authReturnUrl,
+}: OtpVerifyFormProps) {
+  const [otpCode, setOtpCode] = useState<string>('');
+  const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
+  const [isStatusSuccess, setIsStatusSuccess] = useState<boolean>();
+  const { t } = useTranslation('authentication');
+  const [resendTimer, setResendTimer] = useState<number>(120);
+  const [canResend, setCanResend] = useState(false);
+  const toast = useToast();
+  const { loading: smsResendLoading, execute: smsResendCall } =
+    useApi(sendSmsOtp);
+  const { loading: emailResendLoading, execute: emailResendCall } =
+    useApi(sendEmailOtp);
+  const { loading: loginSignUpLoading, execute: loginSignUpCall } =
+    useApi(loginOrSignUpWithOtp);
+  const auth = useAuth();
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (resendTimer > 0) {
+      interval = setInterval(() => {
+        setResendTimer((prev) => prev - 1);
+      }, 1000);
+    } else {
+      setCanResend(true);
+    }
+
+    return () => clearInterval(interval);
+  }, [resendTimer]);
+
+  const handleResendOTPCode = async () => {
+    if (authType === 'phone') {
+      await smsResendCall({ phoneNumber: countryCode + value });
+    } else {
+      await emailResendCall({ email: value });
+    }
+
+    setResendTimer(120);
+    setCanResend(false);
+  };
+
+  const formatTime = (seconds: number) => {
+    const min = Math.floor(seconds / 60);
+    const sec = seconds % 60;
+    return `${min}:${sec.toString().padStart(2, '0')}`;
+  };
+
+  const handleVerifyOTP = () => {
+    if (!otpCode || otpCode.length < 4) {
+      setOtpDigitInvalid(true);
+    } else {
+      handleLoginOrSignUp();
+    }
+  };
+
+  const handleLoginOrSignUp = async () => {
+    setOtpDigitInvalid(false);
+
+    const loginRequest: LoginRequest = {
+      otpCode: otpCode,
+      phoneNumber: authType === 'phone' ? countryCode + value : undefined,
+      email: authType === 'email' ? value : undefined,
+      returnUrl: authReturnUrl,
+    };
+    const res = await loginSignUpCall(loginRequest);
+
+    if (!res) {
+      return;
+    }
+
+    if (res.success) {
+      setIsStatusSuccess(true);
+
+      const tokenRes = await generateTokenWithOtp({
+        email: loginRequest.email,
+        phonenumber: loginRequest.phoneNumber,
+        otp: loginRequest.otpCode,
+      });
+      auth.login({
+        ...tokenRes.data,
+      });
+
+      if (res.registeredWithOutPhoneNumber) {
+        onVerifyPhoneNumber(res.userId);
+      } else {
+        onOTPVerified(res.userId);
+      }
+
+      toast({
+        message:
+          authMode === 'login'
+            ? t('verify.youHaveSuccessfullyLoggedIn')
+            : t('verify.youHaveSuccessfullySignedIn'),
+        severity: 'success',
+      });
+    } else {
+      setIsStatusSuccess(false);
+
+      toast({
+        message: res.message,
+        severity: 'error',
+      });
+    }
+  };
+
+  const otpMessageFn = (): string => {
+    if (authType === 'phone' && authMode === 'login') {
+      return t(
+        'verify.a4DigitVerificationCodeHasBeenSentToYourBobileNumberPleaseEnterIt',
+      );
+    } else if (authType === 'phone' && authMode === 'register') {
+      return t(
+        'verify.thereIsNoAccountWithThisNumberA4DigitVerificationCodeHasBeenSentToThisNumberToCreateANewAccount',
+      );
+    } else if (authType === 'email' && authMode === 'login') {
+      return t(
+        'verify.a4digitVerificationCodeHasBeenSentToYourEmailAddressPleaseEnterIt',
+      );
+    } else if (authType === 'email' && authMode === 'register') {
+      return t(
+        'verify.thereIsNoAccountWithThisEmailAddressA4DigitVerificationCodeHasBeenSentToThisEmailAddressToCreateANewAccount',
+      );
+    }
+
+    return '';
+  };
+
+  const otpMessage = otpMessageFn();
+
+  return (
+    <Stack alignItems="center">
+      <AuthenticationCard>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 4,
+            mb: 0.5,
+          }}
+        >
+          <Typography variant="h5">{t('verify.verify')}</Typography>
+
+          <Button
+            variant="outlined"
+            size="large"
+            sx={{ textTransform: 'lowercase', width: 'auto' }}
+            endIcon={<Icon Component={Edit2} />}
+            onClick={onEditValue}
+          >
+            {authType === 'phone' ? countryCode + value : value}
+          </Button>
+        </Box>
+
+        <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
+          {otpMessage}
+        </Typography>
+
+        <DigitInput
+          error={otpDigitInvalid || isStatusSuccess === false}
+          success={isStatusSuccess === true}
+          onChange={(value) => setOtpCode(value)}
+        />
+
+        <Button onClick={handleVerifyOTP} loading={loginSignUpLoading}>
+          {authMode === 'register'
+            ? t('verify.confirmAndContinue')
+            : t('verify.confirmAndLogin')}
+        </Button>
+      </AuthenticationCard>
+
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          mt: 1.5,
+        }}
+      >
+        <Typography variant="body1">{t('verify.resendCodeIn')}</Typography>
+
+        <Button
+          variant="text"
+          loading={smsResendLoading || emailResendLoading}
+          sx={{ width: 'auto' }}
+          onClick={canResend ? handleResendOTPCode : undefined}
+        >
+          {canResend && t('verify.resendCode')}
+          {!canResend && `${formatTime(resendTimer)} ${t('verify.moreMinute')}`}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}