From e7af533e2a72bebacf191d7d0d5a043bb78728d1 Mon Sep 17 00:00:00 2001 From: Emily Jablonski <65367387+emilyjablonski@users.noreply.github.com> Date: Fri, 1 Dec 2023 12:00:40 -0700 Subject: [PATCH] feat: core changes for application style alignment (#3662) --- shared-helpers/package.json | 4 +- shared-helpers/src/locales/es.json | 21 +- shared-helpers/src/locales/general.json | 30 +- shared-helpers/src/locales/tl.json | 25 +- shared-helpers/src/locales/vi.json | 25 +- shared-helpers/src/locales/zh.json | 25 +- .../src/views/multiselectQuestions.tsx | 2 +- .../views/sign-in/ResendConfirmationModal.tsx | 2 +- sites/partners/package.json | 4 +- sites/partners/src/pages/index.tsx | 6 +- sites/partners/src/pages/users/index.tsx | 7 +- .../application/household/add-members.spec.ts | 2 +- .../application/household/member.spec.ts | 4 +- sites/public/cypress/support/commands.js | 22 +- sites/public/cypress/support/index.d.ts | 2 +- sites/public/package.json | 4 +- .../src/components/account/StatusItem.tsx | 2 +- .../ApplicationMultiselectQuestionStep.tsx | 175 ++--- .../applications/ValidateAddress.tsx | 8 +- .../components/shared/FormSummaryDetails.tsx | 15 +- .../src/layouts/application-form.module.scss | 37 + sites/public/src/layouts/application-form.tsx | 113 +++ sites/public/src/layouts/forms.tsx | 3 +- .../pages/applications/contact/address.tsx | 388 +++++----- .../contact/alternate-contact-contact.tsx | 140 ++-- .../contact/alternate-contact-name.tsx | 139 ++-- .../contact/alternate-contact-type.tsx | 103 +-- .../src/pages/applications/contact/name.tsx | 226 +++--- .../pages/applications/financial/income.tsx | 177 ++--- .../pages/applications/financial/vouchers.tsx | 134 ++-- .../src/pages/applications/household/ada.tsx | 168 ++--- .../applications/household/add-members.tsx | 145 ++-- .../pages/applications/household/changes.tsx | 106 +-- .../applications/household/live-alone.tsx | 133 ++-- .../pages/applications/household/member.tsx | 690 +++++++++--------- .../applications/household/members-info.tsx | 90 +-- .../household/preferred-units.tsx | 94 +-- .../pages/applications/household/student.tsx | 105 +-- .../pages/applications/preferences/all.tsx | 2 +- .../applications/preferences/general.tsx | 6 - .../applications/review/confirmation.tsx | 119 +-- .../applications/review/demographics.tsx | 85 +-- .../src/pages/applications/review/summary.tsx | 131 ++-- .../src/pages/applications/review/terms.tsx | 172 +++-- .../src/pages/applications/start/autofill.tsx | 102 +-- .../applications/start/choose-language.tsx | 188 +++-- .../applications/start/what-to-expect.tsx | 83 +-- sites/public/src/pages/applications/view.tsx | 67 +- sites/public/src/pages/index.tsx | 2 +- sites/public/styles/overrides.scss | 6 + yarn.lock | 16 +- 51 files changed, 2016 insertions(+), 2339 deletions(-) create mode 100644 sites/public/src/layouts/application-form.module.scss create mode 100644 sites/public/src/layouts/application-form.tsx diff --git a/shared-helpers/package.json b/shared-helpers/package.json index 7c5aaf56e0..cb58b39566 100644 --- a/shared-helpers/package.json +++ b/shared-helpers/package.json @@ -17,8 +17,8 @@ }, "dependencies": { "@bloom-housing/backend-core": "^7.13.0", - "@bloom-housing/ui-components": "12.0.29", - "@bloom-housing/ui-seeds": "^1.12.0", + "@bloom-housing/ui-components": "12.1.0", + "@bloom-housing/ui-seeds": "1.12.1", "axios-cookiejar-support": "4.0.6", "tough-cookie": "4.1.3" }, diff --git a/shared-helpers/src/locales/es.json b/shared-helpers/src/locales/es.json index 3959f6dabb..bad43ab5cf 100644 --- a/shared-helpers/src/locales/es.json +++ b/shared-helpers/src/locales/es.json @@ -39,7 +39,7 @@ "application.alternateContact.contact.description": "Solo utilizaremos esta información para ponernos en contacto con él o ella en relación con su solicitud.", "application.alternateContact.contact.emailAddressFormLabel": "Dirección de email del contacto", "application.alternateContact.contact.phoneNumberFormLabel": "Número telefónico del contacto", - "application.alternateContact.contact.title": "Díganos cómo comunicarnos con su contacto alternativo", + "application.alternateContact.contact.title": "Díganos cómo comunicarnos con su contacto alternativo.", "application.alternateContact.name.alternateContactFormLabel": "Nombre del contacto alternativo", "application.alternateContact.name.caseManagerAgencyFormLabel": "¿En dónde trabaja su administrador(a) de casos o asesor(a) sobre vivienda?", "application.alternateContact.name.caseManagerAgencyFormPlaceHolder": "Agencia", @@ -78,8 +78,11 @@ "application.contact.couldntLocateAddress": "No hemos podido ubicar la dirección que ingresó. Por favor_ confirme que sea la dirección correcta.", "application.contact.doYouWorkInDescription": "Por decidirse", "application.contact.doYouWorkIn": "¿Trabaja usted en ?", + "application.contact.familyName": "Apellido", + "application.contact.givenName": "Nombre de pila", "application.contact.mailingAddress": "Dirección postal", "application.contact.noPhoneNumber": "No tengo un número telefónico", + "application.contact.number.subNote": "10 dígitos, por ejemplo 999-999-9999", "application.contact.phoneNumberTypes.cell": "Celular", "application.contact.phoneNumberTypes.home": "Casa", "application.contact.phoneNumberTypes.prompt": "¿Qué tipo de número es este?", @@ -90,11 +93,12 @@ "application.contact.state": "Estado", "application.contact.streetAddress": "Domicilio", "application.contact.suggestedAddress": "Dirección sugerida:", - "application.contact.title": "Gracias %{firstName}. Ahora, necesitamos saber cómo comunicarnos con usted.", + "application.contact.title": "Gracias, %{firstName}. Ahora necesitamos saber cómo comunicarnos con usted acerca de su solicitud.", "application.contact.verifyAddressTitle": "Hemos localizado la siguiente dirección. Por favor_ confirme que sea la dirección correcta.", "application.contact.workAddress": "Dirección del trabajo", "application.contact.youEntered": "Ha ingresado los siguientes datos:", "application.contact.yourAdditionalPhoneNumber": "Su segundo número de teléfono", + "application.contact.yourAddress": "Su dirección", "application.contact.yourPhoneNumber": "Su número telefónico", "application.contact.zipCode": "Código Postal", "application.contact.zip": "Código Postal", @@ -150,7 +154,7 @@ "application.household.householdStudent.question": "¿Alguien de su grupo familiar es estudiante a tiempo completo o cumplirá 18 años en los próximos 60 días?", "application.household.householdStudent.title": "El grupo familiar incluye un estudiante o miembro que está por cumplir 18 años", "application.household.liveAlone.liveWithOtherPeople": "Otras personas vivirán conmigo", - "application.household.liveAlone.title": "Ahora nos gustaría obtener información acerca de las otras personas que residirán con usted en la vivienda", + "application.household.liveAlone.title": "Ahora nos gustaría obtener información acerca de las otras personas que residirán con usted en la vivienda.", "application.household.liveAlone.willLiveAlone": "Viviré solo(a)", "application.household.member.cancelAddingThisPerson": "Cancelar añadir a esta persona", "application.household.member.dateOfBirth": "Fecha de nacimiento", @@ -158,8 +162,8 @@ "application.household.member.haveSameAddress": "¿Tiene la misma dirección que usted?", "application.household.member.name": "Nombre del miembro del hogar", "application.household.member.saveHouseholdMember": "Guardar el miembro del hogar", - "application.household.member.subTitle": "Tendrá la oportunidad de añadir más miembros del hogar en la próxima pantalla", - "application.household.member.title": "Háblenos acerca de esta persona", + "application.household.member.subTitle": "Tendrá la oportunidad de añadir más miembros del hogar en la próxima pantalla.", + "application.household.member.title": "Háblenos acerca de esta persona.", "application.household.member.updateHouseholdMember": "Actualizar al miembro del hogar", "application.household.member.whatIsTheirRelationship": "¿Cuál es su parentesco o relación con usted?", "application.household.member.whatReletionship": "¿Cuál es su parentesco o relación con usted?", @@ -174,11 +178,12 @@ "application.household.preferredUnit.options.studio": "Estudio", "application.household.preferredUnit.options.threeBdrm": "3 dormitorios", "application.household.preferredUnit.options.twoBdrm": "2 dormitorios", - "application.household.preferredUnit.optionsLabel": "Marque todas las opciones que correspondan:", + "application.household.preferredUnit.optionsLabel": "Marque todas las opciones que correspondan", "application.household.preferredUnit.preferredUnitType": "Tipo de vivienda preferida", "application.household.preferredUnit.subTitle": "Aunque los tamaños de las unidades en general se basen en la ocupación, indique el tamaño de unidad que desee para determinar su preferencia en esta oportunidad o establecer una lista de espera (solo por esta oportunidad).", "application.household.preferredUnit.title": "¿Cuáles son los tamaños de vivienda que le interesan?", "application.household.primaryApplicant": "Solicitante primario", + "application.name.dobHelper": "Por ejemplo: 01 19 2000", "application.name.emailPrivacy": "Solo utilizaremos su dirección de email para comunicarnos con usted en relación con su solicitud.", "application.name.firstName": "Nombre", "application.name.lastName": "Apellido", @@ -424,7 +429,9 @@ "errors.dateOfBirthError": "Por favor ingrese una fecha de nacimiento válida", "errors.emailAddressError": "Por favor ingrese una dirección de email", "errors.errorsToResolve": "Hay errores que tendrá que corregir antes de poder seguir adelante.", + "errors.familyNameError": "Por favor ingrese un apellido", "errors.firstNameError": "Por favor ingrese un nombre", + "errors.givenNameError": "Por favor ingrese un nombre de pila", "errors.householdTooBig": "El número de miembros de su hogar es demasiado alto.", "errors.householdTooSmall": "El número de miembros de su hogar es demasiado bajo.", "errors.lastNameError": "Por favor ingrese un apellido", @@ -744,7 +751,7 @@ "t.petsPolicy": "Política de mascotas", "t.phoneNumberPlaceholder": "(555) 555-5555", "t.phone": "Teléfono", - "t.pleaseSelectOne": "Por favor seleccione una opción.", + "t.pleaseSelectOne": "Por favor seleccione una opción", "t.pleaseSelectYesNo": "Elija “sí” o “no”.", "t.pm": "PM", "t.preferNotToSay": "Prefiero no decirlo", diff --git a/shared-helpers/src/locales/general.json b/shared-helpers/src/locales/general.json index bcc8cf8e98..198d78dd09 100644 --- a/shared-helpers/src/locales/general.json +++ b/shared-helpers/src/locales/general.json @@ -39,7 +39,7 @@ "application.alternateContact.contact.description": "We'll only use this information to contact them about your application.", "application.alternateContact.contact.emailAddressFormLabel": "Contact email address", "application.alternateContact.contact.phoneNumberFormLabel": "Contact phone number", - "application.alternateContact.contact.title": "Let us know how to reach your alternate contact", + "application.alternateContact.contact.title": "Let us know how to reach your alternate contact.", "application.alternateContact.name.alternateContactFormLabel": "Name of alternate contact", "application.alternateContact.name.caseManagerAgencyFormLabel": "Where does your case manager or housing counselor work?", "application.alternateContact.name.caseManagerAgencyFormPlaceHolder": "Agency", @@ -78,26 +78,32 @@ "application.contact.couldntLocateAddress": "We couldn't locate the address you entered. Please confirm it's correct.", "application.contact.doYouWorkIn": "Do you work in %{county} County?", "application.contact.doYouWorkInDescription": "TBD", + "application.contact.familyName": "Family Name", + "application.contact.givenName": "Given Name", "application.contact.mailingAddress": "Mailing Address", "application.contact.noPhoneNumber": "I don't have a telephone number", + "application.contact.number": "Number", + "application.contact.number.subNote": "10-digit, for example 999-999-9999", "application.contact.phoneNumberTypes.cell": "Cell", "application.contact.phoneNumberTypes.home": "Home", "application.contact.phoneNumberTypes.prompt": "What type of number is this?", "application.contact.phoneNumberTypes.work": "Work", "application.contact.preferredContactType": "Preferred Contact Type", "application.contact.provideAMailingAddress": "Provide an address where you can receive updates and materials about your application.", + "application.contact.secondNumber": "Second Number", "application.contact.sendMailToMailingAddress": "Send my mail to a different address", "application.contact.state": "State", "application.contact.streetAddress": "Street Address", "application.contact.suggestedAddress": "Suggested Address:", - "application.contact.title": "Thanks %{firstName}. Now we need to know how to contact you.", + "application.contact.title": "Thanks, %{firstName}. Now we need to know how to contact you about your application.", "application.contact.verifyAddressTitle": "We have located the following address. Please confirm it's correct.", "application.contact.verifyMultipleAddresses": "Since there are multiple options for this preference, you’ll need to verify multiple addresses.", "application.contact.workAddress": "Work Address", "application.contact.youEntered": "You Entered:", "application.contact.yourAdditionalPhoneNumber": "Your Second Phone Number", + "application.contact.yourAddress": "Your Address", "application.contact.yourPhoneNumber": "Your Phone Number", - "application.contact.zip": "Zip", + "application.contact.zip": "Zip Code", "application.contact.zipCode": "Zipcode", "application.details.adaPriorities": "ADA Priorities Selected", "application.edited": "Edited", @@ -151,7 +157,7 @@ "application.household.householdStudent.question": "Is someone in your household a full time student or going to turn 18 years old within 60 days?", "application.household.householdStudent.title": "Household Includes Student or Member Nearing 18", "application.household.liveAlone.liveWithOtherPeople": "Other people will live with me", - "application.household.liveAlone.title": "Next we would like to know about the others who will live with you in the unit", + "application.household.liveAlone.title": "Next we would like to know about the others who will live with you in the unit.", "application.household.liveAlone.willLiveAlone": "I will live alone", "application.household.member.cancelAddingThisPerson": "Cancel adding this person", "application.household.member.dateOfBirth": "Date of Birth", @@ -159,8 +165,8 @@ "application.household.member.haveSameAddress": "Do they have same address as you?", "application.household.member.name": "Household member's name", "application.household.member.saveHouseholdMember": "Save household member", - "application.household.member.subTitle": "You will have an opportunity to add more household members on the next screen", - "application.household.member.title": "Tell us about this person", + "application.household.member.subTitle": "You will have an opportunity to add more household members on the next screen.", + "application.household.member.title": "Tell us about this person.", "application.household.member.updateHouseholdMember": "Update Household Member", "application.household.member.whatIsTheirRelationship": "What is their relationship to you?", "application.household.member.whatReletionship": "What is their relationship to you", @@ -175,11 +181,12 @@ "application.household.preferredUnit.options.studio": "Studio", "application.household.preferredUnit.options.threeBdrm": "3 Bedroom", "application.household.preferredUnit.options.twoBdrm": "2 Bedroom", - "application.household.preferredUnit.optionsLabel": "Check all that apply:", + "application.household.preferredUnit.optionsLabel": "Check all that apply", "application.household.preferredUnit.preferredUnitType": "Preferred Unit Type", - "application.household.preferredUnit.subTitle": "Although unit sizes will typically be based on occupancy, please provide your preferred unit size for determining your preference in this opportunity or establishing a waitlist (for this opportunity only)", + "application.household.preferredUnit.subTitle": "Although unit sizes will typically be based on occupancy, please provide your preferred unit size for determining your preference in this opportunity or establishing a waitlist (for this opportunity only).", "application.household.preferredUnit.title": "What unit sizes are you interested in?", "application.household.primaryApplicant": "Primary Applicant", + "application.name.dobHelper": "For example: 01 19 2000", "application.name.emailPrivacy": "We will only use your email address to contact you about your application.", "application.name.firstName": "First Name", "application.name.lastName": "Last Name", @@ -449,6 +456,7 @@ "application.review.terms.textSubmissionDate": "This application must be submitted by %{applicationDueDate}.", "application.review.terms.fcfs.text": "* Applicants are applying to currently vacant apartments on a first come, first serve basis.\n\n* Eligible applicants will be contacted on a first come first serve basis until vacancies are filled.\n\n* If you are contacted for an interview, you will be asked to fill out a more detailed application and provide supporting documents.\n\n* All of the information that you have provided will be verified and your eligibility confirmed.\n\n* Your application may be removed if you have made any fraudulent statements.\n\n* For properties with housing preferences, if we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized.\n\nFor more information, please contact the housing developer or property manager posted in the listing.\n\nCompleting this application does not entitle you to housing or indicate you are eligible for housing. All applicants will be screened as outlined in the property's Resident Selection Criteria.\n\nYou cannot change your online application after you submit.\n\nI declare that the foregoing is true and accurate, and acknowledge that any misstatement fraudulently or negligently made on this application may result in removal from the application process.", "application.review.terms.lottery.text": "* Applicants are applying to enter a lottery for currently vacant apartments.\n\n* Once the application period closes, eligible applicants will be placed in lottery rank order.\n\n* If you are contacted for an interview, you will be asked to fill out a more detailed application and provide supporting documents.\n\n* All of the information that you have provided will be verified and your eligibility confirmed.\n\n* Your application may be removed if you have made any fraudulent statements.\n\n* For properties with housing preferences, if we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized.\n\nFor more information, please contact the housing developer or property manager posted in the listing.\n\nCompleting this application does not entitle you to housing or indicate you are eligible for housing. All applicants will be screened as outlined in the property's Resident Selection Criteria.\n\nYou cannot change your online application after you submit.\n\nI declare that the foregoing is true and accurate, and acknowledge that any misstatement fraudulently or negligently made on this application may result in removal from the application process.", + "application.review.terms.submittingApplication": "Submitting application", "application.review.terms.waitlist.text": "* Applicants are applying for an open waitlist and not a currently vacant apartment.\n\n* When vacancies become available, eligible applicants will be contacted by the property manager on a first come, first serve basis.\n\n* If you are contacted for an interview, you will be asked to fill out a more detailed application and provide supporting documents.\n\n* All of the information that you have provided will be verified and your eligibility confirmed.\n\n* Your application may be removed if you have made any fraudulent statements.\n\n* For properties with housing preferences, if we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized.\n\n* You may be contacted while on the waitlist to confirm that you wish to remain on the waitlist.\n\nFor more information, please contact the housing developer or property manager posted in the listing.\n\nCompleting this application does not entitle you to housing or indicate you are eligible for housing. All applicants will be screened as outlined in the property's Resident Selection Criteria.\n\nYou cannot change your online application after you submit.\n\nI declare that the foregoing is true and accurate, and acknowledge that any misstatement fraudulently or negligently made on this application may result in removal from the application process.", "application.review.terms.title": "Terms", "application.review.voucherOrSubsidy": "Housing Voucher or Rental Subsidy", @@ -561,7 +569,9 @@ "errors.dateOfBirthErrorAge": "Please enter a valid Date of Birth, must be 18 or older", "errors.emailAddressError": "Please enter an email address", "errors.errorsToResolve": "There are errors you'll need to resolve before moving on.", + "errors.familyNameError": "Please enter a Family Name", "errors.firstNameError": "Please enter a First Name", + "errors.givenNameError": "Please enter a Given Name", "errors.householdTooBig": "Your household size is too big.", "errors.householdTooSmall": "Your household size is too small.", "errors.lastNameError": "Please enter a Last Name", @@ -583,7 +593,7 @@ "errors.stateError": "Please enter a state", "errors.streetError": "Please enter an address", "errors.timeError": "Please enter a valid time", - "errors.zipCodeError": "Please enter a zipcode", + "errors.zipCodeError": "Please enter a zip code", "footer.contact": "Contact", "footer.copyright": "Demonstration Jurisdiction © 2021 • All Rights Reserved", "footer.disclaimer": "Disclaimer", @@ -934,7 +944,7 @@ "t.petsPolicy": "Pets Policy", "t.phone": "Phone", "t.phoneNumberPlaceholder": "(555) 555-5555", - "t.pleaseSelectOne": "Please select one.", + "t.pleaseSelectOne": "Please select one", "t.pleaseSelectYesNo": "Please select yes or no.", "t.pm": "PM", "t.preferNotToSay": "Prefer not to say", diff --git a/shared-helpers/src/locales/tl.json b/shared-helpers/src/locales/tl.json index 7b2aa0c372..b7b027bb90 100644 --- a/shared-helpers/src/locales/tl.json +++ b/shared-helpers/src/locales/tl.json @@ -39,7 +39,7 @@ "application.alternateContact.contact.description": "Gagamitin lamang namin ang impormasyong ito para kontakin sila tungkol sa iyong application.", "application.alternateContact.contact.emailAddressFormLabel": "Email address ng Contact", "application.alternateContact.contact.phoneNumberFormLabel": "Numero ng telepono ng contact", - "application.alternateContact.contact.title": "Ipaalam sa ami kung paano matatawagan ang iyong kahaliling contact", + "application.alternateContact.contact.title": "Ipaalam sa ami kung paano matatawagan ang iyong kahaliling contact.", "application.alternateContact.name.alternateContactFormLabel": "Pangalan ng kahaliling contact", "application.alternateContact.name.caseManagerAgencyFormLabel": "Saan nagtatrabaho ang iyong case manager o tagapayo sa pabahay?", "application.alternateContact.name.caseManagerAgencyFormPlaceHolder": "Ahensiya", @@ -78,8 +78,11 @@ "application.contact.couldntLocateAddress": "Hindi namin mahanap ang lugar na iyong inilagay. Pakikumpirmahin kung tama ito.", "application.contact.doYouWorkInDescription": "TBD", "application.contact.doYouWorkIn": "Nagtatrabaho ka ba sa %{county} County?", + "application.contact.familyName": "Apelyido", + "application.contact.givenName": "Ibinigay na pangalan", "application.contact.mailingAddress": "Mailing Address", "application.contact.noPhoneNumber": "Wala akong numero ng telepono", + "application.contact.number.subNote": "10-digit, halimbawa 999-999-9999", "application.contact.phoneNumberTypes.cell": "Cell", "application.contact.phoneNumberTypes.home": "Home", "application.contact.phoneNumberTypes.prompt": "Anong uri ng numero ito?", @@ -90,14 +93,15 @@ "application.contact.state": "State", "application.contact.streetAddress": "Street Address", "application.contact.suggestedAddress": "Iminungkahing Address:", - "application.contact.title": "Salamat %{firstName}. Ngayon ay kailangang malaman namin kung paano ka makokontak.", + "application.contact.title": "Salamat, %{firstName}. Ngayon ay kailangan naming malaman kung paano makipag-ugnayan sa iyo tungkol sa iyong aplikasyon.", "application.contact.verifyAddressTitle": "Nahanap namin ang sumusunod na address. Pakikumpirma kung tama ito.", "application.contact.workAddress": "Address ng Trabaho", "application.contact.youEntered": "Inilagay Mo ay:", "application.contact.yourAdditionalPhoneNumber": "Iyong Pangalawang Numero ng Telepono", + "application.contact.yourAddress": "Ang iyong Address", "application.contact.yourPhoneNumber": "Ang Iyong Numero ng Telepono", "application.contact.zipCode": "Zipcode", - "application.contact.zip": "Zip", + "application.contact.zip": "Zip Code", "application.details.adaPriorities": "Napiling ADA Priorities", "application.edited": "Binago", "application.financial.income.instruction1": "Idagdag ang iyong kabuuang (bago ang buwis) na kita ng sambahayan mula sa sahod_ benepisyo at iba pang pinagkukunan mula sa lahat ng miyembro ng sambahayan.", @@ -150,7 +154,7 @@ "application.household.householdStudent.question": "Mayroon ba sa iyong sambahayan na isang full time na estudyante o magiging 18 taong gulang sa loob ng 60 araw?", "application.household.householdStudent.title": "Kasama sa Sambahayan ang Mag-aaral o Miyembro na Malapit nang Mag-18", "application.household.liveAlone.liveWithOtherPeople": "Iba pang mga tao na kasama kong nakatira", - "application.household.liveAlone.title": "Susunod ay gusto naming malaman ang tungkol sa iba pang titira na kasama mo sa unit", + "application.household.liveAlone.title": "Susunod ay gusto naming malaman ang tungkol sa iba pang titira na kasama mo sa unit.", "application.household.liveAlone.willLiveAlone": "Mag-isa akong titira", "application.household.member.cancelAddingThisPerson": "Kanselahin ang pagdagdag sa taong ito", "application.household.member.dateOfBirth": "Petsa ng Kapanganakan", @@ -158,8 +162,8 @@ "application.household.member.haveSameAddress": "Kapareho ba nila ang address mo?", "application.household.member.name": "Pangalan ng miyembro ng sambahayan", "application.household.member.saveHouseholdMember": "I-save ang miyembro ng sambahayan", - "application.household.member.subTitle": "Magkakaroon ka ng oportunidad na magdagdag ng mga miyembro ng sambahayan sa susunod na screen", - "application.household.member.title": "Sabihin sa amin ang tungkol sa taong ito", + "application.household.member.subTitle": "Magkakaroon ka ng oportunidad na magdagdag ng mga miyembro ng sambahayan sa susunod na screen.", + "application.household.member.title": "Sabihin sa amin ang tungkol sa taong ito.", "application.household.member.updateHouseholdMember": "I-update ang Miyembro ng Household", "application.household.member.whatIsTheirRelationship": "Ano ang kanilang relasyon sa iyo?", "application.household.member.whatReletionship": "Ano ang kanilang relasyon sa iyo", @@ -174,11 +178,12 @@ "application.household.preferredUnit.options.studio": "Studio", "application.household.preferredUnit.options.threeBdrm": "3 Kwarto", "application.household.preferredUnit.options.twoBdrm": "2 Kwarto", - "application.household.preferredUnit.optionsLabel": "Tingnan ang lahat ng naaangkop:", + "application.household.preferredUnit.optionsLabel": "Tingnan ang lahat ng naaangkop", "application.household.preferredUnit.preferredUnitType": "Napiling Uri ng Unit", - "application.household.preferredUnit.subTitle": "Bagama't ang mga sukat ng unit ay karaniwang ibabatay sa nakatira_ mangyaring ibigay ang iyong gustong laki ng unit para sa pagtukoy ng iyong kagustuhan sa pagkakataong ito o pagbuo ng waitlist (para sa pagkakataong ito lamang)", + "application.household.preferredUnit.subTitle": "Bagama't ang mga sukat ng unit ay karaniwang ibabatay sa nakatira_ mangyaring ibigay ang iyong gustong laki ng unit para sa pagtukoy ng iyong kagustuhan sa pagkakataong ito o pagbuo ng waitlist (para sa pagkakataong ito lamang).", "application.household.preferredUnit.title": "Sa anong mga sukat ng unit ka interesado?", "application.household.primaryApplicant": "Pangunahing Aplikante", + "application.name.dobHelper": "Halimbawa: 01 19 2000", "application.name.emailPrivacy": "Gagamitin lang namin ang iyong email address para makipag-ugnayan sa iyo tungkol sa iyong application.", "application.name.firstName": "Pangalan", "application.name.lastName": "Apelyido", @@ -359,7 +364,9 @@ "errors.dateOfBirthError": "Pakilagay ang tamang Petsa ng Kapanganakan", "errors.emailAddressError": "Pakilagay ang email address", "errors.errorsToResolve": "May mga problema na gusto mong resolbahin bago magpatuloy.", + "errors.familyNameError": "Mangyaring maglagay ng Pangalan ng Pamilya", "errors.firstNameError": "Pakilagay ang pangalan", + "errors.givenNameError": "Mangyaring maglagay ng Ibinigay na Pangalan", "errors.householdTooBig": "Napakalaki ng iyong sambahayan.", "errors.householdTooSmall": "Napakaliit ng iyong sambahayan.", "errors.lastNameError": "Pakilagay ang Apelyido", @@ -614,7 +621,7 @@ "t.petsPolicy": "Patakaran sa mga Alagang Hayop", "t.phoneNumberPlaceholder": "(555) 555-5555", "t.phone": "Telepono", - "t.pleaseSelectOne": "Pumili ng isa.", + "t.pleaseSelectOne": "Pumili ng isa", "t.pleaseSelectYesNo": "Pakipiliin ang oo o hindi.", "t.pm": "PM", "t.preferNotToSay": "Piniling hindi sabihin", diff --git a/shared-helpers/src/locales/vi.json b/shared-helpers/src/locales/vi.json index 1bd65c6291..9c6d15652b 100644 --- a/shared-helpers/src/locales/vi.json +++ b/shared-helpers/src/locales/vi.json @@ -39,7 +39,7 @@ "application.alternateContact.contact.description": "Chúng tôi sẽ chỉ sử dụng thông tin này để liên lạc với họ về đơn ghi danh của quý vị.", "application.alternateContact.contact.emailAddressFormLabel": "Địa chỉ email của người liên lạc", "application.alternateContact.contact.phoneNumberFormLabel": "Số điện thoại của người liên lạc", - "application.alternateContact.contact.title": "Hãy cho chúng tôi biết cách để liên lạc với người liên lạc thay thế của quý vị", + "application.alternateContact.contact.title": "Hãy cho chúng tôi biết cách để liên lạc với người liên lạc thay thế của quý vị.", "application.alternateContact.name.alternateContactFormLabel": "Tên người liên lạc thay thế", "application.alternateContact.name.caseManagerAgencyFormLabel": "Quản lý hồ sơ hoặc cố vấn nhà ở của quý vị công tác tại đâu?", "application.alternateContact.name.caseManagerAgencyFormPlaceHolder": "Cơ quan", @@ -78,8 +78,11 @@ "application.contact.couldntLocateAddress": "Chúng tôi không thể tìm thấy địa chỉ quý vị đã nhập. Vui lòng xác nhận địa chỉ chính xác.", "application.contact.doYouWorkInDescription": "Chưa xác định", "application.contact.doYouWorkIn": "Quý vị có làm việc tại không?", + "application.contact.familyName": "Tên gia đình", + "application.contact.givenName": "Tên", "application.contact.mailingAddress": "Địa chỉ Nhận thư", "application.contact.noPhoneNumber": "Tôi không có số điện thoạii", + "application.contact.number.subNote": "10 chữ số, ví dụ 999-999-9999", "application.contact.phoneNumberTypes.cell": "Di động", "application.contact.phoneNumberTypes.home": "Nhà riêng", "application.contact.phoneNumberTypes.prompt": "Kiểu số điện thoại này là gì?", @@ -90,14 +93,15 @@ "application.contact.state": "Tiểu bang", "application.contact.streetAddress": "Địa chỉ Đường phố", "application.contact.suggestedAddress": "Địa chỉ đề xuất:", - "application.contact.title": "Cảm ơn %{firstName}. Bây giờ chúng tôi cần biết cách để liên lạc với quý vị.", + "application.contact.title": "Cảm ơn, %{firstName}. Bây giờ chúng tôi cần biết cách liên hệ với bạn về đơn đăng ký của bạn.", "application.contact.verifyAddressTitle": "Chúng tôi đã xác định được địa chỉ sau. Vui lòng xác nhận địa chỉ chính xác.", "application.contact.workAddress": "Địa chỉ Sở Làm", "application.contact.youEntered": "Quý vị đã nhập:", "application.contact.yourAdditionalPhoneNumber": "Số điện thoại thứ hai của quý vị", + "application.contact.yourAddress": "Địa chỉ của bạn", "application.contact.yourPhoneNumber": "Số Điện thoại của Quý vị", "application.contact.zipCode": "Số zipcode", - "application.contact.zip": "Mã Zip", + "application.contact.zip": "Mã Bưu Chính", "application.details.adaPriorities": "Ưu tiên ADA đã chọn", "application.edited": "Đã chỉnh sửa", "application.financial.income.instruction1": "Tính tổng thu nhập hộ gia đình (trước thuế) từ tiền lương, tiền trợ cấp và các nguồn khác từ tất cả các thành viên trong hộ gia đình.", @@ -150,7 +154,7 @@ "application.household.householdStudent.question": "Có ai đó trong hộ gia đình quý vị là sinh viên chính quy hoặc sắp đủ 18 tuổi trong vòng 60 ngày không?", "application.household.householdStudent.title": "Hộ Gia Đình Có Sinh Viên hoặc Thành Viên Sắp 18 Tuổi", "application.household.liveAlone.liveWithOtherPeople": "Những người khác sẽ sống cùng tôi", - "application.household.liveAlone.title": "Tiếp theo, chúng tôi muốn biết về những người khác sẽ sống trong căn nhà cùng quý vị", + "application.household.liveAlone.title": "Tiếp theo, chúng tôi muốn biết về những người khác sẽ sống trong căn nhà cùng quý vị.", "application.household.liveAlone.willLiveAlone": "Tôi sẽ sống một mình", "application.household.member.cancelAddingThisPerson": "Hủy bỏ việc thêm người này", "application.household.member.dateOfBirth": "Ngày sinh", @@ -158,8 +162,8 @@ "application.household.member.haveSameAddress": "Họ có cùng địa chỉ với quý vị không?", "application.household.member.name": "Tên của thành viên hộ gia đình", "application.household.member.saveHouseholdMember": "Lưu thành viên hộ gia đình", - "application.household.member.subTitle": "Quý vị sẽ có cơ hội thêm nhiều thành viên hộ gia đình hơn trong màn hình tiếp theo", - "application.household.member.title": "Hãy cho chúng tôi biết về người này", + "application.household.member.subTitle": "Quý vị sẽ có cơ hội thêm nhiều thành viên hộ gia đình hơn trong màn hình tiếp theo.", + "application.household.member.title": "Hãy cho chúng tôi biết về người này.", "application.household.member.updateHouseholdMember": "Cập nhật Thành viên Hộ Gia đình", "application.household.member.whatIsTheirRelationship": "Quan hệ của người đó với quý vị là gì?", "application.household.member.whatReletionship": "Quan hệ của người đó với quý vị là gì", @@ -174,11 +178,12 @@ "application.household.preferredUnit.options.studio": "Một phòng kiểu studio", "application.household.preferredUnit.options.threeBdrm": "3 Phòng ngủ", "application.household.preferredUnit.options.twoBdrm": "2 Phòng ngủ", - "application.household.preferredUnit.optionsLabel": "Đánh dấu tất cả các lựa chọn phù hợp:", + "application.household.preferredUnit.optionsLabel": "Đánh dấu tất cả các lựa chọn phù hợp", "application.household.preferredUnit.preferredUnitType": "Loại Căn nhà Ưa thích", - "application.household.preferredUnit.subTitle": "Mặc dù các kích thước nhà ở thường dựa vào mức độ sử dụng nhưng vui lòng cho biết kích thước nhà ở mà quý vị yêu thích để xác định ưu tiên của quý vị trong cơ hội này hoặc lập danh sách chờ (chỉ dành cho cơ hội này)", + "application.household.preferredUnit.subTitle": "Mặc dù các kích thước nhà ở thường dựa vào mức độ sử dụng nhưng vui lòng cho biết kích thước nhà ở mà quý vị yêu thích để xác định ưu tiên của quý vị trong cơ hội này hoặc lập danh sách chờ (chỉ dành cho cơ hội này).", "application.household.preferredUnit.title": "Kích thước căn nhà mà quý vị quan tâm là gì?", "application.household.primaryApplicant": "Người nộp đơn Chính", + "application.name.dobHelper": "Ví dụ: 01 19 2000", "application.name.emailPrivacy": "Chúng tôi sẽ chỉ sử dụng địa chỉ email của quý vị để liên lạc với quý vị về việc ghi danh của quý vị.", "application.name.firstName": "Tên", "application.name.lastName": "Họ", @@ -406,7 +411,9 @@ "errors.dateOfBirthError": "Vui lòng nhập Ngày sinh hợp lệ", "errors.emailAddressError": "Vui lòng nhập địa chỉ email", "errors.errorsToResolve": "Quý vị cần giải quyết những lỗi này trước khi chuyển sang bước tiếp.", + "errors.familyNameError": "Vui lòng nhập Họ Tên", "errors.firstNameError": "Vui lòng nhập Tên", + "errors.givenNameError": "Vui lòng nhập Tên riêng", "errors.householdTooBig": "Quy mô hộ gia đình của quý vị quá lớn.", "errors.householdTooSmall": "Quy mô hộ gia đình của quý vị quá nhỏ.", "errors.lastNameError": "Vui lòng nhập Họ", @@ -721,7 +728,7 @@ "t.petsPolicy": "Chính sách đối với Vật nuôi", "t.phoneNumberPlaceholder": "(555) 555-5555", "t.phone": "Điện thoại", - "t.pleaseSelectOne": "Vui lòng chọn một.", + "t.pleaseSelectOne": "Vui lòng chọn một", "t.pleaseSelectYesNo": "Vui lòng chọn có hoặc không.", "t.pm": "Chiều", "t.preferNotToSay": "Không muốn nói", diff --git a/shared-helpers/src/locales/zh.json b/shared-helpers/src/locales/zh.json index e4d1129d8c..2aef4b20e3 100644 --- a/shared-helpers/src/locales/zh.json +++ b/shared-helpers/src/locales/zh.json @@ -39,7 +39,7 @@ "application.alternateContact.contact.description": "我們只會為您的申請事宜使用此資料聯絡他們。", "application.alternateContact.contact.emailAddressFormLabel": "聯絡人電郵地址", "application.alternateContact.contact.phoneNumberFormLabel": "聯絡人電話號碼", - "application.alternateContact.contact.title": "請告知我們如何接觸您的其他聯絡人", + "application.alternateContact.contact.title": "請告知我們如何接觸您的其他聯絡人。", "application.alternateContact.name.alternateContactFormLabel": "其他聯絡人姓名", "application.alternateContact.name.caseManagerAgencyFormLabel": "您的個案經理或房屋顧問在哪裡工作？", "application.alternateContact.name.caseManagerAgencyFormPlaceHolder": "機構", @@ -78,8 +78,11 @@ "application.contact.couldntLocateAddress": "我們找不到您輸入的地址。 請確認這是正確地址。", "application.contact.doYouWorkInDescription": "待定", "application.contact.doYouWorkIn": "您是否在 工作？", + "application.contact.familyName": "姓", + "application.contact.givenName": "給定的名稱", "application.contact.mailingAddress": "郵寄地址", "application.contact.noPhoneNumber": "我沒有電話號碼", + "application.contact.number.subNote": "10 位數字，例如 999-999-9999", "application.contact.phoneNumberTypes.cell": "手機", "application.contact.phoneNumberTypes.home": "住家", "application.contact.phoneNumberTypes.prompt": "這是哪類電話號碼？", @@ -90,11 +93,12 @@ "application.contact.state": "州", "application.contact.streetAddress": "街道地址", "application.contact.suggestedAddress": "建議的地址：", - "application.contact.title": "%{firstName}，謝謝您。現在我們需要知道如何聯絡您。", + "application.contact.title": "謝謝，%{firstName}。現在我們需要知道如何就您的申請與您聯繫。", "application.contact.verifyAddressTitle": "我們已找到下列地址。請確認這是正確地址。", "application.contact.workAddress": "工作地址", "application.contact.youEntered": "您已輸入：", "application.contact.yourAdditionalPhoneNumber": "您的第二電話號碼", + "application.contact.yourAddress": "你的地址", "application.contact.yourPhoneNumber": "您的電話號碼", "application.contact.zipCode": "郵遞區號", "application.contact.zip": "郵遞區號", @@ -144,13 +148,13 @@ "application.household.dontQualifyInfo": "如果您認為自己可能填寫錯誤，請更改資料。請注意，如果您偽造任何申請資料，您將會被取消資格。如果您填寫的資料正確無誤，我們建議您日後再回來查看，因為會有更多可供申請的物業。", "application.household.expectingChanges.question": "在未來12個月中，您預期您的住家會發生什麼變化嗎，例如家庭人數？", "application.household.expectingChanges.title": "預計家庭變化", - "application.household.genericSubtitle": "如果您的申請被選中，請準備提供必要文件。 ", + "application.household.genericSubtitle": "如果您的申請被選中，請準備提供必要文件。", "application.household.householdMember": "家庭成員（一人）", "application.household.householdMembers": "家庭成員（多人）", "application.household.householdStudent.question": "您的家人是否有全日制學生或在 60 天內年滿 18 歲？", "application.household.householdStudent.title": "家人包括接近 18 歲的學生或成員", "application.household.liveAlone.liveWithOtherPeople": "其他將會與我同住的人", - "application.household.liveAlone.title": "接着，我們想知道將會與您同住一個單位的其他人", + "application.household.liveAlone.title": "接着，我們想知道將會與您同住一個單位的其他人。", "application.household.liveAlone.willLiveAlone": "我將會獨居", "application.household.member.cancelAddingThisPerson": "取消加入此人", "application.household.member.dateOfBirth": "出生日期", @@ -158,8 +162,8 @@ "application.household.member.haveSameAddress": "他們的地址是否和您一樣？", "application.household.member.name": "家庭成員姓名", "application.household.member.saveHouseholdMember": "儲存家庭成員資料", - "application.household.member.subTitle": "在下一個頁面，您將有機會加入更多家庭成員", - "application.household.member.title": "請提供此人的資料", + "application.household.member.subTitle": "在下一個頁面，您將有機會加入更多家庭成員。", + "application.household.member.title": "請提供此人的資料。", "application.household.member.updateHouseholdMember": "更新家庭成員資料", "application.household.member.whatIsTheirRelationship": "他們與您是什麼關係？", "application.household.member.whatReletionship": "他們與您是什麼關係？", @@ -174,11 +178,12 @@ "application.household.preferredUnit.options.studio": "套房", "application.household.preferredUnit.options.threeBdrm": "3 臥室", "application.household.preferredUnit.options.twoBdrm": "2 間臥室", - "application.household.preferredUnit.optionsLabel": "請勾選所有適用的單位：", + "application.household.preferredUnit.optionsLabel": "請勾選所有適用的單位", "application.household.preferredUnit.preferredUnitType": "首選單位類型", - "application.household.preferredUnit.subTitle": "雖然單位尺寸通常根據入住率分配，但請提供您的首選單位尺寸，以確定您在此機會的偏好或建立候補名單（僅針對此機會）", + "application.household.preferredUnit.subTitle": "雖然單位尺寸通常根據入住率分配，但請提供您的首選單位尺寸，以確定您在此機會的偏好或建立候補名單（僅針對此機會）。", "application.household.preferredUnit.title": "您對哪類單位面積感興趣？", "application.household.primaryApplicant": "主要申請人", + "application.name.dobHelper": "例如：2000 年 1 月 19 日", "application.name.emailPrivacy": "我們只會為申請事宜使用您的電郵地址與您聯絡。", "application.name.firstName": "名字", "application.name.lastName": "姓氏", @@ -406,7 +411,9 @@ "errors.dateOfBirthError": "請輸入有效的出生日期", "errors.emailAddressError": "請輸入電郵地址", "errors.errorsToResolve": "出現一些錯誤；您需要解決問題才能繼續操作。", + "errors.familyNameError": "請輸入姓氏", "errors.firstNameError": "請輸入名字", + "errors.givenNameError": "請輸入名字", "errors.householdTooBig": "您的家庭人數過多。", "errors.householdTooSmall": "您的家庭人數過少。", "errors.lastNameError": "請輸入姓氏", @@ -726,7 +733,7 @@ "t.petsPolicy": "寵物政策", "t.phoneNumberPlaceholder": "(555) 555-5555", "t.phone": "電話號碼", - "t.pleaseSelectOne": "請選取一項。", + "t.pleaseSelectOne": "請選取一項", "t.pleaseSelectYesNo": "請選擇是或否。", "t.pm": "下午", "t.preferNotToSay": "保密", diff --git a/shared-helpers/src/views/multiselectQuestions.tsx b/shared-helpers/src/views/multiselectQuestions.tsx index f8ec02737b..03e8a1005e 100644 --- a/shared-helpers/src/views/multiselectQuestions.tsx +++ b/shared-helpers/src/views/multiselectQuestions.tsx @@ -125,11 +125,11 @@ export const getRadioFields = ( {applicationSection === ApplicationSection.preferences && ( {question?.text} )} -

{question?.description}

onExport()} leadIcon={ - !zipExportLoading ? : null + !zipExportLoading ? ( + + ) : null } size="sm" loadingMessage={zipExportLoading && t("t.formSubmitted")} diff --git a/sites/partners/src/pages/users/index.tsx b/sites/partners/src/pages/users/index.tsx index 3ed8787d30..ec7a065428 100644 --- a/sites/partners/src/pages/users/index.tsx +++ b/sites/partners/src/pages/users/index.tsx @@ -11,6 +11,7 @@ import { AlertTypes, AlertBox, Icon, + UniversalIconType, } from "@bloom-housing/ui-components" import { Button } from "@bloom-housing/ui-seeds" import { User } from "@bloom-housing/backend-core/types" @@ -184,7 +185,11 @@ const Users = () => { - - - {conductor.canJumpForwardToReview() && ( -
- -
+ /> )} - - - + + + ) } diff --git a/sites/public/src/components/applications/ValidateAddress.tsx b/sites/public/src/components/applications/ValidateAddress.tsx index ac1ca8e454..60adbc816c 100644 --- a/sites/public/src/components/applications/ValidateAddress.tsx +++ b/sites/public/src/components/applications/ValidateAddress.tsx @@ -73,7 +73,7 @@ export const AddressValidationSelection = (props: AddressValidationSelectionProp setVerifyAddressStep, } = props return ( -
+ <> {foundAddress.newAddress && (
{t("application.contact.suggestedAddress")} @@ -135,8 +135,8 @@ export const AddressValidationSelection = (props: AddressValidationSelectionProp
+ + ) + } + + if (!props.progressNavProps.mounted) return + + return ( + <> + + + + {props.listingName} + + + +
+ +
+
+ +
+ + + + + {props.backLink && getBackLink(props.backLink.url, props.backLink.onClickFxn)} + + {props.heading} + + {props.subheading &&

{props.subheading}

} + + {props.children} + {props.conductor && ( + + + + {props.conductor.canJumpForwardToReview() && ( +
+ +
+ )} + + )} + + + ) +} + +export default ApplicationFormLayout diff --git a/sites/public/src/layouts/forms.tsx b/sites/public/src/layouts/forms.tsx index ee8a2902c7..d8967a01a5 100644 --- a/sites/public/src/layouts/forms.tsx +++ b/sites/public/src/layouts/forms.tsx @@ -1,3 +1,4 @@ +import React from "react" import Layout from "./application" import { ApplicationTimeout } from "../components/applications/ApplicationTimeout" @@ -10,7 +11,7 @@ const FormLayout = (props: FormLayoutProps) => {
-
+
{props.children}
diff --git a/sites/public/src/pages/applications/contact/address.tsx b/sites/public/src/pages/applications/contact/address.tsx index 0ed120bf97..cde2a5f1e1 100644 --- a/sites/public/src/pages/applications/contact/address.tsx +++ b/sites/public/src/pages/applications/contact/address.tsx @@ -1,26 +1,16 @@ -/* -1.3 - Contact -Primary applicant contact information -https://github.com/bloom-housing/bloom/issues/256 -*/ -import { Button, FormErrorMessage } from "@bloom-housing/ui-seeds" +import React, { useContext, useEffect, useState, useMemo } from "react" +import { useForm } from "react-hook-form" +import { Alert, FormErrorMessage } from "@bloom-housing/ui-seeds" import { - AlertBox, Field, + FieldGroup, Form, - FormCard, mergeDeep, - FieldGroup, - ProgressNav, + PhoneField, + Select, t, - Heading, } from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" -import { useContext, useEffect, useState, useMemo, useCallback } from "react" -import { useForm } from "react-hook-form" -import { Select } from "@bloom-housing/ui-components/src/forms/Select" -import { PhoneField } from "@bloom-housing/ui-components/src/forms/PhoneField" -import { disableContactFormOption } from "../../../lib/helpers" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" import { contactPreferencesKeys, phoneNumberKeys, @@ -31,7 +21,8 @@ import { pushGtmEvent, AuthContext, } from "@bloom-housing/shared-helpers" -import FormBackLink from "../../../components/applications/FormBackLink" +import FormsLayout from "../../../layouts/forms" +import { disableContactFormOption } from "../../../lib/helpers" import { useFormConductor } from "../../../lib/hooks" import { FoundAddress, @@ -39,6 +30,8 @@ import { AddressValidationSelection, } from "../../../components/applications/ValidateAddress" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationAddress = () => { const { profile } = useContext(AuthContext) @@ -49,7 +42,6 @@ const ApplicationAddress = () => { const { conductor, application, listing } = useFormConductor("primaryApplicantAddress") const currentPageSection = 1 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { control, register, handleSubmit, setValue, watch, errors } = useForm>( { @@ -133,160 +125,165 @@ const ApplicationAddress = () => { const backUrl = useMemo(() => { return verifyAddress ? window.location.pathname : conductor.determinePreviousUrl() - }, [verifyAddress]) - - const backFunction = useCallback(() => { - return verifyAddress ? setVerifyAddress(false) : conductor.setNavigatedBack(true) - }, [verifyAddress]) + }, [verifyAddress, conductor]) return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - -
-

- {verifyAddress +
+ -

+ : t("application.contact.title", { firstName: application.applicant.firstName }) + } + progressNavProps={{ + currentPageSection: currentPageSection, + completedSections: application.completedSections, + labels: conductor.config.sections.map((label) => t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: backUrl, + onClickFxn: verifyAddress + ? () => { + setVerifyAddress(false) + } + : undefined, + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} +
+ +
+ + {t("application.contact.yourPhoneNumber")} + + + - - { - if (e.target.checked) { - setValue("applicant.phoneNumberType", "") - setValue("additionalPhone", "") - setValue("additionalPhoneNumber", "") - setValue("additionalPhoneNumberType", "") - } - }, - }} - dataTestId={"app-primary-no-phone"} - /> - - { - if (e.target.checked) { - setValue("additionalPhoneNumber", "") - setValue("additionalPhoneNumberType", "") - } - }, - }} - dataTestId={"app-primary-additional-phone"} - /> - - {additionalPhone && ( - <> - - + + )} +
+ +
- {t("application.contact.address")} + {t("application.contact.yourAddress")}

@@ -297,7 +294,6 @@ const ApplicationAddress = () => { id="addressStreet" name="applicant.address.street" label={t("application.contact.streetAddress")} - placeholder={t("application.contact.streetAddress")} defaultValue={application.applicant.address.street} validation={{ required: true, maxLength: 64 }} errorMessage={ @@ -314,7 +310,6 @@ const ApplicationAddress = () => { id="addressStreet2" name="applicant.address.street2" label={t("application.contact.apt")} - placeholder={t("application.contact.apt")} defaultValue={application.applicant.address.street2} register={register} dataTestId={"app-primary-address-street2"} @@ -327,8 +322,7 @@ const ApplicationAddress = () => { { id="addressZipCode" name="applicant.address.zipCode" label={t("application.contact.zip")} - placeholder={t("application.contact.zipCode")} defaultValue={application.applicant.address.zipCode} validation={{ required: true, maxLength: 64 }} errorMessage={ @@ -388,10 +381,10 @@ const ApplicationAddress = () => { dataTestId={"app-primary-send-to-mailing"} />

-
+ {clientLoaded && (sendMailToMailingAddress || application.sendMailToMailingAddress) && ( -
+
{t("application.contact.mailingAddress")} @@ -404,7 +397,7 @@ const ApplicationAddress = () => { { id="mailingAddressStreet2" name="mailingAddress.street2" label={t("application.contact.apt")} - placeholder={t("application.contact.apt")} defaultValue={application.mailingAddress.street2} register={register} dataTestId={"app-primary-mailing-address-street2"} @@ -434,8 +426,7 @@ const ApplicationAddress = () => { { id="mailingAddressZipCode" name="mailingAddress.zipCode" label={t("application.contact.zip")} - placeholder={t("application.contact.zipCode")} defaultValue={application.mailingAddress.zipCode} validation={{ required: true, maxLength: 64 }} error={errors.mailingAddress?.zipCode} @@ -485,9 +475,10 @@ const ApplicationAddress = () => { dataTestId={"app-primary-mailing-address-zip"} />
-
+ )} -
+ +
{ dataTestId={"app-primary-contact-preference"} />
-
+ -
+
{ { register={register} dataTestId={"app-primary-work-address-street"} label={t("application.contact.streetAddress")} - readerOnly={true} /> { { id="workAddressZipCode" name="applicant.workAddress.zipCode" label={t("application.contact.zip")} - placeholder={t("application.contact.zipCode")} defaultValue={application.applicant.workAddress.zipCode} validation={{ required: true, maxLength: 64 }} error={errors.applicant?.workAddress?.zipCode} @@ -652,7 +638,7 @@ const ApplicationAddress = () => {
)} - + {verifyAddress && ( @@ -660,40 +646,8 @@ const ApplicationAddress = () => { {...{ foundAddress, newAddressSelected, setNewAddressSelected, setVerifyAddress }} /> )} - -
-
- -
- - {conductor.canJumpForwardToReview() && ( -
- -
- )} -
- - + + ) } diff --git a/sites/public/src/pages/applications/contact/alternate-contact-contact.tsx b/sites/public/src/pages/applications/contact/alternate-contact-contact.tsx index 28e6410772..d68724550e 100644 --- a/sites/public/src/pages/applications/contact/alternate-contact-contact.tsx +++ b/sites/public/src/pages/applications/contact/alternate-contact-contact.tsx @@ -1,22 +1,8 @@ -/* -1.4 - Alternate Contact -Type of alternate contact -*/ -import { Button } from "@bloom-housing/ui-seeds" -import { - AlertBox, - Form, - Field, - FormCard, - t, - ProgressNav, - emailRegex, - Heading, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" +import React, { useContext, useEffect } from "react" import { useForm } from "react-hook-form" -import { Select } from "@bloom-housing/ui-components/src/forms/Select" -import { PhoneField } from "@bloom-housing/ui-components/src/forms/PhoneField" +import { emailRegex, Field, Form, PhoneField, Select, t } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { Alert } from "@bloom-housing/ui-seeds" import { OnClientSide, PageView, @@ -24,17 +10,17 @@ import { stateKeys, AuthContext, } from "@bloom-housing/shared-helpers" -import FormBackLink from "../../../components/applications/FormBackLink" import { useFormConductor } from "../../../lib/hooks" -import { useContext, useEffect } from "react" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import FormsLayout from "../../../layouts/forms" +import styles from "../../../layouts/application-form.module.scss" export default () => { const { profile } = useContext(AuthContext) const { conductor, application, listing } = useFormConductor("alternateContactInfo") const currentPageSection = 1 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { control, register, handleSubmit, errors } = useForm>({ shouldFocusError: false, @@ -65,38 +51,34 @@ export default () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.alternateContact.contact.title")} -

-

{t("application.alternateContact.contact.description")}

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - -
+ t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} > -
+ {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} + + @@ -112,9 +94,10 @@ export default () => { control={control} defaultValue={application.alternateContact.phoneNumber} dataTestId={"app-alternate-phone-number"} + subNote={t("application.contact.number.subNote")} /> -
-
+ +

{t("application.alternateContact.contact.emailAddressFormLabel")}

@@ -123,7 +106,6 @@ export default () => { name="emailAddress" label={t("application.alternateContact.contact.emailAddressFormLabel")} readerOnly={true} - placeholder={t("t.emailAddressPlaceholder")} defaultValue={application.alternateContact.emailAddress || null} register={register} type="email" @@ -131,9 +113,10 @@ export default () => { error={errors.emailAddress} errorMessage={t("errors.emailAddressError")} dataTestId={"app-alternate-email"} + subNote={"example@mail.com"} /> -
-
+ +
{t("application.alternateContact.contact.contactMailingAddressLabel")} @@ -145,7 +128,6 @@ export default () => { id="mailingAddress.street" name="mailingAddress.street" label={t("application.contact.streetAddress")} - placeholder={t("application.contact.streetAddress")} defaultValue={application.alternateContact.mailingAddress.street} register={register} dataTestId={"app-alternate-mailing-address-street"} @@ -158,7 +140,6 @@ export default () => { name="mailingAddress.street2" label={t("application.contact.apt")} register={register} - placeholder={t("application.contact.apt")} dataTestId={"app-alternate-mailing-address-street2"} defaultValue={application.alternateContact.mailingAddress.street2} error={errors.mailingAddress?.street2} @@ -169,8 +150,7 @@ export default () => { { id="mailingAddress.zipCode" name="mailingAddress.zipCode" label={t("application.contact.zip")} - placeholder={t("application.contact.zipCode")} defaultValue={application.alternateContact.mailingAddress.zipCode} register={register} dataTestId={"app-alternate-mailing-address-zip"} @@ -207,40 +186,9 @@ export default () => { errorMessage={t("errors.maxLength")} />
-
-
-
- -
- - {conductor.canJumpForwardToReview() && ( -
- -
- )} -
- -
+ + + ) } diff --git a/sites/public/src/pages/applications/contact/alternate-contact-name.tsx b/sites/public/src/pages/applications/contact/alternate-contact-name.tsx index 847c91dd0f..5695f6cb0c 100644 --- a/sites/public/src/pages/applications/contact/alternate-contact-name.tsx +++ b/sites/public/src/pages/applications/contact/alternate-contact-name.tsx @@ -1,31 +1,20 @@ -/* -1.4 - Alternate Contact -Type of alternate contact -*/ -import { Button } from "@bloom-housing/ui-seeds" -import { - AlertBox, - Form, - Field, - FormCard, - ProgressNav, - t, - Heading, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" +import React, { useContext, useEffect } from "react" import { useForm } from "react-hook-form" -import FormBackLink from "../../../components/applications/FormBackLink" -import { useFormConductor } from "../../../lib/hooks" +import { Form, Field, t } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { Alert } from "@bloom-housing/ui-seeds" import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" -import { useContext, useEffect } from "react" +import FormsLayout from "../../../layouts/forms" +import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" export default () => { const { profile } = useContext(AuthContext) const { conductor, application, listing } = useFormConductor("alternateContactName") const currentPageSection = 1 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, errors } = useForm>({ shouldFocusError: false, @@ -51,34 +40,32 @@ export default () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.alternateContact.name.title")} -

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - -
-
+ + t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} +
{t("application.alternateContact.name.alternateContactFormLabel")} @@ -86,15 +73,13 @@ export default () => { { {application.alternateContact.type === "caseManager" && (
+

+ {t("application.alternateContact.name.caseManagerAgencyFormLabel")} +

{
)}
-
-
-
- -
- - {conductor.canJumpForwardToReview() && ( -
- -
- )} -
-
- + + + ) } diff --git a/sites/public/src/pages/applications/contact/alternate-contact-type.tsx b/sites/public/src/pages/applications/contact/alternate-contact-type.tsx index 7adf4f4a98..c4e252859c 100644 --- a/sites/public/src/pages/applications/contact/alternate-contact-type.tsx +++ b/sites/public/src/pages/applications/contact/alternate-contact-type.tsx @@ -1,37 +1,26 @@ -/* -1.4 - Alternate Contact -Type of alternate contact -*/ import React, { Fragment, useContext, useEffect } from "react" -import { Button, FormErrorMessage } from "@bloom-housing/ui-seeds" -import { - AlertBox, - Field, - Form, - FormCard, - ProgressNav, - t, - Heading, -} from "@bloom-housing/ui-components" +import { useForm } from "react-hook-form" +import { Alert, FormErrorMessage } from "@bloom-housing/ui-seeds" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { Field, Form, t } from "@bloom-housing/ui-components" import { altContactRelationshipKeys, + AuthContext, OnClientSide, PageView, pushGtmEvent, - AuthContext, } from "@bloom-housing/shared-helpers" import FormsLayout from "../../../layouts/forms" -import { useForm } from "react-hook-form" -import FormBackLink from "../../../components/applications/FormBackLink" import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationAlternateContactType = () => { const { profile } = useContext(AuthContext) const { conductor, application, listing } = useFormConductor("alternateContactType") const currentPageSection = 1 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, errors, watch } = useForm>({ shouldFocusError: false, @@ -60,35 +49,33 @@ const ApplicationAlternateContactType = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.alternateContact.type.title")} -

-

{t("application.alternateContact.type.description")}

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - -
-
+ + t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} +
{t("application.alternateContact.type.label")} @@ -120,10 +107,6 @@ const ApplicationAlternateContactType = () => { id="otherType" name="otherType" label={t("application.alternateContact.type.otherTypeFormPlaceholder")} - placeholder={t( - "application.alternateContact.type.otherTypeFormPlaceholder" - )} - readerOnly={true} defaultValue={application.alternateContact.otherType} validation={{ required: true, maxLength: 64 }} error={errors.otherType} @@ -149,21 +132,9 @@ const ApplicationAlternateContactType = () => { ) })}
-
-
-
- -
-
-
- + + + ) } diff --git a/sites/public/src/pages/applications/contact/name.tsx b/sites/public/src/pages/applications/contact/name.tsx index c476e120d9..fd09d7ae69 100644 --- a/sites/public/src/pages/applications/contact/name.tsx +++ b/sites/public/src/pages/applications/contact/name.tsx @@ -1,28 +1,22 @@ -/* -1.2 - Name -Primary applicant details. Name, DOB and Email Address -https://github.com/bloom-housing/bloom/issues/255 -*/ import React, { useContext, useEffect, useState } from "react" -import { Button } from "@bloom-housing/ui-seeds" +import { useForm } from "react-hook-form" import { - AlertBox, DOBField, Field, Form, - FormCard, Icon, IconFillColors, t, - ProgressNav, emailRegex, - Heading, } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { Alert } from "@bloom-housing/ui-seeds" import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" import FormsLayout from "../../../layouts/forms" -import { useForm } from "react-hook-form" import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationName = () => { const { profile } = useContext(AuthContext) @@ -31,7 +25,6 @@ const ApplicationName = () => { const currentPageSection = 1 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, watch, errors } = useForm>({ shouldFocusError: false, @@ -73,88 +66,88 @@ const ApplicationName = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - -
-

{t("application.name.title")}

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - -
-
-
- - {t("application.name.yourName")} - - - - - - - - -
-
- -
+ + t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: autofilled ? `/applications/start/autofill` : `/applications/start/what-to-expect`, + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} + +
+
+ + {t("application.name.yourName")} + + + + + + + + +
+
+ + { } /> -
- -
+

{t("application.name.dobHelper")}

+ + @@ -192,7 +185,6 @@ const ApplicationName = () => { { register={register} disabled={clientLoaded && (noEmail || autofilled)} dataTestId={"app-primary-email"} + subNote={"example@mail.com"} /> { }} dataTestId={"app-primary-no-email"} /> -
- -
-
- -
- - {conductor.canJumpForwardToReview() && ( -
- -
- )} -
-
- + + + ) } diff --git a/sites/public/src/pages/applications/financial/income.tsx b/sites/public/src/pages/applications/financial/income.tsx index 0ed26fa068..17dcffdac3 100644 --- a/sites/public/src/pages/applications/financial/income.tsx +++ b/sites/public/src/pages/applications/financial/income.tsx @@ -1,26 +1,10 @@ -/* -3.2 Income -Total pre-tax household income from all sources -*/ import React, { useContext, useEffect, useState } from "react" import Link from "next/link" -import { ApplicationSection, Listing } from "@bloom-housing/backend-core/types" -import { Button } from "@bloom-housing/ui-seeds" -import { - AlertBox, - AlertNotice, - Field, - FieldGroup, - Form, - FormCard, - ProgressNav, - t, - Heading, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" import { useForm } from "react-hook-form" -import FormBackLink from "../../../components/applications/FormBackLink" -import { useFormConductor } from "../../../lib/hooks" +import { ApplicationSection, Listing } from "@bloom-housing/backend-core/types" +import { AlertBox, AlertNotice, Field, FieldGroup, Form, t } from "@bloom-housing/ui-components" +import { Alert } from "@bloom-housing/ui-seeds" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" import { OnClientSide, PageView, @@ -28,7 +12,11 @@ import { AuthContext, listingSectionQuestions, } from "@bloom-housing/shared-helpers" +import FormsLayout from "../../../layouts/forms" +import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" type IncomeError = "low" | "high" | null type IncomePeriod = "perMonth" | "perYear" @@ -66,7 +54,6 @@ const ApplicationIncome = () => { ? 4 : 3 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, errors, getValues, setValue } = useForm({ defaultValues: { @@ -120,68 +107,68 @@ const ApplicationIncome = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.financial.income.title")} -

- -

{t("application.financial.income.instruction1")}

- -

{t("application.financial.income.instruction2")}

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - - {incomeError && ( - <> - setIncomeError(null)}> - {t("application.household.dontQualifyHeader")} - - + +

{t("application.financial.income.instruction1")}

+

{t("application.financial.income.instruction2")}

+ + } + progressNavProps={{ + currentPageSection: currentPageSection, + completedSections: application.completedSections, + labels: conductor.config.sections.map((label) => t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + -

- {t(`application.financial.income.validationError.instruction1`)} -

-

- {t(`application.financial.income.validationError.instruction2`)} -

-

- {t("pageTitle.getAssistance")} -

- - - )} - -
-
+ {t("errors.errorsToResolve")} + + )} + + {incomeError && ( + + setIncomeError(null)}> + {t("application.household.dontQualifyHeader")} + + +

+ {t(`application.financial.income.validationError.instruction1`)} +

+

+ {t(`application.financial.income.validationError.instruction2`)} +

+

+ {t("pageTitle.getAssistance")} +

+ + + )} + + { getValues={getValues} prepend={"$"} dataTestId={"app-income"} + subNote={t("application.financial.income.placeholder")} />
@@ -207,40 +195,9 @@ const ApplicationIncome = () => { fieldClassName="ml-0" />
-
- -
-
- -
- - {conductor.canJumpForwardToReview() && ( -
- -
- )} -
-
- + + + ) } diff --git a/sites/public/src/pages/applications/financial/vouchers.tsx b/sites/public/src/pages/applications/financial/vouchers.tsx index 221d3b83c4..a5a917e239 100644 --- a/sites/public/src/pages/applications/financial/vouchers.tsx +++ b/sites/public/src/pages/applications/financial/vouchers.tsx @@ -1,21 +1,9 @@ -/* -3.1 Vouchers Subsidies -Question asks if anyone on the application receives a housing voucher or subsidy. -*/ -import { Button } from "@bloom-housing/ui-seeds" -import { - AlertBox, - Form, - FormCard, - t, - ProgressNav, - FieldGroup, - Heading, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" +import React, { useContext, useEffect } from "react" import { useForm } from "react-hook-form" -import FormBackLink from "../../../components/applications/FormBackLink" -import { useFormConductor } from "../../../lib/hooks" +import { ApplicationSection } from "@bloom-housing/backend-core" +import { Form, t, FieldGroup } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { Alert } from "@bloom-housing/ui-seeds" import { OnClientSide, PageView, @@ -23,9 +11,11 @@ import { AuthContext, listingSectionQuestions, } from "@bloom-housing/shared-helpers" -import { useContext, useEffect } from "react" +import FormsLayout from "../../../layouts/forms" +import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" -import { ApplicationSection } from "@bloom-housing/backend-core" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationVouchers = () => { const { profile } = useContext(AuthContext) @@ -33,7 +23,7 @@ const ApplicationVouchers = () => { const currentPageSection = listingSectionQuestions(listing, ApplicationSection.programs)?.length ? 4 : 3 - /* Form Handler */ + // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, errors, getValues } = useForm({ defaultValues: { incomeVouchers: application.incomeVouchers?.toString() }, @@ -74,49 +64,49 @@ const ApplicationVouchers = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.financial.vouchers.title")} -

- -

- {t("application.financial.vouchers.housingVouchers.strong")} - {` ${t("application.financial.vouchers.housingVouchers.text")}`} -

- -

- {t("application.financial.vouchers.nonTaxableIncome.strong")} - {` ${t("application.financial.vouchers.nonTaxableIncome.text")}`} -

- -

- {t("application.financial.vouchers.rentalSubsidies.strong")} - {` ${t("application.financial.vouchers.rentalSubsidies.text")}`} -

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} +
+ +

+ {t("application.financial.vouchers.housingVouchers.strong")} + {` ${t("application.financial.vouchers.housingVouchers.text")}`} +

+

+ {t("application.financial.vouchers.nonTaxableIncome.strong")} + {` ${t("application.financial.vouchers.nonTaxableIncome.text")}`} +

+

+ {t("application.financial.vouchers.rentalSubsidies.strong")} + {` ${t("application.financial.vouchers.rentalSubsidies.text")}`} +

+ + } + progressNavProps={{ + currentPageSection: currentPageSection, + completedSections: application.completedSections, + labels: conductor.config.sections.map((label) => t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} - -
+
{t("application.financial.vouchers.legend")} { fieldClassName="ml-0" type="radio" name="incomeVouchers" + groupNote={t("t.pleaseSelectOne")} error={errors.incomeVouchers} errorMessage={t("errors.selectAnOption")} register={register} @@ -136,22 +127,9 @@ const ApplicationVouchers = () => { }} />
-
- -
-
- -
-
- -
+ + + ) } diff --git a/sites/public/src/pages/applications/household/ada.tsx b/sites/public/src/pages/applications/household/ada.tsx index 111bc217e6..b28eeec572 100644 --- a/sites/public/src/pages/applications/household/ada.tsx +++ b/sites/public/src/pages/applications/household/ada.tsx @@ -1,23 +1,7 @@ -/* -2.4.c ADA Household Members -If any, the applicant can select the type of ADA needed in the household. -https://github.com/bloom-housing/bloom/issues/266 -*/ -import { Button, FormErrorMessage } from "@bloom-housing/ui-seeds" -import { - AlertBox, - Form, - FormCard, - ProgressNav, - t, - FieldGroup, - FieldSingle, - Heading, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" +import React, { useContext, useEffect } from "react" import { useForm } from "react-hook-form" -import FormBackLink from "../../../components/applications/FormBackLink" -import { useFormConductor } from "../../../lib/hooks" +import { Alert, FormErrorMessage } from "@bloom-housing/ui-seeds" +import { Form, t, FieldGroup, FieldSingle } from "@bloom-housing/ui-components" import { OnClientSide, PageView, @@ -25,15 +9,18 @@ import { adaFeatureKeys, AuthContext, } from "@bloom-housing/shared-helpers" -import { useContext, useEffect } from "react" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import FormsLayout from "../../../layouts/forms" +import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationAda = () => { const { profile } = useContext(AuthContext) const { conductor, application, listing } = useFormConductor("adaHouseholdMembers") const currentPageSection = 2 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, setValue, errors, getValues, clearErrors } = useForm< Record @@ -116,93 +103,64 @@ const ApplicationAda = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

{t("application.ada.title")}

- -

{t("application.ada.subTitle")}

-
- - {Object.entries(errors).length === Object.keys(getValues()).length && - Object.keys(getValues()).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - -
-
- {t("application.details.adaPriorities")} - { - return !!Object.values(getValues()).filter((value) => value).length - }, - }} - error={ - Object.keys(errors).length === Object.keys(getValues()).length && - Object.keys(getValues()).length > 0 - } - /> -
- {!!Object.keys(errors).length && ( - - {t("errors.selectOption")} - - )} -
- -
-
-
- -
+ {t("errors.errorsToResolve")} + + )} - {conductor.canJumpForwardToReview() && ( -
- -
+ +
+ {t("application.details.adaPriorities")} + { + return !!Object.values(getValues()).filter((value) => value).length + }, + }} + error={ + Object.keys(errors).length === Object.keys(getValues()).length && + Object.keys(getValues()).length > 0 + } + /> +
+ {!!Object.keys(errors).length && ( + + {t("errors.selectOption")} + )} -
-
- + + + ) } diff --git a/sites/public/src/pages/applications/household/add-members.tsx b/sites/public/src/pages/applications/household/add-members.tsx index e51f9b9c58..72156c1559 100644 --- a/sites/public/src/pages/applications/household/add-members.tsx +++ b/sites/public/src/pages/applications/household/add-members.tsx @@ -1,19 +1,16 @@ -/* -2.2 - Add Members -Add household members -*/ -import { useContext, useEffect } from "react" +import React, { useContext, useEffect } from "react" +import { useForm } from "react-hook-form" import { useRouter } from "next/router" import { Button } from "@bloom-housing/ui-seeds" -import { FormCard, t, Form, ProgressNav, Heading } from "@bloom-housing/ui-components" +import { t, Form } from "@bloom-housing/ui-components" import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" -import { useForm } from "react-hook-form" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" import FormsLayout from "../../../layouts/forms" -import FormBackLink from "../../../components/applications/FormBackLink" import { HouseholdSizeField } from "../../../components/applications/HouseholdSizeField" import { HouseholdMemberForm } from "../../../components/applications/HouseholdMemberForm" import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" const ApplicationAddMembers = () => { const { profile } = useContext(AuthContext) @@ -22,7 +19,6 @@ const ApplicationAddMembers = () => { const currentPageSection = 2 const householdSize = application.householdMembers.length + 1 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { errors, handleSubmit, register, clearErrors } = useForm() const onSubmit = () => { @@ -32,6 +28,10 @@ const ApplicationAddMembers = () => { conductor.routeToNextOrReturnUrl() } + const onError = () => { + window.scrollTo(0, 0) + } + const onAddMember = () => { void router.push("/applications/household/member") } @@ -72,95 +72,70 @@ const ApplicationAddMembers = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.household.addMembers.title")} -

- {application.autofilled && ( -

{t("application.household.addMembers.doubleCheck")}

- )} -
- -
-
- -
-
- - {membersSection} -
-
-
-
+
+ t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + > + +
+ +
+
+ + {membersSection} +
+ + -
-
-
-
+ + -
- - {conductor.canJumpForwardToReview() && ( -
- -
- )} -
- + + + ) } diff --git a/sites/public/src/pages/applications/household/changes.tsx b/sites/public/src/pages/applications/household/changes.tsx index 9a244dcbc2..166cfab6aa 100644 --- a/sites/public/src/pages/applications/household/changes.tsx +++ b/sites/public/src/pages/applications/household/changes.tsx @@ -1,30 +1,20 @@ -/* -2.5 Expecting Household Changes -*/ -import { Button } from "@bloom-housing/ui-seeds" -import { - AlertBox, - FieldGroup, - Form, - FormCard, - Heading, - ProgressNav, - t, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" +import React, { useContext, useEffect } from "react" import { useForm } from "react-hook-form" -import FormBackLink from "../../../components/applications/FormBackLink" -import { useFormConductor } from "../../../lib/hooks" +import { FieldGroup, Form, t } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { Alert } from "@bloom-housing/ui-seeds" import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" -import { useContext, useEffect } from "react" +import FormsLayout from "../../../layouts/forms" +import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationHouseholdChanges = () => { const { profile } = useContext(AuthContext) const { conductor, application, listing } = useFormConductor("householdChanges") const currentPageSection = 2 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, errors, getValues } = useForm>({ defaultValues: { householdExpectingChanges: application.householdExpectingChanges?.toString() }, @@ -66,46 +56,41 @@ const ApplicationHouseholdChanges = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> +
+ t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} -
-

- {t("application.household.expectingChanges.question")} -

- -

{t("application.household.genericSubtitle")}

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - - -
+
{ }} />
-
- -
-
- -
-
- -
+ + + ) } diff --git a/sites/public/src/pages/applications/household/live-alone.tsx b/sites/public/src/pages/applications/household/live-alone.tsx index 442c306e5b..c07ca27869 100644 --- a/sites/public/src/pages/applications/household/live-alone.tsx +++ b/sites/public/src/pages/applications/household/live-alone.tsx @@ -1,17 +1,15 @@ -/* -2.1 - Live Alone -Asks whether the applicant will be adding any additional household members -*/ -import React, { useContext, useEffect, useState } from "react" +import React, { ChangeEvent, useContext, useEffect, useState } from "react" import { useForm } from "react-hook-form" -import { Button } from "@bloom-housing/ui-seeds" -import { Form, FormCard, Heading, ProgressNav, t } from "@bloom-housing/ui-components" +import { FieldGroup, Form, t } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { Alert } from "@bloom-housing/ui-seeds" import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" import FormsLayout from "../../../layouts/forms" -import FormBackLink from "../../../components/applications/FormBackLink" import { HouseholdSizeField } from "../../../components/applications/HouseholdSizeField" import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationLiveAlone = () => { const { profile } = useContext(AuthContext) @@ -19,7 +17,6 @@ const ApplicationLiveAlone = () => { const [validateHousehold, setValidateHousehold] = useState(true) const currentPageSection = 2 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { handleSubmit, register, errors, clearErrors } = useForm() const onSubmit = () => { @@ -35,30 +32,47 @@ const ApplicationLiveAlone = () => { }) }, [profile]) + const householdSizeValues = [ + { + id: "householdSizeLiveAlone", + value: "liveAlone", + label: t("application.household.liveAlone.willLiveAlone"), + }, + { + id: "householdSizeLiveWithOthers", + value: "withOthers", + label: t("application.household.liveAlone.liveWithOtherPeople"), + }, + ] + return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.household.liveAlone.title")} -

-
- -
-
+ + t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} +
{ />
-
-
- -
-
- -
-
- - + } + }} + > + + {t("application.household.householdMembers")} + +

{t("t.pleaseSelectOne")}

+ + + + + ) } diff --git a/sites/public/src/pages/applications/household/member.tsx b/sites/public/src/pages/applications/household/member.tsx index 25fe57d00b..33927209cb 100644 --- a/sites/public/src/pages/applications/household/member.tsx +++ b/sites/public/src/pages/applications/household/member.tsx @@ -1,27 +1,17 @@ -/* -2.2 - Add Members -Add household members -*/ +import React, { useContext, useEffect } from "react" import { useRouter } from "next/router" -import { Button, FormErrorMessage } from "@bloom-housing/ui-seeds" +import { Alert, Button, FormErrorMessage } from "@bloom-housing/ui-seeds" import { - AlertBox, DOBField, Field, FieldGroup, Form, - FormCard, FormOptions, - ProgressNav, + Select, t, - Heading, } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" import { HouseholdMember, Member } from "@bloom-housing/backend-core/types" -import FormsLayout from "../../../layouts/forms" -import { useForm } from "react-hook-form" -import { AppSubmissionContext } from "../../../lib/applications/AppSubmissionContext" -import React, { useContext, useEffect } from "react" -import { Select } from "@bloom-housing/ui-components/src/forms/Select" import { OnClientSide, PageView, @@ -30,7 +20,12 @@ import { stateKeys, AuthContext, } from "@bloom-housing/shared-helpers" +import FormsLayout from "../../../layouts/forms" +import { useForm } from "react-hook-form" +import { AppSubmissionContext } from "../../../lib/applications/AppSubmissionContext" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationMember = () => { const { profile } = useContext(AuthContext) @@ -51,7 +46,6 @@ const ApplicationMember = () => { cancelText = t("application.household.member.cancelAddingThisPerson") } - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, errors, watch } = useForm({ shouldFocusError: false, @@ -123,382 +117,360 @@ const ApplicationMember = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - -
-

- {t("application.household.member.title")} -

-

{t("application.household.member.subTitle")}

-
+
+ t(`t.${label}`)), + mounted: OnClientSide(), + }} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} - {member && ( - <> - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} + +
+ + {t("application.household.member.name")} + + + + + + + +
+ + + + + + + +
+ + {t("application.household.member.haveSameAddress")} + + +
+ + {(sameAddress == "no" || (!sameAddress && member.sameAddress == "no")) && ( +
+ {t("application.contact.address")} + + - -
-
- - {t("application.household.member.name")} - + +
- - - -
-
+
-
- -
- -
-
- - {t("application.household.member.haveSameAddress")} - - -
- - {(sameAddress == "no" || (!sameAddress && member.sameAddress == "no")) && ( -
- - {t("application.contact.address")} - - - +
+ )} + - + +
+ + {t("application.household.member.workInRegion", { + county: listing?.countyCode, + })} + + +
-
- + {(workInRegion == "yes" || (!workInRegion && member.workInRegion == "yes")) && ( +
+ {t("application.contact.address")} - -
+ - - -
- {errors.relationship && ( - - {t("errors.selectOption")} - - )} - + +
+ +
+
+ {errors.relationship && ( + + {t("errors.selectOption")} + + )} +
+ -
-
- -
-
- -
-
- - - )} - + + + + + + + + ) } diff --git a/sites/public/src/pages/applications/household/members-info.tsx b/sites/public/src/pages/applications/household/members-info.tsx index 6a2b4226a0..516466603d 100644 --- a/sites/public/src/pages/applications/household/members-info.tsx +++ b/sites/public/src/pages/applications/household/members-info.tsx @@ -1,17 +1,14 @@ -/* -2.1a - Member Info -A notice regarding adding household members -*/ +import React, { useContext, useEffect } from "react" +import { useForm } from "react-hook-form" import { useRouter } from "next/router" -import { Button } from "@bloom-housing/ui-seeds" -import { AlertBox, Form, FormCard, ProgressNav, t, Heading } from "@bloom-housing/ui-components" +import { Form, t } from "@bloom-housing/ui-components" +import { Alert } from "@bloom-housing/ui-seeds" +import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" import FormsLayout from "../../../layouts/forms" -import { useForm } from "react-hook-form" -import FormBackLink from "../../../components/applications/FormBackLink" import { useFormConductor } from "../../../lib/hooks" -import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" -import { useContext, useEffect } from "react" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationMembersInfo = () => { const { profile } = useContext(AuthContext) @@ -19,13 +16,13 @@ const ApplicationMembersInfo = () => { const router = useRouter() const currentPageSection = 2 - /* Form Handler */ const { handleSubmit, errors } = useForm({ shouldFocusError: false, }) const onSubmit = () => { void router.push("/applications/household/add-members") } + const onError = () => { window.scrollTo(0, 0) } @@ -40,49 +37,34 @@ const ApplicationMembersInfo = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.household.membersInfo.title")} -

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - -
-
-
- -
-
-
- +
+ t(`t.${label}`)), + mounted: OnClientSide(), + }} + conductor={conductor} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + hideBorder={true} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} + +
) } diff --git a/sites/public/src/pages/applications/household/preferred-units.tsx b/sites/public/src/pages/applications/household/preferred-units.tsx index 473aa77ead..ccd2abab89 100644 --- a/sites/public/src/pages/applications/household/preferred-units.tsx +++ b/sites/public/src/pages/applications/household/preferred-units.tsx @@ -1,19 +1,8 @@ -/* -2.3.2 - Preferred Unit Size -Applicant can designate which unit sizes they prefer -*/ -import { Button } from "@bloom-housing/ui-seeds" -import { - AlertBox, - FieldGroup, - Form, - FormCard, - Heading, - ProgressNav, - t, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" +import React, { useContext, useEffect } from "react" import { useForm } from "react-hook-form" +import { FieldGroup, Form, t } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { Alert } from "@bloom-housing/ui-seeds" import { createUnitTypeId, getUniqueUnitTypes, @@ -22,17 +11,17 @@ import { pushGtmEvent, AuthContext, } from "@bloom-housing/shared-helpers" -import FormBackLink from "../../../components/applications/FormBackLink" import { useFormConductor } from "../../../lib/hooks" -import { useContext, useEffect } from "react" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import FormsLayout from "../../../layouts/forms" +import styles from "../../../layouts/application-form.module.scss" const ApplicationPreferredUnits = () => { const { profile } = useContext(AuthContext) const { conductor, application, listing } = useFormConductor("preferredUnitSize") const currentPageSection = 2 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, errors } = useForm() @@ -72,35 +61,34 @@ const ApplicationPreferredUnits = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> +
+ t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} -
-

- {t("application.household.preferredUnit.title")} -

-

{t("application.household.preferredUnit.subTitle")}

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - - -
+
{t("application.household.preferredUnit.legend")} { dataTestId={"app-preferred-units"} />
-
- -
-
- -
-
- -
+ + + ) } diff --git a/sites/public/src/pages/applications/household/student.tsx b/sites/public/src/pages/applications/household/student.tsx index 1e2cc45fac..a005686b15 100644 --- a/sites/public/src/pages/applications/household/student.tsx +++ b/sites/public/src/pages/applications/household/student.tsx @@ -1,30 +1,20 @@ -/* -2.5 Household Student -*/ -import { Button } from "@bloom-housing/ui-seeds" -import { - AlertBox, - FieldGroup, - Form, - FormCard, - Heading, - ProgressNav, - t, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" +import React, { useContext, useEffect } from "react" import { useForm } from "react-hook-form" -import FormBackLink from "../../../components/applications/FormBackLink" -import { useFormConductor } from "../../../lib/hooks" +import { FieldGroup, Form, t } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { Alert } from "@bloom-housing/ui-seeds" import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" -import { useContext, useEffect } from "react" +import FormsLayout from "../../../layouts/forms" +import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationHouseholdStudent = () => { const { profile } = useContext(AuthContext) const { conductor, application, listing } = useFormConductor("householdStudent") const currentPageSection = 2 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, errors, getValues } = useForm>({ defaultValues: { householdStudent: application.householdStudent?.toString() }, @@ -66,44 +56,40 @@ const ApplicationHouseholdStudent = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.household.householdStudent.question")} -

- -

{t("application.household.genericSubtitle")}

-
- - {Object.entries(errors).length > 0 && ( - - {t("errors.errorsToResolve")} - - )} - -
-
+ + t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} + > + {Object.entries(errors).length > 0 && ( + + {t("errors.errorsToResolve")} + + )} +
{ }} />
-
- -
-
- -
-
-
- + + + ) } diff --git a/sites/public/src/pages/applications/preferences/all.tsx b/sites/public/src/pages/applications/preferences/all.tsx index 25eedec670..1caf7c812c 100644 --- a/sites/public/src/pages/applications/preferences/all.tsx +++ b/sites/public/src/pages/applications/preferences/all.tsx @@ -1,8 +1,8 @@ import React from "react" import { ApplicationSection } from "@bloom-housing/backend-core/types" import { t } from "@bloom-housing/ui-components" -import ApplicationMultiselectQuestionStep from "../../../components/applications/ApplicationMultiselectQuestionStep" import { listingSectionQuestions } from "@bloom-housing/shared-helpers" +import ApplicationMultiselectQuestionStep from "../../../components/applications/ApplicationMultiselectQuestionStep" import { useFormConductor } from "../../../lib/hooks" const ApplicationPreferencesAll = () => { diff --git a/sites/public/src/pages/applications/preferences/general.tsx b/sites/public/src/pages/applications/preferences/general.tsx index f60c2c2d15..9e8bf2d4e9 100644 --- a/sites/public/src/pages/applications/preferences/general.tsx +++ b/sites/public/src/pages/applications/preferences/general.tsx @@ -1,7 +1,3 @@ -/* -4.3 General Pool -If all preferences are opted out the applicant is shown a screen confirming their placement in the General Pool -*/ import React, { useContext, useEffect, useState } from "react" import { useForm } from "react-hook-form" import { Button } from "@bloom-housing/ui-seeds" @@ -17,7 +13,6 @@ import { import FormsLayout from "../../../layouts/forms" import FormBackLink from "../../../components/applications/FormBackLink" import { useFormConductor } from "../../../lib/hooks" - import { UserStatus } from "../../../lib/constants" const ApplicationPreferencesGeneral = () => { @@ -28,7 +23,6 @@ const ApplicationPreferencesGeneral = () => { ? 5 : 4 - /* Form Handler */ const { handleSubmit } = useForm() const onSubmit = () => { if (!conductor.canJumpForwardToReview()) setHideReviewButton(true) diff --git a/sites/public/src/pages/applications/review/confirmation.tsx b/sites/public/src/pages/applications/review/confirmation.tsx index 4f500e5123..60e1899314 100644 --- a/sites/public/src/pages/applications/review/confirmation.tsx +++ b/sites/public/src/pages/applications/review/confirmation.tsx @@ -1,13 +1,9 @@ -/* -5.4 Confirmation -Application confirmation with lottery number (confirmation number) -*/ import React, { useContext, useEffect, useMemo } from "react" import Link from "next/link" import { useRouter } from "next/router" import Markdown from "markdown-to-jsx" -import { Button } from "@bloom-housing/ui-seeds" -import { FormCard, t, ApplicationTimeline } from "@bloom-housing/ui-components" +import { t, ApplicationTimeline } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" import { ListingReviewOrder } from "@bloom-housing/backend-core/types" import { imageUrlFromListing, @@ -15,6 +11,7 @@ import { pushGtmEvent, AuthContext, } from "@bloom-housing/shared-helpers" +import { Button, Card, Heading } from "@bloom-housing/ui-seeds" import FormsLayout from "../../../layouts/forms" import { AppSubmissionContext } from "../../../lib/applications/AppSubmissionContext" import { UserStatus } from "../../../lib/constants" @@ -55,84 +52,88 @@ const ApplicationConfirmation = () => { return ( - -
-

+ + + {t("application.review.confirmation.title")} {listing?.name} -

-
+ + {imageUrl && {listing?.name}} -
-

+ +

{t("application.review.confirmation.lotteryNumber")}

{application.confirmationCode || application.id}

{t("application.review.confirmation.pleaseWriteNumber")}

-

+ -
- + +
+ - {content.text} -
- -
- - {t("application.review.confirmation.needToMakeUpdates", { - agentName: listing?.leasingAgentName || "", - agentPhone: listing?.leasingAgentPhone || "", - agentEmail: listing?.leasingAgentEmail || "", - agentOfficeHours: listing?.leasingAgentOfficeHours || "", - })} - -
+ {content.text} +
+ - {initialStateLoaded && !profile && ( -
+ +
- {t("application.review.confirmation.createAccount")} + {t("application.review.confirmation.needToMakeUpdates", { + agentName: listing?.leasingAgentName || "", + agentPhone: listing?.leasingAgentPhone || "", + agentEmail: listing?.leasingAgentEmail || "", + agentOfficeHours: listing?.leasingAgentOfficeHours || "", + })}
- )} + -
- {initialStateLoaded && !profile && ( -
- + {initialStateLoaded && !profile && ( + +
+ + {t("application.review.confirmation.createAccount")} +
- )} + + )} -
- - {t("application.review.confirmation.browseMore")} - -
+ {initialStateLoaded && !profile && ( + + + + )} -
- - {t("application.review.confirmation.print")} - -
-
- + + + {t("application.review.confirmation.browseMore")} + + + + + + {t("application.review.confirmation.print")} + + + ) } diff --git a/sites/public/src/pages/applications/review/demographics.tsx b/sites/public/src/pages/applications/review/demographics.tsx index 7baa4f3406..9f67494c9d 100644 --- a/sites/public/src/pages/applications/review/demographics.tsx +++ b/sites/public/src/pages/applications/review/demographics.tsx @@ -1,20 +1,9 @@ -/* -5.1 Demographics -Optional demographic questions -*/ import React, { useContext, useEffect } from "react" -import { Button } from "@bloom-housing/ui-seeds" -import { - FieldGroup, - Form, - FormCard, - Select, - ProgressNav, - t, - Heading, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" import { useForm } from "react-hook-form" + +import { FieldGroup, Form, Select, t } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { ApplicationSection } from "@bloom-housing/backend-core" import { ethnicityKeys, raceKeys, @@ -26,10 +15,10 @@ import { AuthContext, listingSectionQuestions, } from "@bloom-housing/shared-helpers" -import FormBackLink from "../../../components/applications/FormBackLink" +import FormsLayout from "../../../layouts/forms" import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" -import { ApplicationSection } from "@bloom-housing/backend-core" +import ApplicationFormLayout from "../../../layouts/application-form" const ApplicationDemographics = () => { const { profile } = useContext(AuthContext) @@ -39,7 +28,6 @@ const ApplicationDemographics = () => { if (listingSectionQuestions(listing, ApplicationSection.preferences)?.length) currentPageSection += 1 - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit } = useForm({ defaultValues: { @@ -80,29 +68,23 @@ const ApplicationDemographics = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - - conductor.setNavigatedBack(true)} - /> - -
-

- {t("application.review.demographics.title")} -

-

{t("application.review.demographics.subTitle")}

-
- -
-
+ + t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + conductor={conductor} + > +
{t("application.review.demographics.raceLabel")} @@ -123,6 +105,9 @@ const ApplicationDemographics = () => { additionalText: subKey.indexOf("other") >= 0, })), }))} + strings={{ + description: "", + }} type="checkbox" dataTestId={"app-demographics-race"} register={register} @@ -142,9 +127,9 @@ const ApplicationDemographics = () => { dataTestId={"app-demographics-ethnicity"} />
-
+ -
+
{t("application.review.demographics.howDidYouHearLabel")} @@ -157,17 +142,9 @@ const ApplicationDemographics = () => { dataTestId={"app-demographics-how-did-you-hear"} />
-
- -
-
- -
-
- - + + + ) } diff --git a/sites/public/src/pages/applications/review/summary.tsx b/sites/public/src/pages/applications/review/summary.tsx index 9f2d18fd2f..193adc4cf7 100644 --- a/sites/public/src/pages/applications/review/summary.tsx +++ b/sites/public/src/pages/applications/review/summary.tsx @@ -1,22 +1,9 @@ -/* -5.2 Summary -Display a summary of application fields with edit links per section -*/ import React, { useContext, useEffect, useState } from "react" -import { Button } from "@bloom-housing/ui-seeds" -import { - FormCard, - t, - Form, - ProgressNav, - Heading, - AlertBox, - setSiteAlertMessage, -} from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" import { useForm } from "react-hook-form" -import FormSummaryDetails from "../../../components/shared/FormSummaryDetails" -import { useFormConductor } from "../../../lib/hooks" +import { useRouter } from "next/router" +import { Alert, Button } from "@bloom-housing/ui-seeds" +import { Form, setSiteAlertMessage, t } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" import { OnClientSide, PageView, @@ -24,9 +11,13 @@ import { AuthContext, listingSectionQuestions, } from "@bloom-housing/shared-helpers" -import { UserStatus } from "../../../lib/constants" import { ApplicationReviewStatus, ApplicationSection } from "@bloom-housing/backend-core" -import { useRouter } from "next/router" +import FormsLayout from "../../../layouts/forms" +import FormSummaryDetails from "../../../components/shared/FormSummaryDetails" +import { useFormConductor } from "../../../lib/hooks" +import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const ApplicationSummary = () => { const router = useRouter() @@ -38,7 +29,6 @@ const ApplicationSummary = () => { if (listingSectionQuestions(listing, ApplicationSection.preferences)?.length) currentPageSection += 1 - /* Form Handler */ const { handleSubmit } = useForm() useEffect(() => { @@ -84,58 +74,61 @@ const ApplicationSummary = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - -
-

- {t("application.review.takeAMomentToReview")} -

-
- {validationError && ( - - {t("errors.alert.applicationSubmissionVerificationError")} - - )} +
+ t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + hideBorder={true} + > + {validationError && ( + + {t("errors.alert.applicationSubmissionVerificationError")} + + )} - + -
-

- {t("application.review.lastChanceToEdit")} -

-
+ +

{t("application.review.lastChanceToEdit")}

+ -
-
- - - -
-
-
+ + + + + ) } diff --git a/sites/public/src/pages/applications/review/terms.tsx b/sites/public/src/pages/applications/review/terms.tsx index d412fd0e99..66fd82fd63 100644 --- a/sites/public/src/pages/applications/review/terms.tsx +++ b/sites/public/src/pages/applications/review/terms.tsx @@ -1,26 +1,14 @@ -/* -5.3 Terms -View of application terms with checkbox -*/ import React, { useContext, useEffect, useMemo, useState } from "react" import { useRouter } from "next/router" -import { Button } from "@bloom-housing/ui-seeds" -import { - FormCard, - t, - FieldGroup, - Form, - AlertBox, - ProgressNav, - Heading, -} from "@bloom-housing/ui-components" +import { useForm } from "react-hook-form" +import Markdown from "markdown-to-jsx" +import { t, FieldGroup, Form, AlertBox } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" import { ApplicationSection, ApplicationReviewStatus, ListingReviewOrder, } from "@bloom-housing/backend-core" -import { useForm } from "react-hook-form" -import Markdown from "markdown-to-jsx" import { OnClientSide, PageView, @@ -32,6 +20,9 @@ import FormsLayout from "../../../layouts/forms" import { useFormConductor } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" import { untranslateMultiselectQuestion } from "../../../lib/helpers" +import ApplicationFormLayout from "../../../layouts/application-form" +import { Button } from "@bloom-housing/ui-seeds" + const ApplicationTerms = () => { const router = useRouter() const { conductor, application, listing } = useFormConductor("terms") @@ -45,7 +36,6 @@ const ApplicationTerms = () => { currentPageSection += 1 const applicationDueDate = new Date(listing?.applicationDueDate).toDateString() - /* Form Handler */ // eslint-disable-next-line @typescript-eslint/unbound-method const { register, handleSubmit, errors } = useForm() const onSubmit = (data) => { @@ -127,84 +117,86 @@ const ApplicationTerms = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - -
-

{t("application.review.terms.title")}

-
- - {apiError && ( - setApiError(false)}> - {t("errors.alert.badRequest")} - - )} +
+ t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: conductor.determinePreviousUrl(), + }} + > + {apiError && ( + setApiError(false)}> + {t("errors.alert.badRequest")} + + )} - -
- {listing?.applicationDueDate && ( - <> - - {t("application.review.terms.textSubmissionDate", { - applicationDueDate: applicationDueDate, - })} - -
-
- - )} + +
+ {listing?.applicationDueDate && ( + <> + + {t("application.review.terms.textSubmissionDate", { + applicationDueDate: applicationDueDate, + })} + +
+
+ + )} - ( -
  • - {children} -
    • - ), + ( +
  • + {children} +
    • + ), + }, }, - }, - }} - > - {content.text} -     - -
    - -
    -
    -
    -
    - + {content.text} + + +
    + +
    -
    - - +     + + + + + ) } diff --git a/sites/public/src/pages/applications/start/autofill.tsx b/sites/public/src/pages/applications/start/autofill.tsx index 201d0914ea..169b485405 100644 --- a/sites/public/src/pages/applications/start/autofill.tsx +++ b/sites/public/src/pages/applications/start/autofill.tsx @@ -1,7 +1,8 @@ -import { useContext, useState, useEffect, useCallback } from "react" +import React, { useContext, useState, useEffect, useCallback } from "react" +import { useRouter } from "next/router" +import { useForm } from "react-hook-form" import { Application } from "@bloom-housing/backend-core/types" -import { Button } from "@bloom-housing/ui-seeds" -import { Form, FormCard, Heading, ProgressNav, t } from "@bloom-housing/ui-components" +import { Form, t } from "@bloom-housing/ui-components" import { blankApplication, OnClientSide, @@ -9,13 +10,14 @@ import { pushGtmEvent, AuthContext, } from "@bloom-housing/shared-helpers" -import { useForm } from "react-hook-form" import FormsLayout from "../../../layouts/forms" import { useFormConductor } from "../../../lib/hooks" import FormSummaryDetails from "../../../components/shared/FormSummaryDetails" import AutofillCleaner from "../../../lib/applications/appAutofill" -import { useRouter } from "next/router" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import { Button } from "@bloom-housing/ui-seeds" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" export default () => { const router = useRouter() @@ -30,7 +32,6 @@ export default () => { const mounted = OnClientSide() - /* Form Handler */ const { handleSubmit } = useForm() const onSubmit = useCallback(() => { if (!submitted) { @@ -90,23 +91,21 @@ export default () => { return previousApplication ? ( - {listing?.name}}> - t(`t.${label}`))} - mounted={mounted} - /> - - -
    -

    - {t("application.autofill.saveTime")} -

    -
    -
    -

    {t("application.autofill.prefillYourApplication")}

    -
    + t(`t.${label}`)), + mounted: mounted, + }} + backLink={{ + url: `/applications/start/what-to-expect`, + }} + hideBorder={true} + > { hidePrograms={true} />
    -
    -
    - -
    -
    - -
    -
    + + + + + +
    -     +     ) : ( diff --git a/sites/public/src/pages/applications/start/choose-language.tsx b/sites/public/src/pages/applications/start/choose-language.tsx index 07750fdf3f..213c3c5b88 100644 --- a/sites/public/src/pages/applications/start/choose-language.tsx +++ b/sites/public/src/pages/applications/start/choose-language.tsx @@ -1,20 +1,7 @@ -/* - 0.1 - Choose Language - Applicants are given the option to start the Application in one of a number of languages via button group. Once inside the application the applicant can use the language selection at the top of the page. - https://github.com/bloom-housing/bloom/issues/277 - */ +import React, { useCallback, useContext, useEffect, useState } from "react" import axios from "axios" import { useRouter } from "next/router" -import { Button } from "@bloom-housing/ui-seeds" -import { - ImageCard, - ActionBlock, - FormCard, - ProgressNav, - t, - Heading, - setSiteAlertMessage, -} from "@bloom-housing/ui-components" +import { ImageCard, t, setSiteAlertMessage } from "@bloom-housing/ui-components" import { imageUrlFromListing, OnClientSide, @@ -22,16 +9,19 @@ import { pushGtmEvent, AuthContext, } from "@bloom-housing/shared-helpers" - +import { Language } from "@bloom-housing/backend-core/types" +import { Heading, Icon, Button, Message } from "@bloom-housing/ui-seeds" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { faClock } from "@fortawesome/free-regular-svg-icons" import FormsLayout from "../../../layouts/forms" import { AppSubmissionContext, retrieveApplicationConfig, } from "../../../lib/applications/AppSubmissionContext" -import React, { useCallback, useContext, useEffect, useState } from "react" -import { Language } from "@bloom-housing/backend-core/types" import { useGetApplicationStatusProps } from "../../../lib/hooks" import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import styles from "../../../layouts/application-form.module.scss" const loadListing = async (listingId, stateFunction, conductor, context, language) => { const response = await axios.get(`${process.env.backendApiBase}/listings/${listingId}`, { @@ -49,7 +39,7 @@ const ApplicationChooseLanguage = () => { const [listing, setListing] = useState(null) const context = useContext(AppSubmissionContext) const { initialStateLoaded, profile } = useContext(AuthContext) - const { conductor, application } = context + const { conductor } = context const listingId = router.query.listingId @@ -84,8 +74,6 @@ const ApplicationChooseLanguage = () => { } }, [listing, router]) - const currentPageSection = 1 - const imageUrl = listing?.assets ? imageUrlFromListing(listing, parseInt(process.env.listingPhotoSize))[0] : "" @@ -106,95 +94,85 @@ const ApplicationChooseLanguage = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - -
    -

    - {t("application.chooseLanguage.letsGetStarted")} -

    -
    - + t(`t.${label}`)), + mounted: OnClientSide(), + }} + hideBorder={true} + > {listing && ( -
    - -
    + + + } + fullwidth + > + {appStatusContent} + + )} -
    -
    - {listing?.applicationConfig.languages.length > 1 && ( - <> -
    - - {t("application.chooseLanguage.chooseYourLanguage")} - -
    - {listing.applicationConfig.languages.map((lang, index) => ( - - ))} - - )} -
    - - {initialStateLoaded && !profile && ( + {listing?.applicationConfig.languages.length > 1 && ( + <> - {t("account.haveAnAccount")}} - subheader={t("application.chooseLanguage.signInSaveTime")} - background="primary-lighter" - actions={[ - , - ]} - /> - {t("authentication.createAccount.noAccount")} - } - background="primary-lighter" - actions={[ - , - ]} - /> + + {t("application.chooseLanguage.chooseYourLanguage")} + + {listing.applicationConfig.languages.map((lang, index) => ( + + ))} - )} -
    -     + + )} + + {initialStateLoaded && !profile && ( + <> + + + {t("account.haveAnAccount")} + +

    {t("application.chooseLanguage.signInSaveTime")}

    + +     + + + {t("authentication.createAccount.noAccount")} + + + + + )} +     ) } diff --git a/sites/public/src/pages/applications/start/what-to-expect.tsx b/sites/public/src/pages/applications/start/what-to-expect.tsx index a061f7a39b..cfb237ad50 100644 --- a/sites/public/src/pages/applications/start/what-to-expect.tsx +++ b/sites/public/src/pages/applications/start/what-to-expect.tsx @@ -1,26 +1,22 @@ -/* -0.2 - What To Expect -A notice regarding application process and rules -*/ import React, { useEffect, useContext, useMemo } from "react" -import { Button } from "@bloom-housing/ui-seeds" -import { FormCard, t, ProgressNav, Form, Heading } from "@bloom-housing/ui-components" -import FormsLayout from "../../../layouts/forms" import { useRouter } from "next/router" import { useForm } from "react-hook-form" -import { useFormConductor } from "../../../lib/hooks" -import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" -import { UserStatus } from "../../../lib/constants" import Markdown from "markdown-to-jsx" +import { t, Form } from "@bloom-housing/ui-components" import { ListingReviewOrder } from "@bloom-housing/backend-core/types" +import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import FormsLayout from "../../../layouts/forms" +import { useFormConductor } from "../../../lib/hooks" +import { UserStatus } from "../../../lib/constants" +import ApplicationFormLayout from "../../../layouts/application-form" +import { Button } from "@bloom-housing/ui-seeds" const ApplicationWhatToExpect = () => { const { profile } = useContext(AuthContext) - const { conductor, application, listing } = useFormConductor("whatToExpect") + const { conductor, listing } = useFormConductor("whatToExpect") const router = useRouter() - const currentPageSection = 1 - /* Form Handler */ const { handleSubmit } = useForm() const onSubmit = () => { conductor.routeToNextOrReturnUrl() @@ -59,22 +55,21 @@ const ApplicationWhatToExpect = () => { return ( - {listing?.name}}> - t(`t.${label}`))} - mounted={OnClientSide()} - /> - - -
    -

    - {t("application.start.whatToExpect.title")} -

    -
    -
    -
    + t(`t.${label}`)), + mounted: OnClientSide(), + }} + backLink={{ + url: `/applications/start/choose-language?listingId=${listing?.id}`, + }} + > + +
    { {content.finePrint}
    -
    -
    -
    -
    - -
    -
    -
    - + + +
    + +
    +     + ) } diff --git a/sites/public/src/pages/applications/view.tsx b/sites/public/src/pages/applications/view.tsx index 5a4aa86380..1622ea7831 100644 --- a/sites/public/src/pages/applications/view.tsx +++ b/sites/public/src/pages/applications/view.tsx @@ -4,10 +4,10 @@ Optional application summary */ import Link from "next/link" import dayjs from "dayjs" -import { FormCard, Heading, t } from "@bloom-housing/ui-components" +import { t } from "@bloom-housing/ui-components" import FormsLayout from "../../layouts/forms" import { AppSubmissionContext } from "../../lib/applications/AppSubmissionContext" -import { useContext, useEffect, useMemo } from "react" +import React, { useContext, useEffect, useMemo } from "react" import FormSummaryDetails from "../../components/shared/FormSummaryDetails" import { DATE_FORMAT, UserStatus } from "../../lib/constants" import { @@ -17,6 +17,8 @@ import { listingSectionQuestions, } from "@bloom-housing/shared-helpers" import { ApplicationSection } from "@bloom-housing/backend-core" +import { Card, Heading } from "@bloom-housing/ui-seeds" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" const ApplicationView = () => { const { application, listing } = useContext(AppSubmissionContext) @@ -36,38 +38,42 @@ const ApplicationView = () => { return ( - {t("account.application.confirmation")}}> -
    - {listing && ( - - - {t("application.confirmation.viewOriginalListing")} - - - )} -
    -     - - -
    -

    + + + + {t("account.application.confirmation")} + + + +
    + {listing && ( + + + {t("application.confirmation.viewOriginalListing")} + + + )} +
    +     +     + + + {t("application.confirmation.informationSubmittedTitle")} -

    -

    + +

    {t("application.confirmation.submitted")} {confirmationDate}

    -
    -
    -

    + + + {t("application.confirmation.lotteryNumber")} -

    - +

    {application.confirmationCode || application.id}

    -
    - + { hidePrograms={listingSectionQuestions(listing, ApplicationSection.programs)?.length === 0} editMode={false} /> - -
    -
    + +
    -
    - + + ) } diff --git a/sites/public/src/pages/index.tsx b/sites/public/src/pages/index.tsx index fa2f931dfb..4351f1e184 100644 --- a/sites/public/src/pages/index.tsx +++ b/sites/public/src/pages/index.tsx @@ -1,7 +1,7 @@ import React, { useContext, useEffect, useState } from "react" import Head from "next/head" import { Jurisdiction } from "@bloom-housing/backend-core/types" -import { Button, Heading, Link } from "@bloom-housing/ui-seeds" +import { Button, Heading } from "@bloom-housing/ui-seeds" import { AlertBox, t, SiteAlert, ActionBlock, Icon } from "@bloom-housing/ui-components" import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" import { UserStatus } from "../lib/constants" diff --git a/sites/public/styles/overrides.scss b/sites/public/styles/overrides.scss index 53127b6c45..71842a4cc4 100644 --- a/sites/public/styles/overrides.scss +++ b/sites/public/styles/overrides.scss @@ -2,4 +2,10 @@ .seeds-button { -webkit-font-smoothing: antialiased; // restore macOS styling that had been unset } + + --text-caps-spaced-letter-spacing: var(--bloom-letter-spacing-tight); + --text-caps-spaced-font-weight: 700; + .text__caps-spaced { + text-transform: none; + } } diff --git a/yarn.lock b/yarn.lock index 2a3d46b8c1..6e6863a695 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2049,10 +2049,10 @@ resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@bloom-housing/ui-components@12.0.29": - version "12.0.29" - resolved "https://registry.yarnpkg.com/@bloom-housing/ui-components/-/ui-components-12.0.29.tgz#915d7a21580e4258c566a2e26362524f579ce766" - integrity sha512-brM+Ilh72FP08WNcN362B/3paLNYkmH2PIpgmW8ThfYPL9y+sV3ee/K1NX5D2MtfhA9KQ2Ug4St+/J24wX3yIw== +"@bloom-housing/ui-components@12.1.0": + version "12.1.0" + resolved "https://registry.yarnpkg.com/@bloom-housing/ui-components/-/ui-components-12.1.0.tgz#c6066ed097887820bf2195c748ac2862fb171eef" + integrity sha512-xFW4IlPw9v9OJCkEQiKdIiN4csJyHuuaz1GmZGD33+m2phU79f5he2zBw0/qZogqpmP8aYsuzzKHAigHKXNhdQ== dependencies: "@fortawesome/fontawesome-svg-core" "^6.1.1" "@fortawesome/free-regular-svg-icons" "^6.1.1" @@ -2085,10 +2085,10 @@ tailwindcss-rtl "^0.9.0" typesafe-actions "^5.1.0" -"@bloom-housing/ui-seeds@^1.12.0": - version "1.12.0" - resolved "https://registry.yarnpkg.com/@bloom-housing/ui-seeds/-/ui-seeds-1.12.0.tgz#d93d565241a855a8699aef8b2b097bbde1024061" - integrity sha512-XyCSRCkPyYAb19BYLDrI2JcMW1vMGs1GDrpKNJRsr4RcExbpyL7pIo/J97DsmQRBwfmn9NAjlLkEOYRnd1DrEw== +"@bloom-housing/ui-seeds@1.12.1": + version "1.12.1" + resolved "https://registry.yarnpkg.com/@bloom-housing/ui-seeds/-/ui-seeds-1.12.1.tgz#859f234f6383f0680442890868287f915f88902e" + integrity sha512-2ex9akp8DwpsWxNKBRTu+/XIUDz064JItFP5NpyJPcHuZbdz75PBIUTQHbGiCudie13MF2WSJmzmR5cclTT2VA== dependencies: "@fortawesome/fontawesome-svg-core" "^6.3.0" "@fortawesome/free-regular-svg-icons" "^6.3.0"