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

machine.js

const YapsMachine = Machine({
  id: 'yap',
  initial: 'unknown',
  context: {
    Yap: {
      id: 123,
      status: {
        description: 'New'
      }
    },
    User: {
      id: 456,
    },
  },
  states: {
    unknown: {
      id: 'unknown',
      on: {
        '': [
          { cond: 'isNew', target: '#new' },
          { cond: 'isShown', target: '#shown' },
          { cond: 'isRejected', target: '#rejected' },
          { cond: 'isClosed', target: '#closed' },
          { cond: 'isSold', target: '#sold' },
          { target: '#end' },
        ],
      },
    },
    new: {
      id: 'new',
      initial: 'creditCheck',
      states: {
        creditCheck: {
          on: {
            '': [
              { 
                cond: 'hasCredits', 
                target: 'idle',
              },
              { target: 'noCredits' },
            ],
          },
        },
        idle: {
          on: {
            'SHOW': [
              {
                cond: 'canShow',
                target: 'shown',
              },
            ],
            'REJECT': [
              { 
                cond: 'canReject',
                target: 'rejected',
              },
              //{ target: '#new' },
            ],
            'SOLD': [
              {
                cond: 'canSell',
                target: 'sold',
              },
              //{ target: '#new' },
            ],
          },
        },
        shown: {
          initial: 'pending',
          states: {
            pending: {
              on: {
                'CONFIRM': 'loading',
                'CANCEL': '#new',
              },
            },
            loading: {
              invoke: {
                id: 'showYap',
                src: 'invokeShowYap',
                onDone: {
                  target: 'success',
                  actions: [
                    'assignYap',
                    'sendUpdate',
                  ],
                },
                onError: {
                  target: 'failure',
                },
              },
            },
            success: {
              on: {
               '': '#shown',
              }
            },
            failure: {
              // show error and retry
              entry: () => alert('fail'),
              on: {
                RETRY: 'loading',
                CANCEL: '#new',
              }
            },
          },
        },
        rejected: {
          initial: 'pending',
          states: {
            pending: {
              on: {
                'CONFIRM': 'loading',
                'CANCEL': '#new',
              },
            },
            loading: {
              invoke: {
                id: 'rejectYap',
                src: 'invokeRejectYap',
                onDone: {
                  target: 'success',
                  actions: [
                    'assignYap', 
                    'sendUpdate',
                  ],
                },
                onError: {
                  target: 'failure',
                },
              },
            },
            success: {
              on: {
                '': '#rejected',
              }
            },
            failure: {
              // show error and retry
              entry: () => alert('fail'),
              on: {
                RETRY: 'loading',
                CANCEL: '#new',
              }
            },
          },
        },
        sold: {
          initial: 'pending',
          states: {
            pending: {
              on: {
                'CONFIRM': 'loading',
                'CANCEL': '#new',
              },
            },
            loading: {
              invoke: {
                id: 'sellYap',
                src: 'invokeSellYap',
                onDone: {
                  target: 'success',
                  actions: [
                    'assignYap', 
                    'sendUpdate',
                  ],
                },
                onError: {
                  target: 'failure',
                },
              },
            },
            success: {
              on: {
                '': '#sold',
              }
            },
            failure: {
              // show error and retry
              entry: () => alert('fail'),
              on: {
                RETRY: 'loading',
                CANCEL: '#new',
              }
            },
          },
        },
        noCredits: {
          entry() {
            console.log('noCredits');
          },
          on: {
            'REJECT': [
              { 
                cond: 'canReject',
                target: 'rejected',
              },
              //{ target: '#new' },
            ],
            'SOLD': [
              {
                cond: 'canSell',
                target: 'sold',
              },
              //{ target: '#new' },
            ],
          }
        },
      },
    },
    
    shown: {
      id: 'shown',
      initial: 'idle',
      invoke: {
        id: 'ChatMachine',
        src: 'invokeChatMachine'
      },
      states: {
        idle: {
          on: {
            'CLOSE': [
              {
                cond: 'canClose',
                target: 'closed',
              },
            ],
            'SOLD': [
              {
                cond: 'canSell',
                target: 'sold',
              },
              //{ target: '#new' },
            ],
          },
        },
        closed: {
          initial: 'pending',
          states: {
            pending: {
              on: {
                'CONFIRM': 'loading',
                'CANCEL': '#shown',
              },
            },
            loading: {
              invoke: {
                id: 'closeShownYap',
                src: 'invokeCloseYap',
                onDone: {
                  target: 'success',
                  actions: [
                    'assignYap', 
                    'sendUpdate',
                  ],
                },
                onError: {
                  target: 'failure',
                },
              },
            },
            success: {
              on: {
                '': '#closed',
              }
            },
            failure: {
              // show error and retry
              entry: () => alert('fail'),
              on: {
                RETRY: 'loading',
                CANCEL: '#shown',
              }
            },
          },
        },
        
        sold: {
          initial: 'pending',
          states: {
            pending: {
              on: {
                'CONFIRM': 'loading',
                'CANCEL': '#shown',
              },
            },
            loading: {
              invoke: {
                id: 'sellShownYap',
                src: 'invokeSellYap',
                onDone: {
                  target: 'success',
                  actions: [
                    'assignYap', 
                    'sendUpdate',
                  ],
                },
                onError: {
                  target: 'failure',
                },
              },
            },
            success: {
              on: {
                '': '#rejected',
              }
            },
            failure: {
              // show error and retry
              entry: () => alert('fail'),
              on: {
                RETRY: 'loading',
                CANCEL: '#shown',
              }
            },
          },
        },
      },
    },
    
    
    rejected: {
      id: 'rejected',
      on: {
        '': '#end',
      }
    },
    
    sold: {
      id: 'sold',
      on: {
        '': '#end',
      }
    },
    
    closed: {
      id: 'closed',
      on: {
        '': '#end',
      }
    },
    
    
    end: {
      id: 'end',
      type: 'final',
    }
  },
  
  
  
}, {
  actions: {
    assignYap: assign({ 
      Yap: (context, { data }) => data,
    }),
    sendUpdate: console.log('sendUpdate'),
  },
  guards: {
    isNew: ({ Yap }) => true,
    isShown: ({ Yap }) => false,
    isRejected: ({ Yap }) => false,
    isClosed: ({ Yap }) => false,
    isSold: ({ Yap }) => false,
    
    canReject: ({ Yap }) => true,
    canSell: ({ Yap }) => true,
    canClose: ({ Yap }) => true,
    canShow: ({ Yap }) => {
      // also check credits
      return true;
    },
    
    hasCredits: () => {
      return true;
    },
  },
  services: {
    invokeShowYap: ({ Yap }) => Yap.show(),
    invokeRejectYap: ({ Yap }) => Yap.reject(),
    invokeSellYap: ({ Yap }) => Yap.sell(),
    invokeCloseYap: ({ Yap }) => Yap.close(),
    invokeChatMachine: (context, event) => {
      console.log('invokeChatMachine');
    },
  },
});