diff --git a/src/pages/(auth)/civil-id/page.tsx b/src/pages/(auth)/civil-id/page.tsx index 81a02fe..8cf5127 100644 --- a/src/pages/(auth)/civil-id/page.tsx +++ b/src/pages/(auth)/civil-id/page.tsx @@ -27,6 +27,7 @@ import { useTranslation } from "react-i18next"; import Loading from "./loading"; import AuthLayout from "../layout"; import { FormDateTimeInput } from "@/components/ui/form-datetime"; +import { toast } from "@/hooks/use-toast"; export default function CivilIdPage() { @@ -35,6 +36,8 @@ export default function CivilIdPage() { const [removingBackId, setRemovingBackId] = useState(false); const [uploadingFrontId, setUploadingFrontId] = useState(false); const [uploadingBackId, setUploadingBackId] = useState(false); + const [frontIdPreviewFailed, setFrontIdPreviewFailed] = useState(false); + const [backIdPreviewFailed, setBackIdPreviewFailed] = useState(false); const { user } = useAppSelector(state => state.user); @@ -178,6 +181,10 @@ export default function CivilIdPage() { }); } + function removeCivilPhotoErrorDescription(error: any) { + return errorMessage(error?.response?.data?.message || error?.message || t("Unable to remove ID photo. Please try again.")); + } + function resetFrontId() { setRemovingFrontId(true); @@ -187,12 +194,19 @@ export default function CivilIdPage() { form.trigger('candidate_civil_photo_front'); form.setValue('candidate_civil_photo_front_url', ''); form.trigger('candidate_civil_photo_front_url'); + setFrontIdPreviewFailed(false); dispatch(setUser({ user: { ...user, candidate_civil_photo_front: null } })); + }).catch((error) => { + toast({ + title: t("Error"), + description: removeCivilPhotoErrorDescription(error), + variant: "destructive", + }); }).finally(() => { setRemovingFrontId(false); }); @@ -207,17 +221,48 @@ export default function CivilIdPage() { form.trigger('candidate_civil_photo_back'); form.setValue('candidate_civil_photo_back_url', ''); form.trigger('candidate_civil_photo_back_url'); + setBackIdPreviewFailed(false); dispatch(setUser({ user: { ...user, candidate_civil_photo_back: null } })); + }).catch((error) => { + toast({ + title: t("Error"), + description: removeCivilPhotoErrorDescription(error), + variant: "destructive", + }); }).finally(() => { setRemovingBackId(false); }); } + function handleFrontIdPreviewError() { + if (!frontIdPreviewFailed) { + toast({ + title: t("Error"), + description: t("Unable to load ID front preview. You can upload a new image or remove the current one."), + variant: "destructive", + }); + } + + setFrontIdPreviewFailed(true); + } + + function handleBackIdPreviewError() { + if (!backIdPreviewFailed) { + toast({ + title: t("Error"), + description: t("Unable to load ID back preview. You can upload a new image or remove the current one."), + variant: "destructive", + }); + } + + setBackIdPreviewFailed(true); + } + function onCivilIdUploaded(res: any) { console.log('onCivilIdUploaded', res); @@ -229,6 +274,7 @@ export default function CivilIdPage() { form.setValue('candidate_civil_photo_back_url', import.meta.env.VITE_PERMANENT_BUCKET_URL + 'photos/' + res.candidate_civil_photo_back); form.setValue('candidate_civil_photo_back', res.candidate_civil_photo_back); + setBackIdPreviewFailed(false); form.trigger('candidate_civil_photo_back_url'); form.trigger('candidate_civil_photo_back'); } @@ -237,6 +283,7 @@ export default function CivilIdPage() { form.setValue('candidate_civil_photo_front_url', import.meta.env.VITE_PERMANENT_BUCKET_URL + 'photos/' + res.candidate_civil_photo_front); form.setValue('candidate_civil_photo_front', res.candidate_civil_photo_front); + setFrontIdPreviewFailed(false); form.trigger('candidate_civil_photo_front_url'); form.trigger('candidate_civil_photo_front'); } @@ -277,6 +324,12 @@ export default function CivilIdPage() { text-[40px] font-bold leading-[56px] mt-[102px] mb-[38px]"> {t('Civil ID Information')} + + { query.get('fromProfile') &&
+ +
} { /**block-inline max-w-[313px] xs:max-w-full xs:w-full */}
@@ -351,7 +404,10 @@ export default function CivilIdPage() { { form.getValues().candidate_civil_photo_front &&
- resetFrontId()} src={form.getValues().candidate_civil_photo_front_url || ""} className="w-full"> + { !frontIdPreviewFailed && } + { frontIdPreviewFailed &&
+ {t("Unable to load ID front preview.")} +
}