2023-11-21 23:32:22 +00:00
|
|
|
import { Alert } from 'react-bootstrap'
|
|
|
|
import { useMe } from './me'
|
|
|
|
import FeeButton, { FeeButtonProvider } from './fee-button'
|
2024-03-20 00:37:31 +00:00
|
|
|
import { TERRITORY_BILLING_OPTIONS } from '@/lib/constants'
|
2023-11-21 23:32:22 +00:00
|
|
|
import { Form } from './form'
|
2024-03-20 00:37:31 +00:00
|
|
|
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'
|
2024-03-20 00:37:31 +00:00
|
|
|
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
|
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
|
|
|
|
|
2024-02-16 18:25:12 +00:00
|
|
|
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>
|
|
|
|
)
|
|
|
|
}
|