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

machine.js

Machine({
  id: 'getPlate',
  initial: 'show',
  context: {
    parking_record: null,
    plate: null,
    lot_code: null,
    error: null,
    error_msg: null
  },
  states: {
    show: {
      initial: 'show_title',
      states: {
        show_title: {
          after: {
            500: { target: 'show_search_field' }
          }
        },
        show_search_field: {
          after: {
            500: { target: 'show_next_button' }
          }
        },
        show_next_button: {
          after: {
            500: { target: '#idle' }
          }
        }
      }
    },
    interaction: {
      initial: 'idle',
      states: {
        idle: {
          id: 'idle',
          on: {
            SUBMIT: [
              {
                cond: 'plateNotValid',
                target: 'plate_error'
              },
              {
                target: 'loading'
              }
            ]
          },
          meta: {
            message: '初始狀態'
          },
          entry: (context, event) => {
            context.error = null
            context.error_msg = null
          }
        },
        plate_error: {
          on: {
            SUBMIT: [
              {
                cond: 'plateNotValid',
                target: 'plate_error'
              },
              {
                target: 'loading'
              }
            ],
            CLEAR: 'idle'
          }
        },
        loading: {
          invoke: {
            id: 'getParkingRecord',
            src: (context, event) => getParkingRecord(context.plate, context.lot_code),
            onDone: [
              { target: 'success.can_leave.free_leave', cond: 'freeLeaveValid' },
              { target: 'success.can_leave.paid_success', cond: 'paidSuccessValid' },
              { target: 'success.setting_invoice', cond: 'parkingRecordValid' }
            ],
            onError: {
              target: 'error',
              actions: (context, event) => {
                if (event.data.type === 'Not Found') {
                  context.error_msg = '查無此車牌，請至繳費機查詢或洽詢服務人員'
                } else {
                  context.error_msg = '查詢出錯，請至繳費機查詢或洽詢服務人員'
                }
              }
            }
          },
          meta: {
            message: '載入中...'
          }
        },
        success: {
          on: {
            SUBMIT: [
              {
                cond: 'plateNotValid',
                target: 'plate_error'
              },
              {
                target: 'loading'
              }
            ]
          },
          initial: 'setting_invoice',
          states: {
            setting_invoice: {
              after: {
                100: { target: '#leave' }
              }
            },
            can_leave: {
              initial: 'free_leave',
              states: {
                paid_success: {
                  type: 'final',
                  meta: {
                    message: '已成功繳費'
                  }
                },
                free_leave: {
                  type: 'final',
                  meta: {
                    message: '無需繳費可直接出場'
                  }
                }
              }
            }
          }
        },
        error: {
          on: {
            SUBMIT: [
              {
                cond: 'plateNotValid',
                target: 'plate_error'
              },
              {
                target: 'loading'
              }
            ],
            CLEAR: 'idle'
          }
        }
      }
    },
    leave: {
      id: 'leave',
      initial: 'hide',
      states: {
        hide: {
          after: {
            500: { target: 'destroy' }
          }
        },
        destroy: {
          type: 'final'
        }
      }
    }
  }
}, {
  guards: {
    plateNotValid: (context, event, { cond }) => {
      const regex = new RegExp(`^[a-zA-Z0-9-]*$`, '')
      if (!context.plate) {
        context.error_msg = ''
        return true
      }
      if (regex.exec(context.plate) !== null) {
        return false
      }
      context.error_msg = '車牌格式錯誤'
      return true
    },
    parkingRecordValid: (context, event, { cond }) => {
      if (event.data && !event.data.state.includes('can_exit')) {
        context.parking_record = event.data
        return true
      }
      return false
    },
    freeLeaveValid: (context, event, { cond }) => {
      if (event.data && !event.data.state === 'can_exit') {
        return true
      }
      return false
    },
    paidSuccessValid: (context, event, { cond }) => {
      if (event.data && !event.data.state === 'can_exit_free') {
        return true
      }
      return false
    }
  }
})