Hello ${growRes.referrer.metadata.tcHandle},
You just made our day! Sharing a Topcoder Gig Work opportunity is the BEST compliment you can give us. So pat yourself on the back, give yourself a hi-five, or just stand up and dance like no one is watching. You deserve it!
Did you know many of our Topcoder members consider earning through Topcoder to be life changing? There must be something in the air. You have just taken the first step into helping someone you know change their life for the better.
Because of that, we are excited to reward you. $500 is earned for every referral you send us that gets the gig. Learn more here.
Thank you for sharing Topcoder Gigs and hope to see you around here again soon!
- The Topcoder Community Team
`, - }], - }); - } - // respond to API call - const data = await applyResponse.json(); - return res.send(data); - } catch (err) { - return next(err); - } - } - - /** - * Get user profile endpoint. - * @return {Promise} - * @param {Object} the request. - */ - async getProfile(req, res, next) { - try { - // get candidate by email - const candidate = await this.getCandidateByEmail(req.authUser.email); - // return error if getCandidateByEmail operation failed - if (candidate.error) { - const error = candidate; - logger.error(error); - const responseNoProfileMapping = { - hasProfile: false, - }; - return res.send(responseNoProfileMapping); - } - // apply desired response format - const responseMapping = { - hasProfile: true, - phone: candidate.contact_number, - salaryExpectation: candidate.salary_expectation, - skill: candidate.skill, - resume: candidate.resume, - availability: _.isNil(candidate.available_from) ? true - : new Date(candidate.available_from) <= new Date(), - }; - return res.send(responseMapping); - } catch (err) { - return next(err); - } - } - - /** - * Update user profile endpoint. - * @return {Promise} - * @param {Object} the request. - */ - async updateProfile(req, res, next) { - const { body, file } = req; - // validate provided data - const validationResult = updateProfileSchema.validate(body); - if (validationResult.error) { - return res.status(400).send({ message: validationResult.error.message }); - } - const fileData = new FormData(); - if (file) { - fileData.append('resume', file.buffer, file.originalname); - } - try { - // get candidate by email - const candidate = await this.getCandidateByEmail(req.authUser.email); - // return error if getCandidateByEmail operation failed - if (candidate.error) { - const error = candidate; - logger.error(error); - return res.status(error.status).send(error); - } - const candidateSlug = candidate.slug; - const form = { - city: body.city, - locality: body.countryName, - contact_number: body.phone, - available_from: body.availability === 'true' ? new Date().toISOString() : new Date('2100-01-01').toISOString(), - }; - // update candidate profile - const response = await fetch(`${this.private.baseUrl}/v1/candidates/${candidateSlug}`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: this.private.authorization, - }, - body: JSON.stringify(form), - }); - if (response.status >= 300) { - const error = { - error: true, - status: response.status, - url: `${this.private.baseUrl}/v1/candidates${candidateSlug}`, - form, - errorObj: await response.json(), - }; - logger.error(error); - return res.status(error.status).send(error); - } - // Attach resume to candidate if uploaded - if (file) { - const formHeaders = fileData.getHeaders(); - const fileResponse = await fetch(`${this.private.baseUrl}/v1/candidates/${candidateSlug}`, { - method: 'POST', - headers: { - Authorization: this.private.authorization, - ...formHeaders, - }, - body: fileData, - }); - if (fileResponse.status >= 300) { - const error = { - error: true, - status: fileResponse.status, - url: `${this.private.baseUrl}/v1/candidates/${candidateSlug}`, - file, - formHeaders, - errorObj: await fileResponse.json(), - }; - logger.error(error); - return res.status(error.status).send(error); - } - } - return res.status(204).end(); - } catch (err) { - return next(err); - } - } - - /** - * Get candidate by email - * @return {object} result of the search operation - * @param {string} email email address of the user. - */ - async getCandidateByEmail(email) { - const query = { - email, - }; - const url = `${this.private.baseUrl}/v1/candidates/search?${qs.stringify(query)}`; - const response = await fetch(url, { - method: 'GET', - headers: { - Authorization: this.private.authorization, - }, - }); - if (response.status === 429) { - await new Promise(resolve => setTimeout(resolve, 30000)); // wait 30sec - return this.getCandidateByEmail(email); - } - if (response.status >= 300) { - const error = { - error: true, - status: response.status, - url, - errObj: await response.json(), - }; - return error; - } - const data = await response.json(); - // return error object if candidate with provided email not found - if ((_.isArray(data) && data.length === 0) || data.data.length === 0) { - const error = { - error: true, - status: 404, - url, - errObj: { - message: `No candidate was found with email: ${email}`, - }, - }; - return error; - } - // return first candidate - return data.data[0]; - } -} - -// Self update cache on expire to keep it fresh -gigsCache.on('expired', async (key) => { - if (key === CACHE_KEY) { - const ss = new RecruitCRMService(); - const gigs = await ss.getAll({ - job_status: 1, - }); - if (!gigs.error) { - gigsCache.set(CACHE_KEY, gigs); - } - } -}); diff --git a/src/shared/actions/engagements.js b/src/shared/actions/engagements.js new file mode 100644 index 0000000000..16dbc8cd64 --- /dev/null +++ b/src/shared/actions/engagements.js @@ -0,0 +1,47 @@ +import _ from 'lodash'; +import { createActions } from 'redux-actions'; +import { errors } from 'topcoder-react-lib'; +import getEngagements from 'services/engagements'; + +const { fireErrorMessage } = errors; + +const PAGE_SIZE = 10; + +function getEngagementsInit(uuid, page, filters) { + return { uuid, page, filters }; +} + +async function getEngagementsDone(uuid, page, filters, tokenV3) { + try { + const { engagements, meta } = await getEngagements(page, PAGE_SIZE, filters, tokenV3); + + return { + uuid, + engagements, + meta, + page, + }; + } catch (error) { + const { message: errorMessage } = error || {}; + let message = 'Unknown error'; + if (errorMessage) { + message = errorMessage; + } else if (typeof error === 'string') { + message = error; + } + fireErrorMessage('Error Loading Engagements', message); + const rejection = error instanceof Error ? error : new Error(message); + rejection.uuid = uuid; + rejection.originalError = error; + return Promise.reject(rejection); + } +} + +export default createActions({ + ENGAGEMENTS: { + GET_ENGAGEMENTS_INIT: getEngagementsInit, + GET_ENGAGEMENTS_DONE: getEngagementsDone, + DROP_ENGAGEMENTS: _.noop, + SET_FILTER: _.identity, + }, +}); diff --git a/src/shared/actions/recruitCRM.js b/src/shared/actions/recruitCRM.js deleted file mode 100644 index 1597b45fa7..0000000000 --- a/src/shared/actions/recruitCRM.js +++ /dev/null @@ -1,202 +0,0 @@ -import { redux } from 'topcoder-react-utils'; -import Service from 'services/recruitCRM'; -import _ from 'lodash'; -import { getCustomField } from 'utils/gigs'; - -/** - * Jobs page fetch init - */ -function getJobsInit() { - return {}; -} - -/** - * Jobs page fetch done - */ -async function getJobsDone(query) { - const ss = new Service(); - const res = await ss.getAllJobs(query); - - return { - data: res, - }; -} - -function getJobApplicationsInit() { - return {}; -} - -async function getJobApplicationsDone(tokenV3) { - const ss = new Service(); - const res = await ss.getJobApplications(tokenV3); - return { - data: res, - }; -} - -/** - * Job fetch init - */ -function getJobInit(id) { - return { id }; -} - -/** - * Job fetch done - */ -async function getJobDone(id) { - const ss = new Service(); - const res = await ss.getJob(id); - - return { - id, - data: res, - }; -} - -/** - * Apply for Job init - */ -function applyForJobInit(job, payload) { - return { id: job.slug, payload }; -} - -/** - * Helper utitlity - * @param {object} joib The job object - * @param {object} payload The apply form payload - */ -function normalizeRecruitPayload(job, payload) { - const perJob = [ - `${job.name} ->`, - `Pay Expectation: ${payload.payExpectation}`, - `Able to work during timezone? ${payload.timezoneConfirm.filter(s => s.value).map(() => getCustomField(job.custom_fields, 'Timezone')).join(',')}`, - `Am I ok to work the duration? ${payload.durationConfirm.filter(s => s.value).map(() => getCustomField(job.custom_fields, 'Duration')).join(',')}`, - ]; - const referral = _.find(payload.reffereal, { selected: true }); - const normalized = { - last_name: payload.lname, - first_name: payload.fname, - email: payload.email, - contact_number: payload.phone, - city: payload.city, - locality: _.find(payload.country, { selected: true }).label, - salary_expectation: _.trim(payload.payExpectation), - skill: payload.skills.filter(s => s.selected).map(s => s.label).join(','), - custom_fields: [ - { - field_id: 1, - value: payload.tcProfileLink || (payload.handle ? `https://topcoder.com/members/${payload.handle}` : ''), - }, - { - field_id: 2, - value: payload.handle || '', - }, - { - field_id: 14, - value: perJob.join(','), - }, - ], - }; - if (referral) { - normalized.custom_fields.push({ - field_id: 13, - value: referral.label, - }); - } - if (payload.fileCV) { - normalized.resume = payload.fileCV; - } - - return normalized; -} - -/** - * Apply for Job done - */ -async function applyForJobDone(job, payload, tokenV3) { - const ss = new Service(); - try { - const res = await ss.applyForJob(job.slug, normalizeRecruitPayload(job, payload), tokenV3); - - return { - id: job.slug, - data: res, - }; - } catch (error) { - return { - id: job.slug, - data: { - error: true, - errorObj: error, - }, - }; - } -} - -/** - * Search for cnadidate in recruit - */ -function searchCandidatesInit(email) { - return { email }; -} - -/** - * Search for cnadidate in recruit and get profile if available - * @param {string} email the email to search - */ -async function searchCandidatesDone(email) { - const ss = new Service(); - try { - const res = await ss.searchCandidates(email); - - return { - email, - data: res, - }; - } catch (error) { - return { - email, - data: { - error: true, - errorObj: error, - }, - }; - } -} - -/** - * Gigs fetch init - */ -function getGigsInit() { - return {}; -} - -/** - * Gigs fetch done - */ -async function getGigsDone(query) { - const ss = new Service(); - const res = await ss.getTaasJobs(query); - - return { - data: res.jobs, - }; -} - -export default redux.createActions({ - RECRUIT: { - GET_JOBS_INIT: getJobsInit, - GET_JOBS_DONE: getJobsDone, - GET_JOB_INIT: getJobInit, - GET_JOB_DONE: getJobDone, - APPLY_FOR_JOB_INIT: applyForJobInit, - APPLY_FOR_JOB_DONE: applyForJobDone, - SEARCH_CANDIDATES_INIT: searchCandidatesInit, - SEARCH_CANDIDATES_DONE: searchCandidatesDone, - GET_JOB_APPLICATIONS_INIT: getJobApplicationsInit, - GET_JOB_APPLICATIONS_DONE: getJobApplicationsDone, - GET_GIGS_INIT: getGigsInit, - GET_GIGS_DONE: getGigsDone, - }, -}); diff --git a/src/shared/components/Content/index.jsx b/src/shared/components/Content/index.jsx index a2e2d46815..cb683fa6bd 100644 --- a/src/shared/components/Content/index.jsx +++ b/src/shared/components/Content/index.jsx @@ -836,11 +836,6 @@ export default function Content() { {' '} - Demo of Thrive Articles Feed component - - Gigs Feed - - {' '} - - Demo of Gigs Feed component TCO Leaderboards diff --git a/src/shared/components/Contentful/AppComponent/index.jsx b/src/shared/components/Contentful/AppComponent/index.jsx index 22ba9de307..90b08f88ee 100644 --- a/src/shared/components/Contentful/AppComponent/index.jsx +++ b/src/shared/components/Contentful/AppComponent/index.jsx @@ -9,7 +9,6 @@ import PT from 'prop-types'; import React from 'react'; import { errors } from 'topcoder-react-lib'; import Leaderboard from 'containers/tco/Leaderboard'; -import RecruitCRMJobs from 'containers/Gigs/RecruitCRMJobs'; import GSheet from 'containers/GSheet'; import PathSelector from 'components/MemberPath/PathSelector'; @@ -52,9 +51,6 @@ export function AppComponentSwitch(appComponent) { /> ); } - if (type === 'RecruitCRM-Jobs') { - return
-
- );
-}
-
-GigsFeed.defaultProps = {
- gigs: [],
- theme: 'light',
-};
-
-GigsFeed.propTypes = {
- gigs: PT.arrayOf(PT.shape()),
- loading: PT.bool.isRequired,
- theme: PT.oneOf(['dark', 'light']),
-};
diff --git a/src/shared/components/Dashboard/GigsFeed/styles.scss b/src/shared/components/Dashboard/GigsFeed/styles.scss
deleted file mode 100644
index 060b9e0dbe..0000000000
--- a/src/shared/components/Dashboard/GigsFeed/styles.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-@import "~styles/mixins";
-
-.loading {
- height: 195px;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-
- @include xs-to-sm {
- height: 285px;
- }
-}
-
-.container {
- @include roboto-regular;
-
- color: $tc-gray-90;
- margin-bottom: 30px;
-}
-
-.header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 0;
-
- .title {
- @include barlow-semi-bold;
-
- font-size: 16px;
- }
-
- .allLink {
- color: $dashboard-teal;
- font-size: 13px;
- line-height: 20px;
-
- &:hover {
- text-decoration: none !important;
- }
-
- span {
- @include xs-to-sm {
- display: none;
- }
- }
- }
-}
-
-.gigs {
- padding: 0 14px;
- background-color: $tc-white;
- border-radius: 8px;
- height: 195px !important;
- width: 100%;
-
- @include xs-to-sm {
- height: 285px !important;
- }
-
- .row {
- display: flex;
- font-size: 14px;
- line-height: 18px;
- align-items: center;
- justify-content: space-between;
- padding: 10px 0;
- border-top: 1px solid $tc-gray-05;
-
- a {
- margin-right: 8px;
- }
-
- .salary {
- display: flex;
- flex-wrap: nowrap;
- align-items: flex-end;
- justify-content: center;
- }
-
- .amount {
- text-align: right;
- }
-
- .rateType {
- margin-left: 7px;
- text-align: right;
- }
-
- &:first-child {
- border: none;
- }
-
- @include xs-to-sm {
- .salary {
- display: flex;
- flex: 1 0 90px;
- flex-direction: column;
- }
-
- .amount {
- white-space: nowrap;
- }
- }
- }
-}
-
-.light {
- background: transparent;
-}
-
-.container.dark {
- color: $tc-white;
-
- .header {
- .allLink {
- color: $dashboard-dark-link;
- text-decoration: underline;
- }
- }
-
- .gigs {
- background: $dashboard-dark-card-bg;
-
- .row {
- border-top: 1px solid $dashboard-dark-bg;
- }
- }
-}
diff --git a/src/shared/components/GUIKit/DropdownSingleSkills/index.jsx b/src/shared/components/GUIKit/DropdownSingleSkills/index.jsx
index 2c43181844..8c6a08080d 100644
--- a/src/shared/components/GUIKit/DropdownSingleSkills/index.jsx
+++ b/src/shared/components/GUIKit/DropdownSingleSkills/index.jsx
@@ -21,6 +21,12 @@ function DropdownSingleSkills({
loadOptions,
createText,
}) {
+ let normalizedTerms = null;
+ if (terms && typeof terms === 'object') {
+ normalizedTerms = terms;
+ } else if (terms) {
+ normalizedTerms = { value: terms, label: terms };
+ }
const containerRef = useRef(null);
useEffect(() => {
const selectInput = containerRef.current.getElementsByClassName('Select-input');
@@ -79,17 +85,11 @@ function DropdownSingleSkills({
- GIGS
- View all gigs
-
-
-
- {loading ?
-
- {gig.title}
-
-
- ))}
-
-
- ${`${(gig.minSalary || 0).toLocaleString()} - $${
- (gig.maxSalary || 0).toLocaleString()}`
- }
-
- {formatRateType(gig.rateType)}
-
-
- {
- tag !== 'n/a' && 
- }
- {job.name}
-
- );
-}
-
-JobListCard.defaultProps = {
-
-};
-
-JobListCard.propTypes = {
- job: PT.shape().isRequired,
- optimizely: PT.shape().isRequired,
-};
-
-export default withOptimizely(JobListCard);
diff --git a/src/shared/components/GUIKit/JobListCard/style.scss b/src/shared/components/GUIKit/JobListCard/style.scss
deleted file mode 100644
index cd3b04f59a..0000000000
--- a/src/shared/components/GUIKit/JobListCard/style.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-@import "~components/GUIKit/Assets/Styles/default";
-@import "~components/Contentful/default";
-
-.container {
- border: 1px solid #e9e9e9;
- border-radius: 10px;
- display: flex;
- flex-direction: column;
- color: #2a2a2a;
- padding: 25px 35px 25px 44px;
- margin-bottom: 15px;
- position: relative;
-
- @include gui-kit-headers;
- @include gui-kit-content;
- @include roboto-regular;
-
- .gig-tag {
- position: absolute;
- top: -1px;
- left: 10px;
- width: 24px;
- height: 56px;
- border-radius: 0;
- }
-
- .gig-name,
- .gig-name:visited,
- .gig-name:active,
- .gig-name:hover {
- color: #1e94a3;
- margin-top: 0;
- margin-bottom: 12px;
- text-decoration: none;
- font-family: Barlow, sans-serif;
- font-size: 20px;
- font-weight: 600;
- line-height: 24px;
- text-transform: uppercase;
-
- @include xs-to-sm {
- margin-bottom: 20px;
- }
- }
-
- .job-infos {
- display: flex;
-
- @include xs-to-sm {
- flex-direction: column;
- }
-
- .icon-val {
- display: flex;
- align-items: center;
-
- @include xs-to-sm {
- margin-bottom: 20px;
- }
-
- &:first-child {
- width: 250px;
-
- @media (max-width: 1280px) {
- width: auto;
- margin-right: 20px;
- }
- }
-
- &:nth-child(2) {
- width: 204px;
-
- @media (max-width: 1280px) {
- width: auto;
- margin-right: 20px;
- }
- }
-
- &:nth-child(3) {
- width: 345px;
-
- @media (max-width: 1280px) {
- width: auto;
- margin-right: 20px;
- }
- }
-
- &:nth-child(4) {
- width: 255px;
-
- @media (max-width: 1280px) {
- width: auto;
- margin-right: 20px;
- }
- }
-
- &:last-child {
- margin-right: 0;
- width: 141px;
- }
-
- svg,
- img {
- margin-right: 7px;
- width: 20px;
- height: 20px;
- }
- }
-
- .row-btn {
- display: flex;
- justify-content: flex-end;
- flex: 1;
-
- @include xs-to-sm {
- justify-content: flex-start;
- }
-
- button.primary-green-md {
- outline: none;
-
- @include primary-green;
- @include md;
-
- &:hover {
- @include primary-green;
- }
-
- &:disabled,
- &:hover:disabled {
- background-color: #e9e9e9 !important;
- border: none !important;
- text-decoration: none !important;
- color: #fafafb !important;
- box-shadow: none !important;
- }
- }
- }
- }
-}
diff --git a/src/shared/components/GUIKit/SearchCombo/index.jsx b/src/shared/components/GUIKit/SearchCombo/index.jsx
index 3be805bf38..e07288f5ee 100644
--- a/src/shared/components/GUIKit/SearchCombo/index.jsx
+++ b/src/shared/components/GUIKit/SearchCombo/index.jsx
@@ -22,10 +22,14 @@ function SearchCombo({
} else {
getService(auth.tokenV3).getSkills(inputValue).then(
(response) => {
- const suggestedOptions = (response || []).map(skillItem => ({
- label: skillItem.name,
- value: skillItem.name,
- }));
+ const suggestedOptions = (response || [])
+ .map((skillItem) => {
+ const label = skillItem && (skillItem.name || skillItem.label || skillItem.title);
+ if (!label) return null;
+ const value = skillItem.id || skillItem.skillId || skillItem.value || label;
+ return { label, value };
+ })
+ .filter(Boolean);
return callback(null, {
options: suggestedOptions,
});
@@ -40,8 +44,9 @@ function SearchCombo({
terms={skills}
placeholder={placeholder}
onChange={(newSkill) => {
- setSkills(newSkill);
- onSearch(newSkill);
+ const nextSkill = newSkill || '';
+ setSkills(nextSkill);
+ onSearch(nextSkill);
}}
cacheOptions
loadOptions={fetchSkills}
@@ -58,7 +63,13 @@ SearchCombo.defaultProps = {
};
SearchCombo.propTypes = {
- term: PT.string,
+ term: PT.oneOfType([
+ PT.string,
+ PT.shape({
+ label: PT.string,
+ value: PT.string,
+ }),
+ ]),
placeholder: PT.string,
onSearch: PT.func.isRequired,
auth: PT.object,
diff --git a/src/shared/components/Gigs/GigApply/index.jsx b/src/shared/components/Gigs/GigApply/index.jsx
deleted file mode 100644
index f3ea35051f..0000000000
--- a/src/shared/components/Gigs/GigApply/index.jsx
+++ /dev/null
@@ -1,384 +0,0 @@
-/* eslint-disable max-len */
-/**
- * The Gig apply page.
- */
-
-import _ from 'lodash';
-import React, { useMemo } from 'react';
-import PT from 'prop-types';
-import { Link, config } from 'topcoder-react-utils';
-import TextInput from 'components/GUIKit/TextInput';
-import DropdownSkills from 'components/GUIKit/DropdownSkills';
-import RadioButton from 'components/GUIKit/RadioButton';
-import Checkbox from 'components/GUIKit/Checkbox';
-import { getCustomField } from 'utils/gigs';
-import Modal from 'components/Contentful/Modal';
-import FilestackFilePicker from 'components/GUIKit/FilePicker';
-import Dropdown from 'components/GUIKit/Dropdown';
-import LoadingIndicator from 'components/LoadingIndicator';
-import './style.scss';
-import bigCheckmark from 'assets/images/big-checkmark.png';
-import SadFace from 'assets/images/sad-face-icon.svg';
-import BackArrowGig from 'assets/images/back-arrow-gig-apply.svg';
-import CheckmarkGreen from 'assets/images/checkmark-green.svg';
-import { getService } from 'services/skills';
-
-export default function GigApply(props) {
- const {
- job,
- onFormInputChange,
- formData,
- formErrors,
- onApplyClick,
- applying,
- application,
- user,
- recruitProfile,
- auth,
- } = props;
- const retUrl = encodeURIComponent(`${window.location.origin}${window.location.pathname}`);
- const duration = getCustomField(job.custom_fields, 'Duration');
- const isPlaced = _.find(_.isEmpty(recruitProfile) ? [] : recruitProfile.custom_fields, { field_id: 12 });
- const fetchSkills = useMemo(() => _.debounce((inputValue, callback) => {
- if (!inputValue) {
- callback(null);
- } else {
- getService(auth.tokenV3).getSkills(inputValue).then(
- (response) => {
- const skills = response || [];
- const suggestedOptions = skills.map(skillItem => ({
- label: skillItem.name,
- value: skillItem.name,
- }));
- return callback(null, {
- options: suggestedOptions,
- });
- },
- ).catch(() => callback(null));
- }
- }, 150), [auth.tokenV3]);
-
- return user ? (
-
-
-
- 
{skills}
-
-
-
-
-
-
-
-
- VIEW DETAILS
-
-
- {
- job.error || job.enable_job_application_form !== 1 ? (
-
- ) : (
-
-
- ) : (
- Gig does not exist.
-
- VIEW OTHER GIGS
-
-
-
- )
- }
- {job.name}
-
-
-
-
- ) : null
- }
- {
- application ? (
- One Gig Limit!
-Apologies, you are not allowed to apply to gigs if you are already placed on a gig.
You can however refer a friend to this gig and receive $500 if they get placed in that gig. To do that, you can enter their email on the right side of the Gigs Description page.
If you have any questions or feel this is an error, please email talent.taas@wipro.com.
- Back To Gig
-
-
- { application.error ? 
}
-
- {
- application.errorObj ? (
-
-
- )
- }
-
- ) : (
-
- ) : null
- }
- {
- applying ? (
- {application.error ? 'OOPS!' : 'APPLICATION SUBMITTED'}
- { - application.error ? ( -{application.errorObj.message || JSON.stringify(application.errorObj)}
- ) : null - } - { - application.errorObj && application.errorObj.notAllowed ? ( -If you have any questions or feel this is an error, please email talent.taas@wipro.com.
- ) : ( -Looks like there is a problem on our end. Please try again.
If this persists please contact support@topcoder.com.
Please send us an email at talent.taas@wipro.com with the subject ‘Gig Error’
and paste the URL for the gig you are attempting to apply for so that we know of your interest.
We will contact you via email if it seems like a fit!
- ) - } -
- {
- application.error ? (
-
- {
- !application.errorObj.notAllowed ? (
- {
- e.preventDefault();
- window.location.reload();
- }}
- >APPLY AGAIN
-
- ) : null
- }
- VIEW OTHER GIGS
-
- ) : (
-
- GO TO GIGS LIST
- CHECK GIG APPLICATION STATUS
-
- )
- }
-
-
-
- ) : null
- }
- {
- !application && !applying && (!isPlaced || isPlaced.value !== 'Placed') ? (
- Processing your application…
-
- {!_.isEmpty(recruitProfile)
- && (
-
- ) : null
- }
-
- It looks like you have applied to a gig previously. Perfect!
-
- )}
- It looks like you have applied to a gig previously. Perfect!
- We have most of your information. Is there anything you would like to update to your Gig Work Profile?
-PERSONAL INFORMATION
- {_.isEmpty(recruitProfile) - &&Welcome to Topcoder Gigs! We’d like to get to know you.
} -
-
- {_.isEmpty(recruitProfile) &&
- onFormInputChange('fname', val)}
- errorMsg={formErrors.fname}
- value={formData.fname}
- required
- readonly
- />
- onFormInputChange('lname', val)}
- errorMsg={formErrors.lname}
- value={formData.lname}
- required
- readonly
- />
-
-
- onFormInputChange('email', val)}
- errorMsg={formErrors.email}
- value={formData.email}
- required
- readonly
- />
- onFormInputChange('phone', val)}
- errorMsg={formErrors.phone}
- value={formData.phone}
- required
- />
-
-
- onFormInputChange('city', val)}
- errorMsg={formErrors.city}
- value={formData.city}
- required
- />
- onFormInputChange('country', val)}
- errorMsg={formErrors.country}
- options={formData.country}
- required
- />
-
- TOPCODER INFORMATION
} - {_.isEmpty(recruitProfile) && ( -
-
- )}
-
- onFormInputChange('handle', val)}
- errorMsg={formErrors.handle}
- value={formData.handle}
- readonly
- />
- onFormInputChange('tcProfileLink', val)}
- errorMsg={formErrors.tcProfileLink}
- value={formData.handle ? `https://topcoder.com/members/${formData.handle}` : null}
- readonly
- />
-
- SHARE YOUR WEEKLY PAY EXPECTATIONS
-
-
-
- onFormInputChange('payExpectation', val)}
- errorMsg={formErrors.payExpectation}
- value={formData.payExpectation}
- required
- />
-
- RESUME & SKILLS
- { - recruitProfile.resume ? ( -Please upload your resume/CV. Double-check that all of your tech skills are listed in your resume/CV and add them to the tech skills section below, {recruitProfile.resume.filename}
- ) : ( -Please upload your resume/CV. Double-check that all of your tech skills are listed in your resume/CV and add them to the tech skills section below.
- ) - } -
- onFormInputChange('fileCV', files[0])}
- inputOptions={{
- accept: '.pdf,.docx',
- }}
- infoText="Drag & drop your resume or CV here - please omit contact information *"
- errorMsg={formErrors.fileCV}
- />
-
- onFormInputChange('skills', val)}
- errorMsg={formErrors.skills}
- addNewOptionPlaceholder="Type to add another skill..."
- required
- cacheOptions
- loadOptions={fetchSkills}
- />
-
- FINAL QUESTIONS
-
- {_.isEmpty(recruitProfile) && (
- onFormInputChange('reffereal', val)}
- errorMsg={formErrors.reffereal}
- options={formData.reffereal}
- required
- />
- )}
-
- onFormInputChange('timezoneConfirm', val)}
- errorMsg={formErrors.timezoneConfirm}
- options={formData.timezoneConfirm}
- size="lg"
- />
-
-
- Are you able to work during the specified timezone? ({`${getCustomField(job.custom_fields, 'Timezone')}`}) *
-
- onFormInputChange('durationConfirm', val)}
- errorMsg={formErrors.durationConfirm}
- options={formData.durationConfirm}
- size="lg"
- />
-
- Are you ok to work with the duration of the gig? ({/^\d+$/.test(duration) ? `${duration} Weeks` : duration}) *
-
- Employment Opportunity Policy
-
-
-
-
- View Our Equal
- onFormInputChange('agreedTerms', val)}
- checked={formData.agreedTerms}
- errorMsg={formErrors.agreedTerms}
- size="lg"
- />
- I agree to Candidate Terms *
-
-
-
- );
-}
-
-GigApply.defaultProps = {
- formErrors: {},
- applying: false,
- application: null,
- user: null,
- auth: {},
-};
-
-GigApply.propTypes = {
- job: PT.shape().isRequired,
- formErrors: PT.shape(),
- formData: PT.shape().isRequired,
- onFormInputChange: PT.func.isRequired,
- onApplyClick: PT.func.isRequired,
- applying: PT.bool,
- application: PT.shape(),
- user: PT.shape(),
- recruitProfile: PT.shape().isRequired,
- auth: PT.object,
-};
diff --git a/src/shared/components/Gigs/GigApply/style.scss b/src/shared/components/Gigs/GigApply/style.scss
deleted file mode 100644
index 2c1a1e603e..0000000000
--- a/src/shared/components/Gigs/GigApply/style.scss
+++ /dev/null
@@ -1,322 +0,0 @@
-@import '~styles/mixins';
-@import "~components/Contentful/default";
-
-.loading-wrap {
- margin-top: 35px;
-
- .loading-text {
- font-family: Roboto, sans-serif;
- font-size: 24px;
- line-height: 26px;
- color: #2a2a2a;
- text-align: center;
- margin-top: 26px;
- }
-}
-
-.container {
- max-width: $screen-lg;
- min-height: 80vh;
- margin: auto;
- color: #2a2a2a;
-
- @include gui-kit-headers;
- @include gui-kit-content;
- @include roboto-regular;
-
- @include xs-to-md {
- padding: 0 15px;
- }
-
- .wrap .error {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: 27px;
- height: 80vh;
-
- h3 {
- text-align: center;
- }
-
- .cta-buttons a.primaryBtn {
- margin-bottom: 0 !important;
- }
-
- .regTxt {
- font-size: 14px;
- margin: 10px 0 0;
- }
- }
-
- .checkboxes-row {
- display: flex;
-
- .checkbox {
- display: flex;
- align-items: center;
- margin-right: 28px;
-
- &:last-child {
- margin-right: 0;
- }
-
- .label {
- font-size: 14px;
- margin-left: 8px;
- }
- }
- }
-
- .wrap {
- h2 {
- color: #26b3c5;
- text-align: center;
- margin-top: 47px;
- margin-bottom: 31px;
-
- @include xs-to-md {
- text-align: left;
- }
- }
-
- .back-link {
- color: #229174;
- font-weight: bold;
- font-size: 14px;
- letter-spacing: 0.8px;
- text-decoration: none;
- line-height: 40px;
- margin-bottom: 12px;
- display: flex;
- align-items: center;
-
- svg {
- width: 8px;
- margin-right: 6px;
- }
- }
-
- .separator {
- border-bottom: 1px solid #e9e9e9;
- }
-
- .apply-state {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-bottom: 162px;
- margin-top: 50px;
-
- h2 {
- color: #2a2a2a;
- margin-top: 31px;
- margin-bottom: 20px;
- }
-
- p {
- font-size: 24px;
- line-height: 36px;
- text-align: center;
-
- a {
- font-size: 24px;
- line-height: 36px;
- }
- }
-
- .cta-buttons {
- margin-top: 30px;
- }
- }
-
- .form-wrap {
- max-width: 880px;
- margin: auto;
-
- h4 {
- margin-top: 35px;
- margin-bottom: 5px;
- }
-
- p {
- font-size: 14px;
- line-height: 22px;
-
- a {
- font-size: 14px;
- }
- }
-
- .info-text {
- font-size: 16px;
- margin-top: 55px;
-
- h6 {
- font-family: Barlow, sans-serif;
- font-size: 16px;
- line-height: 20px;
- font-weight: 600;
- margin-bottom: 8px;
- display: flex;
- align-items: center;
-
- svg {
- margin-left: 5px;
- }
- }
- }
-
- .form-section {
- margin: 13px 0 50px;
-
- .form-row {
- display: grid;
- gap: 20px;
- grid-template-columns: 1fr 1fr;
- margin-bottom: 8px;
-
- @include xs-to-md {
- display: flex;
- flex-direction: column;
- }
- }
-
- p {
- margin-top: 30px;
- margin-bottom: 6px;
- line-height: 30px;
- font-size: 16px;
- }
-
- :global {
- .radioButtonContainer {
- display: flex;
- flex-direction: row;
-
- .radioButton {
- margin-right: 28px;
-
- &:last-child {
- margin-right: 0;
- }
- }
- }
- }
-
- .last-input {
- margin-top: 34px;
- margin-bottom: 81px;
- }
-
- .input-bot-margin {
- margin-bottom: 10px;
- }
- }
- }
-
- .bottom-section {
- display: flex;
- justify-content: space-between;
- font-size: 14px;
- margin-top: 23px;
- margin-bottom: 80px;
-
- @include xs-to-md {
- flex-direction: column;
-
- .checkboxes-row,
- .checkbox {
- margin-bottom: 20px;
- }
- }
- }
-
- .primaryBtn {
- background-color: #137d60;
- border-radius: 20px;
- color: #fff;
- font-size: 14px;
- font-weight: bolder;
- text-decoration: none;
- text-transform: uppercase;
- line-height: 40px;
- padding: 0 20px;
- border: none;
- outline: none;
- margin: 0 auto 150px auto !important;
- display: flex;
-
- &:hover {
- box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
- background-color: #0ab88a;
- }
-
- @include xs-to-sm {
- margin-bottom: 20px;
- }
-
- &:disabled {
- background-color: #e9e9e9 !important;
- border: none !important;
- text-decoration: none !important;
- color: #fafafb !important;
- box-shadow: none !important;
- }
- }
-
- .moldal-link {
- text-decoration: underline;
- color: #0d61bf;
-
- &:hover {
- text-decoration: none;
- }
- }
-
- .error-text {
- color: #ef476f;
- }
- }
- /* stylelint-disable */
- .cta-buttons {
- display: flex;
- justify-content: center;
- align-items: flex-start;
- margin-top: 47px;
-
- @include xs-to-sm {
- flex-direction: column;
- }
-
- a {
- background-color: #fff;
- border: 1px solid #137d60;
- border-radius: 20px;
- color: #229174;
- font-size: 14px;
- font-weight: bolder;
- text-decoration: none;
- text-transform: uppercase;
- line-height: 40px;
- padding: 0 20px;
-
- &:hover {
- box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
- }
-
- @include xs-to-sm {
- text-align: center;
- }
-
- &:last-child {
- margin-left: 20px;
- }
- }
-
- .gig-list-btn {
- margin-right: 12px;
- }
- }
- /* stylelint-enable */
-}
diff --git a/src/shared/components/Gigs/GigDetails/index.jsx b/src/shared/components/Gigs/GigDetails/index.jsx
deleted file mode 100644
index 91601f521b..0000000000
--- a/src/shared/components/Gigs/GigDetails/index.jsx
+++ /dev/null
@@ -1,183 +0,0 @@
-/* eslint-disable no-return-assign */
-/* eslint-disable max-len */
-/**
- * The Gig details component.
- */
-
-import { isEmpty } from 'lodash';
-import React, { useState } from 'react';
-import PT from 'prop-types';
-import { connect } from 'react-redux';
-import { Link, config, isomorphy } from 'topcoder-react-utils';
-import ReactHtmlParser from 'react-html-parser';
-import { getSalaryType, getCustomField } from 'utils/gigs';
-import './style.scss';
-import IconLocation from 'assets/images/icon-location.svg';
-import IconMoney from 'assets/images/icon-payment.svg';
-import IconDuration from 'assets/images/icon-calendar-gig.svg';
-import IconHours from 'assets/images/icon-duration.svg';
-import IconTimezone from 'assets/images/icon-timezone.svg';
-import iconSkills from 'assets/images/icon-skills-blue.png';
-import iconLabel1 from 'assets/images/l1.png';
-import iconLabel2 from 'assets/images/l2.png';
-import iconLabel3 from 'assets/images/l3.png';
-import SadFace from 'assets/images/sad-face-icon.svg';
-import LoginModal from '../LoginModal';
-
-// Cleanup HTML from style tags
-// so it won't affect other parts of the UI
-const ReactHtmlParserOptions = {
- // eslint-disable-next-line consistent-return
- transform: (node) => {
- if (node.type === 'style' && node.name === 'style') {
- return null;
- }
- },
-};
-
-function GigDetails(props) {
- const {
- job, application, profile,
- } = props;
- // eslint-disable-next-line no-restricted-globals
- const retUrl = isomorphy.isClientSide() ? location.href : null;
- let skills = getCustomField(job.custom_fields, 'Technologies Required');
- if (skills !== 'n/a') skills = skills.split(',').join(', ');
- const hPerW = getCustomField(job.custom_fields, 'Hours per week');
- const compens = job.min_annual_salary === job.max_annual_salary ? job.max_annual_salary : `${job.min_annual_salary} - ${job.max_annual_salary} (USD)`;
-
- const [isLoginModalOpen, setLoginModalOpen] = useState(false);
- const duration = getCustomField(job.custom_fields, 'Duration');
-
- return (
-
-
-
-
- {
- job.error || job.job_status.id !== 1 || job.enable_job_application_form !== 1 ? (
-
- );
-}
-
-GigDetails.defaultProps = {
- application: null,
- profile: {},
-};
-
-GigDetails.propTypes = {
- job: PT.shape().isRequired,
- application: PT.shape(),
- profile: PT.shape(),
-};
-
-export default connect()(GigDetails);
diff --git a/src/shared/components/Gigs/GigDetails/style.scss b/src/shared/components/Gigs/GigDetails/style.scss
deleted file mode 100644
index 145ecf9e39..0000000000
--- a/src/shared/components/Gigs/GigDetails/style.scss
+++ /dev/null
@@ -1,441 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-@import '~styles/mixins';
-@import "~components/Contentful/default";
-@import "~components/buttons/themed/tc";
-
-@mixin primaryBtn {
- background-color: #137d60;
- border-radius: 20px;
- color: #fff !important;
- font-size: 14px !important;
- font-weight: bolder !important;
- text-decoration: none !important;
- text-transform: uppercase !important;
- line-height: 40px !important;
- padding: 0 20px !important;
- border: none;
- outline: none;
-
- &:hover {
- box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
- background-color: #0ab88a;
- }
-
- @include xs-to-sm {
- margin-bottom: 20px;
- margin-right: 0;
- }
-}
-
-.primaryBtn {
- @include primaryBtn;
-}
-
-.container {
- max-width: $screen-lg;
- min-height: 50vh;
- margin: auto;
- color: #2a2a2a;
- overflow: hidden;
-
- @include gui-kit-headers;
- @include gui-kit-content;
- @include roboto-regular;
-
- @include xs-to-md {
- padding: 0 15px;
- }
-
- .error {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: 27px;
- height: 80vh;
- }
-
- .wrap .content .right .support a {
- font-weight: 600;
- text-decoration: none;
- }
-
- .wrap {
- h2 {
- color: #26b3c5;
- text-align: center;
- margin-top: 47px;
- margin-bottom: 40px;
-
- @include xs-to-md {
- text-align: left;
- }
- }
-
- .infos {
- display: flex;
- justify-content: center;
- border-bottom: 1px solid #e9e9e9;
- padding-bottom: 52px;
-
- @include xs-to-md {
- flex-direction: column;
- }
-
- .infos-item {
- display: flex;
- margin-right: 70px;
-
- @include xs-to-md {
- margin-bottom: 15px;
- }
-
- &:last-child {
- margin-right: 0;
- }
-
- svg {
- margin-right: 8px;
- margin-top: 6px;
- }
-
- .infos-data {
- display: flex;
- flex-direction: column;
-
- strong {
- font-weight: bold;
- line-height: 30px;
- }
- }
- }
- }
-
- .content {
- display: flex;
- margin-top: 44px;
- margin-bottom: 192px;
-
- @include xs-to-md {
- flex-direction: column;
- }
-
- .right {
- min-width: 408px;
- display: flex;
- flex-direction: column;
- flex: 1;
-
- @include xs-to-md {
- margin-top: 47px;
- min-width: auto;
- }
-
- .shareButtons {
- display: flex;
- align-items: center;
- margin: 20px 0 12px;
- color: #fff;
-
- a {
- margin-right: 5px;
-
- &:last-child {
- margin-right: 0;
- }
- }
-
- svg > path {
- fill: #fff;
- }
- }
-
- .referr-area {
- background-image: linear-gradient(135.29deg, #2c95d7 0%, #06d6a0 100%);
- border-radius: 10px;
- padding: 25px 20px 30px 20px;
- margin-bottom: 20px;
-
- h6 {
- margin: 0 0 6px;
- color: #fff;
- }
-
- p {
- color: #fff;
- margin-bottom: 20px;
- }
-
- .referralLinkTitile {
- font-weight: 500;
- color: #fff;
- display: block;
- margin: 15px 0 5px;
- }
-
- .referralLink {
- border: 1px solid rgba(255, 255, 255, 0.4);
- border-radius: 2px;
- color: #fff;
- width: 100%;
- overflow: auto;
- padding: 7px;
- background: transparent;
- margin: 0;
- }
-
- .copyAndShare {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: 15px 0 4px;
-
- @media screen and (max-width: 375px) {
- flex-direction: column;
- align-items: flex-start;
- }
-
- button {
- @include primary-borderless;
- @include md;
-
- &:hover {
- @include primary-borderless;
- }
- }
-
- .shareButtons {
- margin: 0;
- }
- }
-
- .sepWrap {
- display: flex;
- align-items: center;
- margin: 15px 0;
-
- .sepLine {
- height: 1px;
- background-color: #000;
- opacity: 0.13;
- flex: 2;
- }
-
- span {
- margin: 0 9px;
- display: inline-block;
- color: #fff;
- font-weight: 500;
- }
- }
-
- .referr-form {
- display: flex;
- justify-content: center;
-
- input {
- background-color: #fff !important;
- border: 1px solid #aaa !important;
- border-radius: 6px !important;
- margin-right: 10px;
- margin-bottom: 0 !important;
- color: #2a2a2a;
- font-family: Roboto, sans-serif;
- font-size: 14px;
- line-height: 22px;
- }
-
- input::-webkit-input-placeholder,
- input::placeholder {
- color: #aaa !important;
- font-family: Roboto, sans-serif !important;
- font-size: 14px !important;
- line-height: 40px !important;
- text-transform: none;
- }
-
- input:focus {
- box-shadow: none !important;
- }
-
- button {
- background-color: #fff;
- border-radius: 20px;
- color: #229174 !important;
- font-size: 14px;
- font-weight: bolder;
- text-decoration: none;
- text-transform: uppercase;
- line-height: 40px;
- padding: 0 20px;
- border: none;
- outline: none;
- max-width: 122px;
-
- &:hover {
- box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
- }
-
- @include xs-to-sm {
- margin-bottom: 20px;
- }
-
- &:disabled {
- background-color: #e9e9e9 !important;
- border: none !important;
- text-decoration: none !important;
- color: #fafafb !important;
- box-shadow: none !important;
- }
- }
- }
- }
-
- .subscribe-area {
- background-color: #f4f4f4;
- border-radius: 10px;
- padding: 25px 32px 30px 20px;
-
- h6 {
- margin: 0 0 19px;
- }
- }
-
- .info-area {
- background-color: #f4f4f4;
- padding: 20px;
- border-radius: 10px;
- margin-top: 20px;
-
- /* stylelint-disable */
- p,
- a,
- li {
- font-size: 14px;
- line-height: 26px;
-
- strong {
- font-weight: bold;
- }
- }
-
- /* stylelint-enable */
-
- ul {
- margin-bottom: 0;
- list-style: none;
- padding: 0;
-
- li {
- margin-bottom: 15px;
- display: flex;
- align-items: flex-start;
-
- img {
- margin-right: 16px;
- min-width: 40px;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
-
- .gig-skills {
- display: flex;
- }
-
- .support {
- background-color: #eaf6fd;
- border-radius: 10px;
- padding: 20px;
- text-transform: uppercase;
- font-weight: 600;
- font-family: Barlow, sans-serif;
- margin-top: 20px;
- line-height: 20px;
- }
- }
-
- .left {
- flex: 2;
- margin-right: 80px;
-
- /* stylelint-disable */
- div strong {
- font-weight: bold;
- line-height: 30px;
- display: inline-block;
- }
-
- /* stylelint-enable */
-
- h4 {
- margin-top: 35px;
-
- &:first-child {
- margin-top: 0;
- }
- }
-
- .skills {
- display: flex;
- align-items: center;
- line-height: 21px;
-
- /* stylelint-disable */
- img {
- margin-right: 8px;
- }
-
- /* stylelint-enable */
- }
- }
- }
-
- .how-it-works {
- color: #fff;
- }
- }
-
- .cta-buttons {
- display: flex;
- justify-content: center;
- margin-top: 47px;
-
- @include xs-to-sm {
- flex-direction: column;
- }
-
- /* stylelint-disable */
- a {
- background-color: #fff;
- border: 1px solid #137d60;
- border-radius: 20px;
- color: #229174;
- font-size: 14px;
- font-weight: bolder;
- text-decoration: none;
- text-transform: uppercase;
- line-height: 38px;
- padding: 0 20px;
-
- &:hover {
- box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
- }
-
- @include xs-to-sm {
- text-align: center;
- }
- }
-
- /* stylelint-enable */
-
- .primaryBtn {
- margin-right: 20px;
-
- @include primaryBtn;
- }
- }
-}
diff --git a/src/shared/components/Gigs/GigHeader/index.jsx b/src/shared/components/Gigs/GigHeader/index.jsx
deleted file mode 100644
index 519415c88b..0000000000
--- a/src/shared/components/Gigs/GigHeader/index.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { config, Link } from 'topcoder-react-utils';
-import PT from 'prop-types';
-import BannerInfoIcon from 'assets/images/banner-info.svg';
-import './style.scss';
-
-const GigHeader = ({ appNum }) => (
-
- { job.error ?
- ) : (
- { job.error ? 'Gig does not exist' : 'This Gig has been Fulfilled'}
-
- VIEW OTHER GIGS
-
-
-
- )
- }
- {job.name}
-
-
-
-
-
- Location
- {job.country}
-
-
-
-
- Compensation
- ${compens} / {getSalaryType(job.salary_type)}
-
-
-
-
- Duration
- {/^\d+$/.test(duration) ? `${duration} Weeks` : duration}
-
-
-
-
- Hours
- {hPerW === 'n/a' ? hPerW : `${hPerW} hours / week`}
-
-
-
-
- Working Hours
- {getCustomField(job.custom_fields, 'Timezone')}
-
-
-
-
-
- Required Skills
- {skills}
Description
-{ReactHtmlParser(job.job_description_text, ReactHtmlParserOptions)} -
-Notes
-
-
- * Topcoder does not provide visa sponsorship nor will we work with Staffing Agencies.
-
-
- ** USA Visa Holders - Please consult an attorney before applying to any Topcoder Gig. Some visa statuses will or will not allow you to conduct freelance work with Topcoder.
-
-
- *** Topcoder and Wipro employees are not eligible for Gig work opportunities. Do not apply and send questions to talent.taas@wipro.com.
-
-
-
- {
- !application || !application.success ? (
- {
- if (isEmpty(profile)) {
- e.preventDefault();
- setLoginModalOpen(true);
- }
- }}
- >APPLY TO THIS JOB
-
- ) : null
- }
- VIEW OTHER JOBS
-
-
- setLoginModalOpen(false)} />
- }
-
-
-
- At Topcoder, we pride ourselves in bringing our customers the very best candidates to help fill their needs. Want to improve your chances? You can do a few things:
--
-
-
-
-
Make sure your Topcoder profile says it all. Fill out your profile to the best of your ability. Your skills, your location, your devices, etc, all help you improve your chances of being selected for a gig.-
- -
-
-
Let us know you’re here! Check in on our Gig Work forum and tell us you’re looking for a gig. It’s great visibility for the Gig team.-
- -
-
-
Check out our Topcoder challenges and participate. Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!-
-
If you have any questions or doubts, don’t hesitate to email talent.taas@wipro.com.
- {
- isLoginModalOpen &&
-
-);
-
-GigHeader.defaultProps = {
- appNum: 0,
-};
-
-GigHeader.propTypes = {
- appNum: PT.number,
-};
-export default GigHeader;
diff --git a/src/shared/components/Gigs/GigHeader/style.scss b/src/shared/components/Gigs/GigHeader/style.scss
deleted file mode 100644
index 8c51a60079..0000000000
--- a/src/shared/components/Gigs/GigHeader/style.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@import "~styles/mixins";
-@import "~components/GUIKit/Assets/Styles/default";
-@import "~components/Contentful/default";
-
-.gig-header {
- @include roboto-medium;
-
- @include xs-to-sm {
- height: 81px;
- line-height: 22px;
- padding-left: 20px;
- }
-
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- align-items: center;
- margin-top: 15px;
- height: 70px;
- background: linear-gradient(90deg, #6f308b 0%, #1470ac 100%);
- border-radius: 10px;
- color: #fff;
- font-size: 16px;
-
- .content {
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- align-items: center;
- color: #fff;
-
- .banner-info {
- width: 24px;
- height: 24px;
- margin-left: 20px;
- margin-right: 10px;
-
- @include xs-to-sm {
- display: none;
- }
- }
-
- @include xs-to-sm {
- width: 80%;
- }
- }
-
- .row-btn {
- display: flex;
- justify-content: flex-end;
- flex: 1;
- padding-right: 20px;
-
- @include xs-to-sm {
- justify-content: flex-start;
- }
-
- button.primary-white-md {
- outline: none;
-
- @include primary-white;
- @include md;
-
- &:hover {
- @include primary-white;
- }
- }
- }
-
- .banner-close {
- width: 14px;
- height: 14px;
- margin-right: 30px;
-
- &:hover {
- cursor: pointer;
- }
-
- @include xs-to-sm {
- margin-bottom: 20px;
- }
- }
-}
diff --git a/src/shared/components/Gigs/LoginModal/index.jsx b/src/shared/components/Gigs/LoginModal/index.jsx
deleted file mode 100644
index 79317e3897..0000000000
--- a/src/shared/components/Gigs/LoginModal/index.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-disable max-len */
-/**
- * The modal used for login enforcing
- */
-
-/* global window */
-
-import PT from 'prop-types';
-import React from 'react';
-import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
-import { config } from 'topcoder-react-utils';
-import SVG from 'react-inlinesvg';
-import MediaQuery from 'react-responsive';
-import tc from 'components/buttons/themed/tc.scss';
-import ThinkingFaceMobile from 'assets/images/thinking-face-mobile.svg';
-import ThinkingFace from 'assets/images/thinking-face-laptop-tablet.svg';
-import modalStyle from './modal.scss';
-
-/** Themes for buttons
- * those overwrite PrimaryButton style to match achieve various styles.
- * Should implement pattern of classes.
- */
-const buttonThemes = {
- tc,
-};
-
-const blobYellow = 'https://images.ctfassets.net/b5f1djy59z3a/3wYRUnrUj3v765abrGRwlM/b0f9b49b4f49dc163e6913559a19b9e3/blob-yellow.svg';
-const progressBar = 'https://images.ctfassets.net/b5f1djy59z3a/2BX7LOrvVzKEarIJ8boCFm/bba0dd3e0180d2dc355809e6c1954631/progress-bar.svg';
-const progressBarMid = 'https://images.ctfassets.net/b5f1djy59z3a/517ZRt9geweW3QTtzlUqJu/11e33e876426f97e0725ba5fff9755f8/progress-bar-mid.svg';
-const progressBarXS = 'https://images.ctfassets.net/b5f1djy59z3a/6QxH7uVKCngtzBaXDn3Od1/3e0222a1ce773cead3f3a45f291f43a6/progress-bar-mobile.svg';
-const blobPurple = 'https://images.ctfassets.net/b5f1djy59z3a/1ZRCwp1uoShcES16lQmeu/ba084734120ffedebcb92b4e3fa2d667/blob-purple.svg';
-
-function LoginModal({ retUrl, onCancel, utmSource }) {
- return (
-
-
-
-
-
-
- You have {appNum} applied Gigs in the system
-
-
- CHECK GIG APPLICATION STATUS
-
-
-
-
-
-
-
-
-
-
-
-
-
- YAY! You are almost done!
-
- Looks like you're not a Topcoder member yet. Or maybe
- you're not logged in?
- {
- window.location = `${config.URL.AUTH}/?retUrl=${encodeURIComponent(retUrl)}&mode=signUp&utmSource=${utmSource}®Source=gigs`;
- }}
- theme={{
- button: buttonThemes.tc['primary-green-md'],
- }}
- >
- REGISTER NOW
-
-
- Already a member? Login here
- -{TAB_NAME.PAST_CHALLENGES}
+ {TAB_LINKS.map(link => ( + +{link.label}
+ + ))} ) } @@ -177,6 +224,7 @@ ChallengeTab.defaultProps = { setPreviousBucketOfPastChallengesTab: () => {}, previousBucketOfActiveTab: null, previousBucketOfPastChallengesTab: null, + history: null, }; ChallengeTab.propTypes = { @@ -184,6 +232,9 @@ ChallengeTab.propTypes = { search: PT.string, pathname: PT.string, }).isRequired, + history: PT.shape({ + push: PT.func, + }), activeBucket: PT.string, setPreviousBucketOfActiveTab: PT.func, setPreviousBucketOfPastChallengesTab: PT.func, diff --git a/src/shared/components/challenge-listing/ChallengeTab/style.scss b/src/shared/components/challenge-listing/ChallengeTab/style.scss index 78db42ab26..aa311699af 100644 --- a/src/shared/components/challenge-listing/ChallengeTab/style.scss +++ b/src/shared/components/challenge-listing/ChallengeTab/style.scss @@ -1,5 +1,10 @@ @import "~styles/mixins"; +.item-link { + color: inherit; + text-decoration: none; +} + .mobile-tab-expanded { margin: 0 16px; background-color: $listing-light-blue; @@ -29,6 +34,11 @@ font-weight: 700; } } + + .item-link { + display: block; + width: 100%; + } } .challenge-tab { @@ -58,6 +68,14 @@ } } + .item-link { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + } + .active { color: $color-blue-140; border-bottom-color: $color-blue-140; diff --git a/src/shared/components/engagement-listing/EngagementCard/index.jsx b/src/shared/components/engagement-listing/EngagementCard/index.jsx new file mode 100644 index 0000000000..3d68bd80df --- /dev/null +++ b/src/shared/components/engagement-listing/EngagementCard/index.jsx @@ -0,0 +1,333 @@ +import React from 'react'; +import PT from 'prop-types'; +import moment from 'moment-timezone'; +import { config } from 'topcoder-react-utils'; +import IconBlackDuration from 'assets/images/icon-black-calendar.svg'; +import IconBlackLocation from 'assets/images/icon-black-location.svg'; +import IconBlackPayment from 'assets/images/icon-black-payment.svg'; +import iconBlackSkills from 'assets/images/icon-skills.png'; + +import './style.scss'; + +const ROLE_LABELS = { + DESIGNER: 'Designer', + SOFTWARE_DEVELOPER: 'Software Developer', + DATA_SCIENTIST: 'Data Scientist', + DATA_ENGINEER: 'Data Engineer', +}; + +const WORKLOAD_LABELS = { + FULL_TIME: 'Full Time', + FRACTIONAL: 'Fractional', +}; + +const STATUS_LABELS = { + OPEN: 'Open', + PENDING_ASSIGNMENT: 'Pending Assignment', + ACTIVE: 'Active', + CANCELLED: 'Cancelled', + CLOSED: 'Closed', +}; + +const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i; +const UNKNOWN_SKILL_LABEL = 'Unknown skill'; +const DEFAULT_LOCALE = 'en-US'; + +function asArray(value) { + if (!value) return []; + return Array.isArray(value) ? value : [value]; +} + +function isUuid(value) { + return typeof value === 'string' && UUID_PATTERN.test(value); +} + +function toTitleCase(value) { + return value + .toLowerCase() + .split(' ') + .map(part => (part ? `${part[0].toUpperCase()}${part.slice(1)}` : '')) + .join(' '); +} + +function normalizeLabel(value, normalizedMap) { + if (typeof value === 'object' && value !== null) { + const label = value.name || value.title; + if (label) return String(label); + } + + if (!value) return 'Not Specified'; + + const raw = String(value).trim(); + if (!raw) return 'Not Specified'; + + const normalized = raw.toUpperCase().replace(/[\s-]+/g, '_'); + if (normalizedMap && normalizedMap[normalized]) { + return normalizedMap[normalized]; + } + + const hasSeparators = /[_-]+/.test(raw); + const isAllCaps = raw === raw.toUpperCase(); + const spaced = raw.replace(/[_-]+/g, ' ').trim(); + + if (hasSeparators || isAllCaps) { + return spaced ? toTitleCase(spaced) : raw; + } + + return spaced || raw; +} + +function normalizeSkillLabel(skill) { + if (!skill) return null; + + if (typeof skill === 'object' && skill !== null) { + const label = skill.name || skill.title; + if (label) return String(label); + const skillId = skill.id || skill.value; + if (isUuid(skillId)) return UNKNOWN_SKILL_LABEL; + return skillId ? String(skillId) : null; + } + + if (isUuid(skill)) return UNKNOWN_SKILL_LABEL; + return String(skill); +} + +function getIntlTimeZoneName(timeZone, style) { + if (typeof Intl === 'undefined' || typeof Intl.DateTimeFormat !== 'function') return null; + try { + const formatter = new Intl.DateTimeFormat(DEFAULT_LOCALE, { + timeZone, + timeZoneName: style, + }); + if (typeof formatter.formatToParts !== 'function') return null; + const parts = formatter.formatToParts(new Date()); + const namePart = parts.find(part => part.type === 'timeZoneName'); + return namePart && namePart.value ? namePart.value : null; + } catch (error) { + return null; + } +} + +function getMomentTimeZoneName(timeZone) { + if (!moment || !moment.tz || !moment.tz.zone) return null; + if (!moment.tz.zone(timeZone)) return null; + try { + return moment.tz(new Date(), timeZone).format('z'); + } catch (error) { + return null; + } +} + +function formatTimeZoneLabel(timeZone) { + if (!timeZone) return ''; + const normalized = String(timeZone).trim(); + if (!normalized) return ''; + if (normalized === 'Any') return 'Any'; + + const shortName = getMomentTimeZoneName(normalized) || getIntlTimeZoneName(normalized, 'short'); + const longName = getIntlTimeZoneName(normalized, 'long'); + + if (shortName && longName) { + if (shortName === longName) return shortName; + return `${shortName} - ${longName}`; + } + + return shortName || longName || normalized; +} + +function normalizeLocationValue(value) { + if (!value) return null; + const normalized = (value && value.name) || value; + if (!normalized) return null; + if (typeof normalized === 'string' && moment && moment.tz && moment.tz.zone && moment.tz.zone(normalized)) { + return formatTimeZoneLabel(normalized); + } + return normalized; +} + +function formatDuration(value, unitLabel) { + if (value === null || value === undefined || value === '') return null; + const numericValue = Number(value); + if (Number.isNaN(numericValue) || numericValue <= 0) return null; + return `${numericValue} ${unitLabel}${numericValue === 1 ? '' : 's'}`; +} + +function getDuration(startDate, endDate, durationWeeks, durationMonths) { + const weekDuration = formatDuration(durationWeeks, 'Week'); + if (weekDuration) return weekDuration; + const monthDuration = formatDuration(durationMonths, 'Month'); + if (monthDuration) return monthDuration; + if (!startDate || !endDate) return 'TBD'; + const start = moment(startDate); + const end = moment(endDate); + if (!start.isValid() || !end.isValid()) return 'TBD'; + + const diffDays = end.diff(start, 'days'); + if (diffDays < 0) return 'TBD'; + const weeks = Math.max(1, Math.ceil(diffDays / 7)); + return `${weeks} Week${weeks === 1 ? '' : 's'}`; +} + +function formatDeadline(dateValue) { + if (!dateValue) return 'TBD'; + const deadline = moment(dateValue); + if (!deadline.isValid()) return 'TBD'; + return deadline.format('MMM DD, YYYY'); +} + +function getRoleDisplay(role) { + return normalizeLabel(role, ROLE_LABELS); +} + +function getWorkloadDisplay(workload) { + return normalizeLabel(workload, WORKLOAD_LABELS); +} + +function getCompensationDisplay(compensationRange) { + if (typeof compensationRange === 'object' && compensationRange !== null) { + const label = compensationRange.name || compensationRange.title; + return label ? String(label) : 'Not Specified'; + } + return compensationRange ? String(compensationRange) : 'Not Specified'; +} + +function getStatusDisplay(status) { + if (typeof status === 'object' && status !== null) { + const label = status.name || status.title; + if (label) return String(label); + } + + if (!status) return 'Not Specified'; + + const normalized = String(status).trim().toUpperCase().replace(/[\s-]+/g, '_'); + if (!normalized) return 'Not Specified'; + + return STATUS_LABELS[normalized] || 'Not Specified'; +} + +function EngagementCard({ engagement }) { + const { + title, + name, + startDate, + start, + endDate, + end, + durationStartDate, + durationEndDate, + durationWeeks, + durationMonths, + role, + workload, + compensationRange, + skills: engagementSkills, + requiredSkills, + skillsets, + location, + locations: engagementLocations, + timezone, + timezones, + timeZones, + countries, + status, + applicationDeadline, + nanoId, + id, + engagementId, + } = engagement; + + const displayTitle = title || name || 'Engagement'; + const normalizedStartDate = startDate || start || durationStartDate; + const normalizedEndDate = endDate || end || durationEndDate; + const durationText = getDuration( + normalizedStartDate, + normalizedEndDate, + durationWeeks, + durationMonths, + ); + const deadlineText = formatDeadline(applicationDeadline); + + const skillsSource = [engagementSkills, requiredSkills, skillsets] + .find(value => Array.isArray(value) && value.length) + || engagementSkills + || requiredSkills + || skillsets; + const skills = Array.from(new Set( + asArray(skillsSource) + .map(normalizeSkillLabel) + .filter(Boolean), + )); + const skillsText = skills.length + ? skills.slice(0, 2).join(', ') + : 'Not Specified'; + const limitedSkillsText = skills.length > 2 + ? `${skillsText},...` + : skillsText; + + const locations = [ + ...asArray(location), + ...asArray(engagementLocations), + ...asArray(timezone), + ...asArray(timezones), + ...asArray(timeZones), + ...asArray(countries), + ] + .map(normalizeLocationValue) + .filter(Boolean); + const locationText = locations.length ? locations.join(', ') : 'Remote'; + + const resolvedEngagementId = nanoId || id || engagementId; + const engagementLink = resolvedEngagementId + ? `${config.URL.ENGAGEMENTS_APP}/${resolvedEngagementId}` + : config.URL.ENGAGEMENTS_APP; + const statusText = getStatusDisplay(status); + + return ( +
+
+ );
+}
+
+EngagementCard.defaultProps = {
+ engagement: {},
+};
+
+EngagementCard.propTypes = {
+ engagement: PT.shape(),
+};
+
+export default EngagementCard;
diff --git a/src/shared/components/engagement-listing/EngagementCard/style.scss b/src/shared/components/engagement-listing/EngagementCard/style.scss
new file mode 100644
index 0000000000..33df70eb26
--- /dev/null
+++ b/src/shared/components/engagement-listing/EngagementCard/style.scss
@@ -0,0 +1,132 @@
+@import "~styles/mixins";
+@import "~components/GUIKit/Assets/Styles/default";
+@import "~components/Contentful/default";
+@import "~components/buttons/themed/tc";
+
+.container {
+ border: 1px solid #e9e9e9;
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ color: #2a2a2a;
+ padding: 25px 35px 25px 44px;
+ margin-bottom: 15px;
+
+ @include gui-kit-headers;
+ @include gui-kit-content;
+ @include roboto-regular;
+
+ .gig-name,
+ .gig-name:visited,
+ .gig-name:active,
+ .gig-name:hover {
+ color: #1e94a3;
+ display: inline-block;
+ font-family: Barlow, sans-serif;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ margin-bottom: 12px;
+ margin-top: 0;
+ min-width: 0;
+ text-decoration: none;
+ text-transform: uppercase;
+
+ @include xs-to-sm {
+ margin-bottom: 20px;
+ }
+ }
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-bottom: 12px;
+
+ @include xs-to-sm {
+ margin-bottom: 20px;
+ }
+}
+
+.status-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 3px 10px;
+ border-radius: 999px;
+ border: 1px solid #e1e1e1;
+ background-color: #f7f7f7;
+ color: #2a2a2a;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 18px;
+ white-space: nowrap;
+}
+
+.job-infos {
+ display: grid;
+ grid-template-columns: 1.2fr 1fr 1.5fr 1fr 1.3fr 0.9fr 1fr 141px;
+ column-gap: 20px;
+ align-items: center;
+
+ @include xs-to-sm {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+}
+
+.icon-val {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+
+ @include xs-to-sm {
+ margin-bottom: 20px;
+ width: 100%;
+ }
+
+ svg,
+ img {
+ margin-right: 7px;
+ width: 20px;
+ height: 20px;
+ }
+}
+
+.row-btn {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ width: 141px;
+
+ @include xs-to-sm {
+ justify-content: flex-start;
+ width: auto;
+ margin-bottom: 10px;
+ }
+}
+
+.primary-green-md {
+ outline: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ @include primary-green;
+ @include md;
+
+ &:hover {
+ @include primary-green;
+ }
+
+ &:disabled,
+ &:hover:disabled {
+ background-color: #e9e9e9 !important;
+ border: none !important;
+ text-decoration: none !important;
+ color: #fafafb !important;
+ box-shadow: none !important;
+ }
+}
diff --git a/src/shared/components/engagement-listing/index.jsx b/src/shared/components/engagement-listing/index.jsx
new file mode 100644
index 0000000000..b040fff9c2
--- /dev/null
+++ b/src/shared/components/engagement-listing/index.jsx
@@ -0,0 +1,235 @@
+import React, {
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import PT from 'prop-types';
+import LoadingIndicator from 'components/LoadingIndicator';
+import SearchCombo from 'components/GUIKit/SearchCombo';
+import Dropdown from 'components/GUIKit/Dropdown';
+import ChallengeTab from 'components/challenge-listing/ChallengeTab';
+
+import EngagementCard from './EngagementCard';
+
+import './style.scss';
+
+const SORT_OPTIONS = [
+ { label: 'Latest Added Descending', value: 'createdAt' },
+ { label: 'Latest Updated Descending', value: 'updatedAt' },
+];
+
+const CREATED_DATE_FIELDS = ['createdAt', 'created_at', 'createdOn', 'created'];
+const UPDATED_DATE_FIELDS = ['updatedAt', 'updated_at', 'updatedOn', 'updated'];
+const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+function getTimestamp(engagement, fields) {
+ if (!engagement) return 0;
+ for (let i = 0; i < fields.length; i += 1) {
+ const value = engagement[fields[i]];
+ if (value) {
+ const timestamp = Date.parse(value);
+ if (!Number.isNaN(timestamp)) return timestamp;
+ }
+ }
+ return 0;
+}
+
+export default function EngagementListing({
+ engagements,
+ loading,
+ loadMore,
+ filter,
+ setFilter,
+ allEngagementsLoaded,
+ auth,
+ history,
+ location,
+}) {
+ const [search, setSearch] = useState(filter.search || '');
+ const [sortBy, setSortBy] = useState(filter.sortBy || 'createdAt');
+ const hasEngagements = engagements && engagements.length > 0;
+ const [filtersReady, setFiltersReady] = useState(
+ hasEngagements || allEngagementsLoaded,
+ );
+ const hasStartedLoadingRef = useRef(false);
+
+ useEffect(() => {
+ setSearch(filter.search || '');
+ setSortBy(filter.sortBy || 'createdAt');
+ }, [filter]);
+
+ useEffect(() => {
+ if (loading) {
+ hasStartedLoadingRef.current = true;
+ return;
+ }
+
+ if (
+ !filtersReady
+ && (hasEngagements || allEngagementsLoaded || hasStartedLoadingRef.current)
+ ) {
+ setFiltersReady(true);
+ }
+ }, [allEngagementsLoaded, filtersReady, hasEngagements, loading]);
+
+ const handleSearch = (nextSearch) => {
+ const nextOption = nextSearch && typeof nextSearch === 'object'
+ ? nextSearch
+ : { label: nextSearch, value: nextSearch };
+ const label = nextOption
+ ? String(nextOption.label || nextOption.value || '').trim()
+ : '';
+ const value = nextOption && nextOption.value
+ ? String(nextOption.value).trim()
+ : '';
+ const hasSkillId = Boolean(value) && UUID_PATTERN.test(value);
+ const normalizedSearch = label;
+
+ setSearch(normalizedSearch);
+ setFilter({
+ ...filter,
+ search: normalizedSearch,
+ skills: hasSkillId ? [value] : [],
+ });
+ };
+
+ const handleSortChange = (nextOptions) => {
+ const selected = (nextOptions || []).find(option => option.selected);
+ const nextSortBy = selected && selected.label === SORT_OPTIONS[1].label
+ ? SORT_OPTIONS[1].value
+ : SORT_OPTIONS[0].value;
+
+ setSortBy(nextSortBy);
+ setFilter({
+ ...filter,
+ sortBy: nextSortBy,
+ });
+ };
+
+ const sortOptions = SORT_OPTIONS.map(option => ({
+ label: option.label,
+ selected: option.value === sortBy,
+ }));
+
+ const sortedEngagements = useMemo(() => {
+ if (!Array.isArray(engagements) || engagements.length <= 1) return engagements || [];
+
+ const primaryFields = sortBy === 'updatedAt' ? UPDATED_DATE_FIELDS : CREATED_DATE_FIELDS;
+ const fallbackFields = sortBy === 'updatedAt' ? CREATED_DATE_FIELDS : [];
+
+ return engagements
+ .map((engagement, index) => {
+ const primaryTimestamp = getTimestamp(engagement, primaryFields);
+ const fallbackTimestamp = primaryTimestamp ? 0 : getTimestamp(engagement, fallbackFields);
+ return {
+ engagement,
+ index,
+ timestamp: primaryTimestamp || fallbackTimestamp,
+ };
+ })
+ .sort((a, b) => {
+ if (a.timestamp === b.timestamp) return a.index - b.index;
+ return b.timestamp - a.timestamp;
+ })
+ .map(item => item.engagement);
+ }, [engagements, sortBy]);
+
+ return (
+
+
+ {displayTitle}
+
+ {statusText}
+
+
+
+
+ {getRoleDisplay(role)}
+
+
+ {limitedSkillsText}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ VIEW DETAILS
+
+
+
+
+ );
+}
+
+EngagementListing.defaultProps = {
+ engagements: [],
+ loading: false,
+ loadMore: () => {},
+ allEngagementsLoaded: false,
+ auth: {},
+ history: null,
+ location: {},
+};
+
+EngagementListing.propTypes = {
+ engagements: PT.arrayOf(PT.shape()),
+ loading: PT.bool,
+ loadMore: PT.func,
+ filter: PT.shape({
+ status: PT.string,
+ skills: PT.arrayOf(PT.string),
+ location: PT.string,
+ search: PT.string,
+ sortBy: PT.string,
+ }).isRequired,
+ setFilter: PT.func.isRequired,
+ allEngagementsLoaded: PT.bool,
+ auth: PT.shape({
+ tokenV3: PT.string,
+ }),
+ history: PT.shape({
+ push: PT.func,
+ }),
+ location: PT.shape({
+ pathname: PT.string,
+ search: PT.string,
+ }),
+};
diff --git a/src/shared/components/engagement-listing/style.scss b/src/shared/components/engagement-listing/style.scss
new file mode 100644
index 0000000000..0328889c8e
--- /dev/null
+++ b/src/shared/components/engagement-listing/style.scss
@@ -0,0 +1,81 @@
+@import '~styles/mixins';
+
+.engagementListing {
+ @include roboto-regular;
+
+ width: 100%;
+ max-width: $screen-lg;
+ margin: 0 auto;
+ padding: 24px 0;
+
+ @media (max-width: 1280px) {
+ padding: 24px 15px;
+ }
+}
+
+.filters {
+ display: flex;
+ align-items: center;
+ min-height: 52px;
+ gap: 30px;
+ margin-bottom: 20px;
+
+ @include xs-to-sm {
+ flex-direction: column;
+ gap: 15px;
+ }
+
+ > div {
+ flex: 1;
+
+ &:first-child {
+ flex: 3;
+ }
+ }
+}
+
+.filters.loading {
+ pointer-events: none;
+}
+
+.cards {
+ display: flex;
+ flex-direction: column;
+}
+
+.loading-state {
+ display: flex;
+ justify-content: center;
+ padding: 40px 0;
+}
+
+.empty-state {
+ text-align: center;
+ padding: 40px 16px;
+ background: $tc-white;
+ border: 1px solid $tc-gray-10;
+ border-radius: $corner-radius;
+ color: $tc-gray-60;
+}
+
+.load-more {
+ text-align: center;
+ margin-top: 24px;
+}
+
+.load-more-button {
+ @include roboto-medium;
+
+ border-radius: $corner-radius;
+ border: 1px solid $tc-dark-blue-70;
+ padding: 10px 18px;
+ font-size: 14px;
+ background: transparent;
+ color: $tc-dark-blue-110;
+ cursor: pointer;
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+}
diff --git a/src/shared/components/examples/GigsFeed/index.jsx b/src/shared/components/examples/GigsFeed/index.jsx
deleted file mode 100644
index b54fe8200d..0000000000
--- a/src/shared/components/examples/GigsFeed/index.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import GigsFeed from 'containers/Dashboard/GigsFeed';
-import React from 'react';
-
-import './style.scss';
-import { PrimaryButton } from 'topcoder-react-ui-kit/src/shared/components/buttons';
-
-export default class GigsFeedExample extends React.Component {
- constructor() {
- super();
- this.state = { theme: 'light' };
- this.toggleTheme = this.toggleTheme.bind(this);
- }
-
- toggleTheme() {
- const { theme } = this.state;
- this.setState({ theme: theme === 'light' ? 'dark' : 'light' });
- }
-
- render() {
- const { theme } = this.state;
-
- return (
-
+ {filtersReady ? (
+
+
+ ) : null}
+
+
+ {loading && !hasEngagements ? (
+
+
+ ) : null}
+
+ {!loading && !hasEngagements ? (
+
+ No engagements match your filters yet.
+
+ ) : null}
+
+ {hasEngagements ? (
+
+ {sortedEngagements.map((engagement, index) => (
+
+ ) : null}
+
+ {hasEngagements && !allEngagementsLoaded ? (
+
+
+
+ ) : null}
+
-
- );
- }
-}
diff --git a/src/shared/components/examples/GigsFeed/style.scss b/src/shared/components/examples/GigsFeed/style.scss
deleted file mode 100644
index 211374bab5..0000000000
--- a/src/shared/components/examples/GigsFeed/style.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "~styles/mixins";
-
-.page {
- width: 100%;
- min-height: 100vh;
-}
-
-.container {
- margin: 0 auto;
- padding: 25px 50px;
- max-width: 670px;
-
- @include xs-to-sm {
- padding: 25px 15px;
- }
-}
-
-.light {
- background: #f4f4f4;
-}
-
-.dark {
- background: $dashboard-dark-bg;
- color: $tc-white;
-}
diff --git a/src/shared/containers/Dashboard/GigsFeed.jsx b/src/shared/containers/Dashboard/GigsFeed.jsx
deleted file mode 100644
index 5ad294e568..0000000000
--- a/src/shared/containers/Dashboard/GigsFeed.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Container for dashboard announcement.
- */
-
-import GigsFeed from 'components/Dashboard/GigsFeed';
-import PT from 'prop-types';
-import React from 'react';
-import actions from 'actions/recruitCRM';
-import { connect } from 'react-redux';
-
-
-class GigsFeedContainer extends React.Component {
- componentDidMount() {
- const {
- getGigs,
- gigs,
- itemCount,
- } = this.props;
-
- // This gets all jobs.
- if (!gigs || gigs.length === 0) {
- getGigs({
- perPage: itemCount,
- sortBy: 'createdAt',
- sortOrder: 'desc',
- status: 'sourcing',
- isApplicationPageActive: true,
- });
- }
- }
-
- render() {
- const {
- gigs,
- theme,
- loading,
- } = this.props;
-
- return (
-
- Toggle Theme
-
- - Gigs Feed Preview -
-Theme: {theme}
-
-
-
- Searching our database for the best gigs…
-
-
- );
-
- return (
-
- {
- hotlistJobs.map((hjob, indx) => (
- this.onHotlistClick(hjob)}>
-
- {hjob.name}
-${hjob.min_annual_salary} - {hjob.max_annual_salary} / {getSalaryType(hjob.salary_type)}
-
- ))
- }
-
-
- );
- }
-}
-
-RecruitCRMJobsContainer.defaultProps = {
- jobs: [],
- loading: true,
- applications: 0,
- auth: {},
-};
-
-RecruitCRMJobsContainer.propTypes = {
- getJobs: PT.func.isRequired,
- loading: PT.bool,
- jobs: PT.arrayOf(PT.shape),
- optimizely: PT.shape().isRequired,
- getJobApplications: PT.func.isRequired,
- applications: PT.number,
- auth: PT.object,
-};
-
-function mapStateToProps(state) {
- const data = state.recruitCRM;
- return {
- jobs: data ? data.jobs : [],
- loading: data ? data.loading : true,
- applications: data.applications,
- auth: {
- ...state.auth,
- },
- };
-}
-
-function mapDispatchToActions(dispatch) {
- const a = actions.recruit;
- return {
- getJobs: (ownProps) => {
- dispatch(a.getJobsInit(ownProps));
- dispatch(a.getJobsDone(ownProps));
- },
- getJobApplications: (tokenV3) => {
- dispatch(a.getJobApplicationsInit());
- dispatch(a.getJobApplicationsDone(tokenV3));
- },
- };
-}
-
-export default connect(
- mapStateToProps,
- mapDispatchToActions,
-)(withOptimizely(RecruitCRMJobsContainer));
diff --git a/src/shared/containers/Gigs/_RecruitCRMJobs_ab-v1.jsx b/src/shared/containers/Gigs/_RecruitCRMJobs_ab-v1.jsx
deleted file mode 100644
index 9c5f9bfa7c..0000000000
--- a/src/shared/containers/Gigs/_RecruitCRMJobs_ab-v1.jsx
+++ /dev/null
@@ -1,329 +0,0 @@
-/**
- * A block that fetches and renders a job listing page
- * driven by recruitCRM
- */
-import _ from 'lodash';
-import actions from 'actions/recruitCRM';
-import LoadingIndicator from 'components/LoadingIndicator';
-import SearchCombo from 'components/GUIKit/SearchCombo';
-import Paginate from 'components/GUIKit/Paginate';
-import JobListCard from 'components/GUIKit/JobListCard';
-import Dropdown from 'components/GUIKit/Dropdown';
-import PT from 'prop-types';
-import React from 'react';
-import { connect } from 'react-redux';
-import { getSalaryType, getCustomField } from 'utils/gigs';
-import IconBlackLocation from 'assets/images/icon-black-location.svg';
-import { config, Link, isomorphy } from 'topcoder-react-utils';
-import { getQuery, updateQuery } from 'utils/url';
-import { withOptimizely } from '@optimizely/react-sdk';
-import './jobLisingStyles.scss';
-
-const cookies = require('browser-cookies');
-
-const CONTENT_PREVIEW_LENGTH = 175;
-const GIGS_PER_PAGE = 10;
-// Sort by dropdown
-const sortByOptions = [
- { label: 'Latest Added Descending', selected: true },
- { label: 'Latest Updated Descending', selected: false },
-];
-// Locations
-let locations = [{
- label: 'All', selected: true,
-}];
-
-class RecruitCRMJobsContainer extends React.Component {
- constructor(props) {
- super(props);
- // Filter initial state
- this.state = {
- term: '',
- page: 0,
- sortBy: 'created_on',
- location: 'All',
- };
- // binds
- this.onSearch = this.onSearch.bind(this);
- this.onPaginate = this.onPaginate.bind(this);
- this.onFilter = this.onFilter.bind(this);
- this.onLocation = this.onLocation.bind(this);
- this.onSort = this.onSort.bind(this);
- this.onHotlistClick = this.onHotlistClick.bind(this);
- }
-
- componentDidMount() {
- const {
- getJobs,
- jobs,
- } = this.props;
- const { state } = this;
- const q = getQuery();
- // This gets all jobs.
- // Pagination and filtering on front-side
- if (!jobs.length) {
- getJobs({
- job_status: 1, // Open jobs only
- });
- }
- // handle URL query if present
- if (q && q.search) {
- const stateUpdate = {
- ...state,
- term: q.search,
- };
- this.setState(stateUpdate);
- }
- }
-
- /**
- * Wraps all calls to setState
- * @param {Object} newState the state update
- */
- onFilter(newState) {
- // Do updates
- // update the state
- this.setState(newState);
- }
-
- onSearch(newTerm) {
- this.onFilter({
- term: newTerm,
- page: 0,
- });
- // update the URL query
- updateQuery({
- search: newTerm,
- });
- }
-
- onPaginate(newPage) {
- this.onFilter({
- page: newPage.selected,
- });
- window.scrollTo({
- top: 0,
- behavior: 'smooth',
- });
- }
-
- onLocation(newLocation) {
- const selected = _.find(newLocation, { selected: true });
- this.onFilter({
- location: selected.label,
- page: 0,
- });
- }
-
- onSort(newSort) {
- const selected = _.find(newSort, { selected: true });
- this.onFilter({
- sortBy: selected.label === 'Latest Updated Descending' ? 'updated_on' : 'created_on',
- page: 0,
- });
- }
-
- onHotlistClick(job) {
- const { optimizely } = this.props;
- optimizely.track('Hotlist ads click');
- cookies.set('_tc.hcl', JSON.stringify({
- slug: job.slug,
- }), {
- expires: 0,
- });
- }
-
- render() {
- const {
- loading,
- jobs,
- optimizely,
- } = this.props;
- const {
- term,
- page,
- sortBy,
- location,
- } = this.state;
-
- if (loading) {
- return (
-
-
-
-
- {auth.tokenV3 && applications > 0 &&
- {
- jobsToDisplay.length
- ? jobsToDisplay.map((job, indx) => {
- const featured = getCustomField(job.custom_fields, 'Featured');
- if ((featured === 'n/a' || indx === 2) && !isHotlistRendered && hotlistJobs.length && decision.enabled) {
- isHotlistRendered = true;
- return (
-
- {hotlist()}
-
- );
- }
- return
- {
- hotlistJobs.length && decision.enabled && hotlist()
- }
- No Results
-
- )
- }
-
- {
- jobsToDisplay.length
- ? Searching our database for the best gigs…
-
-
- );
- }
-}
-
-RecruitCRMJobsContainer.defaultProps = {
- jobs: [],
- loading: true,
-};
-
-RecruitCRMJobsContainer.propTypes = {
- getJobs: PT.func.isRequired,
- loading: PT.bool,
- jobs: PT.arrayOf(PT.shape),
- optimizely: PT.shape().isRequired,
-};
-
-function mapStateToProps(state) {
- const data = state.recruitCRM;
- return {
- jobs: data ? data.jobs : [],
- loading: data ? data.loading : true,
- };
-}
-
-function mapDispatchToActions(dispatch) {
- const a = actions.recruit;
- return {
- getJobs: (ownProps) => {
- dispatch(a.getJobsInit(ownProps));
- dispatch(a.getJobsDone(ownProps));
- },
- };
-}
-
-export default connect(
- mapStateToProps,
- mapDispatchToActions,
-)(withOptimizely(RecruitCRMJobsContainer));
diff --git a/src/shared/containers/Gigs/_jobLisingStyles_ab-v1.scss b/src/shared/containers/Gigs/_jobLisingStyles_ab-v1.scss
deleted file mode 100644
index 535a92cb16..0000000000
--- a/src/shared/containers/Gigs/_jobLisingStyles_ab-v1.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-@import "~styles/mixins";
-
-.loading-text {
- font-family: Roboto, sans-serif;
- font-size: 24px;
- line-height: 26px;
- color: #2a2a2a;
- text-align: center;
-}
-
-.container,
-.container-with-hotlist {
- max-width: $screen-lg;
- margin: auto;
-
- @media (max-width: 1280px) {
- padding: 0 15px;
- }
-
- .gigs {
- display: block;
- }
-
- .filters {
- display: flex;
- align-items: flex-end;
-
- @include xs-to-sm {
- flex-direction: column;
- }
-
- > div {
- margin-right: 30px;
- flex: 1;
-
- @include xs-to-sm {
- margin-right: 0;
- margin-bottom: 15px;
- }
-
- &:first-child {
- flex: 3;
- }
-
- &:last-child {
- margin-right: 0;
- }
- }
- }
-
- .jobs-list-container {
- display: flex;
- flex-direction: column;
- margin: 20px 0 50px 0;
-
- .no-results {
- display: flex;
- justify-content: center;
- }
- }
-}
-
-.container-with-hotlist {
- display: flex;
-
- .gigs {
- width: 956px;
-
- @media (max-width: 1280px) {
- max-width: none;
- flex: 1;
- }
- }
-
- .filters {
- > div {
- margin-right: 20px;
-
- @include xs-to-sm {
- margin-right: 0;
- }
-
- &:nth-child(2) {
- min-width: 194px;
- }
-
- &:last-child {
- flex: 2;
- max-width: 223px;
-
- @include xs-to-sm {
- max-width: none;
- }
- }
- }
- }
-
- .hotlist {
- display: flex;
- flex-direction: column;
- margin-left: 28px;
- flex: 1;
-
- @media (max-width: 1280px) {
- display: none;
- }
-
- h5 {
- font-family: Barlow, sans-serif;
- font-size: 20px;
- line-height: 24px;
- text-transform: uppercase;
- font-weight: 600;
- margin: 7px 0 31px 6px;
- color: #2a2a2a;
- }
-
- .hotlist-items {
- .hotlist-item-1,
- .hotlist-item-2,
- .hotlist-item-3,
- .hotlist-item-4 {
- display: flex;
- flex-direction: column;
- border-radius: 10px;
- padding: 20px 20px 12px;
- font-family: Roboto, sans-serif;
- margin-bottom: 16px;
- color: #2a2a2a;
-
- .location {
- font-size: 14px;
- display: flex;
- align-items: center;
-
- svg {
- margin-right: 5px;
- width: 15px;
- height: 17px;
- }
- }
-
- .job-title {
- margin: 0;
- }
-
- .job-money {
- line-height: 30px;
- }
-
- .job-desc {
- font-family: Roboto, sans-serif;
- line-height: 24px;
- margin-top: 13px;
- }
- }
-
- .hotlist-item-1,
- .hotlist-item-2,
- .hotlist-item-4 {
- color: #fff;
-
- .location svg g {
- stroke: #fff;
- }
-
- .job-title,
- .job-desc {
- color: #fff;
- }
- }
-
- .hotlist-item-1 {
- background-image: linear-gradient(305.22deg, #9d41c9 0.01%, #ef476f 100%);
- }
-
- .hotlist-item-2 {
- background-image: linear-gradient(140.77deg, #9d41c9 0%, #50ade8 100%);
- }
-
- .hotlist-item-3 {
- background-image: linear-gradient(133.83deg, #f4f4f4 0%, #d4d4d4 100%);
- }
-
- .hotlist-item-4 {
- background-image: linear-gradient(359.14deg, #555 0%, #2a2a2a 100%);
- }
-
- .hotlist-item-button-3,
- .hotlist-item-button-4 {
- font-family: Roboto, sans-serif;
- font-size: 12px;
- letter-spacing: 0.8px;
- line-height: 30px;
- padding: 0 15px;
- text-transform: uppercase;
- font-weight: bold;
- margin: 22px 0 9px;
- max-width: 104px;
- border-radius: 15px;
- }
-
- .hotlist-item-button-3 {
- background-color: #137d60;
- color: #fff;
- }
-
- .hotlist-item-button-4 {
- background-color: #fff;
- color: #229174;
- }
- }
- }
-}
diff --git a/src/shared/containers/Gigs/jobLisingStyles.scss b/src/shared/containers/Gigs/jobLisingStyles.scss
deleted file mode 100644
index 3c294a2fd5..0000000000
--- a/src/shared/containers/Gigs/jobLisingStyles.scss
+++ /dev/null
@@ -1,194 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-@import "~styles/mixins";
-
-.loading-text {
- font-family: Roboto, sans-serif;
- font-size: 24px;
- line-height: 26px;
- color: #2a2a2a;
- text-align: center;
-}
-
-.container,
-.container-with-hotlist {
- max-width: $screen-lg;
- margin: auto;
-
- @media (max-width: 1280px) {
- padding: 0 15px;
- }
-
- .gigs {
- display: block;
- flex: 1;
- }
-
- .filters {
- display: flex;
- align-items: flex-end;
-
- @include xs-to-sm {
- flex-direction: column;
- }
-
- > div {
- margin-right: 30px;
- flex: 1;
-
- @include xs-to-sm {
- margin-right: 0;
- margin-bottom: 15px;
- }
-
- &:first-child {
- flex: 3;
- }
-
- &:last-child {
- margin-right: 0;
- }
- }
- }
-
- .jobs-list-container {
- display: flex;
- flex-direction: column;
- margin: 20px 0 50px 0;
-
- .no-results {
- display: flex;
- justify-content: center;
- }
- }
-}
-
-.container-with-hotlist {
- display: flex;
-
- .hotlist {
- display: flex;
- flex: 1;
- margin: 5px 0;
-
- h5 {
- font-family: Barlow, sans-serif;
- font-size: 20px;
- line-height: 24px;
- text-transform: uppercase;
- font-weight: 600;
- margin: 7px 0 31px 6px;
- color: #2a2a2a;
- }
-
- .hotlist-items {
- display: grid;
- align-items: stretch;
- gap: 0 20px;
- width: 100%;
- grid-template-columns: 1fr 1fr 1fr 1fr;
-
- @include md-to-lg {
- grid-template-columns: 1fr 1fr;
- }
-
- @include xs-to-sm {
- grid-template-columns: 1fr;
- }
-
- .hotlist-item-1,
- .hotlist-item-2,
- .hotlist-item-3,
- .hotlist-item-4 {
- display: flex;
- flex-direction: column;
- border-radius: 10px;
- padding: 20px 20px 12px;
- font-family: Roboto, sans-serif;
- margin-bottom: 16px;
- color: #2a2a2a;
-
- .location {
- font-size: 14px;
- display: flex;
- align-items: center;
- line-height: 30px;
-
- svg {
- margin-right: 5px;
- width: 15px;
- height: 17px;
- }
- }
-
- .job-title {
- margin: 0;
- }
-
- .job-money {
- line-height: 30px;
- }
-
- .job-desc {
- font-family: Roboto, sans-serif;
- line-height: 24px;
- margin-top: 13px;
- }
- }
-
- .hotlist-item-1,
- .hotlist-item-2,
- .hotlist-item-4 {
- color: #fff;
-
- .location svg g {
- stroke: #fff;
- }
-
- .job-title,
- .job-desc {
- color: #fff;
- }
- }
-
- .hotlist-item-1 {
- background-image: linear-gradient(305.22deg, #9d41c9 0.01%, #ef476f 100%);
- }
-
- .hotlist-item-2 {
- background-image: linear-gradient(125.57deg, #2c95d7 0%, #83c5ee 100%);
- }
-
- .hotlist-item-3 {
- background-image: linear-gradient(309.43deg, #f4f4f4 0%, #d4d4d4 100%);
- }
-
- .hotlist-item-4 {
- background-image: linear-gradient(359.14deg, #555 0%, #2a2a2a 100%);
- }
-
- .hotlist-item-button-3,
- .hotlist-item-button-4 {
- font-family: Roboto, sans-serif;
- font-size: 12px;
- letter-spacing: 0.8px;
- line-height: 30px;
- padding: 0 15px;
- text-transform: uppercase;
- font-weight: bold;
- margin: 22px 0 9px;
- max-width: 104px;
- border-radius: 15px;
- }
-
- .hotlist-item-button-3 {
- background-color: #137d60;
- color: #fff;
- }
-
- .hotlist-item-button-4 {
- background-color: #fff;
- color: #229174;
- }
- }
- }
-}
diff --git a/src/shared/containers/GigsPages/index.jsx b/src/shared/containers/GigsPages/index.jsx
deleted file mode 100644
index 5e5bd0431c..0000000000
--- a/src/shared/containers/GigsPages/index.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Connects the Redux store to the GigsPages component.
- */
-import React from 'react';
-import PT from 'prop-types';
-import Header from 'containers/TopcoderHeader';
-import Footer from 'components/TopcoderFooter';
-import Viewport from 'components/Contentful/Viewport';
-import { config, isomorphy } from 'topcoder-react-utils';
-import RecruitCRMJobDetails from 'containers/Gigs/RecruitCRMJobDetails';
-import { Helmet } from 'react-helmet';
-import MetaTags from 'components/MetaTags';
-import { OptimizelyProvider, createInstance } from '@optimizely/react-sdk';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import { v4 as uuidv4 } from 'uuid';
-import ChallengeTab from 'components/challenge-listing/ChallengeTab';
-
-import './style.scss';
-
-const optimizelyClient = createInstance({
- sdkKey: config.OPTIMIZELY.SDK_KEY,
-});
-const cookies = require('browser-cookies');
-
-const GIGS_SOCIAL_SHARE_IMAGE = 'https://images.ctfassets.net/b5f1djy59z3a/4XlYNZgq5Kfa4XdwQ6pDfV/769ea7be756a88145b88ce685f050ebc/10_Freelance_Gig.png';
-
-function GigsPagesContainer(props) {
- const {
- match,
- profile,
- history,
- location,
- } = props;
- const optProfile = {
- attributes: {},
- };
- if (!_.isEmpty(profile)) {
- optProfile.id = String(profile.userId);
- optProfile.attributes.TC_Handle = profile.handle;
- optProfile.attributes.HomeCountryCode = profile.homeCountryCode;
- optProfile.attributes.email = profile.email;
- } else if (isomorphy.isClientSide()) {
- const idCookie = cookies.get('_tc.aid');
- if (idCookie) {
- optProfile.id = JSON.parse(idCookie).aid;
- } else {
- optProfile.id = uuidv4();
- cookies.set('_tc.aid', JSON.stringify({
- aid: optProfile.id,
- }), {
- secure: true,
- domain: '',
- expires: 365, // days
- });
- }
- }
- const { id, type } = match.params;
- const isApply = `${config.GIGS_PAGES_PATH}/${id}/apply` === match.url;
- const title = 'Find Freelance Work | Gigs | Topcoder';
- const description = 'Compete and build up your profiles and skills! Topcoder members become eligible to work on Gig Work projects by first proving themselves in various skill sets through Topcoder competitions.';
- const inner = (
-
-
- {
- hotlistJobs.length && decision.enabled && (
-
-
-
- {
- jobsToDisplay.length
- ? jobsToDisplay.map(job =>
- {
- jobsToDisplay.length
- ?
-
- )
- }
- HOT THIS WEEK
-
- {
- hotlistJobs.map((hjob, indx) => (indx <= 1 ? (
- this.onHotlistClick(hjob)}>
-
- {hjob.name}
-${hjob.min_annual_salary} - {hjob.max_annual_salary} / {getSalaryType(hjob.salary_type)}
- {
- getCustomField(hjob.custom_fields, 'Hotlist excerpt') !== 'n/a' ? (
-
- {
- `${getCustomField(hjob.custom_fields, 'Hotlist excerpt').substring(0, CONTENT_PREVIEW_LENGTH)}${getCustomField(hjob.custom_fields, 'Hotlist excerpt').length > CONTENT_PREVIEW_LENGTH ? '...' : ''}`
- }
-
- ) : null
- }
-
- ) : (
-
-
- )))
- }
- {hjob.name}
-${hjob.min_annual_salary} - {hjob.max_annual_salary} / {getSalaryType(hjob.salary_type)}
- {
- getCustomField(hjob.custom_fields, 'Hotlist excerpt') !== 'n/a' ? (
-
- {
- `${getCustomField(hjob.custom_fields, 'Hotlist excerpt').substring(0, CONTENT_PREVIEW_LENGTH)}${getCustomField(hjob.custom_fields, 'Hotlist excerpt').length > CONTENT_PREVIEW_LENGTH ? '...' : ''}`
- }
-
- ) : null
- }
- this.onHotlistClick(hjob)}>Apply Now
-
-
-
-
-
-
- ) : null
- }
-
-
- );
-
- return (
-
-
- {
- id ? (
-
-
- )}
- path={`${config.GIGS_PAGES_PATH}/roles`}
- />
-
diff --git a/src/shared/services/contentful.js b/src/shared/services/contentful.js
index 2f1531253a..1577a73871 100644
--- a/src/shared/services/contentful.js
+++ b/src/shared/services/contentful.js
@@ -25,7 +25,7 @@ if (isomorphy.isServerSide()) {
const EDU_TAXONOMY_ID = '15caxocitaxyK65K9oSd91';
// The keys for subcategory lists/references
// If need to add new track add its fieldID here to be autopickuped
-const EDU_TRACK_KEYS = ['dataScience', 'competitiveProgramming', 'design', 'development', 'qualityAssurance', 'topcoder', 'gigWork'];
+const EDU_TRACK_KEYS = ['dataScience', 'competitiveProgramming', 'design', 'development', 'qualityAssurance', 'topcoder'];
const EDU_ARTICLE_TYPES = ['Article', 'Video', 'Forum post'];
diff --git a/src/shared/services/engagements.js b/src/shared/services/engagements.js
new file mode 100644
index 0000000000..8de9936f07
--- /dev/null
+++ b/src/shared/services/engagements.js
@@ -0,0 +1,266 @@
+import { config } from 'topcoder-react-utils';
+
+const engagementsApiUrl = config.API.ENGAGEMENTS || `${config.API.V6}/engagements/engagements`;
+const skillsApiUrl = `${config.API.V5}/standardized-skills/skills`;
+const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const UNKNOWN_SKILL_LABEL = 'Unknown skill';
+
+function isUuid(value) {
+ return typeof value === 'string' && UUID_PATTERN.test(value);
+}
+
+function asArray(value) {
+ if (!value) return [];
+ return Array.isArray(value) ? value : [value];
+}
+
+function buildEngagementsUrl(page, pageSize, filters = {}) {
+ const normalizedPage = Number.isFinite(page) ? Math.max(1, page + 1) : 1;
+ const url = new URL(engagementsApiUrl);
+
+ url.searchParams.append('page', normalizedPage.toString());
+ if (Number.isFinite(pageSize)) {
+ url.searchParams.append('perPage', pageSize.toString());
+ }
+
+ if (filters.status) {
+ const normalizedStatus = String(filters.status).trim().toUpperCase();
+ if (normalizedStatus) {
+ url.searchParams.append('status', normalizedStatus);
+ }
+ }
+
+ const hasSkillFilters = filters.skills && filters.skills.length;
+ if (filters.search && !hasSkillFilters) {
+ url.searchParams.append('search', String(filters.search).trim());
+ }
+
+ if (filters.location) {
+ const countries = String(filters.location)
+ .split(',')
+ .map(entry => entry.trim())
+ .filter(Boolean);
+ if (countries.length) {
+ url.searchParams.append('countries', countries.join(','));
+ }
+ }
+
+ if (filters.skills && filters.skills.length) {
+ const skills = Array.isArray(filters.skills)
+ ? filters.skills
+ : [filters.skills];
+ const normalizedSkills = skills
+ .map(skill => String(skill).trim())
+ .filter(Boolean);
+ if (normalizedSkills.length) {
+ url.searchParams.append('requiredSkills', normalizedSkills.join(','));
+ }
+ }
+
+ if (filters.sortBy === 'createdAt' || filters.sortBy === 'updatedAt') {
+ url.searchParams.append('sortBy', filters.sortBy);
+ url.searchParams.append('sortOrder', 'desc');
+ }
+
+ return url;
+}
+
+function getAuthHeaders(tokenV3) {
+ if (!tokenV3) return undefined;
+ return {
+ Authorization: `Bearer ${tokenV3}`,
+ };
+}
+
+function extractEngagements(data) {
+ if (Array.isArray(data)) return data;
+ if (data && Array.isArray(data.data)) return data.data;
+ if (data && data.result && Array.isArray(data.result.content)) return data.result.content;
+ if (data && data.result && Array.isArray(data.result.data)) return data.result.data;
+ if (data && Array.isArray(data.items)) return data.items;
+ return [];
+}
+
+function extractSkills(data) {
+ if (Array.isArray(data)) return data;
+ if (data && Array.isArray(data.data)) return data.data;
+ if (data && data.result && Array.isArray(data.result.content)) return data.result.content;
+ if (data && data.result && Array.isArray(data.result.data)) return data.result.data;
+ if (data && Array.isArray(data.items)) return data.items;
+ return [];
+}
+
+function extractMeta(data, engagementsCount) {
+ if (!data || Array.isArray(data)) return { totalCount: engagementsCount };
+ if (data.meta) return data.meta;
+ if (data.result && data.result.metadata) return data.result.metadata;
+ if (typeof data.totalCount === 'number') return { totalCount: data.totalCount };
+ if (typeof data.total === 'number') return { totalCount: data.total };
+ if (typeof data.count === 'number') return { totalCount: data.count };
+ return { totalCount: engagementsCount };
+}
+
+async function fetchSkillsByIds(skillIds, tokenV3) {
+ const ids = Array.isArray(skillIds) ? skillIds : [skillIds];
+ const uniqueIds = Array.from(new Set(ids.filter(Boolean)));
+ if (!uniqueIds.length) return [];
+
+ const params = new URLSearchParams();
+ uniqueIds.forEach(skillId => params.append('skillId', skillId));
+ params.set('disablePagination', 'true');
+
+ const headers = getAuthHeaders(tokenV3);
+ const res = await fetch(`${skillsApiUrl}?${params.toString()}`, {
+ method: 'GET',
+ headers,
+ });
+
+ if (!res.ok) {
+ throw new Error(res.statusText);
+ }
+
+ const data = await res.json();
+ return extractSkills(data);
+}
+
+function resolveSkillLabel(skill, skillNameById) {
+ if (!skill) return null;
+
+ if (typeof skill === 'object') {
+ const label = skill.name || skill.title;
+ if (label) return label;
+
+ const skillId = skill.id || skill.value;
+ if (isUuid(skillId)) {
+ return skillNameById.get(skillId) || UNKNOWN_SKILL_LABEL;
+ }
+ return skillId ? String(skillId) : null;
+ }
+
+ if (isUuid(skill)) {
+ return skillNameById.get(skill) || UNKNOWN_SKILL_LABEL;
+ }
+
+ return String(skill);
+}
+
+function normalizeEngagementSkills(engagement, skillNameById) {
+ if (!engagement || typeof engagement !== 'object') return engagement;
+
+ return {
+ ...engagement,
+ skills: asArray(engagement.skills)
+ .map(skill => resolveSkillLabel(skill, skillNameById))
+ .filter(Boolean),
+ requiredSkills: asArray(engagement.requiredSkills)
+ .map(skill => resolveSkillLabel(skill, skillNameById))
+ .filter(Boolean),
+ skillsets: asArray(engagement.skillsets)
+ .map(skill => resolveSkillLabel(skill, skillNameById))
+ .filter(Boolean),
+ };
+}
+
+async function hydrateEngagementSkills(engagements, tokenV3) {
+ if (!Array.isArray(engagements) || !engagements.length) {
+ return engagements;
+ }
+
+ const skillIds = new Set();
+ engagements.forEach((engagement) => {
+ const skillValues = [
+ ...asArray(engagement.skills),
+ ...asArray(engagement.requiredSkills),
+ ...asArray(engagement.skillsets),
+ ];
+ skillValues.forEach((skill) => {
+ if (typeof skill === 'object' && skill !== null) {
+ const skillId = skill.id || skill.value;
+ if (isUuid(skillId)) {
+ skillIds.add(skillId);
+ }
+ } else if (isUuid(skill)) {
+ skillIds.add(skill);
+ }
+ });
+ });
+
+ let skillNameById = new Map();
+ if (skillIds.size) {
+ try {
+ const skills = await fetchSkillsByIds(Array.from(skillIds), tokenV3);
+ skillNameById = new Map(
+ skills
+ .map(skill => [skill.id, skill.name || skill.title || skill.label])
+ .filter(([id, label]) => Boolean(id) && Boolean(label)),
+ );
+ } catch (error) {
+ skillNameById = new Map();
+ }
+ }
+
+ return engagements.map(engagement => normalizeEngagementSkills(engagement, skillNameById));
+}
+
+/**
+ * Fetches engagements.
+ *
+ * @param {number} page - Page number (0-based).
+ * @param {number} pageSize - Number of items per page.
+ * @param {Object} filters - Filters for engagements.
+ * @param {string} tokenV3 - Optional auth token.
+ * @returns {Promise<{engagements: Object[], meta: Object}>} The fetched data.
+ */
+export default async function getEngagements(page, pageSize, filters = {}, tokenV3) {
+ const url = buildEngagementsUrl(page, pageSize, filters);
+ const headers = getAuthHeaders(tokenV3);
+
+ try {
+ const res = await fetch(url.toString(), {
+ method: 'GET',
+ headers,
+ });
+
+ if (!res.ok) {
+ throw new Error(res.statusText);
+ }
+
+ const data = await res.json();
+ const engagements = extractEngagements(data);
+ const meta = extractMeta(data, engagements.length);
+ const hydratedEngagements = await hydrateEngagementSkills(engagements, tokenV3);
+
+ return { engagements: hydratedEngagements, meta };
+ } catch (error) {
+ return Promise.reject(error);
+ }
+}
+
+/**
+ * Fetches a single engagement by ID.
+ *
+ * @param {string} engagementId - The engagement ID.
+ * @param {string} tokenV3 - Optional auth token.
+ * @returns {Promise