Add gas utility selector

src/api/calculator-types-v1.ts

@@ -98,6 +98,7 @@ export interface APIUtilityMap {
 export interface APIUtilitiesResponse {
   location: APILocation;
   utilities: APIUtilityMap;
+  gas_utilities?: APIUtilityMap;
 }
 
 export interface APIResponse {

src/api/fetch-state.ts

@@ -4,6 +4,11 @@ export type FetchState<T> =
     }
   | {
       state: 'loading';
+      /**
+       * If the previous state was loading, this may or may not contain the
+       * response value from that state.
+       */
+      previousResponse?: T;
     }
   | {
       state: 'complete';

src/i18n/strings/es.ts

@@ -137,6 +137,7 @@ export const templates = {
   sa9e16de0ec0154b3: `aire acondicionado central`,
   saa36bebd89cbd670: `Alaska`,
   sab07cf2bfae8483f: `Política de privacidad`,
+  sab68e846cf3e7e02: `Empresa de gas`,
   sab856460d5aed19e: `equipo eléctrico para exteriores`,
   sabd5662f3f0a76be: `Descuento por adelantado`,
   sad181d4343ef967f: `Wyoming`,
@@ -170,6 +171,7 @@ export const templates = {
   sc2e0d466583b17f8: `aislamiento del entrepiso`,
   sc5b20cb72269bc4f: `Los propietarios y inquilinos califican para diferentes incentivos.`,
   sc9266b1b6ae1aad4: `Esperado en 2024-2025`,
+  sc967ff75e8a58273: `Selecciona la empresa a la que paga su factura de gas.`,
   sc991c5ecbb3023ef: `aislamiento térmico`,
   sc997cfdf24ba9b58: `Aún no tenemos datos sobre las empresas de servicios eléctricos en su área.`,
   sc9e494c8346b7cb5: `Otra`,
@@ -204,4 +206,6 @@ export const templates = {
   sfa7338035e1ef173: `Alquilar o poseer`,
   sfc7214f623fe475d: `Selecciona la empresa a la que paga su factura de electricidad.`,
   sfe16afc784bb9d76: `Techo solar`,
+  sb2d056e8d2ea5bc5: `Delivered propane or fuel oil`,
+  s52d768131ca697d4: `No gas service`,
 };

src/state-calculator-form.tsx

@@ -38,11 +38,15 @@ const HOUSEHOLD_SIZE_OPTIONS: (
     value: count,
   }));
 
+const NO_GAS_UTILITY_ID = 'no-gas';
+const DELIVERED_FUEL_UTILITY_ID = 'delivered';
 const OTHER_UTILITY_ID = 'other';
 
-const renderUtilityField = (
+const renderUtilityFields = (
   utility: string,
   setUtility: (newValue: string) => void,
+  gasUtility: string,
+  setGasUtility: (newValue: string) => void,
   utilitiesFetch: FetchState<APIUtilitiesResponse>,
   msg: MsgFn,
 ) => {
@@ -67,7 +71,7 @@ const renderUtilityField = (
         : msg('We don’t have utility data for your area yet.')
       : utilitiesFetch.message;
 
-  return (
+  const electricSelector = (
     <Select
       id="utility"
       labelText={msg('Electric Utility', { desc: 'as in utility company' })}
@@ -81,6 +85,53 @@ const renderUtilityField = (
       loading={utilitiesFetch.state === 'loading'}
     />
   );
+
+  let gasSelector = null;
+  const gasUtilities =
+    utilitiesFetch.state === 'complete'
+      ? utilitiesFetch.response.gas_utilities
+      : utilitiesFetch.state === 'loading'
+      ? utilitiesFetch.previousResponse?.gas_utilities
+      : null;
+
+  // If the response does not contain the gas utilities key, that means the
+  // user's gas utility is irrelevant, so we don't show the selector. If the key
+  // is present, we need to show the selector even if the gas utilities map is
+  // empty, because it matters whether the user actually has no gas service, or
+  // has gas service that's not listed here (indicated by the Other item).
+  if (gasUtilities) {
+    const gasOptions = Object.entries(gasUtilities)
+      .map(([id, info]) => ({ value: id, label: info.name }))
+      .concat([
+        {
+          value: DELIVERED_FUEL_UTILITY_ID,
+          label: msg('Delivered propane or fuel oil'),
+        },
+        { value: NO_GAS_UTILITY_ID, label: msg('No gas service') },
+        { value: OTHER_UTILITY_ID, label: msg('Other') },
+      ]);
+    gasSelector = (
+      <Select
+        id="gas_utility"
+        labelText={msg('Gas Utility', { desc: 'as in utility company' })}
+        tooltipText={msg('Choose the company you pay your gas bill to.')}
+        placeholder={msg('Select utility')}
+        disabled={
+          gasOptions.length === 0 || utilitiesFetch.state !== 'complete'
+        }
+        options={gasOptions}
+        currentValue={gasUtility}
+        onChange={setGasUtility}
+      />
+    );
+  }
+
+  return (
+    <>
+      {electricSelector}
+      {gasSelector}
+    </>
+  );
 };
 
 const renderEmailField = (
@@ -144,6 +195,7 @@ export type FormValues = {
   householdSize: string;
   taxFiling: FilingStatus;
   utility?: string;
+  gasUtility?: string;
   email?: string;
 };
 
@@ -174,6 +226,7 @@ export const CalculatorForm: FC<{
   );
   const [taxFiling, setTaxFiling] = useState(initialValues.taxFiling);
   const [utility, setUtility] = useState(initialValues.utility ?? '');
+  const [gasUtility, setGasUtility] = useState(initialValues.gasUtility ?? '');
   const [email, setEmail] = useState(initialValues.email ?? '');
 
   const [utilitiesFetchState, setUtilitiesFetchState] = useState<
@@ -187,13 +240,17 @@ export const CalculatorForm: FC<{
       return;
     }
 
-    setUtilitiesFetchState({ state: 'loading' });
+    setUtilitiesFetchState(prev => ({
+      state: 'loading',
+      previousResponse: prev.state === 'complete' ? prev.response : undefined,
+    }));
     utilityFetcher(zip)
       .then(response => {
         // If our "state" attribute is set, enforce that the entered location is
         // in that state.
         if (stateId && stateId !== response.location.state) {
           setUtility('');
+          setGasUtility('');
 
           // Throw to put the task into the ERROR state for rendering.
           const stateCodeOrName = STATES[stateId]?.name(msg) ?? stateId;
@@ -214,6 +271,16 @@ export const CalculatorForm: FC<{
         } else {
           setUtility(OTHER_UTILITY_ID);
         }
+
+        const gasKeys = Object.keys(response.gas_utilities || {});
+        if (gasKeys.length > 0) {
+          if (!gasKeys.includes(gasUtility)) {
+            setGasUtility(gasKeys[0]);
+          }
+        } else {
+          // If there are no gas utilities, choose the "no gas service" option.
+          setGasUtility(NO_GAS_UTILITY_ID);
+        }
       })
       .catch(exc =>
         setUtilitiesFetchState({ state: 'error', message: exc.message }),
@@ -231,6 +298,13 @@ export const CalculatorForm: FC<{
           householdSize,
           taxFiling,
           utility: utility !== OTHER_UTILITY_ID ? utility : '',
+          gasUtility:
+            gasUtility === OTHER_UTILITY_ID
+              ? ''
+              : gasUtility === DELIVERED_FUEL_UTILITY_ID ||
+                gasUtility === NO_GAS_UTILITY_ID
+              ? 'none'
+              : '',
           email,
         });
       }}
@@ -273,7 +347,14 @@ export const CalculatorForm: FC<{
             onChange={event => setZip(event.currentTarget.value)}
           />
         </div>
-        {renderUtilityField(utility, setUtility, utilitiesFetchState, msg)}
+        {renderUtilityFields(
+          utility,
+          setUtility,
+          gasUtility,
+          setGasUtility,
+          utilitiesFetchState,
+          msg,
+        )}
         <div>
           <FormLabel
             tooltipText={msg(

src/state-calculator.tsx

@@ -75,6 +75,9 @@ const fetch = (
   if (formValues.utility) {
     query.set('utility', formValues.utility);
   }
+  if (formValues.gasUtility) {
+    query.set('gas_utility', formValues.gasUtility);
+  }
   Object.values(PROJECTS).forEach(project => {
     project.items.forEach(item => {
       query.append('items', item);

translations/es.xlf

@@ -786,6 +786,21 @@
   <source>privacy policy</source>
   <target>política de privacidad</target>
 </trans-unit>
+<trans-unit id="sb2d056e8d2ea5bc5">
+  <source>Delivered propane or fuel oil</source>
+</trans-unit>
+<trans-unit id="s52d768131ca697d4">
+  <source>No gas service</source>
+</trans-unit>
+<trans-unit id="sc967ff75e8a58273">
+  <source>Choose the company you pay your gas bill to.</source>
+  <target>Selecciona la empresa a la que paga su factura de gas.</target>
+</trans-unit>
+<trans-unit id="sab68e846cf3e7e02">
+  <source>Gas Utility</source>
+  <target>Empresa de gas</target>
+  <note from="lit-localize">as in utility company</note>
+</trans-unit>
 </body>
 </file>
 </xliff>