diff --git a/src/apps/profiles/src/member-profile/profile-header/HiringFormModal/HiringFormModal.tsx b/src/apps/profiles/src/member-profile/profile-header/HiringFormModal/HiringFormModal.tsx
new file mode 100644
index 000000000..eea5d7e30
--- /dev/null
+++ b/src/apps/profiles/src/member-profile/profile-header/HiringFormModal/HiringFormModal.tsx
@@ -0,0 +1,48 @@
+import { FC } from 'react'
+
+import { UserProfile } from '~/libs/core'
+import { BaseModal } from '~/libs/ui'
+
+interface HiringFormModalProps {
+ onClose: () => void
+ authProfile: UserProfile | undefined
+ profile: UserProfile
+ searchedSkills: string[]
+}
+
+function populateIframeForm(profile: UserProfile, authProfile: any | undefined, searchedSkills: string[]): string {
+ const formUrl = `https://go.topcoder.com/talent-search-intake?handle=${profile.handle}`
+
+ if (authProfile) {
+ return `${formUrl}
+&first_name=${authProfile.firstName}
+&last_name=${authProfile.lastName}
+&email=${authProfile.email}
+&searched_skills=${searchedSkills.join(',')}`
+ }
+
+ return formUrl
+}
+
+const HiringFormModal: FC
+ Start with this form.
+
+
+ { + namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly' + ? props.profile.handle + : `${props.profile.firstName} ${props.profile.lastName}` + } +
{ - namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly' - ? props.profile.handle - : `${props.profile.firstName} ${props.profile.lastName}` + canEdit && ( +- { - // If the user hasn't set a name and handle appareance, display both name and handle - (namesAndHandleAppearanceData?.namesAndHandleAppearance === 'namesAndHandle' - || !namesAndHandleAppearanceData) ? ( +
+ { + // If the user hasn't set a name and handle appareance, display both name and handle + (namesAndHandleAppearanceData?.namesAndHandleAppearance === 'namesAndHandle' + || !namesAndHandleAppearanceData) ? ( // eslint-disable-next-line react/jsx-indent - <> - {props.profile.handle} - {' '} - | - {' '} - > - ) : undefined - } - Member Since - {' '} - {moment(props.profile.createdAt) - .format('MMM YYYY')} -
+ <> + {props.profile.handle} + {' '} + | + {' '} + > + ) : undefined + } + Member Since + {' '} + {moment(props.profile.createdAt) + .format('MMM YYYY')} + +