https://newleftreview.org/assets/channels/payment_monitor_channel-…c5ae6b3799256f33adfef52208d098cd5342dedb.js

1import consumer from 'channels/consumer'
2
3const POLL_INTERVAL = 1000
4const TIMEOUT = 60000
5
6export const monitorPaymentState = ({ id, statePath }) => {
7  return new Promise((resolve, reject) => {
8    let cableInterval
9    let paymentStateReceived = false
10    let pollingInterval
11    let subscription
12
13    const finish = (state) => {
14      window.clearInterval(cableInterval)
15      window.clearInterval(pollingInterval)
16      window.clearTimeout(timeout)
17      subscription.unsubscribe()
18      resolve(state)
19    }
20
21    const checkHttpState = async () => {
22      try {
23        const response = await fetch(statePath, {
24          credentials: 'same-origin',
25          headers: { Accept: 'application/json' },
26        })
27
28        if (!response.ok) throw new Error(`Payment status request failed (${response.status})`)
29
30        const data = await response.json()
31        paymentStateReceived = true
32        if (data.state !== 'processing') finish(data.state)
33      } catch (error) {
34        console.warn(`Could not check payment state over HTTP: ${error.message}`)
35      }
36    }
37
38    const timeout = window.setTimeout(() => {
39      const message = paymentStateReceived
40        ? 'Your payment is still being processed. Please refresh this page in a moment; do not submit another payment.'
41        : 'We could not connect to payment updates. Please refresh this page to check the payment before trying again.'
42
43      reject(new Error(message))
44      window.clearInterval(cableInterval)
45      window.clearInterval(pollingInterval)
46      subscription.unsubscribe()
47    }, TIMEOUT)
48
49    subscription = consumer.subscriptions.create(
50      { channel: 'PaymentMonitorChannel', id },
51      {
52        connected() {
53          console.log('Connected to channel')
54          this.perform('check_payment_state')
55          cableInterval = window.setInterval(() => {
56            console.log('Checking payment state')
57            this.perform('check_payment_state')
58          }, POLL_INTERVAL)
59        },
60        received(data) {
61          console.log(`Received payment state: ${data.state}`)
62          paymentStateReceived = true
63          if (data.state === 'processing') return
64
65          finish(data.state)
66        },
67      },
68    )
69
70    checkHttpState()
71    pollingInterval = window.setInterval(checkHttpState, POLL_INTERVAL)
72  })
73};