feat(workspace): 🚸 Improve plan upgrade flow
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { AppProps } from 'next/app'
|
||||
import { SessionProvider } from 'next-auth/react'
|
||||
import { ChakraProvider } from '@chakra-ui/react'
|
||||
import { ChakraProvider, createStandaloneToast } from '@chakra-ui/react'
|
||||
import { customTheme } from 'libs/theme'
|
||||
import { useRouterProgressBar } from 'libs/routerProgressBar'
|
||||
import 'assets/styles/routerProgressBar.css'
|
||||
@ -18,12 +18,15 @@ import { actions } from 'libs/kbar'
|
||||
import { enableMocks } from 'mocks'
|
||||
import { SupportBubble } from 'components/shared/SupportBubble'
|
||||
import { WorkspaceContext } from 'contexts/WorkspaceContext'
|
||||
import { toTitleCase } from 'utils'
|
||||
|
||||
const { ToastContainer, toast } = createStandaloneToast(customTheme)
|
||||
|
||||
if (process.env.NEXT_PUBLIC_E2E_TEST === 'enabled') enableMocks()
|
||||
|
||||
const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => {
|
||||
useRouterProgressBar()
|
||||
const { query, pathname } = useRouter()
|
||||
const { query, pathname, isReady } = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
pathname.endsWith('/edit')
|
||||
@ -31,30 +34,52 @@ const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => {
|
||||
: (document.body.style.overflow = 'auto')
|
||||
}, [pathname])
|
||||
|
||||
useEffect(() => {
|
||||
displayStripeCallbackMessage(query.stripe?.toString(), toast)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isReady])
|
||||
|
||||
const typebotId = query.typebotId?.toString()
|
||||
return (
|
||||
<ChakraProvider theme={customTheme}>
|
||||
<KBarProvider actions={actions}>
|
||||
<SessionProvider session={session}>
|
||||
<UserContext>
|
||||
{typebotId ? (
|
||||
<TypebotContext typebotId={typebotId}>
|
||||
<>
|
||||
<ToastContainer />
|
||||
<ChakraProvider theme={customTheme}>
|
||||
<KBarProvider actions={actions}>
|
||||
<SessionProvider session={session}>
|
||||
<UserContext>
|
||||
{typebotId ? (
|
||||
<TypebotContext typebotId={typebotId}>
|
||||
<WorkspaceContext>
|
||||
<Component />
|
||||
<SupportBubble />
|
||||
</WorkspaceContext>
|
||||
</TypebotContext>
|
||||
) : (
|
||||
<WorkspaceContext>
|
||||
<Component />
|
||||
<Component {...pageProps} />
|
||||
<SupportBubble />
|
||||
</WorkspaceContext>
|
||||
</TypebotContext>
|
||||
) : (
|
||||
<WorkspaceContext>
|
||||
<Component {...pageProps} />
|
||||
<SupportBubble />
|
||||
</WorkspaceContext>
|
||||
)}
|
||||
</UserContext>
|
||||
</SessionProvider>
|
||||
</KBarProvider>
|
||||
</ChakraProvider>
|
||||
)}
|
||||
</UserContext>
|
||||
</SessionProvider>
|
||||
</KBarProvider>
|
||||
</ChakraProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const displayStripeCallbackMessage = (
|
||||
status: string | undefined,
|
||||
toast: any
|
||||
) => {
|
||||
if (status && ['pro', 'team'].includes(status)) {
|
||||
toast({
|
||||
position: 'bottom-right',
|
||||
status: 'success',
|
||||
title: 'Upgrade success!',
|
||||
description: `Workspace upgraded to ${toTitleCase(status)} 🎉`,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default App
|
||||
|
@ -10,12 +10,12 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
|
||||
apiVersion: '2020-08-27',
|
||||
})
|
||||
const { email, currency, plan, workspaceId } =
|
||||
const { email, currency, plan, workspaceId, href } =
|
||||
typeof req.body === 'string' ? JSON.parse(req.body) : req.body
|
||||
|
||||
const session = await stripe.checkout.sessions.create({
|
||||
success_url: `${req.headers.origin}/typebots?stripe=success`,
|
||||
cancel_url: `${req.headers.origin}/typebots?stripe=cancel`,
|
||||
success_url: `${href}?stripe=${plan}`,
|
||||
cancel_url: `${href}?stripe=cancel`,
|
||||
automatic_tax: { enabled: true },
|
||||
allow_promotion_codes: true,
|
||||
customer_email: email,
|
||||
@ -33,7 +33,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
return methodNotAllowed(res)
|
||||
}
|
||||
|
||||
const getPrice = (plan: 'pro' | 'team', currency: 'eur' | 'usd') => {
|
||||
export const getPrice = (plan: 'pro' | 'team', currency: 'eur' | 'usd') => {
|
||||
if (plan === 'team')
|
||||
return currency === 'eur'
|
||||
? process.env.STRIPE_PRICE_TEAM_EUR_ID
|
||||
|
46
apps/builder/pages/api/stripe/update-subscription.ts
Normal file
46
apps/builder/pages/api/stripe/update-subscription.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import { withSentry } from '@sentry/nextjs'
|
||||
import { Plan } from 'db'
|
||||
import prisma from 'libs/prisma'
|
||||
import { NextApiRequest, NextApiResponse } from 'next'
|
||||
import Stripe from 'stripe'
|
||||
import { badRequest, methodNotAllowed } from 'utils'
|
||||
import { getPrice } from './checkout'
|
||||
|
||||
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
if (req.method === 'POST') {
|
||||
const { customerId, currency, plan, workspaceId } =
|
||||
typeof req.body === 'string' ? JSON.parse(req.body) : req.body
|
||||
if (!process.env.STRIPE_SECRET_KEY)
|
||||
throw Error('STRIPE_SECRET_KEY var is missing')
|
||||
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
|
||||
apiVersion: '2020-08-27',
|
||||
})
|
||||
const subscriptions = await stripe.subscriptions.list({
|
||||
customer: customerId,
|
||||
})
|
||||
const { id, items } = subscriptions.data[0]
|
||||
const newPrice = getPrice(plan, currency)
|
||||
const oldPrice = subscriptions.data[0].items.data[0].price.id
|
||||
if (newPrice === oldPrice) return badRequest(res)
|
||||
await stripe.subscriptions.update(id, {
|
||||
cancel_at_period_end: false,
|
||||
proration_behavior: 'create_prorations',
|
||||
items: [
|
||||
{
|
||||
id: items.data[0].id,
|
||||
price: getPrice(plan, currency),
|
||||
},
|
||||
],
|
||||
})
|
||||
await prisma.workspace.update({
|
||||
where: { id: workspaceId },
|
||||
data: {
|
||||
plan: plan === 'team' ? Plan.TEAM : Plan.PRO,
|
||||
},
|
||||
})
|
||||
return res.send({ message: 'success' })
|
||||
}
|
||||
methodNotAllowed(res)
|
||||
}
|
||||
|
||||
export default withSentry(handler)
|
@ -5,8 +5,7 @@ import { Seo } from 'components/Seo'
|
||||
import { FolderContent } from 'components/dashboard/FolderContent'
|
||||
import { TypebotDndContext } from 'contexts/TypebotDndContext'
|
||||
import { useRouter } from 'next/router'
|
||||
import { redeemCoupon } from 'services/coupons'
|
||||
import { Spinner, useToast } from '@chakra-ui/react'
|
||||
import { Spinner } from '@chakra-ui/react'
|
||||
import { pay } from 'services/stripe'
|
||||
import { useUser } from 'contexts/UserContext'
|
||||
import { NextPageContext } from 'next/types'
|
||||
@ -14,13 +13,9 @@ import { useWorkspace } from 'contexts/WorkspaceContext'
|
||||
|
||||
const DashboardPage = () => {
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const { query, isReady } = useRouter()
|
||||
const { query } = useRouter()
|
||||
const { user } = useUser()
|
||||
const { workspace } = useWorkspace()
|
||||
const toast = useToast({
|
||||
position: 'top-right',
|
||||
status: 'success',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const subscribePlan = query.subscribePlan as 'pro' | 'team' | undefined
|
||||
@ -37,25 +32,6 @@ const DashboardPage = () => {
|
||||
}
|
||||
}, [query, user, workspace])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isReady) return
|
||||
const couponCode = query.coupon?.toString()
|
||||
const stripeStatus = query.stripe?.toString()
|
||||
|
||||
if (stripeStatus === 'success')
|
||||
toast({
|
||||
title: 'Payment successful',
|
||||
description: "You've successfully subscribed 🎉",
|
||||
})
|
||||
if (couponCode) {
|
||||
setIsLoading(true)
|
||||
redeemCoupon(couponCode).then(() => {
|
||||
location.href = '/typebots'
|
||||
})
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isReady])
|
||||
|
||||
return (
|
||||
<Stack minH="100vh">
|
||||
<Seo title="My typebots" />
|
||||
|
Reference in New Issue
Block a user