+
+ 
+
+
+
+
+ another field type {questionType}
; + } +} + +function JobApplyLink() { + const [jobFormsAll, setJobFormsAll] = useState([]); + const [jobForms, setJobForms] = useState([]); + const [loading, setLoading] = useState(false); + const [applyLink, setApplyLink] = useState(''); + const darkMode = useSelector(state => state.theme.darkMode); + + const fetchJobFormsAll = async () => { + try { + const response = await fetch(`${ENDPOINTS.GET_ALL_JOB_FORMS}`, { + method: 'GET', + headers: { + Authorization: localStorage.getItem('token'), + }, + }); + if (!response.ok) throw new Error(`Failed to fetch all jobForms: ${response.statusText}`); + const data = await response.json(); + setJobFormsAll(data.forms); + } catch (error) { + toast.error(`Error fetching jobFormsAll: ${error.message}`); + } + }; + + const getJobForms = async () => { + if (!applyLink) return; + + try { + setLoading(true); + const selectedFormId = new URL(applyLink).pathname.split('/').pop(); + const response = await fetch(`${ENDPOINTS.APIEndpoint()}/jobforms/${selectedFormId}`, { + method: 'get', + headers: { + Authorization: localStorage.getItem('token'), + }, + }); + + if (!response.ok) throw new Error(`Failed to fetch all Templates: ${response.statusText}`); + + const data = await response.json(); + setJobForms(data); + } catch (error) { + toast.error(`Error fetching JobForms: ${error.message}`); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + void fetchJobFormsAll(); + }, []); + + useEffect(() => { + void getJobForms(); + }, [applyLink]); + + if (loading) { + return 'Loading '; + } + + const questions = jobForms.form?.questions ?? []; + + return ( + + ); +} + +export default JobApplyLink; diff --git a/src/components/Collaboration/JobApplyLink.module.css b/src/components/Collaboration/JobApplyLink.module.css new file mode 100644 index 0000000000..8845a1c155 --- /dev/null +++ b/src/components/Collaboration/JobApplyLink.module.css @@ -0,0 +1,37 @@ + +.lightModeContainer { + background-color:#fff; + color:#000; + margin:10px; + padding:10px; + +} + +.darkModeContainer { + background-color:#1e1e1e; + color:#fff; + margin:10px; + padding:10px; +} + +.ApplyLink-header { + display: flex; + flex-direction: column; + align-items: center; +} + +.buttonGroup{ + display:flex; + flex-direction: row; + justify-content:space-around; + gap:3px; + padding:15px; + margin:50px; + border-radius: 5px; + border: solid 2px #000; +} + +.buttonGroup button{ + border:5px; +} + diff --git a/src/components/Collaboration/JobDetailsLink.jsx b/src/components/Collaboration/JobDetailsLink.jsx new file mode 100644 index 0000000000..b20615599c --- /dev/null +++ b/src/components/Collaboration/JobDetailsLink.jsx @@ -0,0 +1,256 @@ +import { useParams } from 'react-router-dom'; +import { useSelector } from 'react-redux'; +import { useEffect, useState } from 'react'; +import axios from 'axios'; +import { toast } from 'react-toastify'; +import { ApiEndpoint } from '~/utils/URL'; +import { ENDPOINTS } from '../../utils/URL'; +import OneCommunityImage from '../../assets/images/logo2.png'; +import styles from '../Collaboration/JobDetailsLink.module.css'; +import JobFormQuestionField, { isAllowedUploadMimeType } from './jobFormQuestionField'; + +const DETAIL_HTML_FIELDS = ['description', 'requirements', 'projects', 'ourCommunity']; + +function JobDetailsLink() { + const { givenId } = useParams(); + const initialState = { formId: '', answers: [] }; + const [formData, setFormData] = useState({ ...initialState }); + const darkMode = useSelector(state => state.theme.darkMode); + const [jobsDetailById, setJobsDetailById] = useState({}); + const [loading, setLoading] = useState(true); + const [jobForms, setJobForms] = useState({}); + const [uploadingFiles, setUploadingFiles] = useState({}); + const [errors, setErrors] = useState({}); + + const getJobDetailsById = async id => { + setLoading(true); + try { + const response = await fetch(`${ApiEndpoint}/jobs/${id}`, { method: 'GET' }); + if (!response.ok) { + throw new Error(`Failed to fetch jobs: ${response.statusText}`); + } + const data = await response.json(); + setJobsDetailById(data); + } catch (error) { + toast.error(`Error fetching jobs Details: ${error.message}`); + } finally { + setLoading(false); + } + }; + + const getJobForms = async applyLink => { + const formId = applyLink.split('jobforms/')[1]; + try { + const response = await fetch(`${ENDPOINTS.APIEndpoint()}/jobforms/${formId}`, { + method: 'get', + }); + if (!response.ok) throw new Error(`Failed to fetch all jobForms : ${response.statusText}`); + const data = await response.json(); + setJobForms(data); + } catch (error) { + toast.error(`Error fetching JobForms: ${error.message}`); + } + }; + + useEffect(() => { + void getJobDetailsById(givenId); + }, [givenId]); + + useEffect(() => { + if (!loading && jobsDetailById?.applyLink) { + void getJobForms(jobsDetailById.applyLink); + const applyLinkFormId = jobsDetailById.applyLink.split('jobforms/')[1]; + setFormData(prev => ({ ...prev, formId: applyLinkFormId })); + } + }, [loading, jobsDetailById?.applyLink]); + + const getValue = name => { + if (!Array.isArray(formData.answers)) return ''; + const found = formData.answers.find(a => a.questionId === name || a.label === name); + return found ? found.answer : ''; + }; + + const handleChange = (event, idx) => { + const { id, name, value } = event.target; + setFormData(prev => ({ + ...prev, + answers: Array.isArray(prev.answers) + ? [ + ...prev.answers.filter(a => a.questionId !== id), + { questionId: id, questionText: name, answer: value, order: idx }, + ] + : [{ questionId: id, questionText: name, answer: value, order: idx }], + })); + }; + + const handleFileChange = async (event, index) => { + const { id, name } = event.target; + const selFile = event.target.files[0]; + if (!selFile) return; + if (selFile.size > 5 * 1024 * 1024) { + toast.error('File size exceeds 5MB limit. Please choose a smaller file. '); + return; + } + if (!isAllowedUploadMimeType(selFile.type)) { + toast.error('Invalid file type. Please upload a PDF, DOC, DOCX, JPG, PNG, or BMP file.'); + return; + } + try { + setUploadingFiles(prev => ({ ...prev, [name]: true })); + const formResumeData = new FormData(); + formResumeData.append('file', selFile); + const formResumeDataResponse = await axios.post( + `${ENDPOINTS.APIEndpoint()}/jobforms/responses/upload`, + formResumeData, + { headers: { 'Content-Type': 'multipart/form-data' } }, + ); + const dropboxLink = formResumeDataResponse.data?.data?.url; + setFormData(prev => ({ + ...prev, + answers: Array.isArray(prev.answers) + ? [ + ...prev.answers.filter(a => a.questionId !== id), + { questionId: id, questionText: name, answer: dropboxLink, order: index }, + ] + : [{ questionId: id, questionText: name, answer: dropboxLink, order: index }], + })); + } catch (err) { + let errorMessage = 'File upload failed.'; + if (err.response) { + errorMessage = err.response.data?.message || `Server error (${err.response.status})`; + } else if (err.request) { + errorMessage = 'No response from server. Check your connection.'; + } else { + errorMessage = err.message; + } + toast.error(errorMessage); + } finally { + setUploadingFiles(prev => ({ ...prev, [name]: false })); + } + }; + + const submitJobforms = async () => { + try { + setLoading(true); + await axios.post(`${ENDPOINTS.APIEndpoint()}/jobforms/responses`, formData); + setFormData({ ...initialState }); + toast.success('Responses submitted successfully'); + } catch (error) { + if (error.response) { + toast.error(error.response.status); + } else if (error.request) { + toast.error('No response from server. Check your connection.'); + } else { + toast.error(`Failed to submit responses: ${error.message}`); + } + } finally { + setLoading(false); + } + }; + + const inputValidation = () => { + const questions = jobForms.form?.questions; + if (!questions || !formData?.answers) { + return false; + } + + for (const question of questions) { + const answerObj = formData.answers.find(a => a.questionId === question._id); + if (!answerObj?.answer && question.isRequired) { + setErrors({ + [question.questionText]: `${question.questionText} is required`, + }); + toast.error(`${question.questionText} is required`); + return false; + } + setErrors({ [question.questionText]: '' }); + } + return true; + }; + + const handleSubmit = e => { + e.preventDefault(); + if (!inputValidation()) return; + void submitJobforms(); + }; + + const resetForm = e => { + e.preventDefault(); + setFormData({ ...initialState }); + setErrors({}); + }; + + if (loading) { + return ( +Uploading
; + } + + const uploadedUrl = answers?.find(a => a.questionId === question._id)?.answer; + if (!uploadedUrl) return null; + + return ( + <> +File Uploaded Successfully
+ + View File + + + ); +} + +export function JobFormQuestionField({ + question, + index, + getValue, + onChange, + onFileChange, + answers = [], + uploadingFiles = {}, +}) { + const { questionType, _id: questionId, questionText, options } = question; + const commonProps = { + id: questionId, + name: questionText, + onChange: e => onChange(e, index), + }; + + switch (questionType) { + case 'text': + case 'textbox': + return ; + case 'textarea': + return ( + + ); + case 'email': + return ; + case 'date': + return ; + case 'dropdown': + return ( + + ); + case 'checkbox': + return ( + + ); + case 'radio': + return ( + + ); + case 'file': + return ( +another field type {questionType}
; + } +} + +export default JobFormQuestionField; diff --git a/src/components/Collaboration/jobQuestionFollowUps.js b/src/components/Collaboration/jobQuestionFollowUps.js new file mode 100644 index 0000000000..dd3b6f18f7 --- /dev/null +++ b/src/components/Collaboration/jobQuestionFollowUps.js @@ -0,0 +1,47 @@ +export function questionPrompt(question) { + return String(question?.label || question?.questionText || '').toLowerCase(); +} + +export function isDegreeMajorQuestion(question) { + const text = questionPrompt(question); + return text.includes('degree') && text.includes('major'); +} + +export function isTechnologyExperienceQuestion(question) { + const text = questionPrompt(question); + return ( + text.includes('technolog') && + (text.includes('experience') || text.includes('full-time') || text.includes('full time')) + ); +} + +export function selectedTechnologyNames(answer) { + if (Array.isArray(answer)) return answer.filter(Boolean).map(String); + if (answer == null || answer === '') return []; + return [String(answer)]; +} + +export function syncTechnologyDetails(previousDetails, selectedNames) { + const next = {}; + selectedNames.forEach(name => { + next[name] = previousDetails?.[name] || { fullTime: false, years: '' }; + }); + return next; +} + +export function serializeTechnologyAnswer(answer, details) { + return selectedTechnologyNames(answer).map(technology => ({ + technology, + fullTime: Boolean(details?.[technology]?.fullTime), + years: details?.[technology]?.years ?? '', + })); +} + +export function missingTechnologyYearMessages(answer, details) { + return selectedTechnologyNames(answer) + .filter(name => { + const years = String(details?.[name]?.years ?? '').trim(); + return years === '' || Number.isNaN(Number(years)) || Number(years) < 0; + }) + .map(name => `Years of experience for ${name}`); +} diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 1d9caedad9..d4013b98d3 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -47,6 +47,7 @@ import { BADGE_MANAGEMENT, BLUE_SQUARE_EMAIL_MANAGEMENT, DASHBOARD, + JOB_ADS_CREATION, JOB_ANALYTICS_REPORT, LOGOUT, OTHER_LINKS, @@ -220,6 +221,9 @@ export function Header(props) { !isAuthUser, ); const canAccessPRDashboard = props.hasPermission(RoutePermissions.prDashboard, !isAuthUser); + // Job Ads Creation: Owner/Administrator only + const canAccessJobAdsCreation = + props.auth.user.role === 'Owner' || props.auth.user.role === 'Administrator'; const userId = user.userid; const viewerTimeZone = resolveUserTimeZone(props.userProfile?.timeZone); @@ -835,7 +839,7 @@ export function Header(props) { )} - {(canAccessUserManagement || canAccessBadgeManagement || canAccessProjects || canAccessTeams || canAccessPopups || canAccessSendEmails || canAccessScheduleMeetings || canAccessPermissionsManagement || canAccessBlueSquareEmailManagement) && ( + {(canAccessUserManagement || canAccessBadgeManagement || canAccessProjects || canAccessTeams || canAccessPopups || canAccessSendEmails || canAccessScheduleMeetings || canAccessPermissionsManagement || canAccessBlueSquareEmailManagement || canAccessJobAdsCreation) && (