Referral form updates

Author: kkartunov

__tests__/shared/components/GUIKit/Textarea/__snapshots__/index.jsx.snap

@@ -10,6 +10,7 @@ exports[`Default render 1`] = `
     id="textAreaInput"
     onChange={[Function]}
     placeholder=""
+    readOnly={false}
   />
 </div>
 `;

src/shared/components/GUIKit/Textarea/index.jsx

@@ -16,6 +16,7 @@ function Textarea({
   value,
   onChange,
   required,
+  readonly,
 }) {
   const [val, setVal] = useState(value);
   const delayedOnChange = useRef(
@@ -25,6 +26,7 @@ function Textarea({
   return (
     <div className="textareaContainer" styleName="container">
       <textarea
+        readOnly={readonly}
         defaultValue={value}
         placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
         id="textAreaInput"
@@ -54,6 +56,7 @@ Textarea.defaultProps = {
   value: '',
   onChange: () => {},
   required: false,
+  readonly: false,
 };
 
 Textarea.propTypes = {
@@ -63,6 +66,7 @@ Textarea.propTypes = {
   value: PT.string,
   onChange: PT.func,
   required: PT.bool,
+  readonly: PT.bool,
 };
 
 export default Textarea;

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

@@ -39,7 +39,7 @@ const ReactHtmlParserOptions = {
 
 export default function GigDetails(props) {
   const {
-    job, application, profile, onSendClick, isReferrSucess, formData, formErrors, onFormInputChange, isReferrError, getReferralId, referralId,
+    job, application, profile, onSendClick, isReferrSucess, formData, formErrors, onFormInputChange, isReferrError, getReferralId, referralId, onReferralDone,
   } = props;
   let shareUrl;
   let showModalInitially = false;
@@ -186,6 +186,10 @@ export default function GigDetails(props) {
                       onFormInputChange={onFormInputChange}
                       isReferrError={isReferrError}
                       referralId={referralId}
+                      onReferralDone={() => {
+                        onReferralDone();
+                        setModalOpen(false);
+                      }}
                     />
                     )
                   }
@@ -203,6 +207,7 @@ GigDetails.defaultProps = {
   application: null,
   profile: {},
   referralId: null,
+  isReferrError: null,
 };
 
 GigDetails.propTypes = {
@@ -214,7 +219,8 @@ GigDetails.propTypes = {
   formErrors: PT.shape().isRequired,
   formData: PT.shape().isRequired,
   onFormInputChange: PT.func.isRequired,
-  isReferrError: PT.shape().isRequired,
+  isReferrError: PT.shape(),
   getReferralId: PT.func.isRequired,
   referralId: PT.string,
+  onReferralDone: PT.func.isRequired,
 };

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

@@ -37,7 +37,10 @@ function ReferralModal({
   onFormInputChange,
   isReferrError,
   referralId,
+  onReferralDone,
 }) {
+  let retUrl = window.location.href;
+  retUrl += retUrl.match('\\?') ? '&referr=true' : '?referr=true';
   return (
     <Modal
       onCancel={onCloseButton}
@@ -65,6 +68,7 @@ function ReferralModal({
                     errorMsg={formErrors.body}
                     value={formData.body}
                     required
+                    readonly
                   />
                 </div>
                 <div className={modalStyle.ctaButtons}>
@@ -90,7 +94,7 @@ function ReferralModal({
             ) : null
           }
           {
-            !referralId && (
+            !referralId && !isReferrError && (
             <div className={modalStyle.referrForm}>
               <p style={{ textAlign: 'center' }}>Loading your personal referral form...</p>
               <LoadingIndicator />
@@ -104,7 +108,7 @@ function ReferralModal({
                 <p className={modalStyle.sucessMsg}>Your referral has been sent.</p>
                 <div className={modalStyle.ctaButtons}>
                   <PrimaryButton
-                    onClick={onCloseButton}
+                    onClick={onReferralDone}
                     theme={{
                       button: buttonThemes.tc['primary-green-md'],
                     }}
@@ -145,17 +149,16 @@ function ReferralModal({
             <Link to={HELP_INFO_LINK} className={buttonThemes.tc['primary-white-md']} openNewTab="true">FIND OUT MORE</Link>
             <PrimaryButton
               onClick={() => {
-                let retUrl = window.location.href;
-                retUrl += retUrl.match('\\?') ? '&referr=true' : '?referr=true';
-                window.location = `${config.URL.AUTH}/member/registration?retUrl=${encodeURIComponent(retUrl)}`;
+                window.location = `${config.URL.AUTH}/member?retUrl=${encodeURIComponent(retUrl)}`;
               }}
               theme={{
                 button: buttonThemes.tc['primary-green-md'],
               }}
             >
-              REGISTER
+              LOGIN
             </PrimaryButton>
           </div>
+          <p className={modalStyle.regTxt}>Not a member? Register <a href={`${config.URL.AUTH}/member/registration?retUrl=${encodeURIComponent(retUrl)}`}>here</a>.</p>
         </div>
       )}
     </Modal>
@@ -165,6 +168,7 @@ function ReferralModal({
 ReferralModal.defaultProps = {
   profile: null,
   referralId: null,
+  isReferrError: null,
 };
 
 ReferralModal.propTypes = {
@@ -175,8 +179,9 @@ ReferralModal.propTypes = {
   formErrors: PT.shape().isRequired,
   formData: PT.shape().isRequired,
   onFormInputChange: PT.func.isRequired,
-  isReferrError: PT.shape().isRequired,
+  isReferrError: PT.shape(),
   referralId: PT.string,
+  onReferralDone: PT.func.isRequired,
 };
 
 export default ReferralModal;

src/shared/components/Gigs/ReferralModal/modal.scss

@@ -104,6 +104,11 @@
     @include xs-to-sm {
       padding: 50px 40px;
     }
+
+    .regTxt {
+      font-size: 14px;
+      margin: 10px 0 0;
+    }
   }
 }
 

src/shared/containers/Gigs/RecruitCRMJobDetails.jsx

@@ -28,7 +28,7 @@ class RecruitCRMJobDetailsContainer extends React.Component {
       formData: {
         body: `Hey there!
 
-Topcoder has a freelance gig that I thought you would be interested in. If you get the gig and complete it successfully we both get an extra $1,000.
+Topcoder has a freelance gig that I thought you would be interested in. If you get the gig and complete it successfully we both get an extra $500.
         
 Check it out:
 https://www.topcoder.com/gigs/${props.id}`,
@@ -38,6 +38,7 @@ https://www.topcoder.com/gigs/${props.id}`,
     this.onSendClick = this.onSendClick.bind(this);
     this.onFormInputChange = this.onFormInputChange.bind(this);
     this.getReferralId = this.getReferralId.bind(this);
+    this.onReferralDone = this.onReferralDone.bind(this);
   }
 
   componentDidMount() {
@@ -100,7 +101,7 @@ https://www.topcoder.com/gigs/${props.id}`,
     const res = await fetch('/api/mailchimp/email', {
       method: 'POST',
       body: JSON.stringify({
-        from: '[email protected]',
+        from: `${profile.firstName} ${profile.lastName} via Topcoder Gigwork <[email protected]>`,
         to: formData.email,
         subject: `${profile.firstName} ${profile.lastName} Thinks This Topcoder Gig Is For You!`,
         text: formData.body,
@@ -114,12 +115,25 @@ https://www.topcoder.com/gigs/${props.id}`,
         isReferrError: await res.json(),
       });
     } else {
+      await res.json();
       this.setState({
         isReferrSucess: true,
       });
     }
   }
 
+  /**
+   * Reset the form when referral done
+   */
+  onReferralDone() {
+    const { formData } = this.state;
+    delete formData.email;
+    this.setState({
+      isReferrSucess: false,
+      formData,
+    });
+  }
+
   /**
    * Get referral id for the logged user
    */
@@ -191,6 +205,7 @@ https://www.topcoder.com/gigs/${props.id}`,
           isReferrError={isReferrError}
           getReferralId={this.getReferralId}
           referralId={referralId}
+          onReferralDone={this.onReferralDone}
         />
       );
   }