+ 
+ {errorMsg ? ({errorMsg}) : null}
);
}
@@ -48,12 +52,14 @@ Checkbox.defaultProps = {
checked: false,
onChange: () => {},
size: 'sm',
+ errorMsg: '',
};
Checkbox.propTypes = {
checked: PT.bool,
onChange: PT.func,
size: PT.oneOf(['xs', 'sm', 'lg']),
+ errorMsg: PT.string,
};
export default Checkbox;
diff --git a/src/shared/components/GUIKit/Checkbox/style.scss b/src/shared/components/GUIKit/Checkbox/style.scss
index 7d6801f888..28da3d2e24 100644
--- a/src/shared/components/GUIKit/Checkbox/style.scss
+++ b/src/shared/components/GUIKit/Checkbox/style.scss
@@ -8,20 +8,16 @@
background-color: $tc-white;
border: 1px solid $gui-kit-gray-30;
+ &.haveError {
+ border: 2px solid #ef476f;
+ }
+
/* Create the checkmark/indicator (hidden when not checked) */
.after {
position: absolute;
display: none;
left: 50%;
top: 50%;
- -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
- filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
-
- :global {
- path {
- fill: $tc-white;
- }
- }
}
}
@@ -46,8 +42,8 @@
border-radius: 4px;
.after {
- margin-left: -8px;
- margin-top: -9px;
+ margin-left: -9px;
+ margin-top: -7px;
}
}
}
@@ -63,8 +59,8 @@
border-radius: 3px;
.after {
- margin-left: -6px;
- margin-top: -7px;
+ margin-left: -7px;
+ margin-top: -6px;
}
}
}
@@ -80,8 +76,8 @@
border-radius: 2px;
.after {
- margin-left: -5px;
- margin-top: -5px;
+ margin-left: -6px;
+ margin-top: -4px;
}
}
}
@@ -107,3 +103,14 @@
}
}
}
+
+.errorMessage {
+ display: block;
+
+ @include errorMessage;
+
+ position: absolute;
+ white-space: nowrap;
+ margin: 35px 0 0 0;
+ color: #ef476f;
+}
diff --git a/src/shared/components/GUIKit/Datepicker/index.jsx b/src/shared/components/GUIKit/Datepicker/index.jsx
index 53bc0887ae..5cf376d7ef 100644
--- a/src/shared/components/GUIKit/Datepicker/index.jsx
+++ b/src/shared/components/GUIKit/Datepicker/index.jsx
@@ -11,9 +11,13 @@ import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';
import IconCalendar from 'assets/images/tc-edu/icon-calendar.svg';
import useWindowSize from 'utils/useWindowSize';
+import CalendarWeek from 'react-dates/lib/components/CalendarWeek';
import IconNext from '../Assets/Images/icon-next.svg';
import IconPrev from '../Assets/Images/icon-prev.svg';
+// eslint-disable-next-line no-unused-expressions, react/forbid-foreign-prop-types
+CalendarWeek && CalendarWeek.propTypes && delete CalendarWeek.propTypes.children; // fixing the bug in react-dates, more detail in here https://github.com/airbnb/react-dates/issues/1121
+
function Datepicker({
value,
placeholder,
@@ -27,7 +31,6 @@ function Datepicker({
const { width } = useWindowSize();
return (
}
navNext={{d.date ? d.date() : ''}
)}
enableOutsideDays
firstDayOfWeek={1}
diff --git a/src/shared/components/GUIKit/Datepicker/style.scss b/src/shared/components/GUIKit/Datepicker/style.scss
index 25a0f7a9e5..320798b212 100644
--- a/src/shared/components/GUIKit/Datepicker/style.scss
+++ b/src/shared/components/GUIKit/Datepicker/style.scss
@@ -4,6 +4,7 @@
position: relative;
display: flex;
flex-direction: column;
+ flex-grow: 1;
.label {
@include textInputLabel;
@@ -26,6 +27,12 @@
:global {
@import '~react-dates/lib/css/_datepicker.css';
+ .SingleDatePicker {
+ width: 100%;
+ position: relative;
+ display: inline-block;
+ }
+
button {
&:focus {
outline: none;
@@ -34,6 +41,8 @@
.SingleDatePickerInput {
position: relative;
+ border: none;
+ width: 100%;
.SingleDatePickerInput_calendarIcon {
position: absolute;
@@ -44,9 +53,29 @@
width: 48px;
bottom: 0;
z-index: 1;
+ background: 0 0;
+ border: 0;
+ color: inherit;
+ font: inherit;
+ line-height: normal;
+ overflow: visible;
+ cursor: pointer;
+ display: inline-block;
+ vertical-align: middle;
}
.DateInput {
+ padding: 0;
+ width: 100%;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ font-weight: 400;
+ font-size: 15px;
+ margin: 0;
+ background: #fff;
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
+
input {
@include textInput;
@@ -57,32 +86,103 @@
.DateInput_fang {
display: none;
}
+
+ .DateInput_screenReaderMessage {
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ }
}
.SingleDatePicker_picker {
z-index: 7;
top: 64px !important;
+ background-color: #fff;
+ position: absolute;
+
+ .DayPicker {
+ background: #fff;
+ position: relative;
+ text-align: left;
+
+ .DayPicker_weekHeaders__horizontal {
+ margin-left: 9px;
+
+ .DayPicker_weekHeader {
+ color: #757575;
+ position: absolute;
+ top: 62px;
+ z-index: 2;
+ text-align: left;
+
+ .DayPicker_weekHeader_ul {
+ list-style: none;
+ margin: 1px 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-size: 14px;
+
+ .DayPicker_weekHeader_ul {
+ list-style: none;
+ margin: 1px 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-size: 14px;
+ display: inline-block;
+ text-align: center;
+ }
+ }
+ }
+ }
+
+ .DayPicker_weekHeaders {
+ position: relative;
+
+ .DayPicker_weekHeader_li {
+ font-size: 15px;
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+ font-weight: 400;
+ line-height: 20px;
+ display: inline-block;
+ text-align: center;
+ }
+ }
+
+ .DayPicker_focusRegion {
+ outline: 0;
+ }
+ }
.DayPicker__withBorder {
border: 1px solid $gui-kit-gray-30;
box-shadow: 2px 2px 3px 0 $tc-gray-neutral-light;
overflow: hidden;
+ border-radius: 3px;
+ }
+
+ .DayPickerNavigation__horizontal {
+ height: 0;
+ }
+
+ .DayPickerNavigation {
+ position: relative;
+ z-index: 2;
}
.DayPickerNavigation_button {
position: absolute;
top: 18px;
+ cursor: pointer;
&:focus {
outline: none;
}
- svg {
- path {
- fill: $gui-kit-level-2;
- }
- }
-
&:first-child {
left: 18px;
}
@@ -99,6 +199,9 @@
padding-bottom: 10px;
margin-bottom: 45px;
position: relative;
+ color: $gui-kit-gray-90;
+ text-align: center;
+ caption-side: initial;
&::after {
content: '';
@@ -107,16 +210,17 @@
left: -5px;
width: calc(100% + 10px);
height: 1px;
- background-color: $tc-gray-20;
+ background-color: #d4d4d4;
}
}
-
+ /* stylelint-disable */
.DayPicker_weekHeader {
.DayPicker_weekHeader_ul {
.DayPicker_weekHeader_li {
small {
color: $gui-kit-gray-90;
font-weight: 500 !important;
+ font-size: 16px;
}
}
}
@@ -124,14 +228,46 @@
.DayPicker_focusRegion {
.DayPicker_transitionContainer {
+ position: relative;
+ overflow: hidden;
+ border-radius: 3px;
+
&.DayPicker_transitionContainer__horizontal {
transition: none !important;
}
.CalendarMonthGrid {
+ background: #fff;
+ text-align: left;
+ z-index: 0;
+ position: absolute;
+ left: 9px;
+
.CalendarMonthGrid_month__horizontal {
+ display: inline-block;
+ vertical-align: top;
+ min-height: 100%;
+
+ &.CalendarMonthGrid_month__hidden {
+ visibility: hidden;
+ }
+
+ &.CalendarMonthGrid_month__hideForAnimation {
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+ pointer-events: none;
+ }
+
.CalendarMonth {
+ background: #fff;
+ text-align: center;
+ vertical-align: top;
+ user-select: none;
+
table.CalendarMonth_table {
+ margin-bottom: 0;
+
tbody {
tr {
td {
@@ -155,6 +291,7 @@
&.CalendarDay__default {
color: #2a2a2a;
+ padding: 0;
}
&.CalendarDay__blocked_out_of_range {
@@ -171,11 +308,12 @@
}
&.CalendarDay__outside {
- color: $tc-gray-20;
+ color: $gui-kit-gray-30;
}
&:not(.CalendarDay__outside):not(.CalendarDay__blocked_out_of_range):not(.CalendarDay__selected):hover {
background: transparent !important;
+ cursor: pointer;
div {
background: $tc-gray-05;
@@ -190,6 +328,7 @@
}
}
}
+ /* stylelint-enable */
}
}
}
diff --git a/src/shared/components/GUIKit/Dropdown/style.scss b/src/shared/components/GUIKit/Dropdown/style.scss
index 7ca3bf762b..79a2fc4451 100644
--- a/src/shared/components/GUIKit/Dropdown/style.scss
+++ b/src/shared/components/GUIKit/Dropdown/style.scss
@@ -27,6 +27,7 @@
padding-top: 12px;
&.haveValue .label,
+ &.haveError .label,
&.isFocused .label {
display: flex;
}
@@ -147,6 +148,7 @@
line-height: 30px !important;
color: $gui-kit-gray-90 !important;
background-color: transparent !important;
+ text-decoration: none !important;
&.is-selected {
font-weight: bold !important;
diff --git a/src/shared/components/GUIKit/DropdownTerms/style.scss b/src/shared/components/GUIKit/DropdownTerms/style.scss
index 121aa54da7..d06e106b10 100644
--- a/src/shared/components/GUIKit/DropdownTerms/style.scss
+++ b/src/shared/components/GUIKit/DropdownTerms/style.scss
@@ -149,6 +149,7 @@
:global {
.Select-menu-outer {
border: none !important;
+ padding-bottom: 10px !important;
}
}
}
diff --git a/src/shared/components/GUIKit/FilePicker/index.jsx b/src/shared/components/GUIKit/FilePicker/index.jsx
new file mode 100644
index 0000000000..19d9fa1050
--- /dev/null
+++ b/src/shared/components/GUIKit/FilePicker/index.jsx
@@ -0,0 +1,77 @@
+/**
+ * GUIKit FilePicker based on filestack-react
+ */
+
+import React from 'react';
+import PT from 'prop-types';
+import Dropzone from 'react-dropzone';
+
+import './styles.scss';
+
+/**
+ * FilestackFilePicker component
+ */
+function FilestackFilePicker({
+ onFilePick,
+ btnText,
+ infoText,
+ options,
+ errorMsg,
+ inputOptions,
+ file,
+}) {
+ let fileName = file ? file.name : null;
+ return (
+ {fileName}
+ ) : ( ++ {infoText} + OR +
+ ) + } + +
- {optionsWithKey.map(o => (
-
+
-
- {o.label ? ({o.label}) : null}
-
- ))}
-
+ {optionsWithKey.map(o => (
+
+ {errorMsg ? ({errorMsg}) : null}
+
+
+ {o.label ? ({o.label}) : null}
+
+ ))}
+
+ {
+ job.error || job.enable_job_application_form !== 1 ? (
+
+ );
+}
+
+GigApply.defaultProps = {
+ formErrors: {},
+ applying: false,
+ application: null,
+};
+
+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(),
+};
diff --git a/src/shared/components/Gigs/GigApply/style.scss b/src/shared/components/Gigs/GigApply/style.scss
new file mode 100644
index 0000000000..c5b059206c
--- /dev/null
+++ b/src/shared/components/Gigs/GigApply/style.scss
@@ -0,0 +1,277 @@
+@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;
+ }
+
+ .error {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 27px;
+ height: 80vh;
+ }
+
+ .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;
+ }
+ }
+
+ .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;
+ }
+ }
+ }
+/* stylelint-disable */
+ .cta-buttons {
+ display: flex;
+ justify-content: center;
+ 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;
+ }
+ }
+ }
+ /* stylelint-enable */
+}
diff --git a/src/shared/components/Gigs/GigDetails.jsx b/src/shared/components/Gigs/GigDetails/index.jsx
similarity index 92%
rename from src/shared/components/Gigs/GigDetails.jsx
rename to src/shared/components/Gigs/GigDetails/index.jsx
index df0b06f343..2471687f42 100644
--- a/src/shared/components/Gigs/GigDetails.jsx
+++ b/src/shared/components/Gigs/GigDetails/index.jsx
@@ -22,6 +22,7 @@ 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';
// Cleanup HTML from style tags
// so it won't affect other parts of the UI
@@ -35,7 +36,7 @@ const ReactHtmlParserOptions = {
};
export default function GigDetails(props) {
- const { job } = props;
+ const { job, application } = props;
let shareUrl;
if (isomorphy.isClientSide()) {
shareUrl = encodeURIComponent(window.location.href);
@@ -48,7 +49,8 @@ export default function GigDetails(props) {
{
job.error || job.enable_job_application_form !== 1 ? (
+
+ ) : (
+ Gig does not exist.
+
+ VIEW OTHER GIGS
+
+
+
+ )
+ }
+ {job.name}
+
+ { application.error ? 
}
+
+ ) : null
+ }
+ {
+ applying ? (
+ {application.error ? 'OOPS!' : 'APPLICATION SUBMITTED'}
+ { + application.error ? ( +Looks like there is a problem on our end. Please try again.
If this persists please contact support@topcoder.com.
We will contact you via email if it seems like a fit!
+ ) + } +
+ {
+ application.error ? (
+ {
+ e.preventDefault();
+ window.location.reload();
+ }}
+ >APPLY AGAIN
+
+ ) : (
+ GO TO GIG LIST
+ )
+ }
+
+
+
+ ) : null
+ }
+ {
+ !application && !applying ? (
+ Processing your application…
+
+
+ ) : null
+ }
+ PERSONAL INFORMATION
+Welcome to Topcoder Gigs! We’d like to get to know you.
+
+
+
+ onFormInputChange('fname', val)}
+ errorMsg={formErrors.fname}
+ value={formData.fname}
+ required
+ />
+ onFormInputChange('lname', val)}
+ errorMsg={formErrors.lname}
+ value={formData.lname}
+ required
+ />
+
+
+ onFormInputChange('email', val)}
+ errorMsg={formErrors.email}
+ value={formData.email}
+ required
+ />
+ 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
+If you have a Topcoder profile, please share. Not a Member?
+
+
+
+ onFormInputChange('handle', val)}
+ errorMsg={formErrors.handle}
+ value={formData.handle}
+ />
+ onFormInputChange('tcProfileLink', val)}
+ errorMsg={formErrors.tcProfileLink}
+ value={formData.handle ? `topcoder.com/members/${formData.handle}` : null}
+ />
+
+ SHARE YOUR EXPECTATIONS
+Your Professional Work History
+
+
+
+ onFormInputChange('payExpectation', val)}
+ errorMsg={formErrors.payExpectation}
+ value={formData.payExpectation}
+ />
+ onFormInputChange('availFrom', val ? val.toISOString() : null)}
+ errorMsg={formErrors.availFrom}
+ value={formData.availFrom}
+ />
+
+ RESUME & SKILLS
+Upload Your Resume or CV
+
+ 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
+ />
+
+ FINAL QUESTIONS
+Please Complete the Following Questions
+
+ onFormInputChange('reffereal', val)}
+ errorMsg={formErrors.reffereal}
+ value={formData.reffereal}
+ required
+ />
+
+ onFormInputChange('whyFit', val)}
+ errorMsg={formErrors.whyFit}
+ value={formData.whyFit}
+ />
+ onFormInputChange('timezoneConfirm', val)}
+ errorMsg={formErrors.timezoneConfirm}
+ options={formData.timezoneConfirm}
+ size="lg"
+ />
+ onFormInputChange('durationConfirm', val)}
+ errorMsg={formErrors.durationConfirm}
+ options={formData.durationConfirm}
+ size="lg"
+ />
+
+
+ What is your availability per week?
+
+ {
+ _.map(formData.timeAvailability, (cbox, indx) => (
+
+
+ {
+ formData.timeAvailability[indx].checked = val;
+ onFormInputChange('timeAvailability', formData.timeAvailability);
+ }}
+ checked={formData.timeAvailability[indx].checked}
+ size="lg"
+ />
+ {cbox.label}
+
+ ))
+ }
+ Are you able to work during the specified timezone? ({`${getCustomField(job.custom_fields, 'Timezone')}`})
+Are you ok to work with the duration of the gig? ({`${getCustomField(job.custom_fields, 'Duration')}`})
+
+ onFormInputChange('notes', val)}
+ errorMsg={formErrors.notes}
+ />
+
+
+ Employment Opportunity Policy
+
+
+
+
+ View Our Equal
+ onFormInputChange('agreedTerms', val)}
+ checked={formData.agreedTerms}
+ errorMsg={formErrors.agreedTerms}
+ size="lg"
+ />
+ I agree to Candidate Terms *
+
+
-
Gig does not exist.
+ { job.error ?{ job.error ? 'Gig does not exist' : 'This Gig has been Fulfilled'}
VIEW OTHER GIGS
@@ -110,7 +112,11 @@ export default function GigDetails(props) {
- APPLY TO THIS JOB
+ {
+ !application || !application.success ? (
+ APPLY TO THIS JOB
+ ) : null
+ }
VIEW OTHER JOBS