@@ -68,103 +68,101 @@ const JobCard = ({ job }) => {
68
68
: ""
69
69
} `}
70
70
>
71
- < div styleName = "card-header job-card-header" >
72
- < div styleName = "ribbon" >
73
- < Ribbon
74
- text = { job . label }
75
- tooltip = { ( { children } ) => (
76
- < ProgressTooltip job = { job } > { children } </ ProgressTooltip >
77
- ) }
78
- />
71
+ < a href = { `${ process . env . URL . BASE } /gigs/${ job . jobExternalId } ` } >
72
+ < div styleName = "card-header job-card-header" >
73
+ < div styleName = "ribbon" >
74
+ < Ribbon
75
+ text = { job . label }
76
+ tooltip = { ( { children } ) => (
77
+ < ProgressTooltip job = { job } > { children } </ ProgressTooltip >
78
+ ) }
79
+ />
80
+ </ div >
79
81
</ div >
80
- </ div >
81
- < div styleName = "card-body" >
82
- < div styleName = "job-card-content" >
83
- < div styleName = "content" >
84
- < h4 styleName = "title" >
85
- < a
86
- href = { `${ process . env . URL . BASE } /gigs/${ job . jobExternalId } ` } // eslint-disable-line no-undef
87
- >
88
- { job . title }
89
- </ a >
90
- </ h4 >
91
- < ul styleName = "job-items" >
92
- < li >
93
- < div styleName = "job-item" >
94
- { MY_GIGS_JOB_STATUS . COMPLETED === job . status && (
95
- < >
82
+ < div styleName = "card-body" >
83
+ < div styleName = "job-card-content" >
84
+ < div styleName = "content" >
85
+ < h4 styleName = "title" > { job . title } </ h4 >
86
+ < ul styleName = "job-items" >
87
+ < li >
88
+ < div styleName = "job-item" >
89
+ { MY_GIGS_JOB_STATUS . COMPLETED === job . status && (
90
+ < >
91
+ < div styleName = "caption" > Duration</ div >
92
+ < div styleName = "text" >
93
+ { getDateRange ( job . rbStartDate , job . rbEndDate ) }
94
+ </ div >
95
+ </ >
96
+ ) }
97
+ { MY_GIGS_JOB_STATUS . COMPLETED !== job . status && (
98
+ < >
99
+ < div styleName = "caption" > Payment Range</ div >
100
+ < div styleName = "text" > { paymentInfo } </ div >
101
+ </ >
102
+ ) }
103
+ </ div >
104
+ </ li >
105
+ < li >
106
+ < div styleName = "job-item" >
107
+ { MY_GIGS_JOB_STATUS . COMPLETED === job . status && (
108
+ < >
109
+ < div styleName = "caption" >
110
+ < span > Total Earnings</ span >
111
+ < span styleName = "earn-tip" >
112
+ < EarnTooltip >
113
+ < IconInfo />
114
+ </ EarnTooltip >
115
+ </ span >
116
+ </ div >
117
+ < div styleName = "text" > { `${ job . currency } ${ job . paymentTotal } ` } </ div >
118
+ </ >
119
+ ) }
120
+ { MY_GIGS_JOB_STATUS . COMPLETED !== job . status && (
121
+ < >
122
+ < div styleName = "caption" > Location</ div >
123
+ < div styleName = "text" > { job . location } </ div >
124
+ </ >
125
+ ) }
126
+ </ div >
127
+ </ li >
128
+ { MY_GIGS_JOB_STATUS . COMPLETED !== job . status && (
129
+ < li >
130
+ < div styleName = "job-item" >
96
131
< div styleName = "caption" > Duration</ div >
97
132
< div styleName = "text" >
98
- { getDateRange ( job . rbStartDate , job . rbEndDate ) }
133
+ { job . duration && ` ${ job . duration } Weeks` }
99
134
</ div >
100
- </ >
101
- ) }
102
- { MY_GIGS_JOB_STATUS . COMPLETED !== job . status && (
103
- < >
104
- < div styleName = "caption" > Payment Range</ div >
105
- < div styleName = "text" > { paymentInfo } </ div >
106
- </ >
107
- ) }
108
- </ div >
109
- </ li >
110
- < li >
111
- < div styleName = "job-item" >
112
- { MY_GIGS_JOB_STATUS . COMPLETED === job . status && (
113
- < >
114
- < div styleName = "caption" >
115
- < span > Total Earnings</ span >
116
- < span styleName = "earn-tip" >
117
- < EarnTooltip >
118
- < IconInfo />
119
- </ EarnTooltip >
120
- </ span >
121
- </ div >
122
- < div styleName = "text" > { `${ job . currency } ${ job . paymentTotal } ` } </ div >
123
- </ >
124
- ) }
125
- { MY_GIGS_JOB_STATUS . COMPLETED !== job . status && (
126
- < >
127
- < div styleName = "caption" > Location</ div >
128
- < div styleName = "text" > { job . location } </ div >
129
- </ >
130
- ) }
131
- </ div >
132
- </ li >
133
- { MY_GIGS_JOB_STATUS . COMPLETED !== job . status && (
135
+ </ div >
136
+ </ li >
137
+ ) }
134
138
< li >
135
139
< div styleName = "job-item" >
136
- < div styleName = "caption" > Duration </ div >
140
+ < div styleName = "caption" > Hours </ div >
137
141
< div styleName = "text" >
138
- { job . duration && `${ job . duration } Weeks ` }
142
+ { job . hours && `${ job . hours } hours / week ` }
139
143
</ div >
140
144
</ div >
141
145
</ li >
142
- ) }
143
- < li >
144
- < div styleName = "job-item" >
145
- < div styleName = "caption" > Hours</ div >
146
- < div styleName = "text" >
147
- { job . hours && `${ job . hours } hours / week` }
148
- </ div >
149
- </ div >
150
- </ li >
151
- < li >
152
- < div styleName = "job-item" >
153
- < div styleName = "caption" > Working Hours</ div >
154
- < div styleName = "text" >
155
- { job . workingHours && `${ job . workingHours } hours` }
146
+ < li >
147
+ < div styleName = "job-item" >
148
+ < div styleName = "caption" > Working Hours</ div >
149
+ < div styleName = "text" >
150
+ { job . workingHours && `${ job . workingHours } hours` }
151
+ </ div >
156
152
</ div >
157
- </ div >
158
- </ li >
159
- </ ul >
160
- </ div >
161
- < div
162
- styleName = { `right-side stand-by ${ ! job . phaseAction ? "none" : "" } ` }
163
- >
164
- { job . phaseAction && < Button size = "lg" > { job . phaseAction } </ Button > }
153
+ </ li >
154
+ </ ul >
155
+ </ div >
156
+ < div
157
+ styleName = { `right-side stand-by ${
158
+ ! job . phaseAction ? "none" : ""
159
+ } `}
160
+ >
161
+ { job . phaseAction && < Button size = "lg" > { job . phaseAction } </ Button > }
162
+ </ div >
165
163
</ div >
166
164
</ div >
167
- </ div >
165
+ </ a >
168
166
< div styleName = "card-footer job-card-footer" ref = { footerRef } >
169
167
< div styleName = "note-container" >
170
168
{ ( job . remark ||
0 commit comments