Generated by XState Viz: https://xstate.js.org/viz

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const profileMachine = Machine({
  id: 'profile',
  initial: 'unknown',
  context: {
    data: {},
    // assigned from parent
  },
  states: {
    unknown: {
      on: {
        'OPEN': [
          { target: 'edit', cond: ctx => ctx.completed },
          { target: 'incomplete', cond: ctx => !ctx.completed }
        ],
      },
    },
    edit: {
      on: {
        UPDATE: [{
          action: sendParent(ctx => ({ type: 'PROFILE.UPDATE', profile: ctx.data })),
        }
          
        ],
        CLOSE: [{
          action: sendParent(ctx => ({ type: 'PROFILE.INCOMPLETE', profile: ctx.data })),
        }],
      },
    },
    incomplete: {
      on: {
        COMPLETE: [{
          action: sendParent(ctx => ({ type: 'PROFILE.COMPLETE', profile: ctx.data }))
        }
        ],
        CLOSE: [{
          action: sendParent(ctx => ({ type: 'PROFILE.INCOMPLETE', profile: ctx.data }))
        }
        ],
      },
    },
  }
})

const infoMachine = Machine({
  id: 'info',
  initial: 'unknown',
  context: {
    data: {},
    // assigned from parent
  },
  states: {
    unknown: {
      on: {
        '': [
          { target: 'edit', cond: ctx => ctx.completed },
          { target: 'incomplete', cond: ctx => !ctx.completed },
        ]
      }
    },
    edit: {
      on: {
        UPDATE: [{
          cond: ctx => ctx.completed,
          actions: sendParent(ctx => ({ type: 'INFO.UPDATE', info: ctx.data }))
        }],
        CLOSE: [{
          actions: sendParent(ctx => ({ type: 'CONTINUE' })),
          cond: ctx => ctx.completed
        }],
      },
    },
    incomplete: {
      on: {
        COMPLETE: [sendParent(ctx => ({ type: 'INFO.COMPLETE', info: ctx.data }))],
        NEXT: [{cond: ctx => ctx.completed}],
      },
    },
  },
});

const fetchMachine = Machine({
  id: 'registration',
  initial: 'unknown',
  context: {
    hasStarted: false,
    isProfileCompleted: false,
    isInfoCompleted: false,
    isPackagesAndPaymentCompleted: false,
  },
  states: {
    unknown: {
      on: {
        '': [
          {
            target: 'init',
            cond: ctx => !ctx.hasStarted
          },
          {
            target: 'info',
            cond: ctx => !ctx.isInfoCompleted
          },
          {
            target: 'packagesAndPayment',
            cond: ctx => !ctx.isPackagesAndPaymentCompleted
          },
        ]
      }
    },
    init: {
      on: {
        CONTINUE: {
          actions: [
            assign({ hasStarted: true })
          ],
          target: 'info',
        },
      },
    },
    info: {
      invoke: {
        id: 'info',
        src: infoMachine,
        data: {
          completed: ctx => ctx.isInfoCompleted,
        },
      },
      on: {
        OPEN_PROFILE: 'profile',
        CONTINUE: [{
          target: "packagesAndPayment",
          cond: ctx => ctx.isInfoCompleted,
        }],
        'INFO.UPDATE': [{
          actions: [
            assign({ isInfoCompleted: true }),
            send('CONTINUE'),
          ],
          cond: ctx => ctx.isInfoCompleted
        }],
        'INFO.COMPLETE': [{
          actions: [
            assign({ isInfoCompleted: true }),
            send('CONTINUE'),
          ],
          cond: ctx => !ctx.isInfoCompleted
        }],
      },
    },
    profile: {
      invoke: {
        id: 'profile',
        src: profileMachine,
        data: {
          completed: ctx => ctx.isProfileCompleted,
        },
      },
      entry: send('OPEN', { to: 'profile' }),
      on: {
        'PROFILE.COMPLETE': [{
          cond: ctx => !ctx.isProfileCompleted,
          actions: [
            assign({ isProfileCompleted: true }),
            send('CONTINUE'),
          ],
        }],
        'PROFILE.INCOMPLETE': [{
          cond: ctx => ctx.isProfileCompleted,
          actions: [
            assign({ isProfileCompleted: false }),
            send('CONTINUE'),
          ],
        }],
        CONTINUE: [{
          target: "info",
          cond: ctx => (
            ctx.hasStarted &&
            !ctx.isInfoCompleted
          )
        },{
          target: "packagesAndPayment",
          cond: ctx => (
            ctx.isInfoCompleted &&
            !ctx.isPackagesAndPaymentCompleted
          )
        }],
      },
    },
    packagesAndPayment: {
      on: {
        PROFILE: "profile",
        EDIT_INFO: "info",
        COMPLETE: {
          actions: [
            assign({ isPackagesAndPaymentCompleted: true }),
            send('CONTINUE')
          ],
          cond: ctx => ctx.isProfileCompleted,
        },
        CONTINUE: {
          target: 'paying',
          cond: ctx => (
            ctx.isProfileCompleted &&
            ctx.isPackagesAndPaymentCompleted
          )
        }
      },
    },
    paying: {
      on: {
        FAILED: 'paymentFailed',
        SUCCESS: 'confirmation',
      }
    },

    paymentFailed: {
      on: {
        RETRY: [{
          target: 'packagesAndPayment',
          actions: [assign({ isPackagesAndPaymentCompleted: false })],
        }],
      }
    },

    confirmation: {
      type: 'final',
    },
  }
});