2
0

feat(workspace): 🚸 Improve plan upgrade flow

This commit is contained in:
Baptiste Arnaud
2022-06-01 12:09:45 +02:00
parent caa6015359
commit 87fe47923e
11 changed files with 218 additions and 65 deletions

View File

@ -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

View File

@ -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

View 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)

View File

@ -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" />