✨ (lp) Add new pricing page

baptisteArno · Sep 27, 2022 · c94a658 · c94a658
1 parent d8b1d8a
commit c94a658
Show file tree

Hide file tree

Showing 18 changed files with 333 additions and 242 deletions.
diff --git a/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/BillingContent.tsx b/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/BillingContent.tsx
@@ -13,21 +13,23 @@ export const BillingContent = () => {
   if (!workspace) return null
   return (
     <Stack spacing="10" w="full">
-      <CurrentSubscriptionContent
-        plan={workspace.plan}
-        stripeId={workspace.stripeId}
-        onCancelSuccess={() =>
-          refreshWorkspace({
-            plan: Plan.FREE,
-            additionalChatsIndex: 0,
-            additionalStorageIndex: 0,
-          })
-        }
-      />
       <UsageContent workspace={workspace} />
-      {workspace.plan !== Plan.LIFETIME && workspace.plan !== Plan.OFFERED && (
-        <ChangePlanForm />
-      )}
+      <Stack gap="2">
+        <CurrentSubscriptionContent
+          plan={workspace.plan}
+          stripeId={workspace.stripeId}
+          onCancelSuccess={() =>
+            refreshWorkspace({
+              plan: Plan.FREE,
+              additionalChatsIndex: 0,
+              additionalStorageIndex: 0,
+            })
+          }
+        />
+        {workspace.plan !== Plan.LIFETIME &&
+          workspace.plan !== Plan.OFFERED && <ChangePlanForm />}
+      </Stack>
+
       {workspace.stripeId && <InvoicesList workspace={workspace} />}
     </Stack>
   )

diff --git a/...components/dashboard/WorkspaceSettingsModal/BillingContent/CurrentSubscriptionContent.tsx b/...components/dashboard/WorkspaceSettingsModal/BillingContent/CurrentSubscriptionContent.tsx
@@ -4,8 +4,8 @@ import {
   Link,
   Spinner,
   Stack,
-  Flex,
   Button,
+  Heading,
 } from '@chakra-ui/react'
 import { PlanTag } from 'components/shared/PlanTag'
 import { Plan } from 'db'
@@ -35,15 +35,29 @@ export const CurrentSubscriptionContent = ({
     setIsCancelling(false)
   }
 
+  const isSubscribed = (plan === Plan.STARTER || plan === Plan.PRO) && stripeId
+
   if (isCancelling) return <Spinner colorScheme="gray" />
   return (
     <Stack gap="2">
+      <Heading fontSize="3xl">Subscription</Heading>
       <HStack>
         <Text>Current workspace subscription: </Text>
         <PlanTag plan={plan} />
+        {isSubscribed && (
+          <Link
+            as="button"
+            color="gray.500"
+            textDecor="underline"
+            fontSize="sm"
+            onClick={cancelSubscription}
+          >
+            Cancel my subscription
+          </Link>
+        )}
       </HStack>
 
-      {(plan === Plan.STARTER || plan === Plan.PRO) && stripeId && (
+      {isSubscribed && (
         <>
           <Stack gap="1">
             <Text fontSize="sm">
@@ -59,17 +73,6 @@ export const CurrentSubscriptionContent = ({
               Billing Portal
             </Button>
           </Stack>
-          <Flex>
-            <Link
-              as="button"
-              color="gray.500"
-              textDecor="underline"
-              fontSize="sm"
-              onClick={cancelSubscription}
-            >
-              Cancel my subscription
-            </Link>
-          </Flex>
         </>
       )}
     </Stack>

diff --git a/apps/builder/components/shared/ChangePlanForm/ChangePlanForm.tsx b/apps/builder/components/shared/ChangePlanForm/ChangePlanForm.tsx
@@ -60,16 +60,7 @@ export const ChangePlanForm = () => {
 
   return (
     <Stack spacing={4}>
-      <HStack
-        alignItems="stretch"
-        spacing="4"
-        w="full"
-        pt={
-          workspace?.plan === Plan.STARTER || workspace?.plan === Plan.PRO
-            ? '10'
-            : '0'
-        }
-      >
+      <HStack alignItems="stretch" spacing="4" w="full">
         <StarterPlanContent
           initialChatsLimitIndex={
             workspace?.plan === Plan.STARTER ? data?.additionalChatsIndex : 0

diff --git a/apps/builder/components/shared/ChangePlanForm/ProPlanContent.tsx b/apps/builder/components/shared/ChangePlanForm/ProPlanContent.tsx
@@ -23,10 +23,11 @@ import {
   getStorageLimit,
   storageLimit,
   parseNumberWithCommas,
+  formatPrice,
+  computePrice,
 } from 'utils'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
 import { FeaturesList } from './components/FeaturesList'
-import { computePrice, formatPrice } from './helpers'
 
 type ProPlanContentProps = {
   initialChatsLimitIndex?: number
@@ -72,8 +73,6 @@ export const ProPlanContent = ({
     ? getStorageLimit(workspace)
     : undefined
 
-  console.log('workspaceChatsLimit', workspaceChatsLimit)
-  console.log('workspaceStorageLimit', workspace)
   const isCurrentPlan =
     chatsLimit[Plan.PRO].totalIncluded +
       chatsLimit[Plan.PRO].increaseStep.amount *

diff --git a/apps/builder/components/shared/ChangePlanForm/StarterPlanContent.tsx b/apps/builder/components/shared/ChangePlanForm/StarterPlanContent.tsx
@@ -20,10 +20,11 @@ import {
   getStorageLimit,
   storageLimit,
   parseNumberWithCommas,
+  computePrice,
+  formatPrice,
 } from 'utils'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
 import { FeaturesList } from './components/FeaturesList'
-import { computePrice, formatPrice } from './helpers'
 
 type StarterPlanContentProps = {
   initialChatsLimitIndex?: number

diff --git a/apps/builder/components/shared/ChangePlanForm/helpers.ts b/apps/builder/components/shared/ChangePlanForm/helpers.ts
diff --git a/apps/builder/components/shared/ChangePlanForm/queries/updatePlan.tsx b/apps/builder/components/shared/ChangePlanForm/queries/updatePlan.tsx
@@ -1,7 +1,12 @@
 import { loadStripe } from '@stripe/stripe-js/pure'
 import { Plan, User } from 'db'
-import { env, isDefined, isEmpty, sendRequest } from 'utils'
-import { guessIfUserIsEuropean } from '../helpers'
+import {
+  env,
+  guessIfUserIsEuropean,
+  isDefined,
+  isEmpty,
+  sendRequest,
+} from 'utils'
 
 type UpgradeProps = {
   user: User

diff --git a/apps/builder/pages/api/stripe/subscription.ts b/apps/builder/pages/api/stripe/subscription.ts
@@ -155,7 +155,6 @@ const updateSubscription = async (req: NextApiRequest) => {
         }
       : undefined,
   ].filter(isDefined)
-  console.log(items)
   await stripe.subscriptions.update(subscription.id, {
     items,
   })
@@ -171,7 +170,6 @@ const updateSubscription = async (req: NextApiRequest) => {
 
 const cancelSubscription =
   (req: NextApiRequest, res: NextApiResponse) => async (userId: string) => {
-    console.log(req.query.stripeId, userId)
     const stripeId = req.query.stripeId as string | undefined
     if (!stripeId) return badRequest(res)
     if (!process.env.STRIPE_SECRET_KEY)
@@ -189,9 +187,7 @@ const cancelSubscription =
     const existingSubscription = await stripe.subscriptions.list({
       customer: workspace.stripeId,
     })
-    console.log('yes')
     await stripe.subscriptions.del(existingSubscription.data[0].id)
-    console.log('deleted')
     await prisma.workspace.update({
       where: { id: workspace.id },
       data: {

diff --git a/apps/builder/pages/typebots.tsx b/apps/builder/pages/typebots.tsx
@@ -18,12 +18,12 @@ const DashboardPage = () => {
   const { workspace } = useWorkspace()
 
   useEffect(() => {
-    const subscribePlan = query.subscribePlan as 'pro' | 'starter' | undefined
+    const subscribePlan = query.subscribePlan as Plan | undefined
     if (workspace && subscribePlan && user && workspace.plan === 'FREE') {
       setIsLoading(true)
       pay({
         user,
-        plan: subscribePlan === 'pro' ? Plan.PRO : Plan.STARTER,
+        plan: subscribePlan,
         workspaceId: workspace.id,
         additionalChats: 0,
         additionalStorage: 0,

diff --git a/apps/builder/pages/typebots/[typebotId]/results.tsx b/apps/builder/pages/typebots/[typebotId]/results.tsx
@@ -34,8 +34,6 @@ const ResultsPage = () => {
   })
   const { data: usageData } = useUsage(workspace?.id)
 
-  console.log(workspace?.id, usageData)
-
   const chatsLimitPercentage = useMemo(() => {
     if (!usageData?.totalChatsUsed || !workspace?.plan) return 0
     return Math.round(
@@ -53,7 +51,6 @@ const ResultsPage = () => {
   ])
 
   const storageLimitPercentage = useMemo(() => {
-    console.log(usageData?.totalStorageUsed)
     if (!usageData?.totalStorageUsed || !workspace?.plan) return 0
     return Math.round(
       (usageData.totalStorageUsed /