Skip to content

Commit

Permalink
Merge pull request #6996 from topcoder-platform/TOP-2194
Browse files Browse the repository at this point in the history 
TOP-2194 clean gig referral UIs
  • Loading branch information
@kkartunov
kkartunov authored Jul 24, 2024
2 parents ece2112 + f1ee316 commit 0d4cfdb
Show file tree
Hide file tree
Showing 11 changed files with 3 additions and 958 deletions.
62 changes: 0 additions & 62 deletions src/shared/actions/growSurf.js
View file

This file was deleted.

127 changes: 2 additions & 125 deletions src/shared/components/Gigs/GigDetails/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,11 @@ import { isEmpty } from 'lodash';
import React, { useState } from 'react';
import PT from 'prop-types';
import { connect } from 'react-redux';
import { isomorphy, Link, config } from 'topcoder-react-utils';
import { PrimaryButton } from 'topcoder-react-ui-kit';
import { Link, config } from 'topcoder-react-utils';
import ReactHtmlParser from 'react-html-parser';
import { getSalaryType, getCustomField } from 'utils/gigs';
import SubscribeMailChimpTag from 'containers/SubscribeMailChimpTag';
import { isValidEmail } from 'utils/tc';
import './style.scss';
import IconFacebook from 'assets/images/icon-facebook.svg';
import IconTwitter from 'assets/images/icon-twitter.svg';
import IconLinkedIn from 'assets/images/icon-linkedIn.svg';
import IconLocation from 'assets/images/icon-location.svg';
import IconMoney from 'assets/images/icon-payment.svg';
import IconDuration from 'assets/images/icon-calendar-gig.svg';
Expand All @@ -28,7 +23,6 @@ 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';
import ReferralModal from '../ReferralModal';
import LoginModal from '../LoginModal';

// Cleanup HTML from style tags
Expand All @@ -44,28 +38,16 @@ const ReactHtmlParserOptions = {

function GigDetails(props) {
const {
job, application, profile, onSendClick, isReferrSucess, isReferrError, onReferralDone, growSurf,
job, application, profile,
} = props;
let shareUrl;
let retUrl;
if (isomorphy.isClientSide()) {
shareUrl = encodeURIComponent(window.location.href);
if (growSurf && growSurf.data) {
shareUrl = `${window.location.origin}${window.location.pathname}?referralId=${growSurf.data.id}`;
}
retUrl = `${window.location.origin}${window.location.pathname}/apply${window.location.search}`;
}
let skills = getCustomField(job.custom_fields, 'Technologies Required');
if (skills !== 'n/a') skills = skills.split(',').join(', ');
const hPerW = getCustomField(job.custom_fields, 'Hours per week');
const compens = job.min_annual_salary === job.max_annual_salary ? job.max_annual_salary : `${job.min_annual_salary} - ${job.max_annual_salary} (USD)`;

const [isModalOpen, setModalOpen] = useState(false);
const [isLoginModalOpen, setLoginModalOpen] = useState(false);
const [copyBtnText, setCopyBtnText] = useState('COPY');
const [referrEmail, setreferrEmail] = useState();
const duration = getCustomField(job.custom_fields, 'Duration');
let refEmailInput;

return (
<div styleName="container">
Expand Down Expand Up @@ -157,83 +139,6 @@ function GigDetails(props) {
</div>
</div>
<div styleName="right">
<div styleName="referr-area">
<h6>REFER THIS GIG</h6>
{
growSurf && growSurf.data ? (
<React.Fragment>
<span styleName="referralLinkTitile">Share your Referral Link:</span>
<input type="text" styleName="referralLink" readOnly value={`https://topcoder.com/gigs/${job.slug}?referralId=${growSurf.data.id}`} />
<div styleName="copyAndShare">
<PrimaryButton
onClick={() => {
const copyhelper = document.createElement('input');
copyhelper.className = 'copyhelper';
document.body.appendChild(copyhelper);
copyhelper.value = `https://www.topcoder.com/gigs/${job.slug}?referralId=${growSurf.data.id}`;
copyhelper.select();
document.execCommand('copy');
document.body.removeChild(copyhelper);
setCopyBtnText('COPIED');
setTimeout(() => {
setCopyBtnText('COPY');
}, 3000);
}}
>
{copyBtnText}
</PrimaryButton>
<div styleName="shareButtons">
Share on:&nbsp;&nbsp;
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} target="_blank" rel="noopener noreferrer">
<IconLinkedIn />
</a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&src=share_button`} target="_blank" rel="noopener noreferrer">
<IconFacebook />
</a>
<a href={`https://twitter.com/intent/tweet?url=${shareUrl}`} target="_blank" rel="noopener noreferrer">
<IconTwitter />
</a>
</div>
</div>
</React.Fragment>
) : (
<div styleName="shareButtons">
Share this job on:&nbsp;&nbsp;
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`} target="_blank" rel="noopener noreferrer">
<IconLinkedIn />
</a>
<a href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&src=share_button`} target="_blank" rel="noopener noreferrer">
<IconFacebook />
</a>
<a href={`https://twitter.com/intent/tweet?url=${shareUrl}`} target="_blank" rel="noopener noreferrer">
<IconTwitter />
</a>
</div>
)
}
<div styleName="sepWrap">
<div styleName="sepLine" />
<span>or</span>
<div styleName="sepLine" />
</div>
<p>Refer someone to this gig and earn $500. Just add their email below. See <Link to="/community/gig-referral" styleName="how-it-works" openNewTab>how it works.</Link></p>
<div styleName="referr-form">
<input type="email" placeholder="Email" onChange={e => setreferrEmail(e.target.value)} ref={ref => refEmailInput = ref} />
<button
type="button"
onClick={() => {
if (!isEmpty(profile) && growSurf.data) {
onSendClick(referrEmail);
setreferrEmail();
refEmailInput.value = '';
}
setModalOpen(true);
}}
disabled={!referrEmail || !isValidEmail(referrEmail)}
>SEND
</button>
</div>
</div>
<div styleName="subscribe-area">
<h6>SUBSCRIBE TO WEEKLY GIG UPDATES</h6>
<SubscribeMailChimpTag listId="28bfd3c062" groups={{ d0c48e9da3: true }} />
Expand All @@ -256,27 +161,6 @@ function GigDetails(props) {
</ul>
</div>
<div styleName="support">If you have any questions or doubts, don’t hesitate to email <a href="mailto:[email protected]">[email protected]</a>.</div>
<div styleName="referral">
{
isModalOpen
&& (
<ReferralModal
profile={profile}
onCloseButton={() => {
onReferralDone();
setModalOpen(false);
}}
isReferrSucess={isReferrSucess}
isReferrError={isReferrError}
referralId={growSurf && growSurf.data ? growSurf.data.id : null}
onReferralDone={() => {
onReferralDone(true);
setModalOpen(false);
}}
/>
)
}
</div>
{
isLoginModalOpen && <LoginModal retUrl={retUrl} onCancel={() => setLoginModalOpen(false)} />
}
Expand All @@ -292,19 +176,12 @@ function GigDetails(props) {
GigDetails.defaultProps = {
application: null,
profile: {},
growSurf: {},
isReferrError: null,
};

GigDetails.propTypes = {
job: PT.shape().isRequired,
application: PT.shape(),
profile: PT.shape(),
onSendClick: PT.func.isRequired,
isReferrSucess: PT.bool.isRequired,
isReferrError: PT.shape(),
onReferralDone: PT.func.isRequired,
growSurf: PT.shape(),
};

function mapStateToProps(state) {
Expand Down
4 changes: 0 additions & 4 deletions src/shared/components/Gigs/GigDetails/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,6 @@
@include primaryBtn;
}

.referral {
display: flex;
}

.container {
max-width: $screen-lg;
min-height: 50vh;
Expand Down
120 changes: 0 additions & 120 deletions src/shared/components/Gigs/ReferralCode/index.jsx
View file

This file was deleted.

Loading

0 comments on commit 0d4cfdb

Please sign in to comment.