add logged state

Author: kkartunov

src/shared/components/Gigs/ReferralCode/index.jsx

@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
+import LoadingIndicator from 'components/LoadingIndicator';
 import tc from 'components/buttons/themed/tc.scss';
 import ReferralModal from '../ReferralModal';
 import defautlStyle from './style.scss';
@@ -21,8 +22,9 @@ const buttonThemes = {
 function ReferralCode(props) {
   const { profile } = props;
   const [loginModalOpen, setLoginModalOpen] = useState(false);
+  const [referralCode, setReferralCode] = useState('abcXYZ');
   return (
-    <div className={defautlStyle.container}>
+    <div className={_.isEmpty(profile) ? defautlStyle.container : defautlStyle.containerWithLink}>
       <span className={defautlStyle.title}>Topcoder Referral Program:</span>
       {
         _.isEmpty(profile) ? (
@@ -46,14 +48,37 @@ function ReferralCode(props) {
                   onCloseButton={() => setLoginModalOpen(false)}
                   isReferrSucess={false}
                   isReferrError={false}
-                  onReferralDone={() => {}}
+                  onReferralDone={() => { }}
                 />
               )
             }
           </React.Fragment>
         ) : (
           <React.Fragment>
             <span>Your referral link:</span>
+            {
+              referralCode ? (
+                <div className={defautlStyle.rondedArea}>
+                  <span>{`https://www.topcoder.com/gigs/${referralCode}`}</span>
+                  <PrimaryButton
+                    onClick={() => {
+                      const copyhelper = document.createElement('input');
+                      copyhelper.className = 'copyhelper';
+                      document.body.appendChild(copyhelper);
+                      copyhelper.value = `https://www.topcoder.com/gigs/${referralCode}`;
+                      copyhelper.select();
+                      document.execCommand('copy');
+                      document.body.removeChild(copyhelper);
+                    }}
+                    theme={{
+                      button: buttonThemes.tc['primary-borderless-xs'],
+                    }}
+                  >
+                    COPY
+                  </PrimaryButton>
+                </div>
+              ) : <LoadingIndicator />
+            }
           </React.Fragment>
         )
       }

src/shared/components/Gigs/ReferralCode/style.scss

@@ -1,4 +1,5 @@
-.container {
+.container,
+.containerWithLink {
   display: flex;
   background-image: linear-gradient(97.21deg, #2984BD 0%, #0AB88A 100%);
   border-radius: 10px;
@@ -26,4 +27,23 @@
       margin-left: 10px !important;
     }
   }
+
+  .rondedArea {
+    border: 1px solid rgba(255,255,255,0.4);
+    border-radius: 2px;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+  }
+}
+
+.containerWithLink {
+  padding: 10px 25px 9px;
+
+  svg {
+    width: 34px;
+    height: 34px;
+    margin: initial;
+  }
 }