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

machine.js

Machine({
  id: 'payment',
  initial: 'show',
  context: {
    parking_record: null,
    plate: null,
    lot_code: null,
    error: null,
    error_msg: null
  },
  states: {
    show: {
      after: {
        500: {
          target: 'interaction'
        }
      }
    },
    interaction: {
      initial: 'loading',
      states: {
        loading: {
          id: 'loading',
          invoke: {
            id: 'getParkingRecord',
            src: (context, event) => getParkingRecord(context.plate, context.lot_code),
            onDone: {
              target: 'blank'
            },
            onError: {
              target: 'error'
            }
          }
        },
        blank: {
          id: 'blank',
          on: {
            CLICK_SCAN: 'scanning',
            CLICK_PAYMENT: 'payment'
          }
        },
        error: {
          on: {
            CLICK_RETRY: 'loading'
          }
        },
        scanning: {
          initial: 'inital',
          states: {
            inital: {
              states: {
                loading: {
                  invoke: {
                    id: 'initScanner',
                    src: 'initScanner',
                    onDone: {
                      target: '#scanningBlank',
                      internal: false
                    },
                    onError: {
                      target: 'error'
                    }
                  }
                },
                error: {
                  RETRY: '.loading'
                }
              }
            },
            blank: {
              id: 'scanningBlank',
              on: {
                GET_CODE: 'decode_qrcode',
                CLICK_DONE: '#loading'
              }
            },
            decode_qrcode: {
              invoke: {
                id: 'decodeQRCode',
                src: 'decodeQRCode',
                onDone: {
                  target: 'postDiscount'
                },
                onError: {
                  target: 'error.illegal_qr_code'
                }
              }
            },
            postDiscount: {
              invoke: {
                id: 'postDiscount',
                src: 'postDiscount',
                onDone: {
                  target: '#scanningBlank',
                  internal: false
                },
                onError: {
                  target: 'error.illegal_discount'
                }
              }
            },
            error: {
              on: {
                CLICK_DONE: 'blank'
              },
              states: {
                illegal_qr_code: {

                },
                illegal_discount: {

                }
              }
            },
            success: {
              on: {
                CLICK_DONE: 'blank'

              }
            }
          }
        },
        payment: {
          initial: 'blank',
          states: {
            blank: {
              id: 'paymentBlank',
              on: {
                CLICK_CANCEL: '#blank',
                CLICK_APPLE_PAY: 'apple_pay',
                CLICK_LINE_PAY: 'line_pay',
                CLICK_JKO_PAY: 'jko_pay'
              }
            },
            apple_pay: {
              inital: 'loading',
              states: {
                loading: {
                  invoke: {
                    id: 'TPDirectRequest',
                    src: 'TPDirectRequest',
                    onDone: [
                      {
                        target: 'create_order',
                        cond: 'directPayStatusValid'
                      },
                      {
                        target: 'error'
                      }
                    ],
                    onError: {
                      target: 'error'
                    }
                  }
                },
                create_order: {
                  invoke: {
                    id: 'tappayCreateDirect',
                    src: 'tappayCreateDirect',
                    onDone: [
                      {
                        target: 'success'
                      }
                    ],
                    onError: [
                      {
                        // 避免已付款但查詢時 timeout 的狀況，會重新再試一次
                        target: 'success',
                        cond: 'responseTimeoutCheck'
                      },
                      {
                        target: 'error'
                      }
                    ]
                  }
                },
                error: {
                  after: {
                    2000: {
                      target: '#paymentBlank'
                    }
                  }
                },
                success: {
                  type: 'done',
                  entry: 'redirect'
                }
              }
            },
            line_pay: {
              inital: 'loading',
              states: {
                loading: {
                  invoke: {
                    id: 'createLinePaymentInfoByPrime',
                    src: 'createLinePaymentInfoByPrime',
                    onDone: {
                      target: 'success',
                      internal: false
                    },
                    onError: {
                      target: 'error'
                    }
                  }
                },
                error: {
                  after: {
                    2000: {
                      target: '#paymentBlank'
                    }
                  }
                },
                success: {
                  type: 'done',
                  entry: 'redirect'
                }
              }
            },
            jko_pay: {
              inital: 'loading',
              states: {
                loading: {
                  invoke: {
                    id: 'createJKOPaymentInfoByPrime',
                    src: 'createJKOPaymentInfoByPrime',
                    onDone: {
                      target: 'success',
                      internal: false
                    },
                    onError: {
                      target: 'error'
                    }
                  }
                },
                error: {
                  after: {
                    2000: {
                      target: '#paymentBlank'
                    }
                  }
                },
                success: {
                  type: 'done',
                  entry: 'redirect'
                }
              }
            }
          }
        }
      }
    }
  }
}, {
  guards: {
  }
})