Terms unticked on the review page

A signup has a terms step and a review step. You cannot leave the terms step without ticking the box. The review page shows the checkbox again, so users can change their mind, but Submit does not check it: tick the box, go to review, untick it there, and submit. A test that the terms step blocks without the box ticked passes.

src/signup.ts

import { assign, setup } from 'xstate';

export const signup = setup({
  types: {
    context: {} as { accepted: boolean },
    events: {} as { type: 'TOGGLE' } | { type: 'NEXT' } | { type: 'SUBMIT' },
  },
  actions: { toggle: assign({ accepted: ({ context }) => !context.accepted }) },
}).createMachine({
  initial: 'terms',
  context: { accepted: false },
  states: {
    terms: {
      on: {
        TOGGLE: { actions: 'toggle' },
        NEXT: { target: 'review', guard: ({ context }) => context.accepted },
      },
    },
    // The review page shows the checkbox again, so users can change their mind.
    review: {
      on: {
        TOGGLE: { actions: 'toggle' },
        SUBMIT: 'submitted',
      },
    },
    submitted: { type: 'final' },
  },
});

See how XState finds and fixes it.