use legal/pref name on ticket

src/components/QrCode.js

@@ -154,25 +154,31 @@ const AppleWalletButton = styled.button`
 //   })
 // }
 
-const QrCode = ({ userInfo, userId }) => {
+const QrCode = ({ userInfo, application, userId }) => {
   const { Canvas } = useQRCode()
+  const applicantName =
+    Object.keys(application).length > 0
+      ? application?.basicInfo?.preferredName
+        ? application?.basicInfo?.preferredName
+        : application?.basicInfo?.legalFirstName + ' ' + application?.basicInfo?.legalLastName
+      : ''
 
   const downloadAppleWalletPass = () => {
     const userId = userInfo.uid
-    const name = userInfo.displayName
+    const name = applicantName
     const email = userInfo.email
     const url = `https://us-central1-wallet-cloud-func.cloudfunctions.net/getAppleWalletPass?userId=${userId}&name=${name}&email=${email}`
     window.location.href = url
   }
 
   return (
     <QRContainer>
-      <QRInfoMobileWelcome>Welcome, {userInfo.displayName}!</QRInfoMobileWelcome>
+      <QRInfoMobileWelcome>Welcome, {applicantName}!</QRInfoMobileWelcome>
 
       <QRTicketContainer>
         <QRCodeDesignContainer>
           <QRCodeDesign id="QRCodeContainer">
-            <HackerName>{userInfo.displayName}</HackerName>
+            <HackerName>{applicantName}</HackerName>
             <HackerEmail>{userInfo.email}</HackerEmail>
 
             <QRTags>
@@ -208,7 +214,7 @@ const QrCode = ({ userInfo, userId }) => {
 
       <QRInfo>
         <QRInfoWelcome>Welcome,</QRInfoWelcome>
-        <QRInfoName>{userInfo.displayName}!</QRInfoName>
+        <QRInfoName>{applicantName}!</QRInfoName>
         <QRInfoDes>
           This ticket contains your personal QR code which will be scanned throughout the event.
           Please add this ticket to your mobile wallet or take a screenshot.

src/pages/Home.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import HackerCountdown from '../containers/HackerCountdown'
 // import Announcements from '../components/Announcements'
 // import { CommonLinks } from '../containers/Quicklinks'
@@ -11,6 +11,7 @@ import { APPLICATION_STATUS } from '../utility/Constants'
 import { P } from '../../src/components/Typography'
 import backgroundImage from '../assets/cmdf_homebg.svg'
 import mobileBackgroundImage from '../assets/cmdf_mobilebg.svg'
+import { getUserApplication } from '../utility/firebase'
 
 //My Ticket
 const HomeContainer = styled.div`
@@ -56,8 +57,18 @@ const StyledP = styled(P)`
 `
 
 export default withTheme(({ announcements, theme }) => {
+  const [applicantInfo, setApplicantInfo] = useState({})
   const { user, isAuthed } = useAuth()
 
+  useEffect(() => {
+    const getApplicant = async () => {
+      const applicant = await getUserApplication(user.uid)
+      console.log(applicant)
+      setApplicantInfo(applicant)
+    }
+    getApplicant()
+  }, [user])
+
   return (
     <>
       <HomeContainerBackground />
@@ -71,7 +82,7 @@ export default withTheme(({ announcements, theme }) => {
 
         {/* Only display QR Code if logged in */}
         {user?.status === APPLICATION_STATUS.accepted && isAuthed && user.uid ? (
-          <QrCode userInfo={user} userId={user.uid} />
+          <QrCode userInfo={user} application={applicantInfo} userId={user.uid} />
         ) : (
           <StyledP>Please login with the email you used to apply to cmd-f 2024.</StyledP>
         )}