613 fix survey format (#621)

* Add new response_types to survey_question and survey component. * Update jsonserver data * Update snapshot * Update webrick
codeforboston · Sep 25, 2024 · 0d979cd · 0d979cd
1 parent f31dccb
commit 0d979cd
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 44 deletions.
diff --git a/backend/Gemfile.lock b/backend/Gemfile.lock
@@ -311,7 +311,7 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webrick (1.8.1)
+    webrick (1.8.2)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)

diff --git a/backend/app/models/survey_question.rb b/backend/app/models/survey_question.rb
@@ -2,7 +2,7 @@
 
 class SurveyQuestion < ApplicationRecord
   belongs_to :survey
-  enum response_type: { radio: 0, text: 1 }
+  enum response_type: { radio: 0, text: 1, email: 2, tel: 3 }
   has_many :localized_survey_questions, dependent: nil
   accepts_nested_attributes_for :localized_survey_questions
 

diff --git a/backend/lib/seeds/test_survey_questions.csv b/backend/lib/seeds/test_survey_questions.csv
@@ -2,17 +2,17 @@ display_order,text,response_type,response_options
 1,"Have you heard of heat pumps?",0,"Yes/No"
 2,"If yes, have you considered them for home heating/cooling?",0,"Yes/No"
 3,"If yes, how far have you taken your interest in heat pumps?",1,""
-4,"Have you heard of Mass Save… the energy efficieny program?",0,"Yes/No"
+4,"Have you heard of Mass Save… the energy efficiency program?",0,"Yes/No"
 5,"If yes, have you had contact with them?",0,"Yes/No"
 6,"If you could save money on your utility bills with a state-discounted or free heating/cooling system upgrade, would you like to learn more?",0,"Yes/No"
 7,"If yes, please confirm your name",1,""
-8,"If yes, please confirm your email address",1,""
-9,"If yes, please confirm your phone number",1,""
-10,"So we can report back on your potential savings, what type of heating system do you have? (Across the whole home, not just in individual rooms)",0,"Forced hot air – vents/Radiators – water/Radiators – steam/Basebaord – water/Baseboard – electric/Other"
+8,"If yes, please confirm your email address",2,""
+9,"If yes, please confirm your phone number",3,""
+10,"So we can report back on your potential savings, what type of heating system do you have? (Across the whole home, not just in individual rooms)",0,"Forced hot air – vents/Radiators – water/Radiators – steam/Baseboard – water/Baseboard – electric/Other"
 11,"If other, please specify",1,""
 12,"What type of heating FUEL do you use for that heating system?",0,"Oil/Gas/Electric (for baseboard)/Other"
 13,"If other, please specify",1,""
 14,"We expect to have “heat pump coaches” available to walk through the process with you (volunteers, who are not affiliated with any installer or brand). Would you like to know more about how to get free, personal help from a heat pump coach?",0,"Yes/No"
 15,"If yes, please confirm your name",1,""
-16,"If yes, please confirm your email address",1,""
-17,"If yes, please confirm your phone number",1,""
+16,"If yes, please confirm your email address",2,""
+17,"If yes, please confirm your phone number",3,""
diff --git a/frontend/front/src/components/SurveyComponent/HeatPumpPhoneField.js b/frontend/front/src/components/SurveyComponent/HeatPumpPhoneField.js
@@ -1,35 +1,70 @@
 import { Controller, useController } from "react-hook-form";
+import { useMemo } from "react";
+import { FormControl, FormLabel, TextField } from "@mui/material";
 
-import React from "react";
-import { TextField } from "@mui/material";
-
-export const HeatPumpPhoneField = ({ name, control, label, disabled }) => {
+export const HeatPumpPhoneField = ({
+  name,
+  control,
+  label,
+  disabled,
+  required,
+  readOnly,
+  disableFancyLabel,
+  styles = {},
+}) => {
   const { formState } = useController({ name, control });
   const mainFieldError = formState.errors[name];
+  const rules = useMemo(() => {
+    const ruleList = {};
+    if (required) {
+      ruleList.required = { value: true, message: "This field is required!" };
+    }
+    ruleList.pattern = {
+      value: /^\(?([0-9]{3})\)?[-.\s]?([0-9]{3})[-.\s]?([0-9]{4})$/,
+      message: "Invalid phone number.",
+    };
+    return ruleList;
+  }, [required]);
 
   return (
     <Controller
       name={name}
       control={control}
-      rules={{
-        // type="tel" does not validate automatically
-        required: { value: true, message: "This field is required!" },
-        pattern: {
-          value: /^\(?([0-9]{3})\)?[-.\s]?([0-9]{3})[-.\s]?([0-9]{4})$/,
-          message: "Invalid phone number.",
-        },
-      }}
+      rules={rules}
       render={({ field }) => (
-        <TextField
-          id={`${name}-phoneNumber`}
-          label={label}
-          variant="standard"
-          error={!!mainFieldError}
-          helperText={!!mainFieldError && mainFieldError.message}
-          disabled={disabled}
-          type="tel"
-          {...field}
-        />
+        <FormControl
+          fullWidth
+          sx={{
+            ...styles?.container,
+          }}
+        >
+          {disableFancyLabel && (
+            <FormLabel
+              id={`${name}-textField-label`}
+              htmlFor={`${name}-textField`}
+              sx={{
+                ...styles?.label,
+              }}
+            >
+              {label}
+            </FormLabel>
+          )}
+          <TextField
+            id={`${name}-phoneNumber`}
+            label={disableFancyLabel ? undefined : label}
+            variant="standard"
+            error={!!mainFieldError}
+            helperText={!!mainFieldError && mainFieldError.message}
+            type="tel"
+            inputProps={{
+              readOnly,
+              id: `${name}-textField`,
+              style: { ...styles?.label },
+            }}
+            {...field}
+            disabled={disabled}
+          />
+        </FormControl>
       )}
     />
   );

diff --git a/frontend/front/src/components/SurveyComponent/SurveyComponent.js b/frontend/front/src/components/SurveyComponent/SurveyComponent.js
@@ -18,6 +18,7 @@ import {
 import { AddressComponent } from "../AddressUtils";
 import Loader from "../Loader";
 import ConditionalQuestion from "./ConditionalQuestion";
+import { HeatPumpPhoneField } from "./HeatPumpPhoneField";
 import { HeatPumpRadio } from "./HeatPumpRadio";
 import { HeatPumpTextField } from "./HeatPumpTextField";
 import { SurveyError } from "./SurveyStructureError";
@@ -205,9 +206,11 @@ const SurveyComponent = ({
                       }))}
                       disabled={readOnly}
                       styles={styles}
+                      readOnly={readOnly}
                     />
                   );
                 case "text":
+                case "email":
                   return (
                     <HeatPumpTextField
                       key={`q${q.id}`}
@@ -217,6 +220,21 @@ const SurveyComponent = ({
                       disabled={readOnly}
                       disableFancyLabel
                       styles={styles}
+                      type={q.response_type}
+                      readOnly={readOnly}
+                    />
+                  );
+                case "tel":
+                  return (
+                    <HeatPumpPhoneField
+                      key={`q${q.id}`}
+                      control={control}
+                      name={`${q.id}`}
+                      label={q.question}
+                      disabled={readOnly}
+                      disableFancyLabel
+                      styles={styles}
+                      readOnly={readOnly}
                     />
                   );
                 default:

diff --git a/...front/src/components/SurveyComponent/__tests__/__snapshots__/SurveyComponent.test.js.snap b/...front/src/components/SurveyComponent/__tests__/__snapshots__/SurveyComponent.test.js.snap
@@ -653,7 +653,7 @@ exports[`SurveyComponent no errors when rendering 1`] = `
                 class="MuiInputBase-input MuiInput-input css-1x51dt5-MuiInputBase-input-MuiInput-input"
                 id="8-textField"
                 name="8"
-                type="text"
+                type="email"
                 value=""
               />
             </div>
@@ -669,7 +669,6 @@ exports[`SurveyComponent no errors when rendering 1`] = `
           />
           <div
             class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
-            data-testid="9"
           >
             <div
               class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-v4u5dn-MuiInputBase-root-MuiInput-root"
@@ -679,7 +678,7 @@ exports[`SurveyComponent no errors when rendering 1`] = `
                 class="MuiInputBase-input MuiInput-input css-1x51dt5-MuiInputBase-input-MuiInput-input"
                 id="9-textField"
                 name="9"
-                type="text"
+                type="tel"
                 value=""
               />
             </div>
@@ -1404,7 +1403,7 @@ exports[`SurveyComponent no errors when rendering 1`] = `
                 class="MuiInputBase-input MuiInput-input css-1x51dt5-MuiInputBase-input-MuiInput-input"
                 id="16-textField"
                 name="16"
-                type="text"
+                type="email"
                 value=""
               />
             </div>
@@ -1420,7 +1419,6 @@ exports[`SurveyComponent no errors when rendering 1`] = `
           />
           <div
             class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
-            data-testid="17"
           >
             <div
               class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-v4u5dn-MuiInputBase-root-MuiInput-root"
@@ -1430,7 +1428,7 @@ exports[`SurveyComponent no errors when rendering 1`] = `
                 class="MuiInputBase-input MuiInput-input css-1x51dt5-MuiInputBase-input-MuiInput-input"
                 id="17-textField"
                 name="17"
-                type="text"
+                type="tel"
                 value=""
               />
             </div>

diff --git a/frontend/jsonserver/data/survey_index.json b/frontend/jsonserver/data/survey_index.json
@@ -56,14 +56,14 @@
         "id": 8,
         "display_order": 8,
         "text": "If yes, please confirm your email address",
-        "response_type": "text",
+        "response_type": "email",
         "response_options": []
       },
       {
         "id": 9,
         "display_order": 9,
         "text": "If yes, please confirm your phone number",
-        "response_type": "text",
+        "response_type": "tel",
         "response_options": []
       },
       {
@@ -119,14 +119,14 @@
         "id": 16,
         "display_order": 16,
         "text": "If yes, please confirm your email address",
-        "response_type": "text",
+        "response_type": "email",
         "response_options": []
       },
       {
         "id": 17,
         "display_order": 17,
         "text": "If yes, please confirm your phone number",
-        "response_type": "text",
+        "response_type": "tel",
         "response_options": []
       }
     ],

diff --git a/frontend/jsonserver/data/survey_show.json b/frontend/jsonserver/data/survey_show.json
@@ -55,14 +55,14 @@
       "id": 8,
       "display_order": 8,
       "text": "If yes, please confirm your email address",
-      "response_type": "text",
+      "response_type": "email",
       "response_options": []
     },
     {
       "id": 9,
       "display_order": 9,
       "text": "If yes, please confirm your phone number",
-      "response_type": "text",
+      "response_type": "tel",
       "response_options": []
     },
     {
@@ -118,14 +118,14 @@
       "id": 16,
       "display_order": 16,
       "text": "If yes, please confirm your email address",
-      "response_type": "text",
+      "response_type": "email",
       "response_options": []
     },
     {
       "id": 17,
       "display_order": 17,
       "text": "If yes, please confirm your phone number",
-      "response_type": "text",
+      "response_type": "tel",
       "response_options": []
     }
   ],