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

machine.js

const CHILD_STATES = {
  initial: 'initial',
  validate: 'validate',
  success: 'success',
  failure: 'failure',
};

const createChildMachine = (params, event) =>
  createMachine({
    id: 'childMachine',
    initial: CHILD_STATES.initial,
    context: { params, event, message: '' },
    states: {
      [CHILD_STATES.initial]: {
        always: { target: CHILD_STATES.validate },
      },
      [CHILD_STATES.validate]: {
        always: [
          { target: CHILD_STATES.failure, cond: 'titleIsBlank', actions: assign({ message: 'title can\'t be blank!' }) },
          { target: CHILD_STATES.success }
        ]
      },
      [CHILD_STATES.success]: {
        entry: sendParent(({ message }) => ({ type: RESPONSE_EVENTS.SUCCESS, message })),
      },
      [CHILD_STATES.failure]: {
        entry: sendParent(({ message }) => ({ type: RESPONSE_EVENTS.FAILURE, message })),
      },
    }
  }, {
    guards: {
      titleIsBlank: ({ params }) => !!params.title
    }
  });

// ============================================================================================================

const RESPONSE_EVENTS = {
  ABORT: 'ABORT',
  SUCCESS: 'SUCCESS',
  FAILURE: 'FAILURE',
};

const EVENTS = {
  SAVE: 'SAVE',
  SHARE: 'SHARE',
  SHARE_TO_CRM: 'SHARE_TO_CRM',
  COMPLIANCE: 'COMPLIANCE',
};

const STATES = {
  initial: 'initial',
  save: 'save',
  share: 'share',
  shareToCRM: 'shareToCRM',
  compliance: 'compliance',
  successCompliance: 'successCompliance',
};

const createMainMachine = (params) =>
  createMachine({
    id: 'emailDesignerMachine',
    initial: STATES.initial,
    context: { params, childMachineRef: null },
    states: {
      [STATES.initial]: {
        on: {
          [EVENTS.COMPLIANCE]: { target: STATES.compliance },
          [EVENTS.SHARE_TO_CRM]: { target: STATES.shareToCRM },
          [EVENTS.SHARE]: { target: STATES.share },
          [EVENTS.SAVE]: { target: STATES.save },
        }
      },
      [STATES.save]: { entry: 'spawnChildMachineRef', exit: 'stopChildMachine' },
      [STATES.share]: { entry: 'spawnChildMachineRef', exit: 'stopChildMachine' },
      [STATES.shareToCRM]: { entry: 'spawnChildMachineRef', exit: 'stopChildMachine' },
      [STATES.compliance]: {
        entry: 'spawnChildMachineRef',
        exit: 'stopChildMachine',
        on: {
          [RESPONSE_EVENTS.SUCCESS]: { target: STATES.successCompliance, actions: 'successMessage' }
        }
      },
      [STATES.successCompliance]: {},
    },
    on: {
      [RESPONSE_EVENTS.ABORT]: { target: STATES.initial, actions: 'successMessage' },
      [RESPONSE_EVENTS.SUCCESS]: { target: STATES.initial, actions: 'successMessage' },
      [RESPONSE_EVENTS.FAILURE]: { target: STATES.initial, actions: 'errorMessage' },
    },
  }, {
    actions: {
      spawnChildMachineRef: assign({
        childMachineRef: (context, event) => spawn(createChildMachine(context.params, event))
      }),
      stopChildMachine: (context) => context.childMachineRef.stop(),
      successMessage: (context, { message }) => {
        if (message) console.log(message);
      },
      errorMessage: (context, { message }) => {
        if (message) console.error(message);
      },
    }
  });