\r\n
\r\n \r\n \r\n {type == 'success' ?\r\n
\r\n \r\n \r\n <>\r\n \r\n View Document \r\n \r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n : null\r\n );\r\n};\r\n//#region render end\r\nexport default DocumentViewModal;","import React, { useState, useRef, useEffect } from 'react';\r\nimport { Modal, Button, ProgressBar } from 'react-bootstrap';\r\nimport uploadIcon from '../../assets/img/allDocumentList/uploadIcon.png'\r\nimport styles from '../../views/my-profile/Index.module.css'\r\nimport { uploadFilesApi } from '../../actions/FileUploadActions';\r\nimport 'react-pdf/dist/esm/Page/AnnotationLayer.css';\r\nimport 'react-pdf/dist/esm/Page/TextLayer.css';\r\nimport { DOCUMENT_UPLOAD_LIMIT } from '../../config.tsx';\r\nimport CommonAlert from '../../common-components/CommonAlert.jsx';\r\nimport ImageCrop from './ImageCrop.jsx';\r\nimport trashIcon from \"./../../assets/img/icons/Airmigrate icons/512px/Trash.png\";\r\nimport editIcon from \"./../../assets/img/icons/Airmigrate icons/512px/Edit.png\";\r\nimport pdfIcon from \"./../../assets/img/icons/Airmigrate icons/512px/pdf_icon.png\";\r\nimport messageHelper from '../../utilities/helpers/messageHelper.js';\r\nconst FileUploadModal = (props) => {\r\n //#region consts start\r\n const { show, handleClose, documentId, FunctionToRefreshAfterUpload, isReceivedRequest, setCount, isMyProfileDocs, isPopupChat = false, setModalAlertsArray, modalAlertsArray, visaUpload = false, popupTitle = 'Upload Files', isChatUpload, mFiles, setMfiles, demoCompress } = props;\r\n const [uploadProgress, setUploadProgress] = useState(0);\r\n const dropRef = useRef(null);\r\n // Create references to the hidden file input elements\r\n const hiddenFileInput1 = useRef(null);\r\n const hiddenFileInput2 = useRef(null);\r\n //Alert states \r\n const [alertsArray, setAlertsArray] = useState([]);\r\n const [uploadCount, setuploadCount] = useState(0);\r\n // conts for files selected\r\n const [filesObjectsArray, setFilesObjectsArray] = useState([]);\r\n const [isErrorMessages, setIsErrorMessages] = useState(false);\r\n const [tempFileArray, setTempFileArray] = useState([]);\r\n const [isUpload, setIsupload] = useState(false);\r\n const [isDocumentUpload, setIsDocumentUpload] = useState(true);\r\n const [newFileCroppedArray, setNewFileCroppedArray] = useState([])\r\n\r\n //#endregion conts\r\n\r\n //#region functions start\r\n // Alert handle function\r\n const handleAlert = (id) => {\r\n let array = [];\r\n for (let i = 0; i < alertsArray.length; i++) {\r\n if ((alertsArray[i].id) == id) {\r\n array = alertsArray.pop();\r\n }\r\n }\r\n setuploadCount(Math.floor(Math.random() * 1000))\r\n }\r\n\r\n useEffect(() => {\r\n setFilesObjectsArray([]);\r\n setUploadProgress(0);\r\n if (isChatUpload) {\r\n handleFile(mFiles);\r\n }\r\n }, [uploadCount, mFiles, isChatUpload, show]);\r\n \r\n // function to handle file change event \r\n const handleFileChange = (e) => {\r\n const selectedFiles = Array.from(e.target.files);\r\n if (selectedFiles) {\r\n handleFile(selectedFiles); /* Calling the handleFile function */\r\n }\r\n };\r\n\r\n //function runs when the Button component is clicked to open file input\r\n const handleClick = (event, fileType) => {\r\n setUploadProgress(0);\r\n if (fileType == 'image') {\r\n hiddenFileInput1?.current.click();\r\n } else if (fileType == 'pdf') {\r\n hiddenFileInput2?.current.click();\r\n }\r\n };\r\n\r\n // function to handle selected file and display it on screen\r\n const handleFile = (selectedFiles) => {\r\n const newObjectsArray = selectedFiles.map(file => {\r\n var newFileArray = { 'myFileData': file }\r\n var fileError = ''\r\n var isCropped = true\r\n if (!['image/jpeg', 'image/png', 'application/pdf'].includes(file.type)) {\r\n fileError = messageHelper('file-type-error');\r\n isCropped = false\r\n }else if (file.size > DOCUMENT_UPLOAD_LIMIT) { // 10MB limit\r\n fileError = fileError = messageHelper('file-size-error');\r\n isCropped = false\r\n }\r\n newFileArray['error'] = fileError\r\n newFileArray['isCropped'] = isCropped\r\n return newFileArray\r\n });\r\n setTempFileArray([...newObjectsArray])\r\n // setFilesObjectsArray([...filesObjectsArray, ...newObjectsArray])\r\n };\r\n\r\n useEffect(() => {\r\n setFilesObjectsArray([...filesObjectsArray, ...tempFileArray])\r\n }, [tempFileArray])\r\n\r\n // Function to handel drag and drop of the file onto the Dropzone area\r\n const handleDragOver = (e) => {\r\n e.preventDefault();\r\n };\r\n\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n const files = Array.from(e.dataTransfer.files);\r\n if (files.length > 0) {\r\n handleFile(files);\r\n }\r\n };\r\n\r\n // Function to handel file upload \r\n const handleUpload = async () => {\r\n setIsupload(true);\r\n if (!filesObjectsArray) return;\r\n\r\n // Data to send with file \r\n let formData = new FormData();\r\n filesObjectsArray.forEach((file) => {\r\n if (!file.error) {\r\n formData.append('docs', file.myFileData);\r\n }\r\n });\r\n formData.append('documents_id', documentId);\r\n // Initialize the upload progress\r\n setUploadProgress(0);\r\n // Progress bar update settings\r\n const targetTime = 60; // total time in seconds (1 minutes)\r\n const intervalTime = 500; // interval in milliseconds (0.5 second)\r\n const totalIntervals = targetTime * (1000 / intervalTime);\r\n const progressIncrement = 100 / totalIntervals;\r\n\r\n // Interval to update the progress bar\r\n const interval = setInterval(() => {\r\n setUploadProgress((oldProgress) => {\r\n if (oldProgress >= 100) {\r\n clearInterval(interval);\r\n return 100;\r\n }\r\n return Math.min(oldProgress + progressIncrement, 100);\r\n });\r\n }, intervalTime);\r\n\r\n let URL = 'upload-document';\r\n if (demoCompress) {\r\n URL = 'upload-document-demo'\r\n }\r\n if (isMyProfileDocs) {\r\n URL = 'upload-agent-document';\r\n }\r\n if (visaUpload) {\r\n URL = 'upload-visa-document';\r\n }\r\n try {\r\n const response = await uploadFilesApi(URL, formData);\r\n if (response.status_code === 1) {\r\n handleCancel();\r\n setModalAlertsArray([...modalAlertsArray, { id: `file_upload${modalAlertsArray.length}`, type: 'success', message: response?.message }]);\r\n if (isReceivedRequest) {\r\n setCount(Math.floor(Math.random() * 1000));\r\n }\r\n FunctionToRefreshAfterUpload();\r\n setIsupload(false);\r\n clearInterval(interval);\r\n } else {\r\n setAlertsArray([...alertsArray, { id: `file_upload${alertsArray.length}`, type: 'danger', message: response?.message }]);\r\n setUploadProgress(0);\r\n setIsupload(false);\r\n clearInterval(interval);\r\n }\r\n } catch (error) {\r\n clearInterval(interval);\r\n console.error('Upload failed:', error);\r\n setAlertsArray([...alertsArray, { id: `file_upload${alertsArray.length}`, type: 'danger', message: 'An error occurred during upload.' }]);\r\n setUploadProgress(0);\r\n setIsupload(false);\r\n }\r\n };\r\n // function to cancel the upload process\r\n const handleCancel = () => {\r\n setUploadProgress(0);\r\n setFilesObjectsArray([]);\r\n setIsErrorMessages(false);\r\n setTempFileArray([]);\r\n setIsupload(false);\r\n if (mFiles && isChatUpload) {\r\n setMfiles([]);\r\n }\r\n handleClose();\r\n };\r\n\r\n const getFileToUpload = (file, previewShow, index) => {\r\n setNewFileCroppedArray([file, index, previewShow]);\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if (newFileCroppedArray) {\r\n var myDataCheck = []\r\n for (let index = 0; index < filesObjectsArray.length; index++) {\r\n const element = filesObjectsArray[index];\r\n\r\n if (index == newFileCroppedArray[1]) {\r\n element.myFileData = newFileCroppedArray[0]\r\n element.isCropped = false\r\n }\r\n myDataCheck.push(element)\r\n }\r\n setFilesObjectsArray([...myDataCheck]);\r\n }\r\n\r\n }, [newFileCroppedArray]);\r\n\r\n /* removing items from file Array */\r\n const removeItemFromArray = (item) => {\r\n if (filesObjectsArray) {\r\n let myDataCheck = []\r\n for (let index = 0; index < filesObjectsArray.length; index++) {\r\n const element = filesObjectsArray[index];\r\n if (element.myFileData.name !== item.myFileData.name) {\r\n myDataCheck.push(element)\r\n }\r\n }\r\n setFilesObjectsArray([...myDataCheck]);\r\n }\r\n }\r\n /* useEfect for error check function run while array is ready */\r\n useEffect(() => {\r\n checkErrors();\r\n }, [filesObjectsArray])\r\n\r\n /* function to check errors */\r\n const checkErrors = () => {\r\n let errorArray = [];\r\n if (filesObjectsArray) {\r\n for (let index = 0; index < filesObjectsArray.length; index++) {\r\n const element = filesObjectsArray[index];\r\n if (element.error) {\r\n errorArray.push(element.error);\r\n }\r\n }\r\n if (errorArray.length >= 1) {\r\n setIsErrorMessages(true);\r\n } else {\r\n setIsErrorMessages(false);\r\n }\r\n }\r\n }\r\n\r\n /* recrop functionality for images */\r\n const recropImage = (item) => {\r\n if (filesObjectsArray) {\r\n var myDataCheck = []\r\n for (let index = 0; index < filesObjectsArray.length; index++) {\r\n const element = filesObjectsArray[index];\r\n if (element.myFileData.name == item.myFileData.name) {\r\n element.myFileData = item.myFileData;\r\n element.isCropped = true\r\n }\r\n myDataCheck.push(element)\r\n }\r\n setFilesObjectsArray([...myDataCheck]);\r\n }\r\n }\r\n //#endregion functions end\r\n //#region render\r\n return (\r\n \r\n {!isUpload &&\r\n
\r\n \r\n ))}\r\n \r\n 
{ removeItemFromArray(item) }} className={styles.canelIconBtn} title=\"Remove\" />\r\n {item.myFileData.type.startsWith('image/') && !(item.error) && !(item.isCropped) &&\r\n 
{ recropImage(item) }} className={styles.canelIconBtn} title=\"Recrop\" />\r\n }\r\n
\r\n }\r\n \r\n {item.error && 
\r\n \r\n }\r\n
\r\n {item.error}
}\r\n {item.myFileData.type.startsWith('image/') ? (item.isCropped ?\r\n (\r\n\r\n
\r\n )\r\n :\r\n (\r\n <>\r\n {item.myFileData.type.startsWith('application/pdf') &&\r\n <>\r\n \r\n
\r\n \r\n
\r\n File Name: {item.myFileData.name}
\r\nFile Size: {(item.myFileData.size / 1024 / 1024).toFixed(2)} MB
\r\nPreview not available for this file type.
\r\n\r\n
\r\n \r\n )\r\n }\r\n \r\n
\r\n File Name: {item.myFileData.name}
\r\nFile Size: {(item.myFileData.size / 1024 / 1024).toFixed(2)} MB
\r\n\r\n \r\n \r\n\r\n
\r\n \r\n ) :\r\n (\r\n \r\n 
\r\n
\r\n\r\n )}\r\n {!isUpload &&\r\n \r\n
\r\n }\r\n {popupTitle == 'Visa Upload' && This is needed to ensure we are not dealing with a bot and to ensure you get the best deals. Validated clients get the first priority. }\r\n\r\n \r\n
\r\n { handleClick(e, 'image') }} >Select Images
\r\n \r\n\r\n
\r\n { handleClick(e, 'pdf') }} >Select PDF Files
\r\n \r\n\r\n
\r\n }\r\n \r\n );\r\n};\r\n//#endregion render end\r\nexport default ImageCrop;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Nav, Tab } from '@themesberg/react-bootstrap';\r\nimport { Col, Row, Form } from '@themesberg/react-bootstrap';\r\n\r\n//Local imports\r\nimport { CapitalizeAllWords } from '../../common-components/StringConversions';\r\n\r\nconst SelectedTemplateView = ({ selectedId, templateDetails }) => {\r\n\r\n //#region State and Variables\r\n const [isCheckBoxSelected, setIsCheckBoxSelected] = useState(false);\r\n const [templateObject, setTemplateObject] = useState({});\r\n const [applicantsDoc, setApplicantsDoc] = useState([]);\r\n const [sponsorsDoc, setSponsorsDoc] = useState([]);\r\n //#endregion\r\n\r\n //#region useEffect\r\n useEffect(() => {\r\n getTemplateDetails();\r\n }, [selectedId])\r\n //#endregion\r\n\r\n //#region Functions\r\n const getTemplateDetails = () => {\r\n\r\n console.log(\"selectedId, templateDetails\", selectedId, templateDetails);\r\n //get selected template details\r\n for (let i = 0; i < templateDetails.length; i++) {\r\n if (templateDetails[i].id == selectedId) {\r\n setTemplateObject(templateDetails[i]);\r\n console.log('templateObject', templateDetails[i]);\r\n\r\n //get applicants doc\r\n let applicants = templateDetails[i].applicants_doc\r\n console.log('applicants doc', applicants, typeof (applicants),\r\n typeof (eval(applicants))\r\n );\r\n setApplicantsDoc(eval(applicants));\r\n\r\n //get sponsors doc\r\n let sponsors = templateDetails[i].sponser_doc\r\n console.log('sponsors doc', sponsors, typeof (sponsors),\r\n typeof (eval(sponsors))\r\n );\r\n setSponsorsDoc(eval(sponsors));\r\n }\r\n }\r\n\r\n }\r\n //#endregion\r\n\r\n //#region JSX\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n\r\n\r\n {/* Tabs Section*/}\r\n
Select Documents
\r\n\r\n
\r\n List of Documents
\r\n\r\n {doc.type} { doc.options ? getColumnName(doc.options) : \"\"}\r\n
\r\n\r\n \r\n {doc.uploaded &&\r\n <>\r\n View}\r\n >\r\n viewHandleOpen(doc.document_id)}\r\n >\r\n Re Upload}\r\n >\r\n { handleShow(doc.id) }}\r\n >\r\n Upload}\r\n >\r\n { handleShow(doc.id) }}\r\n >\r\n \r\n
\r\n \r\n Not Available
\r\n }\r\n