/* eslint-disable no-param-reassign */
/* eslint-disable no-underscore-dangle */
/* eslint-disable max-len */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable import/no-extraneous-dependencies */
import React, { FormEventHandler, useEffect, useState } from 'react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
import { Autocomplete, Box, TextField } from '@mui/material';
import IconSave from '@assets/icon-save.svg';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { Col, Row } from 'react-bootstrap';
import {
fetchLitigantApplicationDetails,
lawFirmRegistrationDetailSelector,
setisValidRegistrationForm,
submitLitigantApplicationDetails,
} from '@redux/slices/law-firm-registration';
import { useDispatch, useSelector } from 'react-redux';
import { trackPromise } from 'react-promise-tracker';
import api from '@api/index';
import {
resetErrorState,
setErrorInfo,
} from '@redux/slices/will-personal-information';
import { dropDownSelector, fetchCountryList } from '@redux/slices/dropDowns';
import './style.scss';
import useIsdCodesList from '@utils/hooks/useIsdCodesList';
interface LitigantProbonoApplicant {
litigantGuid: string;
applicantName: string;
applicantAddress: string;
applicantTelephone: string;
applicantFax: string;
applicantMobile: string;
applicantEmail: string;
isdCodeApplicantMobile: string;
}
interface Props {
completed: { [k: number]: boolean };
handleComplete: () => void;
completedSteps: () => number;
totalSteps: () => number;
activeStep: number;
handleBack: () => void;
isLastStep: () => boolean;
}
const commonSchema = yup.object().shape({
applicantName: yup.string().required('Applicant Name is required'),
applicantEmail: yup
.string()
.email('Invalid email')
.required('Applicant Email Address is required'),
applicantAddress: yup.string().required('Address is required'),
applicantTelephone: yup
.string()
.required('Telephone number is required')
.matches(/^[0-9]{6,14}$/, 'Invalid telephone number'),
applicantMobile: yup.string().required('Mobile number is required'),
applicantFax: yup.string().required('Fax number is required'),
isdCodeApplicantMobile: yup.string().required('Isd Code is required'),
});
const draftSchema = yup.object().shape({
applicantName: yup.string().required('Applicant Name is required'),
applicantEmail: yup
.string()
.email('Invalid email')
.required('Applicant Email Address is required'),
});
function index({
completed,
handleComplete,
completedSteps,
totalSteps,
activeStep,
handleBack,
isLastStep,
}: Props) {
const [applicantMobile, setApplicantMobile] = useState<string>('');
const [isdCodeLabel, setIsdCodeLabel] = useState<any>('');
const [isdCode1, setIsdCode1] = useState<string>('');
const [flagForLitigantApplicant, setFlagForLitigantApplicant] = useState<boolean>(false);
const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
const [isDraft, setIsDraft] = useState<boolean>(false);
const [submitBtn, setSubmitBtn] = useState(false);
const [emailValidation, setEmailValidation] = useState(false);
const [isNext, setIsNext] = useState<boolean | null>(null);
const dispatch = useDispatch();
const schema = isNext ? commonSchema : draftSchema;
const {
control,
handleSubmit,
reset,
setValue,
register,
clearErrors,
setError,
trigger,
formState: { errors },
} = useForm<LitigantProbonoApplicant>({
resolver: yupResolver(schema as yup.AnyObjectSchema),
defaultValues: {
// cityID: null, countryID: null, homeJurisdiction: null, phoneNo: '',
},
});
console.log('litiganterrors', errors);
console.log('isDraft', isDraft);
const { litigantGuid, litigantDetails, isValidRegistrationForm } = useSelector(lawFirmRegistrationDetailSelector);
const checkLitigantEmail = async (email: string) => {
console.log('litigantGuid', litigantGuid);
await dispatch(resetErrorState());
try {
// Make the API call here (e.g., using fetch or Axios)
const response: any = await trackPromise(
api.checkIfLitigantEmailRegistered(email, litigantGuid),
);
if (response?.data?.applicantEmalExists) {
setFlagForLitigantApplicant(true);
dispatch(setErrorInfo('Litigant Email already exists!'));
dispatch<any>(setisValidRegistrationForm(false));
// If the firm name already exists, set the error message for the Firm Name field
setError('applicantEmail', {
type: 'manual',
message: 'Litigant Email already exists',
});
} else {
dispatch<any>(setisValidRegistrationForm(true));
setFlagForLitigantApplicant(false);
// If the firm name is unique, clear the error message for the Firm Name field
clearErrors('applicantEmail');
}
} catch (error) {
console.error('Error making API call:', error);
}
};
// Utility function to filter out all IDs from the list
const filterList = (list: any[], condition: (item: any) => boolean) => list.filter((item: any) => {
if (condition(item)) {
return item;
}
return '';
});
// Get all dropdown lists from redux
const { countryList } = useSelector(dropDownSelector);
// Custom hooks for getting various list information
const isdCodesList = useIsdCodesList(countryList);
const onSubmit: SubmitHandler<LitigantProbonoApplicant> = async (
data: LitigantProbonoApplicant,
) => {
// setSubmitBtn(true);
// await checkLitigantEmail(data.applicantEmail);
await trigger(['applicantEmail']);
if (Object.keys(errors).length === 0) {
const formData: LitigantProbonoApplicant = {
litigantGuid,
applicantName: data.applicantName,
applicantAddress: data.applicantAddress,
applicantTelephone: data.applicantTelephone,
applicantFax: data.applicantFax,
applicantEmail: data.applicantEmail,
applicantMobile,
isdCodeApplicantMobile: isdCode1,
};
if (isValidRegistrationForm) {
await dispatch<any>(
submitLitigantApplicationDetails(formData, isDraft),
);
if (!isDraft) handleComplete();
if (!isDraft) reset();
window.scrollTo(0, 0);
}
}
};
const submitFromSave = async (data: any) => {
console.log('Litigant Data', data);
const litigantDraft:LitigantProbonoApplicant = {
litigantGuid,
applicantName: data.applicantName,
applicantAddress: data.applicantAddress,
applicantTelephone: data.applicantTelephone,
applicantFax: data.applicantFax,
applicantEmail: data.applicantEmail,
applicantMobile,
isdCodeApplicantMobile: isdCode1,
};
await dispatch<any>(
submitLitigantApplicationDetails(litigantDraft, isDraft),
);
};
const emailValidationRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
React.useEffect(() => {
window.scrollTo(0, 0);
dispatch<any>(fetchCountryList());
}, []);
useEffect(() => {
if (litigantGuid !== '') {
dispatch<any>(fetchLitigantApplicationDetails(litigantGuid));
}
}, [litigantGuid]);
const handleIsdCode1Change = (e: any, val: any) => {
const isdCode1Value = val?.countryID;
const isdCode1Label = val?.label;
setIsdCode1(isdCode1Value);
setIsdCodeLabel(isdCode1Label);
};
useEffect(() => {
if (litigantDetails) {
const isCode = filterList(
isdCodesList,
(item: any) => item.countryID === litigantDetails?.isdCodeApplicantMobile,
);
console.log('isdCode', isCode);
setValue('applicantName', litigantDetails.applicantName);
setValue('applicantAddress', litigantDetails.applicantAddress);
setValue('applicantTelephone', litigantDetails.applicantTelephone);
// setValue('iSDCodeApplicantTelephone', litigantDetails.isdCodeApplicantMobile);
setValue('applicantFax', litigantDetails.applicantFax);
setValue('applicantMobile', litigantDetails.applicantMobile);
setValue('applicantEmail', litigantDetails.applicantEmail);
setValue(
'isdCodeApplicantMobile',
litigantDetails.isdCodeApplicantMobile,
);
setApplicantMobile(litigantDetails.applicantMobile);
setIsdCode1(isCode[0]?.countryID);
setIsdCodeLabel(isCode[0]?.label);
}
}, [litigantDetails]);
const handlePhoneNumber1Change = (e: any) => {
const { value } = e.target;
// eslint-disable-next-line no-param-reassign
e.target.value = value.replace(/[^0-9]/g, '');
setApplicantMobile(e.target.value);
};
const capitalizeWords = (text: string) => text
.split(' ')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ');
const handleTelephoneChange = (e: any) => {
const { value } = e.target;
// eslint-disable-next-line no-param-reassign
e.target.value = value.replace(/[^0-9]/g, '');
setValue('applicantTelephone', e.target.value);
};
const handleFaxChange = (e: any) => {
const { value } = e.target;
// eslint-disable-next-line no-param-reassign
e.target.value = value.replace(/[^0-9]/g, '');
setValue('applicantFax', e.target.value);
};
const handleCursor: FormEventHandler<HTMLInputElement> = (e: {
currentTarget: any;
}) => {
const input = e.currentTarget;
const cursorPosition = input.selectionStart || 0;
input.value = capitalizeWords(
input.value
.trimStart()
.replace(/\s+/g, ' ')
.replace(/[^a-zA-Z\W ]/g, ''),
);
input.setSelectionRange(cursorPosition, cursorPosition);
};
const handleInput: FormEventHandler<HTMLInputElement> = (e: {
currentTarget: any;
}) => {
setSubmitBtn(false);
if (emailValidationRegex.test(e.currentTarget.value)) {
setEmailValidation(false);
} else {
setEmailValidation(true);
}
const input = e.currentTarget;
const cursorPosition = input.selectionStart || 0;
input.value = input.value.trim();
input.setSelectionRange(cursorPosition, cursorPosition);
};
const handleInputForAddrress = (e: { currentTarget: any }) => {
const input = e.currentTarget;
const cursorPosition = input.selectionStart || 0;
input.value = capitalizeWords(input.value.trimStart());
input.setSelectionRange(cursorPosition, cursorPosition);
};
return (
<form
className="form"
onSubmit={handleSubmit(isNext ? onSubmit : submitFromSave)}
>
<h1>Application Details</h1>
<span className="mb-3">
Please indicate whether you will be the claimant or respondent
</span>
<div className="row" style={{ paddingTop: '40px' }}>
<div className="col-md-4">
<div className="mb-3">
<label htmlFor="name" className="form-label firmName-label w-100">
Name*
</label>
<input
type="text"
className={`${
errors?.applicantName
? 'validate-field'
: 'form-control'
} `}
onInput={handleCursor}
style={{ textTransform: 'capitalize' }}
id="applicantName"
placeholder="Enter Name"
// onChange={(e) => setState(e.target.value)}
{...register('applicantName', {
required: true,
})}
/>
</div>
</div>
<div className="col-md-4">
<div className="mb-3">
<label htmlFor="name" className="form-label firmName-label w-100">
Telephone*
</label>
<input
type="text"
max={15}
className={`${
errors?.applicantTelephone && isSubmitted
? 'validate-field'
: 'form-control'
} `}
id="applicantTelephone"
placeholder="Enter Telephone Number"
{...register('applicantTelephone', {
required: true,
})}
onChange={handleTelephoneChange}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-4">
<div className="mb-3">
<label
htmlFor="applicantEmail"
className="form-label applicantEmail-label w-100"
>
Email*
</label>
<Controller
name="applicantEmail"
control={control}
render={({ field }) => (
<input
type="text"
className={`${
errors.applicantEmail
|| flagForLitigantApplicant
|| (emailValidation && submitBtn)
? 'validate-field'
: 'form-control'
}`}
{...field}
{...register('applicantEmail', {
required: true,
pattern: {
value: emailValidationRegex,
message: 'Please enter a valid email',
},
})}
id="applicantEmail"
aria-describedby="emailHelp"
placeholder="Enter Email Address"
onInput={handleInput}
onBlur={() => checkLitigantEmail(field.value)}
/>
)}
rules={{
required: 'Firm Email is required',
pattern: {
value: emailValidationRegex,
message: 'Please enter a valid email',
},
}}
/>
{/* {errors.firmEmail && (
<p className="error-message">{errors.firmEmail.message}</p>
)} */}
</div>
</div>
<div className="col-md-4">
<div className="mb-3">
<label htmlFor="phoneNumber" className="form-label w-100">
Mobile*
</label>
<div className="d-flex">
<Autocomplete
id="country-select-demo"
// sx={{ width: 1000 }}
options={isdCodesList}
autoHighlight
// value={isdCodeLabel}
value={
isdCodesList.find(
(option: any) => option.label === isdCodeLabel,
) || null
}
disableClearable
getOptionLabel={(option: any) => `${option.label} ${option.countryName}`}
// getOptionLabel={(option: any) => option?.countryName}
renderOption={(props, option) => (
<Box
component="li"
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
{...props}
>
<img
loading="lazy"
width="20"
src={`https://flagcdn.com/w20/${option?.countryCode?.toLowerCase()}.png`}
srcSet={`https://flagcdn.com/w40/${option?.countryCode?.toLowerCase()}.png 2x`}
alt=""
/>
{option?.countryName}
{' '}
(
{option?.label}
)
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
placeholder="+97"
// value={isdCodeLabel || ''}
inputProps={{
...params.inputProps,
autoComplete: 'new-password', // disable autocomplete and autofill
}}
{...register('isdCodeApplicantMobile', {
required: true,
})}
error={
errors?.isdCodeApplicantMobile
&& (isdCodeLabel === '' || isdCodeLabel === undefined)
}
className="isdcode-field"
/>
)}
className="isdcode-box"
onChange={(e, newVal: any) => handleIsdCode1Change(e, newVal)}
/>
<input
type="text"
placeholder="Enter Phone Number"
maxLength={15}
// className={`${
// isSubmitted
// && (applicantMobile === '' || applicantMobile === undefined)
// ? 'phonenumber-input-error'
// : 'form-control-phonenumber'
// } `}
className={`${
errors?.applicantMobile && isSubmitted && (applicantMobile === '' || applicantMobile === undefined)
? 'phonenumber-input-error'
: 'form-control-phonenumber'
} `}
id="applicantMobile"
aria-describedby="applicantMobileHelp"
{...register('applicantMobile', {
required: true,
})}
onChange={(e: any) => handlePhoneNumber1Change(e)}
/>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-4">
<div className="mb-3">
<label
htmlFor="applicantFax"
className="form-label applicantFax-label w-100"
>
Fax*
</label>
<input
type="text"
className={`${
errors?.applicantFax && isSubmitted
? 'validate-field'
: 'form-control'
} `}
id="applicantFax"
placeholder="Enter Fax Number"
{...register('applicantFax', {
required: true,
})}
onChange={handleFaxChange}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-8">
<div className="mb-3">
<label
htmlFor="applicantAddress"
className="form-label firmName-label w-100"
>
Address*
</label>
<textarea
className={`${
errors?.applicantAddress
? 'validate-field'
: 'form-control'
} `}
id="applicantAddress"
placeholder="Enter Address*"
onInput={handleInputForAddrress}
{...register('applicantAddress', {
required: true,
})}
/>
</div>
</div>
</div>
<Row className="mb-3 pt-3">
<Col md={8}>
<button
type="submit"
className="next-button"
onClick={() => {
setIsSubmitted(true);
setIsDraft(false);
setSubmitBtn(true);
setIsNext(true);
}}
>
{isLastStep() ? 'Submit' : 'Next'}
</button>
<button
type="submit"
className="save-button"
onClick={() => {
setIsSubmitted(true);
setIsDraft(true);
setSubmitBtn(true);
setIsNext(false);
}}
>
<img src={IconSave} alt="" />
Save
</button>
</Col>
<Col className="mr-auto" md={4}>
{activeStep !== 0 && (
<button type="button" className="back-button" onClick={handleBack}>
Back
</button>
)}
</Col>
</Row>
</form>
);
}
export default index;
