From c2830c077fcc655d39716f6715cefb2ee5239a71 Mon Sep 17 00:00:00 2001 From: Caleb Date: Tue, 12 Dec 2023 13:50:42 -0700 Subject: [PATCH 1/3] add French privacy link --- src/App.tsx | 4 ++-- src/Assets/pageTitleTags.ts | 2 +- src/Components/SignUp/SignUp.js | 3 +++ 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 144a51d8a..51be6b6ac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,7 +21,7 @@ import { Expense, HealthInsurance, HouseholdData, IncomeStream, SignUpInfo } fro import { BrandedFooter, BrandedHeader } from './Components/Referrer/Referrer.tsx'; import { useErrorController } from './Assets/validationFunctions.tsx'; import dataLayerPush from './Assets/analytics.ts'; -import pageTitleTags from './Assets/pageTitleTags.ts'; +import pageTitleTags, { StepName } from './Assets/pageTitleTags.ts'; import './App.css'; LicenseInfo.setLicenseKey(process.env.REACT_APP_MUI_LICENSE_KEY + '='); @@ -67,7 +67,7 @@ const App = () => { }, [location.pathname]); useEffect(() => { - const stepString = location.pathname.split('/').filter((string) => string.includes('step'))[0]; + const stepString = location.pathname.split('/').filter((string) => string.includes('step'))[0] as StepName; const isConfirmationPage = location.pathname.includes('confirm-information'); const isResultsPage = location.pathname.includes('results'); diff --git a/src/Assets/pageTitleTags.ts b/src/Assets/pageTitleTags.ts index ed6365abf..ab4abc95b 100644 --- a/src/Assets/pageTitleTags.ts +++ b/src/Assets/pageTitleTags.ts @@ -1,4 +1,4 @@ -type StepName = +export type StepName = | 'step-1' | 'step-2' | 'step-3' diff --git a/src/Components/SignUp/SignUp.js b/src/Components/SignUp/SignUp.js index 3f9529a4f..c8753a621 100644 --- a/src/Components/SignUp/SignUp.js +++ b/src/Components/SignUp/SignUp.js @@ -28,7 +28,10 @@ const SignUp = ({ handleTextfieldChange, handleCheckboxChange, submitted }) => { privacyLink = 'https://20208592.hs-sites.com/es/data-privacy-policy'; } else if (locale === 'vi') { privacyLink = 'https://www.myfriendben.org/vi/data-privacy-policy'; + } else if (locale === 'fr') { + privacyLink = 'https://www.myfriendben.org/fr/data-privacy-policy'; } + const signUpErrorController = useErrorController(signUpFormHasError, displaySignUpFormHelperText); const firstNameErrorController = useErrorController(nameHasError, displayFirstNameHelperText); const lastNameErrorController = useErrorController(nameHasError, displayLastNameHelperText); From 5ce1afc04a622fced286a0c93421a87a9cdfe46d Mon Sep 17 00:00:00 2001 From: Caleb Date: Tue, 12 Dec 2023 16:29:26 -0700 Subject: [PATCH 2/3] add error message if there is a server error --- src/App.tsx | 9 +++-- src/Assets/updateScreen.ts | 8 ++--- src/Assets/validationFunctions.tsx | 56 ++++++++++-------------------- src/Components/SignUp/SignUp.js | 19 ++++------ src/Types/ErrorController.ts | 2 +- src/Types/FormData.ts | 1 + 6 files changed, 38 insertions(+), 57 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 51be6b6ac..1c2e24ae1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -221,8 +221,13 @@ const App = () => { if (isZipcodeQuestionAndCountyIsEmpty || isReferralQuestionWithOtherAndOtherSourceIsEmpty || isEmptyAssets) { return; } else if (questionName === 'signUpInfo') { - updateUser(uuid, formData, setFormData, locale); - navigate(`/${uuid}/confirm-information`); + updateUser(uuid, formData, setFormData, locale) + .then(() => { + navigate(`/${uuid}/confirm-information`); + }) + .catch(() => { + setFormData({ ...formData, signUpInfo: { ...formData.signUpInfo, serverError: true } }); + }); } else if (questionName === 'householdSize') { const updatedHouseholdData = formData.householdData.slice(0, Number(formData.householdSize)); const updatedFormData = { ...formData, householdData: updatedHouseholdData }; diff --git a/src/Assets/updateScreen.ts b/src/Assets/updateScreen.ts index 6b3a7ec85..de825af9f 100644 --- a/src/Assets/updateScreen.ts +++ b/src/Assets/updateScreen.ts @@ -155,11 +155,9 @@ const updateUser = async ( if (!formData.signUpInfo.hasUser && userBody.email_or_cell === '+1') { return; } - try { - await putUser(userBody, uuid); - } catch (err) { - return; - } + + await putUser(userBody, uuid); + setFormData({ ...formData, signUpInfo: { ...formData.signUpInfo, hasUser: true }, diff --git a/src/Assets/validationFunctions.tsx b/src/Assets/validationFunctions.tsx index ebcb35083..9671581de 100644 --- a/src/Assets/validationFunctions.tsx +++ b/src/Assets/validationFunctions.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { FormattedMessage } from 'react-intl'; import countiesByZipcode from './countiesByZipcode'; -import type { ErrorController, ValidationFunction, MessageFunction, VerifiableInput } from '../Types/ErrorController'; +import type { ErrorController, ValidationFunction, MessageFunction } from '../Types/ErrorController'; import type { Expense, HealthInsurance, HouseholdData, IncomeStream, SignUpInfo, Benefits } from '../Types/FormData'; import ErrorMessageWrapper from '../Components/ErrorMessage/ErrorMessageWrapper'; @@ -372,8 +372,8 @@ const displayPhoneHasErrorHelperText: MessageFunction = (phoneNumber) => } }; -const signUpFormHasError: ValidationFunction = (props) => { - const { email, phone, firstName, lastName, sendUpdates, sendOffers, commConsent, hasUser } = props; +const signUpFormHasError: ValidationFunction = (props) => { + const { email, phone, firstName, lastName, sendUpdates, sendOffers, commConsent, hasUser, serverError } = props; const atLeastOneCheckboxSelectionWasMade = sendUpdates === true || sendOffers === true; if (hasUser === true) { return false; @@ -386,7 +386,8 @@ const signUpFormHasError: ValidationFunction = (props) => { !firstName || !lastName || atLeastOneCheckboxSelectionWasMade === false || - commConsent === false + commConsent === false || + serverError === true ); }; @@ -403,39 +404,19 @@ const displayNoEmailOrPhoneHelperText = (email: string, phone: string) => { } }; -const displaySignUpFormHelperText: MessageFunction = (props) => { - const { email, phone, firstName, lastName, sendUpdates, sendOffers, commConsent } = props; - const atLeastOneCheckboxSelectionWasMade = sendUpdates === true || sendOffers === true; +const signUpServerHasError: ValidationFunction = (serverError) => { + return serverError === true; +}; - if (nameHasError(firstName)) { - return displayFirstNameHelperText(firstName); - } else if (nameHasError(lastName)) { - return displayLastNameHelperText(lastName); - } else if (emailHasError(email)) { - return displayEmailHelperText(email); - } else if (phoneHasError(phone)) { - return displayPhoneHasErrorHelperText(phone); - } else if (!email && !phone) { - return displayNoEmailOrPhoneHelperText(email, phone); - } else if (atLeastOneCheckboxSelectionWasMade === false) { - return ( - - - - ); - } else if (commConsent === false) { - return ( - - - - ); - } +const signUpServerErrorHelperText: MessageFunction = (props) => { + return ( + + + + ); }; const signUpOptionsHaveError: ValidationFunction = (signUpInfo) => { @@ -597,7 +578,8 @@ export { phoneHasError, displayPhoneHasErrorHelperText, signUpFormHasError, - displaySignUpFormHelperText, + signUpServerHasError, + signUpServerErrorHelperText, signUpOptionsHaveError, healthInsuranceHasError, displayHealthInsuranceHelperText, diff --git a/src/Components/SignUp/SignUp.js b/src/Components/SignUp/SignUp.js index c8753a621..5746140bc 100644 --- a/src/Components/SignUp/SignUp.js +++ b/src/Components/SignUp/SignUp.js @@ -12,9 +12,9 @@ import { displayEmailHelperText, phoneHasError, displayPhoneHasErrorHelperText, - signUpFormHasError, - displaySignUpFormHelperText, useErrorController, + signUpServerHasError, + signUpServerErrorHelperText, } from '../../Assets/validationFunctions.tsx'; const SignUp = ({ handleTextfieldChange, handleCheckboxChange, submitted }) => { @@ -32,7 +32,6 @@ const SignUp = ({ handleTextfieldChange, handleCheckboxChange, submitted }) => { privacyLink = 'https://www.myfriendben.org/fr/data-privacy-policy'; } - const signUpErrorController = useErrorController(signUpFormHasError, displaySignUpFormHelperText); const firstNameErrorController = useErrorController(nameHasError, displayFirstNameHelperText); const lastNameErrorController = useErrorController(nameHasError, displayLastNameHelperText); const emailErrorController = useErrorController((email) => { @@ -41,24 +40,19 @@ const SignUp = ({ handleTextfieldChange, handleCheckboxChange, submitted }) => { const phoneErrorController = useErrorController((phone) => { phoneHasError(phone) && phone !== ''; }, displayPhoneHasErrorHelperText); + const serverErrorController = useErrorController(signUpServerHasError, signUpServerErrorHelperText); useEffect(() => { - signUpErrorController.setSubmittedCount(submitted); firstNameErrorController.setSubmittedCount(submitted); lastNameErrorController.setSubmittedCount(submitted); emailErrorController.setSubmittedCount(submitted); phoneErrorController.setSubmittedCount(submitted); + serverErrorController.setSubmittedCount(submitted); }, [submitted]); useEffect(() => { - signUpErrorController.updateError(formData.signUpInfo); - }, [ - firstNameErrorController.hasError, - lastNameErrorController.hasError, - emailErrorController.hasError, - phoneErrorController.hasError, - formData.signUpInfo.commConsent, - ]); + serverErrorController.updateError(formData.signUpInfo.serverError); + }, [formData.signUpInfo.serverError]); const createFirstNameTextfield = () => { const firstNameProps = { @@ -191,6 +185,7 @@ const SignUp = ({ handleTextfieldChange, handleCheckboxChange, submitted }) => { {displayDisclosureSection()} + {serverErrorController.showError && serverErrorController.message(formData.signUpInfo.serverError)} ); diff --git a/src/Types/ErrorController.ts b/src/Types/ErrorController.ts index 1fcac47f7..5254e79ad 100644 --- a/src/Types/ErrorController.ts +++ b/src/Types/ErrorController.ts @@ -6,7 +6,7 @@ export type VerifiableInput = Partial< | boolean | null | Expense[] - | SignUpInfo + | (SignUpInfo & { serverError: boolean }) | HealthInsurance | { index: number; healthInsurance: HealthInsurance } >; diff --git a/src/Types/FormData.ts b/src/Types/FormData.ts index 054a0f702..5dec0edeb 100644 --- a/src/Types/FormData.ts +++ b/src/Types/FormData.ts @@ -73,6 +73,7 @@ export interface SignUpInfo { sendOffers: boolean; sendUpdates: boolean; commConsent: boolean; + serverError?: boolean; } export interface AcuteHHConditions { From ac64d9786d324a1f6d13f56a2e71df82e733f302 Mon Sep 17 00:00:00 2001 From: Caleb Date: Tue, 19 Dec 2023 11:13:58 -0700 Subject: [PATCH 3/3] update helper text --- src/Assets/validationFunctions.tsx | 2 +- src/Components/ErrorMessage/ErrorMessageWrapper.css | 1 - src/Components/ErrorMessage/ErrorMessageWrapper.tsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Assets/validationFunctions.tsx b/src/Assets/validationFunctions.tsx index 9671581de..c072a1760 100644 --- a/src/Assets/validationFunctions.tsx +++ b/src/Assets/validationFunctions.tsx @@ -413,7 +413,7 @@ const signUpServerErrorHelperText: MessageFunction = (props) => { ); diff --git a/src/Components/ErrorMessage/ErrorMessageWrapper.css b/src/Components/ErrorMessage/ErrorMessageWrapper.css index 18b2bff7b..517171706 100644 --- a/src/Components/ErrorMessage/ErrorMessageWrapper.css +++ b/src/Components/ErrorMessage/ErrorMessageWrapper.css @@ -1,6 +1,5 @@ .error-helper-text { display: flex; - align-items: center; color: #c6252b; margin-bottom: 0.5rem; } diff --git a/src/Components/ErrorMessage/ErrorMessageWrapper.tsx b/src/Components/ErrorMessage/ErrorMessageWrapper.tsx index 5c790ffcc..35af02239 100644 --- a/src/Components/ErrorMessage/ErrorMessageWrapper.tsx +++ b/src/Components/ErrorMessage/ErrorMessageWrapper.tsx @@ -9,7 +9,7 @@ type Props = { export default function ErrorMessageWrapper({ children, fontSize }: Props) { return ( - + {children} );