stacker.news/components/territory-payment-due.js

91 lines
2.6 KiB
JavaScript
Raw Normal View History

2023-11-21 23:32:22 +00:00
import { Alert } from 'react-bootstrap'
import { useMe } from './me'
import FeeButton, { FeeButtonProvider } from './fee-button'
import { TERRITORY_BILLING_OPTIONS } from '@/lib/constants'
2023-11-21 23:32:22 +00:00
import { Form } from './form'
import { timeSince } from '@/lib/time'
2023-11-21 23:32:22 +00:00
import { LongCountdown } from './countdown'
import { useCallback } from 'react'
import { useApolloClient, useMutation } from '@apollo/client'
import { SUB_PAY } from '@/fragments/subs'
import { nextBillingWithGrace } from '@/lib/territory'
2023-12-08 20:02:00 +00:00
2023-11-21 23:32:22 +00:00
export default function TerritoryPaymentDue ({ sub }) {
const me = useMe()
const client = useApolloClient()
const [paySub] = useMutation(SUB_PAY)
const onSubmit = useCallback(
async ({ ...variables }) => {
const { error } = await paySub({
variables
})
if (error) {
throw new Error({ message: error.toString() })
}
}, [client, paySub])
if (!sub || sub.userId !== Number(me?.id) || sub.status === 'ACTIVE') return null
2024-01-03 02:05:49 +00:00
const dueDate = nextBillingWithGrace(sub)
2023-12-08 20:02:00 +00:00
if (!dueDate) return null
2023-11-21 23:32:22 +00:00
return (
<Alert key='danger' variant='danger'>
{sub.status === 'STOPPED'
? (
<>
<Alert.Heading>
Your ~{sub.name} territory has been archived!
</Alert.Heading>
<div>
Make a payment to reactivate it.
</div>
</>)
: (
<>
<Alert.Heading>
Your ~{sub.name} territory payment is due!
</Alert.Heading>
<div>
Your territory will be archived in <LongCountdown date={dueDate} />otherwise.
</div>
</>
)}
<FeeButtonProvider baseLineItems={{ territory: TERRITORY_BILLING_OPTIONS('one')[sub.billingType.toLowerCase()] }}>
<Form
Frontend payment UX cleanup (#1194) * Replace useInvoiceable with usePayment hook * Show WebLnError in QR code fallback * Fix missing removal of old zap undo code * Fix payment timeout message * Fix unused arg in super() * Also bail if invoice expired * Fix revert on reply error * Use JIT_INVOICE_TIMEOUT_MS constant * Remove unnecessary PaymentContext * Fix me as a dependency in FeeButtonContext * Fix anon sats added before act success * Optimistic updates for zaps * Fix modal not closed after custom zap * Optimistic update for custom zaps * Optimistic update for bounty payments * Consistent error handling for zaps and bounty payments * Optimistic update for poll votes * Use var balance in payment.request * Rename invoiceable to prepaid * Log cancelled invoices * Client notifications We now show notifications that are stored on the client to inform the user about following errors in the prepaid payment flow: - if a payment fails - if an invoice expires before it is paid - if a payment was interrupted (for example via page refresh) - if the action fails after payment * Remove unnecessary passing of act * Use AbortController for zap undos * Fix anon zap update not updating bolt color * Fix zap counted towards anon sats even if logged in * Fix duplicate onComplete call * Fix downzap type error * Fix "missing field 'path' while writing result" error * Pass full item in downzap props The previous commit fixed cache updates for downzaps but then the cache update for custom zaps failed because 'path' wasn't included in the server response. This commit is the proper fix. * Parse lnc rpc error messages * Add hash to InvoiceExpiredError
2024-05-28 17:18:54 +00:00
prepaid
2023-11-21 23:32:22 +00:00
initial={{
name: sub.name
}}
onSubmit={onSubmit}
>
<div className='d-flex justify-content-end'>
<FeeButton
text='pay'
variant='success'
/>
</div>
</Form>
</FeeButtonProvider>
</Alert>
)
}
2023-12-08 20:02:00 +00:00
export function TerritoryBillingLine ({ sub }) {
const me = useMe()
if (!sub || sub.userId !== Number(me?.id)) return null
const dueDate = sub.billPaidUntil && new Date(sub.billPaidUntil)
2024-01-03 02:05:49 +00:00
const pastDue = dueDate && dueDate < new Date()
2023-12-08 20:02:00 +00:00
return (
<div className='text-muted'>
2024-01-03 02:05:49 +00:00
<span>billing {sub.billingAutoRenew ? 'automatically renews' : 'due'} </span>
<span className='fw-bold'>{pastDue ? 'past due' : dueDate ? timeSince(dueDate) : 'never again'}</span>
2023-12-08 20:02:00 +00:00
</div>
)
}