Merge pull request #1830 from hackforla/dev

Dev

Author: sydneywalcoff

products/statement-generator/.env.example

@@ -17,6 +17,8 @@ REACT_APP_SERVICE_DESCRIPTION=I check cakes for poison. It is a very serious job
 REACT_APP_COMPANY_NAME=Cool Company
 REACT_APP_JOB_TITLE=Big Boss
 REACT_APP_JOB_DESCRIPTION=I make the decisions on what the biggest cake should be.
+REACT_APP_IS_OTHER_JOB_CHECKED=True
+REACT_APP_OTHER_JOB_DESCRIPTION=I work at a volunteer tech non-profit.
 
 
 REACT_APP_NAME=Addicts Anonymous

products/statement-generator/public/locales/en/translation.json

@@ -150,7 +150,10 @@
     "jobTitle_input_label": "What is your current job title?",
     "jobTitle_input_placeholder": "Job title",
     "jobDescription_input_label": "What do you do at this job? How has your role at work impacted your life for the better?\n(2-3 complete sentences)",
-    "jobDescription_input_placeholder": ""
+    "jobDescription_input_placeholder": "",
+    "otherJob_label": "Do you have another job (or jobs) you would like to talk about?",
+    "otherJobDescription_input_label": "Add information about your job (or jobs). Be sure to include the company's name and your job title. (3-5 complete sentences)",
+    "otherJobDescription_input_placeholder": ""
   },
   "something_else_form": {
     "activityName_input_label": "What else have you been involved in?",

products/statement-generator/src/contexts/FormStateProps.ts

@@ -37,6 +37,8 @@ export const defaultStepState = {
     companyName: '',
     jobTitle: '',
     jobDescription: '',
+    isOtherJobChecked: '',
+    otherJobDescription: '',
   },
   communityServiceState: {
     organizationName: '',
@@ -107,6 +109,8 @@ export interface IInvolvementJobState {
   companyName: string;
   jobTitle: string;
   jobDescription: string;
+  isOtherJobChecked: string;
+  otherJobDescription: string;
 }
 // step 2b
 export interface ICommunityServiceState {
@@ -182,6 +186,8 @@ export const sampleStepState = {
     companyName: process.env.REACT_APP_COMPANY_NAME,
     jobTitle: process.env.REACT_APP_JOB_TITLE,
     jobDescription: process.env.REACT_APP_JOB_DESCRIPTION,
+    isOtherJobChecked: process.env.REACT_APP_IS_OTHER_JOB_CHECKED,
+    otherJobDescription: process.env.REACT_APP_OTHER_JOB_DESCRIPTION,
   },
   communityServiceState: {
     organizationName: process.env.REACT_APP_ORGANIZATION_NAME,

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

@@ -29,7 +29,12 @@ export function generateIntroduction(formState: IStepState): string {
  */
 export function generateInvolvementJob(formState: IStepState): string {
   const {
-    involvementJobState: { companyName, jobTitle, jobDescription },
+    involvementJobState: {
+      companyName,
+      jobTitle,
+      jobDescription,
+      otherJobDescription,
+    },
   } = formState;
 
   if (!formState.involvement.isJobChecked) {
@@ -43,7 +48,13 @@ export function generateInvolvementJob(formState: IStepState): string {
   // 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}`;
+  let result = `I have been working at ${companyName} as ${article} ${jobTitle}. At ${companyName}, ${jobDescription}`;
+
+  if (otherJobDescription) {
+    result += ` ${otherJobDescription}`;
+  }
+
+  return result;
 }
 
 /**

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

@@ -5,6 +5,7 @@ import FormStateContext from 'contexts/FormStateContext';
 
 import Input from 'components/Input';
 import Textarea from 'components/Textarea';
+import RadioGroup from 'components/RadioGroup';
 import FormFlowContainer from 'components-layout/FormFlowContainer';
 
 import {
@@ -20,21 +21,30 @@ function InvolvementJobFlow() {
     companyName,
     jobTitle,
     jobDescription,
+    isOtherJobChecked,
+    otherJobDescription,
   } = formState.involvementJobState;
 
   const companyNameValid = companyName !== '';
   const jobTitleValid = jobTitle !== '';
-  const jobDescriptionValid = jobDescription !== '';
+  const jobDescriptionValid = /\w/.test(jobDescription || ''); // Check if contains any word character
+  const otherJobDescriptionValid =
+    isOtherJobChecked === t('button.no') ||
+    (isOtherJobChecked === t('button.yes') &&
+      /\w/.test(otherJobDescription || '')); // Check if contains any word character
   const isNextDisabled =
-    !companyNameValid || !jobTitleValid || !jobDescriptionValid;
+    !companyNameValid ||
+    !jobTitleValid ||
+    !jobDescriptionValid ||
+    !otherJobDescriptionValid;
 
   const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { id, value } = evt.currentTarget;
     let formattedValue = value.trim();
 
     if (id === 'companyName' || id === 'jobTitle') {
       formattedValue = capitalizeEachWord(value);
-    } else if (id === 'jobDescription') {
+    } else if (id === 'jobDescription' || id === 'otherJobDescription') {
       formattedValue = capitalizeSentences(value);
     }
 
@@ -46,6 +56,17 @@ function InvolvementJobFlow() {
     });
   };
 
+  const onOtherJobChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = evt.currentTarget.value === t('button.yes');
+    updateStepToForm({
+      involvementJobState: {
+        ...formState.involvementJobState,
+        isOtherJobChecked: evt.currentTarget.value,
+        ...(isChecked ? {} : { otherJobDescription: '' }),
+      },
+    });
+  };
+
   const companyNameLabelRef = useRef<HTMLLabelElement>(null);
 
   useEffect(() => {
@@ -84,6 +105,25 @@ function InvolvementJobFlow() {
         defaultValue={jobDescription}
         rows={3}
       />
+
+      <RadioGroup
+        id="otherJob"
+        label={t('job_form.otherJob_label')}
+        choices={[t('button.yes'), t('button.no')]}
+        value={isOtherJobChecked}
+        handleChange={onOtherJobChange}
+      />
+
+      {isOtherJobChecked === t('button.yes') && (
+        <Textarea
+          id="otherJobDescription"
+          label={t('job_form.otherJobDescription_input_label')}
+          placeholder={t('job_form.otherJobDescription_input_placeholder')}
+          handleChange={onInputChange}
+          defaultValue={otherJobDescription}
+          rows={4}
+        />
+      )}
     </FormFlowContainer>
   );
 }