chore: Show optional broker scan info fields depending on experiment variant

config/nimbus.yaml

@@ -29,7 +29,7 @@ features:
       variant:
         description: The optional fields to show
         type: OptionalBrokerScanInfoFields
-        default: middleName
+        default: none
     defaults:
       - channel: local
         value: {

src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/EnterInfo.module.scss

@@ -84,8 +84,9 @@
   padding: $spacing-lg 0;
 
   @media screen and (min-width: $screen-lg) {
-    // The child items in the grid are input fields. Items marked as “optional”
+    // The child items in the grid are input fields. If items marked as
-    // are only shown if the experiment `welcome-scan-optional-info` is enabled.
+    // “optional” are shown depends on the enabled variants in the
+    // `welcome-scan-optional-info` experiment.
     // 1. First name
     // 2. Middle name (optional)
     // 3. Last name
@@ -94,13 +95,18 @@
     // 6. City and state
     & > :nth-child(odd) {
       grid-column: 1 / 4;
+    }
 
+    &:has(label[for="name_suffix"]) {
       // The field “last name” is only in an “odd” position if the experiment
       // `welcome-scan-optional-info` is enabled.
-      &:has(> label[for="last_name"]) {
+      & > :nth-child(odd) {
-        grid-column: 1 / 5;
+        &:has(> label[for="last_name"]) {
+          grid-column: 1 / 5;
+        }
       }
     }
+
     & > :nth-child(even) {
       grid-column: 4 / 7;
 

src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/EnterInfo.tsx

@@ -32,6 +32,7 @@ import styles from "./EnterInfo.module.scss";
 import { TelemetryButton } from "../../../../../components/client/TelemetryButton";
 import { redirect } from "next/navigation";
 import * as Sentry from "@sentry/nextjs";
+import { ExperimentData } from "../../../../../../telemetry/generated/nimbus/experiments";
 
 // Not covered by tests; mostly side-effects. See test-coverage.md#mock-heavy
 /* c8 ignore start */
@@ -62,7 +63,7 @@ export type Props = {
   user: Session["user"];
   skipInitialStep: boolean;
   previousRoute: string | null;
-  optionalInfoIsEnabled: boolean;
+  experimentData: ExperimentData;
 };
 
 export const EnterInfo = ({
@@ -70,7 +71,7 @@ export const EnterInfo = ({
   onGoBack,
   skipInitialStep,
   previousRoute,
-  optionalInfoIsEnabled,
+  experimentData,
 }: Props) => {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
@@ -193,7 +194,19 @@ export const EnterInfo = ({
       isRequired: true,
       onChange: setLocation,
     },
-  ].filter((userDetail) => userDetail.isRequired || optionalInfoIsEnabled);
+  ].filter((userDetail) => {
+    const optionalInfoExperimentData =
+      experimentData["welcome-scan-optional-info"];
+    const showOptionalInfo =
+      optionalInfoExperimentData.enabled &&
+      ((userDetail.key === "middle_name" &&
+        (optionalInfoExperimentData.variant === "middleName" ||
+          optionalInfoExperimentData.variant === "suffixAndMiddleName")) ||
+        (userDetail.key === "name_suffix" &&
+          (optionalInfoExperimentData.variant === "suffix" ||
+            optionalInfoExperimentData.variant === "suffixAndMiddleName")));
+    return userDetail.isRequired || showOptionalInfo;
+  });
 
   const getInvalidFields = () =>
     userDetailsData.filter(({ isValid }) => !isValid).map(({ key }) => key);

src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/Onboarding.stories.tsx

@@ -26,6 +26,7 @@ export const Onboarding: Story = {
         ...defaultExperimentData,
         "welcome-scan-optional-info": {
           enabled: true,
+          variant: "suffixAndMiddleName",
         },
       }}
     />

src/app/(proper_react)/(redesign)/(authenticated)/user/welcome/View.tsx

@@ -46,8 +46,6 @@ export const View = ({
   const [currentStep, setCurrentStep] = useState<StepId>(stepId);
   const router = useRouter();
   const recordTelemetry = useTelemetry();
-  const optionalInfoIsEnabled =
-    experimentData["welcome-scan-optional-info"].enabled;
 
   useEffect(() => {
     let pageName = "welcome";
@@ -89,7 +87,7 @@ export const View = ({
             setCurrentStep("getStarted");
           }
         }}
-        optionalInfoIsEnabled={optionalInfoIsEnabled}
+        experimentData={experimentData}
       />
     ) : (
       <GetStarted

src/app/api/v1/user/welcome-scan/create/route.ts

@@ -94,18 +94,24 @@ export async function POST(
     locale: getLocale(getL10n()),
     previewMode: searchParams.get("nimbus_web_preview") === "true",
   });
-  const optionalInfoIsEnabled =
+  const optionalInfoExperimentData =
-    experimentData["welcome-scan-optional-info"].enabled;
+    experimentData["welcome-scan-optional-info"];
 
   const profileData: CreateProfileRequest = {
     first_name: firstName,
     last_name: lastName,
     addresses: [{ city, state }],
     birth_date: dateOfBirth,
-    ...(optionalInfoIsEnabled && {
+    ...(optionalInfoExperimentData.enabled &&
-      middle_name: middleName,
+      (optionalInfoExperimentData.variant === "middleName" ||
-      name_suffix: nameSuffix,
+        optionalInfoExperimentData.variant === "suffixAndMiddleName") && {
-    }),
+        middle_name: middleName,
+      }),
+    ...(optionalInfoExperimentData.enabled &&
+      (optionalInfoExperimentData.variant === "suffix" ||
+        optionalInfoExperimentData.variant === "suffixAndMiddleName") && {
+        name_suffix: nameSuffix,
+      }),
   };
 
   if (typeof session?.user?.subscriber.fxa_uid === "string") {