Merge pull request #808 from Gary-Community-Ventures/feat/email_error

Email Error

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');
 
@@ -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 };

src/Assets/pageTitleTags.ts

@@ -1,4 +1,4 @@
-type StepName =
+export type StepName =
   | 'step-1'
   | 'step-2'
   | 'step-3'

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 },

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<string> = (phoneNumber) =>
   }
 };
 
-const signUpFormHasError: ValidationFunction<SignUpInfo> = (props) => {
-  const { email, phone, firstName, lastName, sendUpdates, sendOffers, commConsent, hasUser } = props;
+const signUpFormHasError: ValidationFunction<SignUpInfo & { serverError?: boolean }> = (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<SignUpInfo> = (props) => {
     !firstName ||
     !lastName ||
     atLeastOneCheckboxSelectionWasMade === false ||
-    commConsent === false
+    commConsent === false ||
+    serverError === true
   );
 };
 
@@ -403,39 +404,19 @@ const displayNoEmailOrPhoneHelperText = (email: string, phone: string) => {
   }
 };
 
-const displaySignUpFormHelperText: MessageFunction<SignUpInfo> = (props) => {
-  const { email, phone, firstName, lastName, sendUpdates, sendOffers, commConsent } = props;
-  const atLeastOneCheckboxSelectionWasMade = sendUpdates === true || sendOffers === true;
+const signUpServerHasError: ValidationFunction<boolean | undefined> = (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 (
-      <ErrorMessageWrapper fontSize="1rem">
-        <FormattedMessage
-          id="validation-helperText.notificationSelection"
-          defaultMessage="Please select a notification option"
-        />
-      </ErrorMessageWrapper>
-    );
-  } else if (commConsent === false) {
-    return (
-      <ErrorMessageWrapper fontSize="1rem">
-        <FormattedMessage
-          id="validation-helperText.consentCheckbox"
-          defaultMessage="Please check the box above to sign up for the selected notifications"
-        />
-      </ErrorMessageWrapper>
-    );
-  }
+const signUpServerErrorHelperText: MessageFunction<SignUpInfo> = (props) => {
+  return (
+    <ErrorMessageWrapper fontSize="1.5rem">
+      <FormattedMessage
+        id="validation-helperText.serverError"
+        defaultMessage="Please enter a valid email address. This error could also be caused by entering an email address that is already in our system. If the error persists, remember that this question is optional and will not impact your MyFriendBen results. You can skip this question by deselecting the boxes at the top of the page and pressing continue."
+      />
+    </ErrorMessageWrapper>
+  );
 };
 
 const signUpOptionsHaveError: ValidationFunction<SignUpInfo> = (signUpInfo) => {
@@ -597,7 +578,8 @@ export {
   phoneHasError,
   displayPhoneHasErrorHelperText,
   signUpFormHasError,
-  displaySignUpFormHelperText,
+  signUpServerHasError,
+  signUpServerErrorHelperText,
   signUpOptionsHaveError,
   healthInsuranceHasError,
   displayHealthInsuranceHelperText,

src/Components/ErrorMessage/ErrorMessageWrapper.css

@@ -1,6 +1,5 @@
 .error-helper-text {
   display: flex;
-  align-items: center;
   color: #c6252b;
   margin-bottom: 0.5rem;
 }

src/Components/ErrorMessage/ErrorMessageWrapper.tsx

@@ -9,7 +9,7 @@ type Props = {
 export default function ErrorMessageWrapper({ children, fontSize }: Props) {
   return (
     <span className="error-helper-text">
-      <ErrorIcon sx={{ fontSize: fontSize, mr: '5px' }} />
+      <ErrorIcon sx={{ fontSize: fontSize, mr: '5px', mt: '.2em' }} />
       <span className="error-message">{children}</span>
     </span>
   );

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 }) => {
@@ -28,8 +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);
   const emailErrorController = useErrorController((email) => {
@@ -38,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 = {
@@ -188,6 +185,7 @@ const SignUp = ({ handleTextfieldChange, handleCheckboxChange, submitted }) => {
         <Grid xs={12} item marginBottom={'1rem'}>
           {displayDisclosureSection()}
         </Grid>
+        {serverErrorController.showError && serverErrorController.message(formData.signUpInfo.serverError)}
       </div>
     </>
   );

src/Types/ErrorController.ts

@@ -6,7 +6,7 @@ export type VerifiableInput = Partial<
   | boolean
   | null
   | Expense[]
-  | SignUpInfo
+  | (SignUpInfo & { serverError: boolean })
   | HealthInsurance
   | { index: number; healthInsurance: HealthInsurance }
 >;

src/Types/FormData.ts

@@ -73,6 +73,7 @@ export interface SignUpInfo {
   sendOffers: boolean;
   sendUpdates: boolean;
   commConsent: boolean;
+  serverError?: boolean;
 }
 
 export interface AcuteHHConditions {