foo.diff

diff --git a/cloud/dashboard-web/src/enrollment/confirmDetails.tsx b/cloud/dashboard-web/src/enrollment/confirmDetails.tsx
index fe81d5678..a44e35041 100644
--- a/cloud/dashboard-web/src/enrollment/confirmDetails.tsx
+++ b/cloud/dashboard-web/src/enrollment/confirmDetails.tsx
@@ -1,5 +1,5 @@
 import { H1, H3, SubHeader } from "@/theme/typography";
-import { useForm } from "react-hook-form";
+import { useForm, UseFormSetValue, UseFormWatch } from "react-hook-form";
 import { Input, MonthDayInput } from "../component/input/input";
 import {
   EnrollmentType,
@@ -328,58 +328,7 @@ const ConfirmDetailsForm = () => {
                     />
                   </Grid>
                   {form.autoSubmit && (
-                    <>
-                      <Grid xs={12}>
-                        <RadioGroup
-                          value={
-                            watch("enrollmentType") === EnrollmentType.MOVING
-                              ? "moving"
-                              : "switching"
-                          }
-                          direction="row"
-                          onChange={(value) =>
-                            setValue(
-                              "enrollmentType",
-                              value === "moving"
-                                ? EnrollmentType.MOVING
-                                : EnrollmentType.SWITCHING,
-                            )
-                          }
-                        >
-                          <Grid xs={12} sm={6}>
-                            <Radio
-                              data-test="switching-button"
-                              value="switching"
-                            >
-                              I am switching providers
-                            </Radio>
-                          </Grid>
-
-                          <Grid xs={12} sm={6}>
-                            <Radio data-test="moving-button" value="moving">
-                              I am moving in
-                            </Radio>
-                          </Grid>
-                        </RadioGroup>
-                      </Grid>
-                      <Grid xs={12}>
-                        {watch("enrollmentType") === EnrollmentType.MOVING && (
-                          <Typography variant="bodySmall">
-                            {/* REP Requirement #10 */}
-                            {moveInLanguage}
-                          </Typography>
-                        )}
-                      </Grid>
-                      <Grid xs={12} marginTop={1} marginBottom={1}>
-                        <DatePicker
-                          selected={watch("serviceStart")}
-                          onChange={(date: Date) =>
-                            date && setValue("serviceStart", date)
-                          }
-                          allowedDates={allowedDates}
-                        ></DatePicker>
-                      </Grid>
-                    </>
+                    <AutosubmitFields watch={watch} setValue={setValue}></AutosubmitFields>
                   )}
 
                   {/* REP Requirement #3 */}
@@ -432,4 +381,61 @@ const ConfirmDetailsForm = () => {
   );
 };
 
+function AutosubmitFields({watch, setValue}: {watch: UseFormWatch<IConfirmDetailsForm>, setValue: UseFormSetValue<IConfirmDetailsForm>}) {
+  return (
+    <>
+      <Grid xs={12}>
+        <RadioGroup
+          value={
+            watch("enrollmentType") === EnrollmentType.MOVING
+              ? "moving"
+              : "switching"
+          }
+          direction="row"
+          onChange={(value) =>
+            setValue(
+              "enrollmentType",
+              value === "moving"
+                ? EnrollmentType.MOVING
+                : EnrollmentType.SWITCHING,
+            )
+          }
+        >
+          <Grid xs={12} sm={6}>
+            <Radio
+              data-test="switching-button"
+              value="switching"
+            >
+              I am switching providers
+            </Radio>
+          </Grid>
+
+          <Grid xs={12} sm={6}>
+            <Radio data-test="moving-button" value="moving">
+              I am moving in
+            </Radio>
+          </Grid>
+        </RadioGroup>
+      </Grid>
+      <Grid xs={12}>
+        {watch("enrollmentType") === EnrollmentType.MOVING && (
+          <Typography variant="bodySmall">
+            {/* REP Requirement #10 */}
+            {moveInLanguage}
+          </Typography>
+        )}
+      </Grid>
+      <Grid xs={12} marginTop={1} marginBottom={1}>
+        <DatePicker
+          selected={watch("serviceStart")}
+          onChange={(date: Date) =>
+            date && setValue("serviceStart", date)
+          }
+          allowedDates={allowedDates}
+        ></DatePicker>
+      </Grid>
+    </>
+  );
+}
+
 export { ConfirmDetailsForm, allowedDates };