import { Textarea, Textinput } from '@/components'; import CustomModal from '@/components/CustomModal'; import CustomSelect from '@/components/Form/Select'; import Button from '@/components/ui/Button'; import UploadImager from '@/components/UploadImager'; import { useSession } from 'next-auth/react'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; import { useForm, Controller } from 'react-hook-form'; import { Form } from 'react-bootstrap'; import styled from 'styled-components'; import { Country, State, City } from 'country-state-city'; import { useCreateProfessionalAccountMutation } from '@/lib/redux/services/auth.api'; const ProfessionalAccountBox = styled.div` @media (min-width: 992px) and (max-width: 1600px) { padding-top: 1200px !important; } @media (min-width: 1600px) { padding-top: 1000px !important; } `; const getFormData = (data: Record, formDataIns: FormData) => { Object.keys(data).forEach((key) => { formDataIns.append(key, data[key]); }); return formDataIns; }; const User = () => { const [accountRequestModal, setAccountRequestModal] = useState(false); const [congratulation, setCongratulation] = useState(false); const router = useRouter(); const { data: session } = useSession(); const [createProfile, { isLoading }] = useCreateProfessionalAccountMutation(); const { control, handleSubmit, setValue, formState: { errors } } = useForm(); const [selectedCountry, setSelectedCountry] = useState(null); const [selectedState, setSelectedState] = useState(null); const [selectedCity, setSelectedCity] = useState(null); const [stateOptions, setStateOptions] = useState([]); const [cityOptions, setCityOptions] = useState([]); const [insuranceDoc, setInsuranceDoc] = useState(null); const [legalDoc, setLegalDoc] = useState(null); useEffect(() => { if (selectedCountry) { const states = State.getStatesOfCountry(selectedCountry.isoCode); setStateOptions(states); setSelectedState(null); setCityOptions([]); } }, [selectedCountry]); useEffect(() => { if (selectedState) { const cities = City.getCitiesOfState(selectedState.countryCode, selectedState.isoCode); setCityOptions(cities); } }, [selectedState]); const onSubmit = async (data: any) => { const { area_of_service, ...rest } = data const formDataIns = new FormData(); const formDataPayload = getFormData(rest, formDataIns); if (insuranceDoc) formDataIns.append('insurance_document', insuranceDoc); if (legalDoc) formDataIns.append('legal_document', legalDoc); formDataIns.append("area_of_service", JSON.stringify(area_of_service)); try { const token = session?.user?.token await createProfile({ body: formDataPayload, token }).unwrap(); setAccountRequestModal(true); } catch (error) { console.error(error); } }; const handleOpenModal = () => { setAccountRequestModal(false); setCongratulation(true); }; return ( <> Create Professional Account

Create Professional Account

Please enter your details to Create professional account

Owner Name ( } type="text" placeholder="+123 456 7890" inputGroupBoxCss="w-100" /> )} /> {errors.owner_name &&

{errors.owner_name.message}

} Phone Number ( } type="text" placeholder="+123 456 7890" inputGroupBoxCss="w-100" /> )} /> {errors.phone_number &&

{errors.phone_number.message}

} Email Address ( } type="text" placeholder="John.Smith@example.com" inputGroupBoxCss="w-100" /> )} /> {errors.email &&

{errors.email.message}

} {/* Company Name ( } type="text" placeholder="Enter company name" inputGroupBoxCss="w-100" /> )} /> {errors.companyName &&

{errors.companyName.message}

} */} Address (