1363 auto correct form fields

products/statement-generator/src/helpers/statementGenerators.ts

@@ -15,12 +15,12 @@ export function generateIntroduction(formState: IStepState): string {
       ? `My name is ${introduction.fullName}, and I am ${introduction.age} years old.`
       : '';
 
-  const veteranSentance =
+  const veteranSentence =
     introduction.isVeteran === 'Yes'
       ? 'I am also a proud veteran of the United States Armed Forces.'
       : '';
 
-  return `${nameSentence} ${veteranSentance} ${lastSentence}`;
+  return `${nameSentence} ${veteranSentence} ${lastSentence}`;
 }
 
 /**
@@ -40,7 +40,10 @@ export function generateInvolvementJob(formState: IStepState): string {
     return '';
   }
 
-  return `I have been working at ${companyName} as a ${jobTitle}. At ${companyName}, ${jobDescription} Having my record cleared would help me continue to advance in my career.`;
+  // Determine the correct article "a" or "an" based on the first letter of the jobTitle
+  const article = generateArticle(jobTitle);
+
+  return `I have been working at ${companyName} as ${article} ${jobTitle}. At ${companyName}, ${jobDescription} Having my record cleared would help me continue to advance in my career.`;
 }
 
 /**
@@ -209,3 +212,39 @@ export function generateClosing(formState: IStepState): string {
 
   return `Sincerely,\n\n${fullName}`;
 }
+
+export function capitalizeSentences(text: string): string {
+  let formattedText = text.trim();
+  formattedText = formattedText.replace(/(^\s*\w|[.!?]\s*\w)/g, (c) =>
+    c.toUpperCase()
+  );
+  if (!/[.!?]$/.test(formattedText)) {
+    formattedText += '.';
+  }
+  return formattedText;
+}
+
+export function capitalizeEachWord(text: string): string {
+  return text
+    .trim()
+    .replace(/[.,/#!$%^&*;:?{}=_`~()-]+$/, '') // Remove unwanted punctuation
+    .split(' ')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+    .join(' ');
+}
+
+export function removePunctuationAndCapitalizeFirstWord(text: string): string {
+  let formattedText = text.trim();
+  formattedText = formattedText.replace(/[.,/#!$%^&*;:?{}=_`~()-]+$/, '');
+  formattedText =
+    formattedText.charAt(0).toUpperCase() + formattedText.slice(1);
+  return formattedText;
+}
+
+export function removePunctuation(text: string): string {
+  return text.trim().replace(/[.,/#!$%^&*;:?{}=_`~()-]+$/, '');
+}
+
+export function generateArticle(word: string): string {
+  return /^[aeiou]/i.test(word) ? 'an' : 'a';
+}

products/statement-generator/src/pages-form/GoalsStep.tsx

@@ -7,6 +7,7 @@ import FlowNavigation from 'components-layout/FlowNavigation';
 
 import ContentContainer from 'components-layout/ContentContainer';
 import Textarea from 'components/Textarea';
+import { capitalizeSentences } from 'helpers/statementGenerators';
 
 function GoalsStep() {
   const { t } = useTranslation();
@@ -21,7 +22,20 @@ function GoalsStep() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    if (id === 'goals') {
+      formattedValue = capitalizeSentences(value);
+    } else if (id === 'goalsHow') {
+      formattedValue = value
+        .replace(/(^\s*i\s|[.!?]\s*\w)/g, (c) => c.toUpperCase())
+        .trim();
+      if (!/[.!?]$/.test(formattedValue)) {
+        formattedValue += '.';
+      }
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       goalsState: { ...formState.goalsState, ...changes },
     });

products/statement-generator/src/pages-form/IntroductionStep.tsx

@@ -9,6 +9,7 @@ import RadioGroup from 'components/RadioGroup';
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import FormContainer from 'components-layout/FormContainer';
+import { removePunctuation } from 'helpers/statementGenerators';
 
 export function IntroductionStep() {
   const { t } = useTranslation();
@@ -21,7 +22,18 @@ export function IntroductionStep() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let finalValue = value.trim();
+
+    if (id === 'fullName') {
+      finalValue = removePunctuation(value)
+        .split(' ')
+        .map(
+          (part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()
+        )
+        .join(' ');
+    }
+
+    const changes = { [id]: finalValue };
     updateStepToForm({
       introduction: { ...formState.introduction, ...changes },
     });

products/statement-generator/src/pages-form/InvolvementCommunityServiceFlow.tsx

@@ -9,6 +9,10 @@ import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import FormContainer from 'components-layout/FormContainer';
 
+import {
+  capitalizeEachWord,
+  capitalizeSentences,
+} from 'helpers/statementGenerators';
 import Input from '../components/Input';
 
 function InvolvementCommunityServiceFlow() {
@@ -25,7 +29,15 @@ function InvolvementCommunityServiceFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    if (id === 'organizationName') {
+      formattedValue = capitalizeEachWord(value);
+    } else if (id === 'serviceDescription') {
+      formattedValue = capitalizeSentences(value);
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       communityServiceState: { ...formState.communityServiceState, ...changes },
     });

products/statement-generator/src/pages-form/InvolvementJobFlow.tsx

@@ -9,6 +9,10 @@ import Textarea from 'components/Textarea';
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import FormContainer from 'components-layout/FormContainer';
+import {
+  capitalizeEachWord,
+  capitalizeSentences,
+} from 'helpers/statementGenerators';
 
 function InvolvementJobFlow() {
   const { t } = useTranslation();
@@ -27,7 +31,15 @@ function InvolvementJobFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    if (id === 'companyName' || id === 'jobTitle') {
+      formattedValue = capitalizeEachWord(value);
+    } else if (id === 'jobDescription') {
+      formattedValue = capitalizeSentences(value);
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       involvementJobState: { ...formState.involvementJobState, ...changes },
     });

products/statement-generator/src/pages-form/InvolvementParentingFlow.tsx

@@ -9,6 +9,7 @@ import Textarea from 'components/Textarea';
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import FormContainer from 'components-layout/FormContainer';
+import { capitalizeSentences } from 'helpers/statementGenerators';
 
 function InvolvementParentingFlow() {
   const { t } = useTranslation();
@@ -21,7 +22,13 @@ function InvolvementParentingFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    if (id === 'parentDescription') {
+      formattedValue = capitalizeSentences(value);
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       parentingState: { ...formState.parentingState, ...changes },
     });

products/statement-generator/src/pages-form/InvolvementRecoveryFlow.tsx

@@ -9,6 +9,10 @@ import Textarea from 'components/Textarea';
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import FormContainer from 'components-layout/FormContainer';
+import {
+  capitalizeSentences,
+  removePunctuationAndCapitalizeFirstWord,
+} from 'helpers/statementGenerators';
 
 function InvolvementRecoveryFlow() {
   const { t } = useTranslation();
@@ -21,7 +25,15 @@ function InvolvementRecoveryFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    if (id === 'recoveryName') {
+      formattedValue = removePunctuationAndCapitalizeFirstWord(value);
+    } else if (id === 'recoveryDescription') {
+      formattedValue = capitalizeSentences(value);
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       recoveryState: { ...formState.recoveryState, ...changes },
     });

products/statement-generator/src/pages-form/InvolvementSchoolFlow.tsx

@@ -9,6 +9,10 @@ import Textarea from 'components/Textarea';
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import FormContainer from 'components-layout/FormContainer';
+import {
+  capitalizeEachWord,
+  capitalizeSentences,
+} from 'helpers/statementGenerators';
 
 function InvolvementSchoolFlow() {
   const { t } = useTranslation();
@@ -23,7 +27,15 @@ function InvolvementSchoolFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    if (id === 'schoolName' || id === 'studyName') {
+      formattedValue = capitalizeEachWord(value);
+    } else if (id === 'passionDescription') {
+      formattedValue = capitalizeSentences(value);
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       schoolState: { ...formState.schoolState, ...changes },
     });

products/statement-generator/src/pages-form/InvolvementSomethingElseFlow.tsx

@@ -9,6 +9,10 @@ import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import FormContainer from 'components-layout/FormContainer';
 
+import {
+  capitalizeSentences,
+  removePunctuation,
+} from 'helpers/statementGenerators';
 import Input from '../components/Input';
 
 function InvolvementSomethingElseFlow() {
@@ -22,7 +26,15 @@ function InvolvementSomethingElseFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    if (id === 'activityName') {
+      formattedValue = removePunctuation(value);
+    } else if (id === 'activityDescription') {
+      formattedValue = capitalizeSentences(value);
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       somethingElseState: { ...formState.somethingElseState, ...changes },
     });

products/statement-generator/src/pages-form/InvolvementUnemploymentFlow.tsx

@@ -8,6 +8,7 @@ import Textarea from 'components/Textarea';
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import FormContainer from 'components-layout/FormContainer';
+import { capitalizeSentences } from 'helpers/statementGenerators';
 
 function InvolvementUnemploymentFlow() {
   const { t } = useTranslation();
@@ -19,7 +20,11 @@ function InvolvementUnemploymentFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    formattedValue = capitalizeSentences(value);
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       unemploymentState: { ...formState.unemploymentState, ...changes },
     });

products/statement-generator/src/pages-form/WhyStep.tsx

@@ -8,6 +8,7 @@ import Textarea from 'components/Textarea';
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import FormContainer from 'components-layout/FormContainer';
+import { capitalizeSentences } from 'helpers/statementGenerators';
 
 function WhyStep() {
   const { t } = useTranslation();
@@ -22,7 +23,11 @@ function WhyStep() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    formattedValue = capitalizeSentences(value);
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       whyState: { ...formState.whyState, ...changes },
     });