fix: sync late validation with domain checkboxes

apps/builder/app/builder/features/publish/domain-checkbox.tsx

@@ -1,4 +1,5 @@
 import { useStore } from "@nanostores/react";
+import { useEffect, useState } from "react";
 import {
   Flex,
   Tooltip,
@@ -49,6 +50,42 @@ export const DomainCheckbox = (props: DomainCheckboxProps) => {
   const { allowStagingPublish, canPublishToStagingOnly } =
     useStore($permissions);
   const project = useStore($project);
+  const [selection, setSelection] = useState<{
+    buildId: string | undefined;
+    validatedDomains?: readonly string[];
+    checked: boolean;
+  }>({
+    buildId: props.buildId,
+    validatedDomains: props.validatedDomains,
+    checked:
+      props.validatedDomains?.includes(props.domain) ??
+      props.defaultChecked ??
+      false,
+  });
+  const restoredChecked =
+    props.validatedDomains?.includes(props.domain) ??
+    props.defaultChecked ??
+    false;
+  const hasNewValidation =
+    props.validatedDomains !== undefined &&
+    selection.validatedDomains !== props.validatedDomains;
+  const hasNewBuild = selection.buildId !== props.buildId;
+
+  useEffect(() => {
+    if (hasNewValidation || hasNewBuild) {
+      setSelection({
+        buildId: props.buildId,
+        validatedDomains: props.validatedDomains,
+        checked: restoredChecked,
+      });
+    }
+  }, [
+    hasNewValidation,
+    hasNewBuild,
+    props.validatedDomains,
+    props.buildId,
+    restoredChecked,
+  ]);
 
   if (project === undefined) {
     return;
@@ -98,9 +135,11 @@ export const DomainCheckbox = (props: DomainCheckboxProps) => {
     canPublishToStagingOnly,
     isCustomDomain: props.isCustomDomain,
   });
-  const defaultChecked = isRestricted
+  const checked = isRestricted
     ? false
-    : (props.validatedDomains?.includes(props.domain) ?? props.defaultChecked);
+    : hasNewValidation || hasNewBuild
+      ? restoredChecked
+      : selection.checked;
   const disabled = isRestricted ? true : props.disabled;
 
   const hideDomainCheckbox =
@@ -114,7 +153,14 @@ export const DomainCheckbox = (props: DomainCheckboxProps) => {
         <Checkbox
           disabled={disabled}
           key={props.buildId ?? "-"}
-          defaultChecked={hideDomainCheckbox || defaultChecked}
+          checked={hideDomainCheckbox || checked}
+          onCheckedChange={(value) =>
+            setSelection({
+              buildId: props.buildId,
+              validatedDomains: props.validatedDomains,
+              checked: value === true,
+            })
+          }
           css={{ pointerEvents: "all" }}
           name={domainToPublishName}
           value={props.domain}

apps/builder/app/builder/features/publish/publish-progress.test.tsx

@@ -1040,35 +1040,42 @@ test("reopening shows the domains used by the validation report and submits only
     domainsVirtual: [{ status: "ACTIVE", verified: true }],
   } as Project);
   root = createRoot(container);
-  act(() =>
-    root?.render(
-      <TooltipProvider>
-        <form>
-          <DomainCheckbox
-            domain="staging.example"
-            buildId={undefined}
-            defaultChecked
-            validatedDomains={validation!.domains}
-          />
-          <DomainCheckbox
-            domain="custom.example"
-            buildId={undefined}
-            defaultChecked={false}
-            validatedDomains={validation!.domains}
-          />
-        </form>
-      </TooltipProvider>
-    )
-  );
+  const renderCheckboxes = (validatedDomains?: string[]) =>
+    act(() =>
+      root?.render(
+        <TooltipProvider>
+          <form>
+            <DomainCheckbox
+              domain="staging.example"
+              buildId={undefined}
+              defaultChecked
+              validatedDomains={validatedDomains}
+            />
+            <DomainCheckbox
+              domain="custom.example"
+              buildId={undefined}
+              defaultChecked={false}
+              validatedDomains={validatedDomains}
+            />
+          </form>
+        </TooltipProvider>
+      )
+    );
+  renderCheckboxes();
 
   const form = container.querySelector("form")!;
   const [staging, custom] = form.querySelectorAll('[role="checkbox"]');
+  expect(staging.getAttribute("aria-checked")).toBe("true");
+  expect(custom.getAttribute("aria-checked")).toBe("false");
+
+  renderCheckboxes(validation!.domains);
   expect(staging.getAttribute("aria-checked")).toBe("false");
   expect(custom.getAttribute("aria-checked")).toBe("true");
   expect([...new FormData(form).getAll(domainToPublishName)]).toEqual([
     "custom.example",
   ]);
   act(() => (custom as HTMLButtonElement).click());
+  renderCheckboxes();
   expect(custom.getAttribute("aria-checked")).toBe("false");
   expect([...new FormData(form).getAll(domainToPublishName)]).toEqual([]);
 });