diff --git a/src/components/Tenanat/EditProfile.jsx b/src/components/Tenanat/EditProfile.jsx new file mode 100644 index 00000000..98af6f45 --- /dev/null +++ b/src/components/Tenanat/EditProfile.jsx @@ -0,0 +1,184 @@ +import React, { useEffect, useState } from 'react'; +import Label from '../common/Label'; +import { useFormContext,useForm,FormProvider } from 'react-hook-form'; +import { useIndustries, useTenantDetails, useUpdateTenantDetails } from '../../hooks/useTenant'; +import { orgSize, reference } from '../../utils/constants'; +import { LogoUpload } from './LogoUpload'; +import showToast from '../../services/toastService'; + +const EditProfile = ({ TenantId,onClose }) => { + const { data, isLoading, isError, error } = useTenantDetails(TenantId); + const [logoPreview, setLogoPreview] = useState(null); + const [logoName, setLogoName] = useState(""); + const { data: Industries, isLoading: industryLoading, isError: industryError } = useIndustries(); + const {mutate:UpdateTenant,isPending,} = useUpdateTenantDetails(()=>{ + showToast("Tenant Details Updated Successfully","success") + onClose() + + }) + const methods = useForm({ + defaultValues: { + firstName: "", + lastName: "", + email: "", + contactNumber: "", + description: "", + domainName: "", + billingAddress: "", + taxId: "", + logoImage: "", + officeNumber: "", + organizationSize: "", + industryId: "", + reference: "", + } + }); + + const { register, reset, handleSubmit, formState: { errors } } = methods; + + const onSubmit = (formData) => { + const tenantPayload = {...formData,contactName:`${formData.firstName} ${formData.lastName}`,id:data.id,} + UpdateTenant({id:data.id,tenantPayload}) + }; + + useEffect(() => { + if (data && Industries) { + const [first = "", last = ""] = (data.contactName ?? "").split(" "); + reset({ + firstName: first, + lastName: last, + contactNumber: data.contactNumber ?? "", + description: data.description ?? "", + domainName: data.domainName ?? "", + billingAddress: data.billingAddress ?? "", + taxId: data.taxId ?? "", + logoImage: data.logoImage ?? "", + officeNumber: data.officeNumber ?? "", + organizationSize: data.organizationSize ?? "", + industryId: data.industry?.id ?? "", + reference: data.reference ?? "", + }); + setLogoPreview(data.logoImage) + } + }, [data, Industries, reset]); + + if (isLoading) return
Loading...
; + if (isError) return
{error?.message}
; + + + return ( + +
+
Edit Tenant
+ +
+ + + {errors.firstName &&
{errors.firstName.message}
} +
+ +
+ + + {errors.lastName &&
{errors.lastName.message}
} +
+ + + +
+ + + {errors.contactNumber &&
{errors.contactNumber.message}
} +
+ +
+ + + {errors.domainName &&
{errors.domainName.message}
} +
+ +
+ + + {errors.taxId &&
{errors.taxId.message}
} +
+ +
+ + + {errors.officeNumber &&
{errors.officeNumber.message}
} +
+ +
+ + + {errors.industryId &&
{errors.industryId.message}
} +
+ +
+ + + {errors.reference &&
{errors.reference.message}
} +
+
+ + + + {errors.organizationSize && ( +
{errors.organizationSize.message}
+ )} +
+ +
+ +