fix: do not autocomplete flows with incomplete steps

.changeset/silly-bears-teach.md

@@ -0,0 +1,6 @@
+---
+"@frigade/js": patch
+"@frigade/react": patch
+---
+
+Fixes an issue where checklists complete when finishing the last step

apps/smithy/src/stories/Checklist/Checklist.stories.tsx

@@ -64,7 +64,6 @@ export const Collapsible = {
       test: TestStep,
     },
     width: "500px",
-    forceMount: true,
     dismissible: true,
   },
 };

apps/smithy/src/stories/Checklist/ChecklistInteractionTests.stories.tsx

@@ -0,0 +1,74 @@
+import { Checklist, useFlow } from "@frigade/react";
+import { type Meta, type StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
+
+type ChecklistStory = StoryObj<typeof Checklist>;
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+const StoryMeta: Meta<typeof Checklist.Collapsible> = {
+  title: "Components/Checklist",
+  component: Checklist.Collapsible,
+};
+
+export default StoryMeta;
+
+export const InteractionTests: ChecklistStory = {
+  args: {
+    flowId: "flow_K2dmIlteW8eGbGoo",
+  },
+  decorators: [
+    (Story, { args }) => {
+      const { flow } = useFlow(args.flowId);
+
+      return (
+        <>
+          <Story {...args} />
+          <button
+            id="reset-flow"
+            onClick={() => {
+              flow?.restart();
+            }}
+            style={{ marginTop: "36px" }}
+          >
+            Reset Flow
+          </button>
+        </>
+      );
+    },
+  ],
+
+  play: async ({ step, canvasElement }) => {
+    await sleep(1000);
+    const canvas = within(canvasElement);
+    const checklistElement = document.querySelector(".fr-checklist");
+
+    await step("Test interactions", async () => {
+      // test that checklistElement is in the document
+      expect(checklistElement).toBeInTheDocument();
+
+      const lastHeader = canvas.getByText("Donec id diam lectus");
+      let checkboxes = document.querySelectorAll(".fr-field-radio-value");
+
+      // expectd lastCheckbox to not have any children
+      expect(checkboxes[checkboxes.length - 1]?.childNodes.length).toBe(0);
+      // click last header
+      await userEvent.click(lastHeader);
+      // Click the primary button that says "Testing"
+      await userEvent.click(canvas.getByText("Testing"));
+      await sleep(100);
+
+      checkboxes = document.querySelectorAll(".fr-field-radio-value");
+      // expect lastCheckbox to have a child (it is checked)
+      expect(
+        checkboxes[checkboxes.length - 1]?.childNodes.length
+      ).toBeGreaterThanOrEqual(1);
+      await sleep(1000);
+      expect(checklistElement).toBeInTheDocument();
+
+      await userEvent.click(canvas.getByText("Reset Flow"));
+    });
+  },
+};

packages/js-api/src/core/flow.ts

@@ -230,6 +230,11 @@ export class Flow extends Fetchable {
         }
 
         const isLastStep = this.getCurrentStepOrder() + 1 === this.getNumberOfAvailableSteps()
+        const isLastIncompleteStep =
+          Array.from(this.steps.values()).filter(
+            (step) => step.$state.visible && !step.$state.completed && !step.$state.skipped
+          ).length === 1
+
         if (optimistic) {
           const copy = clone(this.getGlobalState().flowStates[this.id])
 
@@ -249,15 +254,16 @@ export class Flow extends Fetchable {
               copy.$state.currentStepIndex = nextStepIndex
               copy.data.steps[nextStepIndex].$state.started = true
             }
-          } else {
+          }
+          if (isLastIncompleteStep) {
             copy.$state.completed = true
             copy.$state.visible = false
           }
 
           this.getGlobalState().flowStates[this.id] = copy
           this.resyncState()
 
-          if (isLastStep) {
+          if (isLastIncompleteStep) {
             this.optimisticallyMarkFlowCompleted()
           }
         }
@@ -267,7 +273,7 @@ export class Flow extends Fetchable {
           properties,
           thisStep.id
         )
-        if (isLastStep) {
+        if (isLastIncompleteStep) {
           await this.sendFlowStateToAPI(COMPLETED_FLOW, properties)
         }
       }