Merge pull request #211 from topcoder-platform/email-not-populating

Email and name issue -> intake form

Author: hentrymartin

src-ts/lib/payment-form/PaymentForm.tsx

@@ -5,9 +5,9 @@ import {
   } from '@stripe/react-stripe-js'
 import { StripeCardCvcElementChangeEvent, StripeCardExpiryElementChangeEvent, StripeCardNumberElementChangeEvent } from '@stripe/stripe-js'
 import cn from 'classnames'
-import React, { Dispatch, SetStateAction, useState } from 'react'
+import React, { Dispatch, SetStateAction, useContext, useState } from 'react'
 
-import { Button, OrderContractModal } from '..'
+import { Button, OrderContractModal, profileContext, ProfileContextData } from '..'
 import { InputText } from '../form/form-groups/form-input'
 import { InputWrapper } from '../form/form-groups/form-input/input-wrapper'
 import ReactSelect from '../react-select/ReactSelect'
@@ -52,6 +52,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
     const [cardNumberError, setCardNumberError]: [string, Dispatch<string>] = useState<string>('')
     const [cardExpiryError, setCardExpiryError]: [string, Dispatch<string>] = useState<string>('')
     const [cardCVVError, setCardCVVError]: [string, Dispatch<string>] = useState<string>('')
+    const { profile }: ProfileContextData = useContext<ProfileContextData>(profileContext)
 
     const [formState, setFormState]: [FieldDirtyState, Dispatch<SetStateAction<FieldDirtyState>>] = useState<FieldDirtyState>({
         cardCvv: false,
@@ -100,7 +101,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 tabIndex={1}
                 type='text'
                 onChange={(event) => props.onUpdateField('email', event.target.value)}
-                value={props.formData.email}
+                value={profile?.email}
             />
 
             <div className={styles['label']}>Card Information</div>
@@ -174,7 +175,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 tabIndex={1}
                 type='text'
                 onChange={(event) => props.onUpdateField('name', event.target.value)}
-                value={props.formData.name}
+                value={`${profile?.firstName} ${profile?.lastName}`}
             />
 
             <InputWrapper className={styles['input-wrapper']} label='Country' tabIndex={3} type='text' disabled={false}>

src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx

@@ -74,8 +74,11 @@ const Review: React.FC = () => {
             const intakeFormBH: any = response.metadata.find((item: ChallengeMetadata) => item.name === ChallengeMetadataName.intakeForm)
             const form: any = JSON.parse(intakeFormBH.value).form
             setFormData(JSON.parse(intakeFormBH.value).form)
+            const { profile: userProfile }: ProfileContextData = useContext<ProfileContextData>(profileContext)
             setFormValues({
                 ...formFieldValues,
+                email: userProfile?.email || '',
+                name: `${userProfile?.firstName} ${userProfile?.lastName}`,
                 price: `$${getPrice(form.basicInfo.packageType)}`,
             })
         }
@@ -228,6 +231,8 @@ const Review: React.FC = () => {
         navigate(redirectUrl)
     }
 
+    // console.log(formFieldValues, profile)
+
     return (
         <div className={styles['review-container']}>
             {
@@ -267,19 +272,23 @@ const Review: React.FC = () => {
                     }
                 </div>
                 <div className={styles['right']}>
-                    <div className={styles['payment-form-wrapper']}>
-                        <div className={styles['form-header']}>
-                            <h3 className={styles['price']}>{formFieldValues.price}</h3>
-                            <div className={styles['label']}>Total Payment</div>
-                        </div>
-                        <PaymentForm
-                            formData={formFieldValues}
-                            onUpdateField={onUpdateField}
-                            onPay={onPay}
-                            isFormValid={isFormValid()}
-                            error={isPaymentFailed}
-                        />
-                    </div>
+                    {
+                        profile && (
+                            <div className={styles['payment-form-wrapper']}>
+                                <div className={styles['form-header']}>
+                                    <h3 className={styles['price']}>{formFieldValues.price}</h3>
+                                    <div className={styles['label']}>Total Payment</div>
+                                </div>
+                                <PaymentForm
+                                    formData={formFieldValues}
+                                    onUpdateField={onUpdateField}
+                                    onPay={onPay}
+                                    isFormValid={isFormValid()}
+                                    error={isPaymentFailed}
+                                />
+                            </div>
+                        )
+                    }
                     {
                         isMobile && (
                             <InfoCard