diff --git a/app/javascript/packages/document-capture/components/_file-input.scss b/app/javascript/packages/document-capture/components/_file-input.scss index 5288954a675..1b40bc4e61e 100644 --- a/app/javascript/packages/document-capture/components/_file-input.scss +++ b/app/javascript/packages/document-capture/components/_file-input.scss @@ -17,22 +17,11 @@ border-width: 3px; } -.usa-file-input:not( - .usa-file-input--has-value, - .usa-file-input--value-pending, - .usa-file-input--is-id-capture - ) - .usa-file-input__target, -.usa-form-group--error .usa-file-input .usa-file-input__target, -.usa-form-group--success .usa-file-input .usa-file-input__target { - height: 21rem; - width: 12rem; -} - .usa-file-input:not(.usa-file-input--has-value, .usa-file-input--value-pending) { .usa-file-input__target { border-color: color('primary'); border-radius: 0.375rem; + &:hover { border-color: color('primary-dark'); } @@ -63,7 +52,6 @@ display: block; letter-spacing: 0.4px; line-height: 1.5; - // For content to appear as vertically centered, offset the larger line-height of the banner to // match the space below the drag text. margin-top: ((1.5rem - size('body', '2xs')) - ((1.625rem * 1.5) - 1.625rem)) * 0.5; @@ -87,17 +75,7 @@ width: 100%; } } -.usa-file-input.usa-file-input--single-value:not(.usa-file-input--is-id-capture) { - .usa-file-input__preview { - width: 12rem; - } - .usa-file-input__target { - width: 12rem; - } - .usa-file-input__preview-image { - width: 12rem; - } -} + .usa-file-input__input:not([disabled]):focus { outline: 3px solid color('primary'); outline-offset: 6px; diff --git a/app/javascript/packages/document-capture/components/document-capture.tsx b/app/javascript/packages/document-capture/components/document-capture.tsx index 0f63e720588..cdba4f534e2 100644 --- a/app/javascript/packages/document-capture/components/document-capture.tsx +++ b/app/javascript/packages/document-capture/components/document-capture.tsx @@ -70,7 +70,7 @@ function DocumentCapture({ onStepChange = () => {} }: DocumentCaptureProps) { title: t('doc_auth.headings.selfie_capture'), }; const documentsFormSteps: FormStep[] = - docAuthSeparatePagesEnabled && isSelfieCaptureEnabled && submissionError === undefined + isSelfieCaptureEnabled && docAuthSeparatePagesEnabled && submissionError === undefined ? [documentFormStep, selfieFormStep] : [documentAndSelfieFormStep]; const reviewFormStep: FormStep = { diff --git a/app/javascript/packages/document-capture/components/documents-step.tsx b/app/javascript/packages/document-capture/components/documents-step.tsx index 5833f7d515a..c9d32c596ff 100644 --- a/app/javascript/packages/document-capture/components/documents-step.tsx +++ b/app/javascript/packages/document-capture/components/documents-step.tsx @@ -1,10 +1,11 @@ import { useContext } from 'react'; import { useI18n } from '@18f/identity-react-i18n'; import { FormStepComponentProps, FormStepsButton } from '@18f/identity-form-steps'; +import { PageHeading } from '@18f/identity-components'; import { Cancel } from '@18f/identity-verify-flow'; import HybridDocCaptureWarning from './hybrid-doc-capture-warning'; import TipList from './tip-list'; -import { DeviceContext, UploadContext } from '../context'; +import { DeviceContext, SelfieCaptureContext, UploadContext } from '../context'; import { ImageValue, DefaultSideProps, @@ -37,7 +38,13 @@ export function DocumentsCaptureStep({ export function DocumentCaptureSubheaderOne() { const { t } = useI18n(); - return

{t('doc_auth.headings.document_capture')}

; + return ( +

+
+ {'1. '} + {t('doc_auth.headings.document_capture_subheader_id')} +

+ ); } export default function DocumentsStep({ @@ -50,6 +57,10 @@ export default function DocumentsStep({ const { t } = useI18n(); const { isMobile } = useContext(DeviceContext); const { flowPath } = useContext(UploadContext); + const { isSelfieCaptureEnabled } = useContext(SelfieCaptureContext); + const pageHeaderText = isSelfieCaptureEnabled + ? t('doc_auth.headings.document_capture_with_selfie') + : t('doc_auth.headings.document_capture'); const defaultSideProps: DefaultSideProps = { registerField, onChange, @@ -59,6 +70,7 @@ export default function DocumentsStep({ return ( <> {flowPath === 'hybrid' && } + {pageHeaderText} ) { // they don't have a preview. This shows the name of the file in the upload // box (using the existing preview) when the file name ends with .yml const isYAMLFile: boolean = value instanceof window.File && value.name.endsWith('.yml'); - const isIdCapture: boolean = !(label === t('doc_auth.headings.document_capture_selfie')); + /** * In response to a file input change event, confirms that the file is valid before calling * `onChange`. @@ -387,7 +387,6 @@ function FileInput(props: FileInputProps, ref: ForwardedRef) { isDraggingOver && 'usa-file-input--drag', value && !isValuePending && 'usa-file-input--has-value', isValuePending && 'usa-file-input--value-pending', - isIdCapture && 'usa-file-input--is-id-capture', ] .filter(Boolean) .join(' ')} diff --git a/app/javascript/packages/document-capture/components/selfie-step.tsx b/app/javascript/packages/document-capture/components/selfie-step.tsx index 2842a9c093e..0cecb7e3c91 100644 --- a/app/javascript/packages/document-capture/components/selfie-step.tsx +++ b/app/javascript/packages/document-capture/components/selfie-step.tsx @@ -5,6 +5,7 @@ import { FormStepsButton, FormStepsContext, } from '@18f/identity-form-steps'; +import { PageHeading } from '@18f/identity-components'; import { Cancel } from '@18f/identity-verify-flow'; import HybridDocCaptureWarning from './hybrid-doc-capture-warning'; import DocumentSideAcuantCapture from './document-side-acuant-capture'; @@ -26,7 +27,8 @@ export function SelfieCaptureStep({ const { t } = useI18n(); return ( <> -

{t('doc_auth.headings.document_capture_subheader_selfie')}

+
+

2. {t('doc_auth.headings.document_capture_subheader_selfie')}

{t('doc_auth.info.selfie_capture_content')}

{}, registerField = () => undefined, }: FormStepComponentProps) { + const { t } = useI18n(); const { isLastStep } = useContext(FormStepsContext); const { flowPath } = useContext(UploadContext); + const pageHeaderText = t('doc_auth.headings.document_capture_with_selfie'); const defaultSideProps: DefaultSideProps = { registerField, @@ -67,6 +71,7 @@ export default function SelfieStep({ return ( <> {flowPath === 'hybrid' && } + {pageHeaderText} {isLastStep ? : } diff --git a/config/application.yml.default.docker b/config/application.yml.default.docker index 2e8344dd1fa..4aa054a39ba 100644 --- a/config/application.yml.default.docker +++ b/config/application.yml.default.docker @@ -40,6 +40,3 @@ production: lexisnexis_threatmetrix_mock_enabled: true enable_usps_verification: true seed_agreements_data: false - doc_auth_separate_pages_enabled: true - doc_auth_selfie_capture_enabled: true - biometric_ial_enabled: true \ No newline at end of file diff --git a/config/locales/en.yml b/config/locales/en.yml index 7f69539c5e5..a94e96cf5fb 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -579,7 +579,7 @@ doc_auth.headings.document_capture_back: Back of your ID doc_auth.headings.document_capture_front: Front of your ID doc_auth.headings.document_capture_selfie: Photo of your face doc_auth.headings.document_capture_subheader_id: Driver’s license or state ID card -doc_auth.headings.document_capture_subheader_selfie: Add a photo of your face +doc_auth.headings.document_capture_subheader_selfie: Photo of your face doc_auth.headings.document_capture_with_selfie: Add photos of your ID and a photo of yourself doc_auth.headings.front: Front of your driver’s license or state ID doc_auth.headings.how_to_verify: Choose how you want to verify your identity @@ -679,16 +679,16 @@ doc_auth.instructions.text2: You will not need your physical SSN card. doc_auth.instructions.text3: We match your phone number with your personal information and send a one-time code to your phone. doc_auth.instructions.text4: Your password saves and encrypts your personal information. doc_auth.tips.document_capture_hint: Must be a JPG or PNG -doc_auth.tips.document_capture_id_text1: Use a flat and dark surface -doc_auth.tips.document_capture_id_text2: Take photos in a well-lit place -doc_auth.tips.document_capture_id_text3: Avoid glare or shadows +doc_auth.tips.document_capture_id_text1: Place your ID on a flat and dark surface. +doc_auth.tips.document_capture_id_text2: Take your photo in a well-lit place. +doc_auth.tips.document_capture_id_text3: Avoid glare or shadows on your ID. doc_auth.tips.document_capture_id_text4: File size should be at least 2 MB. -doc_auth.tips.document_capture_selfie_id_header_text: How to take clear photos +doc_auth.tips.document_capture_selfie_id_header_text: How to take clear photos of your ID doc_auth.tips.document_capture_selfie_selfie_text: How to prepare for your photo -doc_auth.tips.document_capture_selfie_text1: Remove any items covering your face, like glasses or a hat -doc_auth.tips.document_capture_selfie_text2: Take photo in a well-lit place -doc_auth.tips.document_capture_selfie_text3: Keep your expression neutral -doc_auth.tips.document_capture_selfie_text4: Make sure your whole face is visible within the green circle +doc_auth.tips.document_capture_selfie_text1: Remove any clothing items or accessories that might cover your face. We suggest removing your glasses or hat. +doc_auth.tips.document_capture_selfie_text2: Take your photo in a well-lit place. +doc_auth.tips.document_capture_selfie_text3: Keep your expression neutral. +doc_auth.tips.document_capture_selfie_text4: Make sure your whole face is visible within the green circle. doc_auth.tips.mobile_phone_required: Mobile Phone Required doc_auth.tips.review_issues_id_header_text: 'Review the images of your state‑issued ID:' doc_auth.tips.review_issues_id_text1: Did you use a dark background? diff --git a/config/locales/es.yml b/config/locales/es.yml index 6b6f6cb2df9..6833ee083d8 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -590,7 +590,7 @@ doc_auth.headings.document_capture_back: Reverso de su identificación doc_auth.headings.document_capture_front: Frente de su identificación doc_auth.headings.document_capture_selfie: Fotografía de su cara doc_auth.headings.document_capture_subheader_id: Licencia de conducir o identificación estatal -doc_auth.headings.document_capture_subheader_selfie: Añada una foto de su cara +doc_auth.headings.document_capture_subheader_selfie: Fotografía de su cara doc_auth.headings.document_capture_with_selfie: Agregue fotos de su identificación y una foto de usted doc_auth.headings.front: Frente de su licencia de conducir o identificación estatal doc_auth.headings.how_to_verify: Elija cómo desea verificar su identidad @@ -690,15 +690,15 @@ doc_auth.instructions.text2: No necesita la tarjeta física del Seguro Social. doc_auth.instructions.text3: Revisamos que su número de teléfono coincida con su información personal y enviamos un código de un solo uso a su teléfono. doc_auth.instructions.text4: Su contraseña guarda y cifra su información personal. doc_auth.tips.document_capture_hint: Debe ser un archivo JPG o PNG -doc_auth.tips.document_capture_id_text1: Use una superficie plana y de color oscuro. -doc_auth.tips.document_capture_id_text2: Tome fotos en un lugar bien iluminado -doc_auth.tips.document_capture_id_text3: Evite que se vean reflejos o sombras +doc_auth.tips.document_capture_id_text1: Coloque su identificación en una superficie plana y de color oscuro. +doc_auth.tips.document_capture_id_text2: Tómese la foto en un lugar bien iluminado. +doc_auth.tips.document_capture_id_text3: Evite que se vean reflejos o sombras en su identificación. doc_auth.tips.document_capture_id_text4: El tamaño del archivo debe ser de al menos 2 MB. -doc_auth.tips.document_capture_selfie_id_header_text: Cómo tomar fotos nítidas +doc_auth.tips.document_capture_selfie_id_header_text: Cómo tomar fotos nítidas de su identificación doc_auth.tips.document_capture_selfie_selfie_text: Cómo prepararse para tomar su foto -doc_auth.tips.document_capture_selfie_text1: Quite cualquier prenda o accesorio que pueda cubrirle la cara, como anteojos o un sombrero. -doc_auth.tips.document_capture_selfie_text2: Tómese la foto en un lugar bien iluminado -doc_auth.tips.document_capture_selfie_text3: Mantenga una expresión neutral +doc_auth.tips.document_capture_selfie_text1: Quite cualquier prenda o accesorio que pueda cubrirle la cara. Sugerimos que se quite los anteojos o el sombrero. +doc_auth.tips.document_capture_selfie_text2: Tómese la foto en un lugar bien iluminado. +doc_auth.tips.document_capture_selfie_text3: Mantenga una expresión neutral. doc_auth.tips.document_capture_selfie_text4: Revise que se vea su rostro completo dentro del círculo verde. doc_auth.tips.mobile_phone_required: Se necesita un teléfono móvil doc_auth.tips.review_issues_id_header_text: 'Revise las imágenes de su identificación emitida por el estado:' diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 89c9f0bc371..2bf5eaeb887 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -579,7 +579,7 @@ doc_auth.headings.document_capture_back: Verso de votre pièce d’identité doc_auth.headings.document_capture_front: Recto de votre carte d’identité doc_auth.headings.document_capture_selfie: Photo de votre visage doc_auth.headings.document_capture_subheader_id: Permis de conduire ou carte d’identité d’un État -doc_auth.headings.document_capture_subheader_selfie: Ajouter une photo de votre visage +doc_auth.headings.document_capture_subheader_selfie: Photo de votre visage doc_auth.headings.document_capture_with_selfie: Ajouter des photos de votre pièce d’identité et une photo de vous-même doc_auth.headings.front: Recto de votre permis de conduire ou de votre carte d’identité d’un État doc_auth.headings.how_to_verify: Choisir la manière dont vous souhaitez confirmer votre identité @@ -679,16 +679,16 @@ doc_auth.instructions.text2: Vous n’aurez pas besoin de votre carte de sécuri doc_auth.instructions.text3: Nous comparons votre numéro de téléphone à vos informations personnelles et vous envoyons un code à usage unique sur votre téléphone. doc_auth.instructions.text4: Votre mot de passe s’enregistre et chiffre vos informations personnelles. doc_auth.tips.document_capture_hint: Doit être au format JPG ou PNG -doc_auth.tips.document_capture_id_text1: Utilisez une surface plane et foncée -doc_auth.tips.document_capture_id_text2: Prenez vos photos dans un endroit bien éclairé -doc_auth.tips.document_capture_id_text3: Évitez les reflets ou les ombres +doc_auth.tips.document_capture_id_text1: Placez votre pièce d’identité sur une surface plane et sombre. +doc_auth.tips.document_capture_id_text2: Prenez votre photo dans un endroit bien éclairé. +doc_auth.tips.document_capture_id_text3: Évitez les reflets et les ombres sur votre pièce d’identité. doc_auth.tips.document_capture_id_text4: La taille du fichier doit être d’au moins 2 Mo. -doc_auth.tips.document_capture_selfie_id_header_text: Comment prendre des photos nettes +doc_auth.tips.document_capture_selfie_id_header_text: Comment prendre des photos nettes de votre pièce d’identité doc_auth.tips.document_capture_selfie_selfie_text: Comment vous préparer pour prendre la photo de vous-même -doc_auth.tips.document_capture_selfie_text1: Enlevez tout ce qui cache votre visage (lunettes, couvre-chef, etc.) -doc_auth.tips.document_capture_selfie_text2: Prenez votre photo dans un endroit bien éclairé -doc_auth.tips.document_capture_selfie_text3: Gardez une expression neutre -doc_auth.tips.document_capture_selfie_text4: Assurez-vous que l’ensemble de votre visage est visible dans le cercle vert +doc_auth.tips.document_capture_selfie_text1: Retirez tous articles ou accessoires vestimentaires susceptibles de cacher votre visage. Nous vous conseillons de retirer vos lunettes ou votre couvre-chef. +doc_auth.tips.document_capture_selfie_text2: Prenez votre photo dans un endroit bien éclairé. +doc_auth.tips.document_capture_selfie_text3: Gardez une expression neutre. +doc_auth.tips.document_capture_selfie_text4: Assurez-vous que l’ensemble de votre visage soit visible à l’intérieur du cercle vert. doc_auth.tips.mobile_phone_required: Téléphone mobile nécessaire doc_auth.tips.review_issues_id_header_text: 'Examinez les images de votre carte d’identité délivrée par l’État :' doc_auth.tips.review_issues_id_text1: Avez-vous utilisé un arrière-plan de couleur sombre ? diff --git a/config/locales/zh.yml b/config/locales/zh.yml index 6a2a2c788f9..97ddc9d565a 100644 --- a/config/locales/zh.yml +++ b/config/locales/zh.yml @@ -590,7 +590,7 @@ doc_auth.headings.document_capture_back: 你身份证件的背面 doc_auth.headings.document_capture_front: 你身份证件的正面 doc_auth.headings.document_capture_selfie: 你面部照片 doc_auth.headings.document_capture_subheader_id: 驾照或州政府颁发的身份证件 -doc_auth.headings.document_capture_subheader_selfie: 添加您面部照片 +doc_auth.headings.document_capture_subheader_selfie: 你本人照片 doc_auth.headings.document_capture_with_selfie: 添加你身份证件和本人的照片 doc_auth.headings.front: 驾照或州政府颁发身份证件的正面 doc_auth.headings.how_to_verify: 选择你想如何验证身份 @@ -690,16 +690,16 @@ doc_auth.instructions.text2: 不需要你社会保障卡实体。 doc_auth.instructions.text3: 我们把你的电话号码与个人信息匹配，并向你的电话发送一个一次性代码。 doc_auth.instructions.text4: 你的密码对你个人信息进行存储并加密。 doc_auth.tips.document_capture_hint: 必须是 JPG 或 PNG -doc_auth.tips.document_capture_id_text1: 使用水平和深色表面 -doc_auth.tips.document_capture_id_text2: 在光线明亮的地方拍照 -doc_auth.tips.document_capture_id_text3: 避免炫光或阴影 +doc_auth.tips.document_capture_id_text1: 把你身份证件放在一个平坦、暗色的表面上。 +doc_auth.tips.document_capture_id_text2: 在光线明亮的地方拍照。 +doc_auth.tips.document_capture_id_text3: 避免身份证件上有炫光或阴影。 doc_auth.tips.document_capture_id_text4: 文件大小应当至少 2 兆。 -doc_auth.tips.document_capture_selfie_id_header_text: 如何拍摄清晰照片 +doc_auth.tips.document_capture_selfie_id_header_text: 如何拍摄你身份证件的清晰照片 doc_auth.tips.document_capture_selfie_selfie_text: 如何准备拍照 -doc_auth.tips.document_capture_selfie_text1: 摘掉任何遮盖您面孔的东西，比如眼镜或帽子 -doc_auth.tips.document_capture_selfie_text2: 在光线明亮的地方拍照 -doc_auth.tips.document_capture_selfie_text3: 保持中性表情 -doc_auth.tips.document_capture_selfie_text4: 确保您整个面孔都可以在绿色圆圈里看到 +doc_auth.tips.document_capture_selfie_text1: 摘掉可能盖住你面部的任何服饰。我们建议你摘掉眼镜和帽子。 +doc_auth.tips.document_capture_selfie_text2: 在光线明亮的地方拍照。 +doc_auth.tips.document_capture_selfie_text3: 面部表情保持中性。 +doc_auth.tips.document_capture_selfie_text4: 确保你整个面部都可以在绿色圆圈中看到。 doc_auth.tips.mobile_phone_required: 要求有手机 doc_auth.tips.review_issues_id_header_text: 请仔细查看你州政府颁发身份证件的图像： doc_auth.tips.review_issues_id_text1: 你是否使用了暗色背景？ diff --git a/spec/javascript/packages/document-capture/components/documents-and-selfie-step-spec.tsx b/spec/javascript/packages/document-capture/components/documents-and-selfie-step-spec.tsx index a344d3198be..482ad5ca2be 100644 --- a/spec/javascript/packages/document-capture/components/documents-and-selfie-step-spec.tsx +++ b/spec/javascript/packages/document-capture/components/documents-and-selfie-step-spec.tsx @@ -172,8 +172,8 @@ describe('document-capture/components/documents-and-selfie-step', () => { level: 2, }); const selfieHeader = getByRole('heading', { - name: 'doc_auth.headings.document_capture_subheader_selfie', - level: 1, + name: '2. doc_auth.headings.document_capture_subheader_selfie', + level: 2, }); expect(front).to.be.ok(); expect(back).to.be.ok();