71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import {
|
|
Stack,
|
|
Heading,
|
|
HStack,
|
|
Button,
|
|
Text,
|
|
Input,
|
|
useToast,
|
|
} from '@chakra-ui/react'
|
|
import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
|
|
import { UpgradeButton } from 'components/shared/buttons/UpgradeButton'
|
|
import { useUser } from 'contexts/UserContext'
|
|
import { Plan } from 'db'
|
|
import { useRouter } from 'next/router'
|
|
import React, { useState } from 'react'
|
|
import { redeemCoupon } from 'services/coupons'
|
|
import { SubscriptionTag } from './SubscriptionTag'
|
|
|
|
export const BillingSection = () => {
|
|
const { reload } = useRouter()
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
const { user } = useUser()
|
|
const toast = useToast({
|
|
position: 'top-right',
|
|
})
|
|
|
|
const handleCouponCodeRedeem = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
const target = e.target as typeof e.target & {
|
|
coupon: { value: string }
|
|
}
|
|
setIsLoading(true)
|
|
const { data, error } = await redeemCoupon(target.coupon.value)
|
|
if (error) toast({ title: error.name, description: error.message })
|
|
else {
|
|
toast({ description: data?.message })
|
|
setTimeout(reload, 1000)
|
|
}
|
|
setIsLoading(false)
|
|
}
|
|
|
|
return (
|
|
<Stack direction="row" spacing="10" justifyContent={'space-between'}>
|
|
<Heading as="h2" fontSize="xl">
|
|
Billing
|
|
</Heading>
|
|
<Stack spacing="6" w="400px">
|
|
<HStack>
|
|
<Text>Your subscription</Text>
|
|
<SubscriptionTag plan={user?.plan} />
|
|
</HStack>
|
|
{user?.stripeId && (
|
|
<Button as={NextChakraLink} href="/api/stripe/customer-portal">
|
|
Manage my subscription
|
|
</Button>
|
|
)}
|
|
{user?.plan === Plan.FREE && <UpgradeButton />}
|
|
{user?.plan === Plan.FREE && (
|
|
<HStack as="form" onSubmit={handleCouponCodeRedeem}>
|
|
<Input name="coupon" placeholder="Coupon code..." />
|
|
<Button type="submit" isLoading={isLoading}>
|
|
Redeem
|
|
</Button>
|
|
</HStack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
}
|