From f79c12afd55c8de4bad282f3cb29577aab6a84c2 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 4 Aug 2021 11:35:14 +0300 Subject: [PATCH 1/9] init code for general referrals --- config/default.js | 2 +- src/server/services/recruitCRM.js | 2 +- .../components/Gigs/ReferralCode/index.jsx | 72 +++++++++++++++++++ .../components/Gigs/ReferralCode/style.scss | 29 ++++++++ .../components/Gigs/ReferralModal/index.jsx | 9 +-- .../components/Gigs/ReferralModal/modal.scss | 2 +- .../containers/Gigs/RecruitCRMJobDetails.jsx | 10 --- src/shared/containers/Gigs/RecruitCRMJobs.jsx | 2 +- src/shared/containers/GigsPages.jsx | 20 ++++-- 9 files changed, 126 insertions(+), 22 deletions(-) create mode 100644 src/shared/components/Gigs/ReferralCode/index.jsx create mode 100644 src/shared/components/Gigs/ReferralCode/style.scss diff --git a/config/default.js b/config/default.js index bbf8b30a55..c195376b65 100644 --- a/config/default.js +++ b/config/default.js @@ -263,7 +263,7 @@ module.exports = { GROWSURF_COOKIE_SETTINGS: { secure: true, domain: '', - expires: 7, // days + expires: 30, // days }, GSHEETS_API_KEY: 'AIzaSyBRdKySN5JNCb2H6ZxJdTTvp3cWU51jiOQ', diff --git a/src/server/services/recruitCRM.js b/src/server/services/recruitCRM.js index 8eb1b0fc51..4ca3b899bb 100644 --- a/src/server/services/recruitCRM.js +++ b/src/server/services/recruitCRM.js @@ -274,7 +274,7 @@ export default class RecruitCRMService { if (referralCookie) referralCookie = JSON.parse(referralCookie); try { // referral tracking via growsurf - if (referralCookie && referralCookie.gigId === id) { + if (referralCookie) { const gs = new GrowsurfService(); const tcHandle = _.findIndex(form.custom_fields, { field_id: 2 }); const growRes = await gs.addParticipant(JSON.stringify({ diff --git a/src/shared/components/Gigs/ReferralCode/index.jsx b/src/shared/components/Gigs/ReferralCode/index.jsx new file mode 100644 index 0000000000..a1349d7c84 --- /dev/null +++ b/src/shared/components/Gigs/ReferralCode/index.jsx @@ -0,0 +1,72 @@ +/* eslint-disable max-len */ +/** + * Connects the Redux store to the GigsPages component. + */ +import React, { useState } from 'react'; +import PT from 'prop-types'; +import _ from 'lodash'; +import { PrimaryButton } from 'topcoder-react-ui-kit'; +import tc from 'components/buttons/themed/tc.scss'; +import ReferralModal from '../ReferralModal'; +import defautlStyle from './style.scss'; + +/** Themes for buttons + * those overwrite PrimaryButton style to match achieve various styles. + * Should implement pattern of classes. + */ +const buttonThemes = { + tc, +}; + +function ReferralCode(props) { + const { profile } = props; + const [loginModalOpen, setLoginModalOpen] = useState(false); + return ( +
+ Topcoder Referral Program: + { + _.isEmpty(profile) ? ( + + Do you know someone who is perfect for a gig? You could earn $500 for referring them! + { + setLoginModalOpen(true); + }} + theme={{ + button: buttonThemes.tc['primary-borderless-sm'], + }} + > + REFFER A FRIEND + + { + loginModalOpen + && ( + setLoginModalOpen(false)} + isReferrSucess={false} + isReferrError={false} + onReferralDone={() => {}} + /> + ) + } + + ) : ( + + Your referral link: + + ) + } +
+ ); +} + +ReferralCode.defaultProps = { + profile: null, +}; + +ReferralCode.propTypes = { + profile: PT.shape(), +}; + +export default ReferralCode; diff --git a/src/shared/components/Gigs/ReferralCode/style.scss b/src/shared/components/Gigs/ReferralCode/style.scss new file mode 100644 index 0000000000..6c846f4029 --- /dev/null +++ b/src/shared/components/Gigs/ReferralCode/style.scss @@ -0,0 +1,29 @@ +.container { + display: flex; + background-image: linear-gradient(97.21deg, #2984BD 0%, #0AB88A 100%); + border-radius: 10px; + width: 100%; + max-width: 1280px; + margin: 30px auto 0; + align-items: center; + padding: 13px 25px 11px; + + .title { + font-weight: bold; + } + + span { + font-family: Roboto, sans-serif; + font-size: 18px; + color: #fff; + line-height: 22px; + margin-right: 5px; + } + + button { + margin-left: 10px !important; + &:hover { + margin-left: 10px !important; + } + } +} \ No newline at end of file diff --git a/src/shared/components/Gigs/ReferralModal/index.jsx b/src/shared/components/Gigs/ReferralModal/index.jsx index 25820d8c44..68cce96dcf 100644 --- a/src/shared/components/Gigs/ReferralModal/index.jsx +++ b/src/shared/components/Gigs/ReferralModal/index.jsx @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ /** * The modal used for gig referral flow */ @@ -90,10 +91,9 @@ function ReferralModal({ ) : (
-

WARNING

-

You must be a Topcoder member to refer!

+

REFERRAL PROGRAM

+

Please login to receive your referral code.

- FIND OUT MORE { window.location = `${config.URL.AUTH}/member?retUrl=${encodeURIComponent(retUrl)}`; @@ -104,8 +104,9 @@ function ReferralModal({ > LOGIN + REGISTER
-

Not a member? It is free to register!

+

Find out how the referral program works here.

)} diff --git a/src/shared/components/Gigs/ReferralModal/modal.scss b/src/shared/components/Gigs/ReferralModal/modal.scss index 47ebdfb624..27a6bbd61e 100644 --- a/src/shared/components/Gigs/ReferralModal/modal.scss +++ b/src/shared/components/Gigs/ReferralModal/modal.scss @@ -26,7 +26,7 @@ } .loginMsg { - color: #ef476f; + color: #2a2a2a; font-size: 24px; line-height: 36px; margin-bottom: 40px; diff --git a/src/shared/containers/Gigs/RecruitCRMJobDetails.jsx b/src/shared/containers/Gigs/RecruitCRMJobDetails.jsx index 31d1e56f48..13b7c175f6 100644 --- a/src/shared/containers/Gigs/RecruitCRMJobDetails.jsx +++ b/src/shared/containers/Gigs/RecruitCRMJobDetails.jsx @@ -10,14 +10,11 @@ import GigDetails from 'components/Gigs/GigDetails'; import PT from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; -import { getQuery } from 'utils/url'; import { isValidEmail } from 'utils/tc'; import { config } from 'topcoder-react-utils'; import fetch from 'isomorphic-fetch'; import RecruitCRMJobApply from './RecruitCRMJobApply'; -const cookies = require('browser-cookies'); - const PROXY_ENDPOINT = `${config.URL.COMMUNITY_APP}/api`; class RecruitCRMJobDetailsContainer extends React.Component { @@ -53,13 +50,6 @@ ${config.URL.BASE}${config.GIGS_PAGES_PATH}/${props.id}`, if (isEmpty(job)) { getJob(id); } - const query = getQuery(); - if (query.referralId) { - cookies.set(config.GROWSURF_COOKIE, JSON.stringify({ - referralId: query.referralId, - gigId: id, - }), config.GROWSURF_COOKIE_SETTINGS); - } } /** diff --git a/src/shared/containers/Gigs/RecruitCRMJobs.jsx b/src/shared/containers/Gigs/RecruitCRMJobs.jsx index 53ca6460cf..8bc3af8bd4 100644 --- a/src/shared/containers/Gigs/RecruitCRMJobs.jsx +++ b/src/shared/containers/Gigs/RecruitCRMJobs.jsx @@ -156,7 +156,7 @@ class RecruitCRMJobsContainer extends React.Component { if (loading) { return ( - ; +

Searching our database for the best gigs…

 ); diff --git a/src/shared/containers/GigsPages.jsx b/src/shared/containers/GigsPages.jsx index 44db1f7058..32ce6eee3e 100644 --- a/src/shared/containers/GigsPages.jsx +++ b/src/shared/containers/GigsPages.jsx @@ -14,6 +14,8 @@ import { OptimizelyProvider, createInstance } from '@optimizely/react-sdk'; import { connect } from 'react-redux'; import _ from 'lodash'; import { v4 as uuidv4 } from 'uuid'; +import { getQuery } from 'utils/url'; +import ReferralCode from 'components/Gigs/ReferralCode'; const optimizelyClient = createInstance({ sdkKey: config.OPTIMIZELY.SDK_KEY, @@ -44,6 +46,13 @@ function GigsPagesContainer(props) { expires: 365, // days }); } + // check for referral code in the URL and set it to cookie + const query = getQuery(); + if (query.referralId) { + cookies.set(config.GROWSURF_COOKIE, JSON.stringify({ + referralId: query.referralId, + }), config.GROWSURF_COOKIE_SETTINGS); + } } const { id, type } = match.params; const isApply = `${config.GIGS_PAGES_PATH}/${id}/apply` === match.url; @@ -76,10 +85,13 @@ window._chatlio = window._chatlio||[]; } { !id && !type ? ( - + + + + ) : null }