import { Alert } from 'react-bootstrap' import { useMe } from './me' import FeeButton, { FeeButtonProvider } from './fee-button' import { TERRITORY_BILLING_OPTIONS } from '../lib/constants' import { Form } from './form' import { timeSince } from '../lib/time' import { LongCountdown } from './countdown' import { useCallback } from 'react' import { useApolloClient, useMutation } from '@apollo/client' import { SUB_PAY } from '../fragments/subs' import { nextBilling, nextBillingWithGrace } from '../lib/territory' 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 const dueDate = nextBillingWithGrace(sub) if (!dueDate) return null return ( {sub.status === 'STOPPED' ? ( <> Your ~{sub.name} territory has been archived!
Make a payment to reactivate it.
) : ( <> Your ~{sub.name} territory payment is due!
Your territory will be archived in otherwise.
)}
) } export function TerritoryBillingLine ({ sub }) { const me = useMe() if (!sub || sub.userId !== Number(me?.id)) return null const dueDate = nextBilling(sub) const pastDue = dueDate && dueDate < new Date() return (
billing {sub.billingAutoRenew ? 'automatically renews' : 'due'} {pastDue ? 'past due' : dueDate ? timeSince(dueDate) : 'never again'}
) }