11'use client'
22
3+ import { useTranslation } from 'react-i18next'
4+
35import { Button } from '@sebt/design-system'
46
57interface DocVerifyInterstitialProps {
@@ -17,33 +19,36 @@ export function DocVerifyInterstitial({
1719 onEnterIdNumber,
1820 contactLink
1921} : DocVerifyInterstitialProps ) {
22+ const { t } = useTranslation ( 'idProofing' )
23+
2024 return (
2125 < section aria-labelledby = "doc-verify-title" >
22- { /* TODO: Use t('docVerify.title') once key is available in dc.csv */ }
2326 < h1
2427 id = "doc-verify-title"
2528 className = "font-sans-xl text-bold line-height-sans-1 margin-bottom-3"
2629 >
27- We want to keep your account safe
30+ { t ( 'interstitialHeading' , ' We want to keep your account safe' ) }
2831 </ h1 >
2932
30- { /* TODO: Use t('docVerify.body') once key is available in dc.csv */ }
3133 < p className = "font-sans-sm" >
32- In order to confirm your identity we need to ask for additional documentation. On the next
33- screen, we'll ask you to upload a photo of your:
34+ { t (
35+ 'interstitialBody' ,
36+ "In order to confirm your identity we need to ask for additional documentation. On the next screen, we'll ask you to upload a photo of your:"
37+ ) }
3438 </ p >
3539
3640 < ul className = "usa-list font-sans-sm" >
37- { /* TODO: Use t('docVerify.docTypes.*') once keys are available in dc.csv */ }
38- < li > driver's license</ li >
39- < li > foreign passport</ li >
40- < li > or another photo ID</ li >
41+ < li > { t ( 'interstitialIdTypeDriversLicense' , "driver's license" ) } </ li >
42+ < li > { t ( 'interstitialIdTypeForeignPassport' , 'foreign passport' ) } </ li >
43+ < li > { t ( 'interstitialIdTypeOtherPhotoId' , 'or another photo ID' ) } </ li >
4144 </ ul >
4245
4346 { allowIdRetry && (
4447 < p className = "font-sans-sm" >
45- { /* TODO: Use t('docVerify.skipHint') once key is available in dc.csv */ }
46- You can skip this step by going back and typing in your ID number instead.
48+ { t (
49+ 'interstitialSkipHint' ,
50+ 'You can skip this step by going back and typing in your ID number instead.'
51+ ) }
4752 </ p >
4853 ) }
4954
@@ -54,42 +59,39 @@ export function DocVerifyInterstitial({
5459 className = "usa-button--outline margin-right-2"
5560 onClick = { onEnterIdNumber }
5661 >
57- { /* TODO: Use t('docVerify.actionEnterId') once key is available in dc.csv */ }
58- Enter an ID number
62+ { t ( 'interstitialActionEnterId' , 'Enter an ID number' ) }
5963 </ Button >
6064 ) }
6165
6266 < Button
6367 type = "button"
6468 onClick = { onContinue }
6569 isLoading = { isStartingChallenge }
66- loadingText = " Loading..."
70+ loadingText = { t ( 'interstitialLoading' , ' Loading...' ) }
6771 disabled = { isStartingChallenge }
6872 >
69- { /* TODO: Use t('docVerify.actionContinue') once key is available in dc.csv */ }
70- Continue
73+ { t ( 'interstitialActionContinue' , 'Continue' ) }
7174 </ Button >
7275 </ div >
7376
7477 { /* FAQs placeholder */ }
7578 < div className = "margin-top-6" >
76- { /* TODO: Use t('docVerify.faqs') once key is available in dc.csv */ }
77- < h2 className = "font-sans-lg text-bold" > FAQs</ h2 >
79+ < h2 className = "font-sans-lg text-bold" > { t ( 'interstitialFaqsHeading' , 'FAQs' ) } </ h2 >
7880 </ div >
7981
8082 { /* Contact Us */ }
8183 < div className = "margin-top-4" >
82- { /* TODO: Use t('docVerify.contactUs') once key is available in dc.csv */ }
83- < h2 className = "font-sans-lg text-bold" > Contact Us</ h2 >
84+ < h2 className = "font-sans-lg text-bold" >
85+ { t ( 'interstitialContactUsHeading' , 'Contact Us' ) }
86+ </ h2 >
8487 < p className = "font-sans-sm" >
8588 < a
8689 href = { contactLink }
8790 target = "_blank"
8891 rel = "noopener noreferrer"
8992 className = "usa-link"
9093 >
91- { /* TODO: Use t('docVerify.contactUsLink') once key is available in dc.csv */ }
92- Need help? Contact us.
94+ { t ( 'interstitialContactUsLink' , 'Need help? Contact us.' ) }
9395 </ a >
9496 </ p >
9597 </ div >
0 commit comments