Add "other" option to utility selector (#149)

## Description

Because we can't be sure that the API's set of utilities is 100%
comprehensive, or that its location-to-utilities mapping is 100%
correct, we should have an escape hatch, so users don't have to give
an answer they know is incorrect.

The "other" value is not submitted to the API because it's not a valid
utility ID and the API would thus error. I'm pretty confident that's
sensible behavior for the API, so I'd rather not change it. We'll be
able to tell when someone chose "other" in API logs, because the
utility param is absent in the /calculator request.

https://app.asana.com/0/1206661332626418/1206700057950880

## Test Plan

On a fresh page load, make sure the utility dropdown is not
clickable.

Enter a zip; make sure utilities load, the first one is selected, and
the "Other" entry is present. Submit the form with a real utility
selected and make sure its incentives come up. Choose "Other", submit
the form, and make sure no utility incentives come up, but state and
federal ones do.

Enter an invalid zip (00000) and make sure the utility dropdown is not
clickable and you see the error message below the field.

src/components/select.tsx

@@ -276,11 +276,14 @@ export const Select = <T extends string>({
           </Listbox.Options>
         </Transition>
       </Listbox>
-      {helpText && (
-        <div className="mx-3 mt-1 text-grey-400 text-xsm leading-normal">
-          {helpText}
-        </div>
-      )}
+      {
+        // nbsp forces vertical space even if help text is blank
+        helpText && (
+          <div className="mx-3 mt-1 text-grey-400 text-xsm leading-normal">
+            {helpText}&nbsp;
+          </div>
+        )
+      }
     </div>
   );
 };

src/i18n/strings/es.ts

@@ -79,6 +79,7 @@ export const templates = {
   s6c8911fbc526fb43: `Tablero eléctrico y cableado`,
   s6cfe26dfc562d2a2: str`Hasta \$${0} de descuento en ${1}`,
   s6ef16f759a2cea7e: `Nevada`,
+  s70fd14cbb0ad4160: `Continúe para ver otros incentivos.`,
   s751ba5ac47cbfabb: `Washington`,
   s777612e8117ff021: `Tennessee`,
   s79fd9ba9e498d3da: str`${0} del costo de ${1}, hasta \$${2}`,
@@ -131,6 +132,7 @@ export const templates = {
   sc373af4c1a974b57: `Cocina`,
   sc5b20cb72269bc4f: `Los propietarios y inquilinos califican para diferentes incentivos.`,
   sc997cfdf24ba9b58: `Aún no tenemos datos sobre las empresas de servicios eléctricos en su área.`,
+  sc9e494c8346b7cb5: `Otra`,
   scb043c067bac571c: `Misisipi`,
   scc21fdd8a2feaeef: `Georgia`,
   scc3ef5dd3649b934: `Nuevo México`,

src/state-calculator-form.tsx

@@ -39,6 +39,8 @@ const HOUSEHOLD_SIZE_OPTIONS: (
     value: count,
   }));
 
+const OTHER_UTILITY_ID = 'other';
+
 const renderUtilityField = (
   utility: string,
   setUtility: (newValue: string) => void,
@@ -47,19 +49,22 @@ const renderUtilityField = (
 ) => {
   const options: Option<string>[] =
     utilitiesFetch.state === 'complete'
-      ? Object.entries(utilitiesFetch.response.utilities).map(([id, info]) => ({
-          value: id,
-          label: info.name,
-        }))
+      ? Object.entries(utilitiesFetch.response.utilities)
+          .map(([id, info]) => ({ value: id, label: info.name }))
+          .concat([{ value: OTHER_UTILITY_ID, label: msg('Other') }])
       : [];
 
   const enterZipToSelect = msg('Enter your ZIP code to select a utility.');
   const helpText =
-    utilitiesFetch.state === 'init' || utilitiesFetch.state === 'loading'
+    utilitiesFetch.state === 'init'
       ? enterZipToSelect
+      : utilitiesFetch.state === 'loading'
+      ? ' ' // Empty help text, but maintain vertical space
       : utilitiesFetch.state === 'complete'
       ? Object.keys(utilitiesFetch.response.utilities).length
-        ? enterZipToSelect
+        ? utility === OTHER_UTILITY_ID
+          ? msg('Continue to see other incentives.')
+          : ' '
         : msg('We don’t have utility data for your area yet.')
       : utilitiesFetch.message;
 
@@ -221,7 +226,7 @@ export const CalculatorForm: FC<{
             setUtility(keys[0]);
           }
         } else {
-          setUtility('');
+          setUtility(OTHER_UTILITY_ID);
         }
       })
       .catch(exc =>
@@ -239,7 +244,7 @@ export const CalculatorForm: FC<{
           householdIncome,
           householdSize,
           taxFiling,
-          utility,
+          utility: utility !== OTHER_UTILITY_ID ? utility : '',
           projects,
           email,
         });

translations/es.xlf

@@ -584,6 +584,14 @@
   <source>Eligibility depends on residence location.</source>
   <target>La elegibilidad depende de la ubicación de residencia.</target>
 </trans-unit>
+<trans-unit id="sc9e494c8346b7cb5">
+  <source>Other</source>
+  <target>Otra</target>
+</trans-unit>
+<trans-unit id="s70fd14cbb0ad4160">
+  <source>Continue to see other incentives.</source>
+  <target>Continúe para ver otros incentivos.</target>
+</trans-unit>
 </body>
 </file>
 </xliff>