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 = /^[aeiou]/i.test(jobTitle) ? 'an' : 'a';
+
+  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.`;
 }
 
 /**

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

@@ -21,7 +21,27 @@ function GoalsStep() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    // Applying rules for goals
+    if (id === 'goals') {
+      formattedValue = value
+        .replace(/(^\s*\w|[.!?]\s*\w)/g, (c) => c.toUpperCase())
+        .trim();
+      if (!/[.!?]$/.test(formattedValue)) {
+        formattedValue += '.';
+      }
+    } else if (id === 'goalsHow') {
+      // Special rule for 'goalsHow' starting with 'i'
+      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

@@ -21,7 +21,22 @@ export function IntroductionStep() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+
+    let finalValue = value.trim();
+    // Check if the input is for the fullName field
+    if (id === 'fullName') {
+      // Remove any unwanted punctuation at the end of the string
+      finalValue = finalValue.replace(/[.,/#!$%^&*;?:{}=\-_`~()]+$/, '');
+      // Split the full name into parts, capitalize each part, and join back
+      finalValue = finalValue
+        .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

@@ -25,7 +25,29 @@ function InvolvementCommunityServiceFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    if (id === 'organizationName') {
+      // Capitalize each word and remove punctuation at the end
+      formattedValue = value
+        .split(' ')
+        .map(
+          (part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()
+        )
+        .join(' ')
+        .replace(/[.,/#!$%^&*;:?{}=_`~()-]+$/, '')
+        .trim();
+    } else if (id === 'serviceDescription') {
+      // Capitalize the first word of each sentence and ensure it ends with a period
+      formattedValue = value.replace(/(^\s*\w|[.!?]\s*\w)/g, (c) =>
+        c.toUpperCase()
+      );
+      if (!/[.!?]$/.test(formattedValue.trim())) {
+        formattedValue = `${formattedValue.trim()}.`;
+      }
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       communityServiceState: { ...formState.communityServiceState, ...changes },
     });

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

@@ -27,7 +27,27 @@ function InvolvementJobFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    // Capitalize each word for companyName and jobTitle
+    if (id === 'companyName' || id === 'jobTitle') {
+      formattedValue = value
+        .replace(/\b\w/g, (char) => char.toUpperCase())
+        .trim();
+    }
+
+    // Capitalize the first word of each sentence and ensure it ends with a period in jobDescription
+    if (id === 'jobDescription') {
+      formattedValue = value.replace(/(^\s*\w|[.!?]\s*\w)/g, (c) =>
+        c.toUpperCase()
+      );
+      // Check if the last character is not a punctuation mark, then add a period.
+      if (!/[.!?]$/.test(formattedValue.trim())) {
+        formattedValue = `${formattedValue.trim()}.`;
+      }
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       involvementJobState: { ...formState.involvementJobState, ...changes },
     });

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

@@ -21,7 +21,19 @@ function InvolvementParentingFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    if (id === 'parentDescription') {
+      // Capitalize the first letter of each sentence and add period if missing
+      formattedValue = value.replace(/(^\s*\w|[.!?]\s*\w)/g, (c) =>
+        c.toUpperCase()
+      );
+      if (!/[.!?]$/.test(formattedValue.trim())) {
+        formattedValue = `${formattedValue.trim()}.`;
+      }
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       parentingState: { ...formState.parentingState, ...changes },
     });

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

@@ -21,7 +21,25 @@ function InvolvementRecoveryFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    // Check if the input is for recoveryName or recoveryDescription
+    if (id === 'recoveryName') {
+      // Remove any punctuation at the end and capitalize only the first word
+      formattedValue = value.replace(/[.,/#!$%^&*;:?{}=_`~()-]+$/, ''); // Adjusted regex
+      formattedValue =
+        formattedValue.charAt(0).toUpperCase() + formattedValue.slice(1).trim();
+    } else if (id === 'recoveryDescription') {
+      // Capitalize the first word of each sentence and ensure it ends with a period
+      formattedValue = value.replace(/(^\s*\w|[.!?]\s*\w)/g, (c) =>
+        c.toUpperCase()
+      );
+      if (!/[.!?]$/.test(formattedValue.trim())) {
+        formattedValue = `${formattedValue.trim()}.`;
+      }
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       recoveryState: { ...formState.recoveryState, ...changes },
     });

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

@@ -23,7 +23,29 @@ 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') {
+      // Remove any unwanted punctuation at the end and capitalize each word
+      formattedValue = value.replace(/[.,/#!$%^&*;:?{}=_`~()-]+$/, ''); // Fixed regex to not include unnecessary escapes
+      formattedValue = formattedValue
+        .split(' ')
+        .map(
+          (part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()
+        )
+        .join(' ')
+        .trim();
+    } else if (id === 'passionDescription') {
+      // Capitalize the first word of each sentence and ensure it ends with a period
+      formattedValue = value.replace(/(^\s*\w|[.!?]\s*\w)/g, (c) =>
+        c.toUpperCase()
+      );
+      if (!/[.!?]$/.test(formattedValue.trim())) {
+        formattedValue = `${formattedValue.trim()}.`;
+      }
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       schoolState: { ...formState.schoolState, ...changes },
     });

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

@@ -22,7 +22,24 @@ function InvolvementSomethingElseFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim(); // Trim all trailing and leading whitespace
+
+    // For activityName, remove any punctuation at the end
+    if (id === 'activityName') {
+      formattedValue = formattedValue.replace(/[.,/#!$%^&*;:?{}=_`~()-]+$/, '');
+    }
+    // For activityDescription, capitalize the first word of each sentence and ensure it ends with a period if no other punctuation marks are present
+    else if (id === 'activityDescription') {
+      formattedValue = formattedValue.replace(/(^\s*\w|[.!?]\s*\w)/g, (c) =>
+        c.toUpperCase()
+      );
+      // Check if it ends with punctuation, if not, add a period
+      if (!/[.!?]$/.test(formattedValue)) {
+        formattedValue += '.';
+      }
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       somethingElseState: { ...formState.somethingElseState, ...changes },
     });

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

@@ -19,7 +19,18 @@ function InvolvementUnemploymentFlow() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value.trim();
+
+    // Capitalize the first word of each sentence and ensure it ends with a period
+    formattedValue = value.replace(/(^\s*\w|[.!?]\s*\w)/g, (c) =>
+      c.toUpperCase()
+    );
+    // Check if the last character is not a punctuation mark, then add a period.
+    if (!/[.!?]$/.test(formattedValue.trim())) {
+      formattedValue = `${formattedValue.trim()}.`;
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       unemploymentState: { ...formState.unemploymentState, ...changes },
     });

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

@@ -22,7 +22,15 @@ function WhyStep() {
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
-    const changes = { [id]: value };
+    let formattedValue = value
+      .replace(/(^\s*\w|[.!?]\s*\w)/g, (c) => c.toUpperCase())
+      .trim();
+
+    if (!/[.!?]$/.test(formattedValue)) {
+      formattedValue += '.';
+    }
+
+    const changes = { [id]: formattedValue };
     updateStepToForm({
       whyState: { ...formState.whyState, ...changes },
     });