78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
|
import {
|
||
|
|
Text,
|
||
|
|
HStack,
|
||
|
|
Link,
|
||
|
|
Spinner,
|
||
|
|
Stack,
|
||
|
|
Flex,
|
||
|
|
Button,
|
||
|
|
} from '@chakra-ui/react'
|
||
|
|
import { PlanTag } from 'components/shared/PlanTag'
|
||
|
|
import { Plan } from 'db'
|
||
|
|
import React, { useState } from 'react'
|
||
|
|
import { cancelSubscriptionQuery } from './queries/cancelSubscriptionQuery'
|
||
|
|
|
||
|
|
type CurrentSubscriptionContentProps = {
|
||
|
|
plan: Plan
|
||
|
|
stripeId?: string | null
|
||
|
|
onCancelSuccess: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CurrentSubscriptionContent = ({
|
||
|
|
plan,
|
||
|
|
stripeId,
|
||
|
|
onCancelSuccess,
|
||
|
|
}: CurrentSubscriptionContentProps) => {
|
||
|
|
const [isCancelling, setIsCancelling] = useState(false)
|
||
|
|
const [isRedirectingToBillingPortal, setIsRedirectingToBillingPortal] =
|
||
|
|
useState(false)
|
||
|
|
|
||
|
|
const cancelSubscription = async () => {
|
||
|
|
if (!stripeId) return
|
||
|
|
setIsCancelling(true)
|
||
|
|
await cancelSubscriptionQuery(stripeId)
|
||
|
|
onCancelSuccess()
|
||
|
|
setIsCancelling(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isCancelling) return <Spinner colorScheme="gray" />
|
||
|
|
return (
|
||
|
|
<Stack gap="2">
|
||
|
|
<HStack>
|
||
|
|
<Text>Current workspace subscription: </Text>
|
||
|
|
<PlanTag plan={plan} />
|
||
|
|
</HStack>
|
||
|
|
|
||
|
|
{(plan === Plan.STARTER || plan === Plan.PRO) && stripeId && (
|
||
|
|
<>
|
||
|
|
<Stack gap="1">
|
||
|
|
<Text fontSize="sm">
|
||
|
|
Need to change payment method or billing information? Head over to
|
||
|
|
your billing portal:
|
||
|
|
</Text>
|
||
|
|
<Button
|
||
|
|
as={Link}
|
||
|
|
href={`/api/stripe/billing-portal?stripeId=${stripeId}`}
|
||
|
|
onClick={() => setIsRedirectingToBillingPortal(true)}
|
||
|
|
isLoading={isRedirectingToBillingPortal}
|
||
|
|
>
|
||
|
|
Billing Portal
|
||
|
|
</Button>
|
||
|
|
</Stack>
|
||
|
|
<Flex>
|
||
|
|
<Link
|
||
|
|
as="button"
|
||
|
|
color="gray.500"
|
||
|
|
textDecor="underline"
|
||
|
|
fontSize="sm"
|
||
|
|
onClick={cancelSubscription}
|
||
|
|
>
|
||
|
|
Cancel my subscription
|
||
|
|
</Link>
|
||
|
|
</Flex>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</Stack>
|
||
|
|
)
|
||
|
|
}
|