108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
import { Box, Button, Paper, TextField, Typography } from '@mui/material';
|
|
import parsePhoneNumberFromString from 'libphonenumber-js';
|
|
import React, { useRef, useState, type Dispatch } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CountryCodeSelector } from './CountryCodeSelector';
|
|
import { AuthenticationCard } from './AuthenticationCard';
|
|
|
|
export interface CompleteSignUpProps {
|
|
email: string;
|
|
value: string;
|
|
setValue: Dispatch<string>;
|
|
onCompleteSignUp: (countryCode: string, value: string) => void;
|
|
}
|
|
|
|
export const CompleteSignUp = ({
|
|
email,
|
|
value,
|
|
setValue,
|
|
onCompleteSignUp,
|
|
}: CompleteSignUpProps) => {
|
|
const { t } = useTranslation('authentication');
|
|
const [countryCode, setCountryCode] = useState('+98');
|
|
const [error, setError] = useState<string>();
|
|
const textFieldRef = useRef<HTMLDivElement>(null);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const [touched, setTouched] = useState<boolean>(false);
|
|
const inputError: boolean = touched && !!error;
|
|
|
|
const isPhoneValid = (code: string, phone: string) => {
|
|
const phoneNumber = parsePhoneNumberFromString(code + phone);
|
|
|
|
return phoneNumber && phoneNumber.isValid();
|
|
};
|
|
|
|
const handleBlur = () => {
|
|
setTouched(true);
|
|
|
|
if (!value) {
|
|
setError(t('loginForm.thisFieldIsRequired'));
|
|
}
|
|
if (!isPhoneValid(countryCode, value)) {
|
|
setError(t('loginForm.phoneNumberIsInvalid'));
|
|
} else {
|
|
setError(undefined);
|
|
}
|
|
};
|
|
|
|
const handleCompleteSignUp = () => {
|
|
if (!value) {
|
|
setError(t('loginForm.thisFieldIsRequired'));
|
|
inputRef.current?.focus();
|
|
}
|
|
if (!isPhoneValid(countryCode, value)) {
|
|
setError(t('loginForm.phoneNumberIsInvalid'));
|
|
inputRef.current?.focus();
|
|
} else {
|
|
setError(undefined);
|
|
onCompleteSignUp(countryCode, value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AuthenticationCard>
|
|
<Typography variant="h5" sx={{ mb: 0.5 }}>
|
|
{t('completeSignUp.completeSignUp')}
|
|
</Typography>
|
|
|
|
<Typography variant="body2" color="textSecondary" sx={{ mt: 1, mb: 2 }}>
|
|
{t(
|
|
'completeSignUp.emailHasBeenSuccessfullyVerifiedPleaseEnterYourContactNumberToContinue',
|
|
{ email },
|
|
)}
|
|
</Typography>
|
|
|
|
<TextField
|
|
ref={textFieldRef}
|
|
inputRef={inputRef}
|
|
label={t('completeSignUp.phoneNumber')}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
onBlur={handleBlur}
|
|
error={inputError}
|
|
helperText={inputError ? error : ''}
|
|
autoFocus
|
|
slotProps={{
|
|
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } },
|
|
input: {
|
|
endAdornment: (
|
|
<CountryCodeSelector
|
|
value={countryCode}
|
|
onChange={setCountryCode}
|
|
show={true}
|
|
menuAnchor={textFieldRef.current}
|
|
onCloseFocusRef={inputRef}
|
|
/>
|
|
),
|
|
},
|
|
}}
|
|
sx={{ my: 4 }}
|
|
/>
|
|
|
|
<Button onClick={handleCompleteSignUp}>
|
|
{t('verify.confirmAndContinue')}
|
|
</Button>
|
|
</AuthenticationCard>
|
|
);
|
|
};
|