464 lines
15 KiB
JavaScript
464 lines
15 KiB
JavaScript
"use client";
|
|
import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
|
|
import {
|
|
handleKeyDown,
|
|
inpNum,
|
|
prefillVerificationDetails,
|
|
prepareCustomFieldFiles,
|
|
prepareCustomFieldTranslations,
|
|
t,
|
|
validateExtraDetails,
|
|
} from "@/utils";
|
|
import {
|
|
getVerificationFiledsApi,
|
|
getVerificationStatusApi,
|
|
sendVerificationReqApi,
|
|
} from "@/utils/api";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { toast } from "sonner";
|
|
import { MdOutlineAttachFile } from "react-icons/md";
|
|
import { HiOutlineUpload } from "react-icons/hi";
|
|
import CustomLink from "@/components/Common/CustomLink";
|
|
import Layout from "@/components/Layout/Layout";
|
|
import Checkauth from "@/HOC/Checkauth";
|
|
import AdLanguageSelector from "../AdsListing/AdLanguageSelector";
|
|
import {
|
|
getDefaultLanguageCode,
|
|
getLanguages,
|
|
} from "@/redux/reducer/settingSlice";
|
|
import { useSelector } from "react-redux";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import PageLoader from "@/components/Common/PageLoader";
|
|
import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
import { useNavigate } from "@/components/Common/useNavigate";
|
|
|
|
const UserVerification = () => {
|
|
const { navigate } = useNavigate();
|
|
const [UserVeriFields, setUserVeriFields] = useState([]);
|
|
const [filePreviews, setFilePreviews] = useState({});
|
|
const [VerificationStatus, setVerificationStatus] = useState("");
|
|
const [verificationLoading, setVerificationLoading] = useState(false);
|
|
const [isVerifying, setIsVerifying] = useState(false);
|
|
|
|
const langCode = useSelector(getCurrentLangCode);
|
|
const languages = useSelector(getLanguages);
|
|
const defaultLanguageCode = useSelector(getDefaultLanguageCode);
|
|
const defaultLangId = languages?.find(
|
|
(lang) => lang.code === defaultLanguageCode
|
|
)?.id;
|
|
const [langId, setLangId] = useState(defaultLangId);
|
|
const [translations, setTranslations] = useState({
|
|
[defaultLangId]: {},
|
|
});
|
|
|
|
const currentTranslation = translations[langId] || {};
|
|
const hasTextbox = UserVeriFields.some((field) => field.type === "textbox");
|
|
|
|
useEffect(() => {
|
|
fetchVerificationData();
|
|
}, [langCode]);
|
|
|
|
const fetchVerificationData = async () => {
|
|
try {
|
|
setVerificationLoading(true);
|
|
|
|
// Step 1: Fetch field definitions
|
|
const fieldsRes = await getVerificationFiledsApi.getVerificationFileds();
|
|
const fieldData = fieldsRes?.data?.data || [];
|
|
setUserVeriFields(fieldData);
|
|
|
|
// Step 2: Fetch verification values
|
|
const statusRes = await getVerificationStatusApi.getVerificationStatus();
|
|
const statusData = statusRes?.data?.data;
|
|
const statusError = statusRes?.data?.error;
|
|
|
|
if (statusError) {
|
|
setVerificationStatus("not applied");
|
|
} else {
|
|
setVerificationStatus(statusData?.status);
|
|
}
|
|
|
|
const verification_fields = statusData?.verification_fields || [];
|
|
|
|
// Step 3: Prepare translations
|
|
const translationsToSet = prefillVerificationDetails({
|
|
data: fieldData,
|
|
languages,
|
|
defaultLangId,
|
|
extraFieldValue:
|
|
statusData?.status === "not applied" ? [] : verification_fields,
|
|
setFilePreviews,
|
|
});
|
|
|
|
setTranslations(translationsToSet);
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
setVerificationLoading(false);
|
|
}
|
|
};
|
|
const renderCustomFields = (field) => {
|
|
let {
|
|
id,
|
|
name,
|
|
translated_name,
|
|
type,
|
|
translated_value,
|
|
values,
|
|
min_length,
|
|
max_length,
|
|
} = field;
|
|
|
|
const inputProps = {
|
|
id,
|
|
name: id,
|
|
onChange: (e) => handleChange(id, e.target.value),
|
|
value: currentTranslation[id] || "",
|
|
...(type === "number"
|
|
? { min: min_length, max: max_length }
|
|
: { minLength: min_length, maxLength: max_length }),
|
|
};
|
|
|
|
switch (type) {
|
|
case "number":
|
|
return (
|
|
<div className="flex flex-col">
|
|
<Input
|
|
type="number"
|
|
inputMode="numeric"
|
|
placeholder={`${t("enter")} ${translated_name || name}`}
|
|
{...inputProps}
|
|
onKeyDown={(e) => handleKeyDown(e, max_length)}
|
|
onKeyPress={(e) => inpNum(e)}
|
|
className="border rounded-md px-4 py-2 outline-none"
|
|
/>
|
|
{max_length && (
|
|
<span className="flex justify-end text-muted-foreground text-sm">
|
|
{`${currentTranslation[id]?.length ?? 0}/${max_length}`}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
case "textbox": {
|
|
return (
|
|
<div className=" flex flex-col">
|
|
<Textarea
|
|
placeholder={`${t("enter")} ${translated_name || name}`}
|
|
{...inputProps}
|
|
/>
|
|
{max_length && (
|
|
<span className=" flex justify-end text-muted-foreground text-sm">
|
|
{`${currentTranslation[id]?.length ?? 0}/${max_length}`}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
case "dropdown":
|
|
return (
|
|
<div className="w-full">
|
|
<Select
|
|
value={currentTranslation[id] || ""}
|
|
onValueChange={(value) => handleChange(id, value)}
|
|
id={id}
|
|
name={id}
|
|
>
|
|
<SelectTrigger className="outline-none focus:outline-none">
|
|
<SelectValue
|
|
className="font-semibold"
|
|
placeholder={`${t("select")} ${translated_name || name}`}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel value="">
|
|
{t("select")} {translated_name || name}
|
|
</SelectLabel>
|
|
{values?.map((option, index) => (
|
|
<SelectItem
|
|
id={option}
|
|
className="font-semibold"
|
|
key={index}
|
|
value={option}
|
|
>
|
|
{translated_value?.[index] || option}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
case "checkbox":
|
|
return (
|
|
<div className="flex w-full flex-wrap gap-2">
|
|
{values?.map((value, index) => {
|
|
return (
|
|
<div key={index} className="flex gap-1 items-center">
|
|
<Checkbox
|
|
id={id}
|
|
value={value}
|
|
onCheckedChange={(checked) =>
|
|
handleCheckboxChange(id, value, checked)
|
|
}
|
|
checked={currentTranslation[id]?.includes(value)}
|
|
/>
|
|
<label
|
|
htmlFor="terms"
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
{translated_value?.[index] || value}
|
|
</label>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
case "radio":
|
|
return (
|
|
<RadioGroup
|
|
value={currentTranslation[id] || ""}
|
|
onValueChange={(value) => handleChange(id, value)}
|
|
className="flex flex-wrap gap-3"
|
|
id={id}
|
|
name={id}
|
|
>
|
|
{values?.map((option, index) => (
|
|
<div key={option} className="flex items-center">
|
|
<RadioGroupItem
|
|
value={option}
|
|
id={option}
|
|
className="sr-only peer"
|
|
/>
|
|
<label
|
|
htmlFor={option}
|
|
className={`${
|
|
currentTranslation[id] === option
|
|
? "bg-primary text-white"
|
|
: "bg-white"
|
|
} border rounded-md px-4 py-2 cursor-pointer transition-colors flex items-center`}
|
|
>
|
|
{translated_value?.[index] || option}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
);
|
|
case "fileinput":
|
|
const fileUrl = filePreviews?.[langId]?.[id]?.url;
|
|
const isPdf = filePreviews?.[langId]?.[id]?.isPdf;
|
|
return (
|
|
<>
|
|
<label htmlFor={id} className="flex gap-2 items-center">
|
|
<div className="flex items-center gap-1 cursor-pointer border border-gray-300 px-2.5 py-1 rounded w-fit">
|
|
<HiOutlineUpload size={24} fontWeight="400" />
|
|
</div>
|
|
{fileUrl && (
|
|
<div className="flex items-center gap-1 text-sm flex-nowrap break-words">
|
|
{isPdf ? (
|
|
<>
|
|
<MdOutlineAttachFile className="file_icon" />
|
|
<CustomLink
|
|
href={fileUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{t("viewPdf")}
|
|
</CustomLink>
|
|
</>
|
|
) : (
|
|
<CustomImage
|
|
src={fileUrl}
|
|
alt="Preview"
|
|
className="h-9 w-9 aspect-square"
|
|
height={36}
|
|
width={36}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
</label>
|
|
<input
|
|
type="file"
|
|
id={id}
|
|
name={id}
|
|
className="hidden"
|
|
onChange={(e) => handleFileChange(id, e.target.files[0])}
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
{t("allowedFileType")}
|
|
</span>
|
|
</>
|
|
);
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
const write = (fieldId, value) =>
|
|
setTranslations((prev) => ({
|
|
...prev,
|
|
[langId]: {
|
|
...prev[langId],
|
|
[fieldId]: value,
|
|
},
|
|
}));
|
|
|
|
const handleFileChange = (id, file) => {
|
|
if (file) {
|
|
const allowedExtensions = /\.(jpg|jpeg|svg|png|pdf)$/i;
|
|
if (!allowedExtensions.test(file.name)) {
|
|
toast.error(t("notAllowedFile"));
|
|
return;
|
|
}
|
|
const fileUrl = URL.createObjectURL(file);
|
|
// Language-scoped preview
|
|
setFilePreviews((prev) => ({
|
|
...prev,
|
|
[langId]: {
|
|
...(prev[langId] || {}),
|
|
[id]: {
|
|
url: fileUrl,
|
|
isPdf: /\.pdf$/i.test(file.name),
|
|
},
|
|
},
|
|
}));
|
|
write(id, file);
|
|
}
|
|
};
|
|
|
|
const handleCheckboxChange = (id, value, checked) => {
|
|
const list = currentTranslation[id] || [];
|
|
const next = checked ? [...list, value] : list.filter((v) => v !== value);
|
|
write(id, next);
|
|
};
|
|
|
|
const handleChange = (id, value) => write(id, value ?? "");
|
|
|
|
const handleVerify = async () => {
|
|
if (VerificationStatus === "approved") {
|
|
toast.error(t("verificationDoneAlready"));
|
|
return;
|
|
}
|
|
if (
|
|
VerificationStatus === "resubmitted" ||
|
|
VerificationStatus === "pending" ||
|
|
VerificationStatus === "submitted"
|
|
) {
|
|
toast.error(t("verificationAlreadyInReview"));
|
|
return;
|
|
}
|
|
|
|
if (
|
|
validateExtraDetails({
|
|
languages,
|
|
defaultLangId,
|
|
extraDetails: translations,
|
|
customFields: UserVeriFields,
|
|
filePreviews,
|
|
})
|
|
) {
|
|
setIsVerifying(true);
|
|
const verification_field_translations =
|
|
prepareCustomFieldTranslations(translations);
|
|
const verification_field_files = prepareCustomFieldFiles(
|
|
translations,
|
|
defaultLangId
|
|
);
|
|
try {
|
|
const res = await sendVerificationReqApi.sendVerificationReq({
|
|
verification_field_translations,
|
|
verification_field_files,
|
|
});
|
|
if (res?.data?.error === false) {
|
|
toast.success(res?.data?.message);
|
|
navigate("/profile");
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
setIsVerifying(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<BreadCrumb title2={t("userVerification")} />
|
|
|
|
{verificationLoading ? (
|
|
<PageLoader />
|
|
) : (
|
|
<div className="container mt-8">
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex items-center gap-3 justify-between">
|
|
<h1 className="text-2xl font-semibold">
|
|
{t("userVerification")}
|
|
</h1>
|
|
{hasTextbox && (
|
|
<AdLanguageSelector
|
|
langId={langId}
|
|
setLangId={setLangId}
|
|
languages={languages}
|
|
setTranslations={setTranslations}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 ">
|
|
{UserVeriFields?.map((field) => {
|
|
if (langId !== defaultLangId && field.type !== "textbox")
|
|
return null;
|
|
|
|
return (
|
|
<div
|
|
className="col-span-1 md:col-span-6 flex flex-col gap-2"
|
|
key={field?.id}
|
|
>
|
|
<Label
|
|
className={`${
|
|
field?.is_required === 1 && defaultLangId === langId
|
|
? "requiredInputLabel"
|
|
: ""
|
|
}`}
|
|
htmlFor={field?.id}
|
|
>
|
|
{field?.translated_name || field?.name}
|
|
</Label>
|
|
{renderCustomFields(field)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<button
|
|
className="px-4 py-2 bg-black text-white text-xl rounded-md disabled:opacity-60"
|
|
disabled={isVerifying}
|
|
onClick={handleVerify}
|
|
>
|
|
{isVerifying ? t("loading") : t("verify")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default Checkauth(UserVerification);
|