@@ -68,103 +68,101 @@ const JobCard = ({ job }) => {
6868 : ""
6969 } `}
7070 >
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 >
7981 </ 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" >
96131 < div styleName = "caption" > Duration</ div >
97132 < div styleName = "text" >
98- { getDateRange ( job . rbStartDate , job . rbEndDate ) }
133+ { job . duration && ` ${ job . duration } Weeks` }
99134 </ 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+ ) }
134138 < li >
135139 < div styleName = "job-item" >
136- < div styleName = "caption" > Duration </ div >
140+ < div styleName = "caption" > Hours </ div >
137141 < div styleName = "text" >
138- { job . duration && `${ job . duration } Weeks ` }
142+ { job . hours && `${ job . hours } hours / week ` }
139143 </ div >
140144 </ div >
141145 </ 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 >
156152 </ 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 >
165163 </ div >
166164 </ div >
167- </ div >
165+ </ a >
168166 < div styleName = "card-footer job-card-footer" ref = { footerRef } >
169167 < div styleName = "note-container" >
170168 { ( job . remark ||
0 commit comments