init code for general referrals

Author: kkartunov

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',

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({

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 (
+    <div className={defautlStyle.container}>
+      <span className={defautlStyle.title}>Topcoder Referral Program:</span>
+      {
+        _.isEmpty(profile) ? (
+          <React.Fragment>
+            <span>Do you know someone who is perfect for a gig? You could earn $500 for referring them!</span>
+            <PrimaryButton
+              onClick={() => {
+                setLoginModalOpen(true);
+              }}
+              theme={{
+                button: buttonThemes.tc['primary-borderless-sm'],
+              }}
+            >
+              REFFER A FRIEND
+            </PrimaryButton>
+            {
+              loginModalOpen
+              && (
+                <ReferralModal
+                  profile={profile}
+                  onCloseButton={() => setLoginModalOpen(false)}
+                  isReferrSucess={false}
+                  isReferrError={false}
+                  onReferralDone={() => {}}
+                />
+              )
+            }
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <span>Your referral link:</span>
+          </React.Fragment>
+        )
+      }
+    </div>
+  );
+}
+
+ReferralCode.defaultProps = {
+  profile: null,
+};
+
+ReferralCode.propTypes = {
+  profile: PT.shape(),
+};
+
+export default ReferralCode;

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;
+    }
+  }
+}

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({
         </div>
       ) : (
         <div className={modalStyle.loginRequired}>
-          <h3 className={modalStyle.title}>WARNING</h3>
-          <p className={modalStyle.loginMsg}>You must be a Topcoder member to refer!</p>
+          <h3 className={modalStyle.title}>REFERRAL PROGRAM</h3>
+          <p className={modalStyle.loginMsg}>Please login to receive your referral code.</p>
           <div className={modalStyle.ctaButtons}>
-            <Link to={HELP_INFO_LINK} className={buttonThemes.tc['primary-white-md']} openNewTab="true">FIND OUT MORE</Link>
             <PrimaryButton
               onClick={() => {
                 window.location = `${config.URL.AUTH}/member?retUrl=${encodeURIComponent(retUrl)}`;
@@ -104,8 +104,9 @@ function ReferralModal({
             >
               LOGIN
             </PrimaryButton>
+            <Link to={`${config.URL.AUTH}/member/registration?retUrl=${encodeURIComponent(retUrl)}&mode=signUp&utm_source=gig_listing`} className={buttonThemes.tc['primary-white-md']} openNewTab="true">REGISTER</Link>
           </div>
-          <p className={modalStyle.regTxt}>Not a member? It is free to <a href={`${config.URL.AUTH}/member/registration?retUrl=${encodeURIComponent(retUrl)}&mode=signUp&utm_source=gig_listing`}>register</a>!</p>
+          <p className={modalStyle.regTxt}>Find out how the referral program works <a href={HELP_INFO_LINK}>here</a>.</p>
         </div>
       )}
     </Modal>

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;

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);
-    }
   }
 
   /**

src/shared/containers/Gigs/RecruitCRMJobs.jsx

@@ -156,7 +156,7 @@ class RecruitCRMJobsContainer extends React.Component {
     if (loading) {
       return (
         <React.Fragment>
-          <LoadingIndicator />;
+          <LoadingIndicator />
           <p styleName="loading-text">Searching our database for the best gigs…</p>
         </React.Fragment>
       );

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 ? (
-          <Viewport
-            id="3X6GfJZl3eDU0m4joSJZpN"
-            baseUrl={config.GIGS_PAGES_PATH}
-          />
+          <React.Fragment>
+            <ReferralCode profile={profile} />
+            <Viewport
+              id="3X6GfJZl3eDU0m4joSJZpN"
+              baseUrl={config.GIGS_PAGES_PATH}
+            />
+          </React.Fragment>
         ) : null
       }
       <Footer />