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 } from '@apollo/client' import { nextBillingWithGrace } from '@/lib/territory' import { usePaidMutation } from './use-paid-mutation' import { SUB_PAY } from '@/fragments/paidAction' export default function TerritoryPaymentDue ({ sub }) { const me = useMe() const client = useApolloClient() const [paySub] = usePaidMutation(SUB_PAY) const onSubmit = useCallback(async ({ ...variables }) => { const { error } = await paySub({ variables }) if (error) throw error }, [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 = sub.billPaidUntil && new Date(sub.billPaidUntil) const pastDue = dueDate && dueDate < new Date() return (
billing {sub.billingAutoRenew ? 'automatically renews' : 'due'} {pastDue ? 'past due' : dueDate ? timeSince(dueDate) : 'never again'}
) }