+
+
+
+
+
+
+
+
+ {
+ jobsToDisplay.length
+ ? jobsToDisplay.map(job => )
+ : No Results
+ }
+
{
jobsToDisplay.length
- ? jobsToDisplay.map(job =>
)
- :
No Results
+ ?
: null
}
{
- jobsToDisplay.length
- ?
: null
+ hotlistJobs.length && decision.enabled && (
+
+
HOT THIS WEEK
+
+ {
+ hotlistJobs.map((hjob, indx) => (indx <= 1 ? (
+
+
{hjob.country}
+
{hjob.name}
+
${hjob.min_annual_salary} - {hjob.max_annual_salary} / {getSalaryType(hjob.salary_type)}
+
+ ) : (
+
+
{hjob.country}
+
{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
+ }
+
Apply Now
+
+ )))
+ }
+
+
+ )
}
);
@@ -218,6 +285,7 @@ RecruitCRMJobsContainer.propTypes = {
getJobs: PT.func.isRequired,
loading: PT.bool,
jobs: PT.arrayOf(PT.shape),
+ optimizely: PT.shape().isRequired,
};
function mapStateToProps(state) {
@@ -241,4 +309,4 @@ function mapDispatchToActions(dispatch) {
export default connect(
mapStateToProps,
mapDispatchToActions,
-)(RecruitCRMJobsContainer);
+)(withOptimizely(RecruitCRMJobsContainer));
diff --git a/src/shared/containers/Gigs/jobLisingStyles.scss b/src/shared/containers/Gigs/jobLisingStyles.scss
index d1997b2f7c..535a92cb16 100644
--- a/src/shared/containers/Gigs/jobLisingStyles.scss
+++ b/src/shared/containers/Gigs/jobLisingStyles.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
@import "~styles/mixins";
.loading-text {
@@ -8,14 +9,19 @@
text-align: center;
}
-.container {
+.container,
+.container-with-hotlist {
max-width: $screen-lg;
margin: auto;
- @include xs-to-sm {
+ @media (max-width: 1280px) {
padding: 0 15px;
}
+ .gigs {
+ display: block;
+ }
+
.filters {
display: flex;
align-items: flex-end;
@@ -54,3 +60,156 @@
}
}
}
+
+.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/GigsPages.jsx b/src/shared/containers/GigsPages.jsx
index 9945ba4962..44db1f7058 100644
--- a/src/shared/containers/GigsPages.jsx
+++ b/src/shared/containers/GigsPages.jsx
@@ -6,19 +6,50 @@ import PT from 'prop-types';
import Header from 'containers/TopcoderHeader';
import Footer from 'components/TopcoderFooter';
import Viewport from 'components/Contentful/Viewport';
-import { config } from 'topcoder-react-utils';
+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';
+const optimizelyClient = createInstance({
+ sdkKey: config.OPTIMIZELY.SDK_KEY,
+});
+const cookies = require('browser-cookies');
-export default function GigsPagesContainer(props) {
- const { match } = props;
- const { id } = match.params;
+function GigsPagesContainer(props) {
+ const { match, profile } = 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 = 'Gig Work | Topcoder Community | 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.';
- return (
+ const inner = (