refactor: consistency for front-end formatting

src/front-end/typescript/lib/pages/learn-more/team-with-us.tsx

@@ -17,6 +17,7 @@ import { CONTACT_EMAIL, COPY, VENDOR_IDP_NAME } from "shared/config";
 import ALL_SERVICE_AREAS from "shared/lib/data/service-areas";
 import { ADT, adt } from "shared/lib/types";
 import { GUIDE_AUDIENCE } from "front-end/lib/pages/guide/view";
+import { twuServiceAreaToTitleCase } from "../opportunity/team-with-us/lib";
 
 export interface State {
   isVendorAccordionOpen: boolean;
@@ -185,8 +186,10 @@ const VendorHIW: component_.base.View = () => {
               following service areas:
             </p>
             <ul>
-              {ALL_SERVICE_AREAS.map(({ name }) => (
-                <li key={name}>{name}</li>
+              {ALL_SERVICE_AREAS.map((serviceArea) => (
+                <li key={serviceArea}>
+                  {twuServiceAreaToTitleCase(serviceArea)}
+                </li>
               ))}
             </ul>
             <p className="mb-0">

src/front-end/typescript/lib/pages/opportunity/team-with-us/lib/components/resources.tsx

@@ -33,6 +33,7 @@ import * as FormField from "front-end/lib/components/form-field";
 import { getNumberSelectValue } from "front-end/lib/pages/opportunity/team-with-us/lib/components/form";
 import { flatten } from "lodash";
 import SKILLS from "shared/lib/data/skills";
+import ALL_SERVICE_AREAS from "shared/lib/data/service-areas";
 
 interface Resource {
   serviceArea: Immutable<Select.State>;
@@ -89,11 +90,11 @@ function createResource(
    * @see {@link getSingleKeyValueOption}
    */
   const serviceArea: Select.Option | null = (() => {
-    const v = resource?.serviceArea ? resource.serviceArea : null;
+    const v = resource?.serviceArea;
     if (!v) {
       return null;
     }
-    return getSingleKeyValueOption(v as unknown as TWUServiceArea);
+    return getSingleKeyValueOption(v);
   })();
   const selectedTargetAllocationOption = resource?.targetAllocation
     ? {
@@ -113,7 +114,13 @@ function createResource(
     child: {
       value: serviceArea,
       id: `${idNamespace}-twu-resource-service-area`,
-      options: Select.objectToOptions(TWUServiceArea)
+      options: Select.objectToOptions(
+        ALL_SERVICE_AREAS.reduce<Record<string, string>>(
+          (acc, serviceArea) => ({ ...acc, [serviceArea]: serviceArea }),
+          {}
+        ),
+        twuServiceAreaToTitleCase
+      )
     }
   });
   const [targetAllocationState, targetAllocationCmds] = Select.init({

src/front-end/typescript/lib/pages/organization/edit/tab/twu-qualification.tsx

@@ -31,8 +31,10 @@ import { kebabCase } from "lodash";
 import { TWUServiceAreaRecord } from "shared/lib/resources/service-area";
 import { TWU_BC_BID_URL } from "front-end/config";
 import ALL_SERVICE_AREAS from "shared/lib/data/service-areas";
+import { TWUServiceArea } from "shared/lib/resources/opportunity/team-with-us";
+import { twuServiceAreaToTitleCase } from "front-end/lib/pages/opportunity/team-with-us/lib";
 
-type AvailableServiceArea = typeof ALL_SERVICE_AREAS[number];
+type AvailableServiceArea = { serviceArea: TWUServiceArea; name: string };
 
 interface ServiceArea extends AvailableServiceArea {
   checkbox: Immutable<Checkbox.State>;
@@ -66,7 +68,10 @@ export type Msg = component_.page.Msg<InnerMsg, Route>;
 function resetQualifiedServiceAreas(
   organizationServiceAreas: TWUServiceAreaRecord[]
 ) {
-  return ALL_SERVICE_AREAS.reduce<[ServiceArea[], component_.Cmd<Msg>[]]>(
+  return ALL_SERVICE_AREAS.map((serviceArea) => ({
+    serviceArea,
+    name: twuServiceAreaToTitleCase(serviceArea)
+  })).reduce<[ServiceArea[], component_.Cmd<Msg>[]]>(
     ([serviceAreas, serviceAreasCmds], serviceArea, index) => {
       const [checkboxState, checkboxCmds] = Checkbox.init({
         errors: [],

src/shared/lib/data/service-areas.ts

@@ -1,13 +1,10 @@
 import { TWUServiceArea } from "shared/lib/resources/opportunity/team-with-us";
 
 const ALL_SERVICE_AREAS = [
-  {
-    serviceArea: TWUServiceArea.FullStackDeveloper,
-    name: "Full Stack Developer"
-  },
-  { serviceArea: TWUServiceArea.DataProfessional, name: "Data Professional" },
-  { serviceArea: TWUServiceArea.AgileCoach, name: "Agile Coach" },
-  { serviceArea: TWUServiceArea.DevopsSpecialist, name: "DevOps Specialist" }
+  TWUServiceArea.FullStackDeveloper,
+  TWUServiceArea.DataProfessional,
+  TWUServiceArea.AgileCoach,
+  TWUServiceArea.DevopsSpecialist
 ];
 
 export default ALL_SERVICE_AREAS;