Skip to content

Commit 456a7e8

Browse files
kkartunovkkartunov
committed
updates to lates design
1 parent 57b2c2f commit 456a7e8

File tree

6 files changed

+142
-103
lines changed

6 files changed

+142
-103
lines changed

‎src/shared/components/Gigs/GigDetails/index.jsx

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1+
/* eslint-disable no-return-assign */
12
/* eslint-disable max-len */
23
/**
34
* The Gig details component.
45
*/
56

6-
import React, { useState } from 'react';
7+
import { isEmpty } from 'lodash';
8+
import React, { useState, useEffect } from 'react';
79
import PT from 'prop-types';
810
import { isomorphy, Link, config } from 'topcoder-react-utils';
911
import ReactHtmlParser from 'react-html-parser';
1012
import { getSalaryType, getCustomField } from 'utils/gigs';
11-
import { getQuery } from 'utils/url';
1213
import SubscribeMailChimpTag from 'containers/SubscribeMailChimpTag';
1314
import './style.scss';
1415
import IconFacebook from 'assets/images/icon-facebook.svg';
@@ -42,19 +43,20 @@ export default function GigDetails(props) {
4243
job, application, profile, onSendClick, isReferrSucess, formData, formErrors, onFormInputChange, isReferrError, getReferralId, referralId, onReferralDone,
4344
} = props;
4445
let shareUrl;
45-
let showModalInitially = false;
4646
if (isomorphy.isClientSide()) {
4747
shareUrl = encodeURIComponent(window.location.href);
48-
const query = getQuery();
49-
showModalInitially = !!query.referr;
50-
if (showModalInitially) getReferralId();
5148
}
5249
let skills = getCustomField(job.custom_fields, 'Technologies Required');
5350
if (skills !== 'n/a') skills = skills.split(',').join(', ');
5451
const hPerW = getCustomField(job.custom_fields, 'Hours per week');
5552
const compens = job.min_annual_salary === job.max_annual_salary ? job.max_annual_salary : `${job.min_annual_salary} - ${job.max_annual_salary} (USD)`;
5653

57-
const [isModalOpen, setModalOpen] = useState(showModalInitially);
54+
const [isModalOpen, setModalOpen] = useState(false);
55+
let inputRef;
56+
57+
useEffect(() => {
58+
if (referralId && formData.email && isEmpty(formErrors)) onSendClick();
59+
}, [referralId]);
5860

5961
return (
6062
<div styleName="container">
@@ -148,10 +150,29 @@ export default function GigDetails(props) {
148150
<IconTwitter />
149151
</a>
150152
</div>
153+
<div styleName="referr-area">
154+
<h6>REFER THIS GIG</h6>
155+
<p>Refer someone to this gig and earn $500. Just add their email below.</p>
156+
<div styleName="referr-form">
157+
<input type="email" placeholder="Email" value={formData.email} onChange={e => onFormInputChange('email', e.target.value)} ref={el => inputRef = el} />
158+
<button
159+
type="button"
160+
onClick={() => {
161+
if (isEmpty(profile) || !referralId) {
162+
getReferralId();
163+
} else {
164+
onSendClick();
165+
}
166+
setModalOpen(true);
167+
}}
168+
disabled={!formData.email || formErrors.email}
169+
>SEND
170+
</button>
171+
</div>
172+
</div>
151173
<div styleName="subscribe-area">
152-
<h6>SUBSCRIBE TO WEEKLY UPDATES</h6>
153-
<p>Not ready to apply? Want to stay tuned for any new gigs that may be upcoming? Join our weekly Gig Work list.</p>
154-
<SubscribeMailChimpTag listId="28bfd3c062" tags={['Gig Work']} />
174+
<h6>SUBSCRIBE TO WEEKLY GIG UPDATES</h6>
175+
<SubscribeMailChimpTag listId="28bfd3c062" groups={{ d0c48e9da3: true }} />
155176
</div>
156177
<div styleName="info-area">
157178
<p>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:</p>
@@ -172,21 +193,17 @@ export default function GigDetails(props) {
172193
</div>
173194
<div styleName="support">If you have any questions or doubts, don’t hesitate to email <a href="mailto:[email protected]">[email protected]</a>.</div>
174195
<div styleName="referral">
175-
<button styleName="primaryBtn" onClick={() => { setModalOpen(true); getReferralId(); }} type="button">Refer</button>
176196
{
177197
isModalOpen
178198
&& (
179199
<ReferralModal
180200
profile={profile}
181201
onCloseButton={() => setModalOpen(false)}
182-
onSendClick={onSendClick}
183202
isReferrSucess={isReferrSucess}
184-
formErrors={formErrors}
185-
formData={formData}
186-
onFormInputChange={onFormInputChange}
187203
isReferrError={isReferrError}
188204
referralId={referralId}
189205
onReferralDone={() => {
206+
inputRef.value = '';
190207
onReferralDone();
191208
setModalOpen(false);
192209
}}

‎src/shared/components/Gigs/GigDetails/style.scss

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
min-height: 50vh;
3838
margin: auto;
3939
color: #2a2a2a;
40+
overflow: hidden;
4041

4142
@include gui-kit-headers;
4243
@include gui-kit-content;
@@ -143,10 +144,11 @@
143144
}
144145
}
145146

146-
.subscribe-area {
147+
.referr-area {
147148
background-image: linear-gradient(135.29deg, #2c95d7 0%, #06d6a0 100%);
148149
border-radius: 10px;
149150
padding: 25px 32px 30px 20px;
151+
margin-bottom: 20px;
150152

151153
h6 {
152154
margin: 0 0 6px;
@@ -155,7 +157,78 @@
155157

156158
p {
157159
color: #fff;
158-
margin-bottom: 15px;
160+
margin-bottom: 20px;
161+
}
162+
163+
.referr-form {
164+
display: flex;
165+
justify-content: center;
166+
167+
input {
168+
background-color: #fff !important;
169+
border: 1px solid #aaa !important;
170+
border-radius: 6px !important;
171+
margin-right: 10px;
172+
margin-bottom: 0 !important;
173+
color: #2a2a2a;
174+
font-family: Roboto, sans-serif;
175+
font-size: 14px;
176+
line-height: 22px;
177+
}
178+
179+
input::-webkit-input-placeholder,
180+
input::placeholder {
181+
color: #aaa !important;
182+
font-family: Roboto, sans-serif !important;
183+
font-size: 14px !important;
184+
line-height: 40px !important;
185+
text-transform: none;
186+
}
187+
188+
input:focus {
189+
box-shadow: none !important;
190+
}
191+
192+
button {
193+
background-color: #fff;
194+
border-radius: 20px;
195+
color: #229174 !important;
196+
font-size: 14px;
197+
font-weight: bolder;
198+
text-decoration: none;
199+
text-transform: uppercase;
200+
line-height: 40px;
201+
padding: 0 20px;
202+
border: none;
203+
outline: none;
204+
max-width: 122px;
205+
206+
&:hover {
207+
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
208+
}
209+
210+
@include xs-to-sm {
211+
margin-bottom: 20px;
212+
}
213+
214+
&:disabled {
215+
background-color: #e9e9e9 !important;
216+
border: none !important;
217+
text-decoration: none !important;
218+
color: #fafafb !important;
219+
box-shadow: none !important;
220+
}
221+
}
222+
}
223+
}
224+
225+
.subscribe-area {
226+
background-color: #f4f4f4;
227+
border-radius: 10px;
228+
padding: 25px 32px 30px 20px;
229+
230+
h6 {
231+
margin: 0 0 19px;
159232
}
160233
}
161234

‎src/shared/components/Gigs/ReferralModal/index.jsx

Lines changed: 2 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ import PT from 'prop-types';
99
import React from 'react';
1010
import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
1111
import { config, Link } from 'topcoder-react-utils';
12-
import TextInput from 'components/GUIKit/TextInput';
13-
import Textarea from 'components/GUIKit/Textarea';
1412
import tc from 'components/buttons/themed/tc.scss';
15-
import ContentBlock from 'components/Contentful/ContentBlock';
1613
import LoadingIndicator from 'components/LoadingIndicator';
1714
import modalStyle from './modal.scss';
1815

@@ -30,73 +27,23 @@ const HELP_INFO_LINK = '/community/getting-the-gig';
3027
function ReferralModal({
3128
profile,
3229
onCloseButton,
33-
onSendClick,
3430
isReferrSucess,
35-
formErrors,
36-
formData,
37-
onFormInputChange,
3831
isReferrError,
3932
referralId,
4033
onReferralDone,
4134
}) {
42-
let retUrl = window.location.href;
43-
retUrl += retUrl.match('\\?') ? '&referr=true' : '?referr=true';
35+
const retUrl = window.location.href;
4436
return (
4537
<Modal
4638
onCancel={onCloseButton}
4739
theme={modalStyle}
4840
>
4941
{ !isEmpty(profile) ? (
5042
<div className={modalStyle.referrals}>
51-
{
52-
!isReferrSucess && !isReferrError && referralId ? (
53-
<div className={modalStyle.referrForm}>
54-
<ContentBlock id="4b3SIWDVWtXLFN43j044fy" />
55-
<TextInput
56-
placeholder="Email Referral"
57-
label="Email Referral"
58-
onChange={val => onFormInputChange('email', val)}
59-
errorMsg={formErrors.email}
60-
value={formData.email}
61-
required
62-
/>
63-
<div className={modalStyle.margin}>
64-
<Textarea
65-
placeholder="Email Message"
66-
label="Email Message"
67-
onChange={val => onFormInputChange('body', val)}
68-
errorMsg={formErrors.body}
69-
value={formData.body}
70-
required
71-
readonly
72-
/>
73-
</div>
74-
<div className={modalStyle.ctaButtons}>
75-
<PrimaryButton
76-
onClick={onCloseButton}
77-
theme={{
78-
button: buttonThemes.tc['primary-white-md'],
79-
}}
80-
>
81-
CANCEL
82-
</PrimaryButton>
83-
<PrimaryButton
84-
onClick={onSendClick}
85-
theme={{
86-
button: buttonThemes.tc['primary-green-md'],
87-
}}
88-
disabled={!isEmpty(formErrors)}
89-
>
90-
SEND INVITE
91-
</PrimaryButton>
92-
</div>
93-
</div>
94-
) : null
95-
}
9643
{
9744
!referralId && !isReferrError && (
9845
<div className={modalStyle.referrForm}>
99-
<p style={{ textAlign: 'center' }}>Loading your personal referral form...</p>
46+
<p style={{ textAlign: 'center' }}>Sending your referral...</p>
10047
<LoadingIndicator />
10148
</div>
10249
)
@@ -174,11 +121,7 @@ ReferralModal.defaultProps = {
174121
ReferralModal.propTypes = {
175122
profile: PT.shape(),
176123
onCloseButton: PT.func.isRequired,
177-
onSendClick: PT.func.isRequired,
178124
isReferrSucess: PT.bool.isRequired,
179-
formErrors: PT.shape().isRequired,
180-
formData: PT.shape().isRequired,
181-
onFormInputChange: PT.func.isRequired,
182125
isReferrError: PT.shape(),
183126
referralId: PT.string,
184127
onReferralDone: PT.func.isRequired,

‎src/shared/containers/Gigs/RecruitCRMJobDetails.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,11 @@ https://www.topcoder.com/gigs/${props.id}`,
7171
this.setState((state) => {
7272
const { formData, formErrors } = state;
7373
if (key === 'email') {
74+
formData.email = update;
7475
if (trim(update)) {
7576
if (!(isValidEmail(update))) formErrors.email = 'Invalid email';
7677
else {
7778
delete formErrors.email;
78-
formData.email = update;
7979
}
8080
} else formErrors.email = 'Email is required field';
8181
}

‎src/shared/containers/SubscribeMailChimpTag/index.jsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,22 @@ class SubscribeMailChimpTagContainer extends React.Component {
2727

2828
onSubscribeClick() {
2929
const { inputVal } = this.state;
30-
const { listId, tags } = this.props;
31-
const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${inputVal}/tags`;
30+
const { listId, groups } = this.props;
31+
const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${inputVal}`;
3232
const data = {
3333
email_address: inputVal,
3434
status: 'subscribed',
35-
tags: tags.map(t => ({ name: t, status: 'active' })),
35+
interests: groups,
3636
};
3737
const formData = JSON.stringify(data);
3838
fetch(fetchUrl, {
39-
method: 'POST',
39+
method: 'PUT',
4040
headers: {
4141
'Content-Type': 'application/json',
4242
},
4343
body: formData,
4444
}).then(result => result.json()).then((dataResponse) => {
45-
if (dataResponse.status === 204) {
45+
if (dataResponse.status < 300 || dataResponse.status === 'subscribed') {
4646
// regist success
4747
return this.setState({
4848
subsribed: true,
@@ -59,7 +59,7 @@ class SubscribeMailChimpTagContainer extends React.Component {
5959
body: JSON.stringify({
6060
email_address: inputVal,
6161
status: 'subscribed',
62-
tags,
62+
interests: groups,
6363
}),
6464
})
6565
.then(result => result.json()).then(() => {
@@ -71,7 +71,7 @@ class SubscribeMailChimpTagContainer extends React.Component {
7171
}
7272
return this.setState({
7373
subsribed: false,
74-
error: `Error ${dataResponse.status} when assign to tags`,
74+
error: dataResponse.detail ? dataResponse.detail : `Error ${dataResponse.status} when trying to subscribe.`,
7575
});
7676
})
7777
.catch((e) => {
@@ -122,7 +122,7 @@ class SubscribeMailChimpTagContainer extends React.Component {
122122

123123
SubscribeMailChimpTagContainer.propTypes = {
124124
listId: PT.string.isRequired,
125-
tags: PT.arrayOf(PT.string).isRequired,
125+
groups: PT.shape().isRequired,
126126
};
127127

128128
export default SubscribeMailChimpTagContainer;

0 commit comments

Comments
 (0)