✨ (lp) Add new pricing page

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

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 *

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

apps/builder/components/shared/ChangePlanForm/helpers.ts

@@ -1,86 +0,0 @@
-import { Plan } from 'db'
-import { chatsLimit, prices, storageLimit } from 'utils'
-
-export const computePrice = (
-  plan: Plan,
-  selectedTotalChatsIndex: number,
-  selectedTotalStorageIndex: number
-) => {
-  if (plan !== Plan.STARTER && plan !== Plan.PRO) return
-  const {
-    increaseStep: { price: chatsPrice },
-  } = chatsLimit[plan]
-  const {
-    increaseStep: { price: storagePrice },
-  } = storageLimit[plan]
-  return (
-    prices[plan] +
-    selectedTotalChatsIndex * chatsPrice +
-    selectedTotalStorageIndex * storagePrice
-  )
-}
-
-const europeanUnionCountryCodes = [
-  'AT',
-  'BE',
-  'BG',
-  'CY',
-  'CZ',
-  'DE',
-  'DK',
-  'EE',
-  'ES',
-  'FI',
-  'FR',
-  'GR',
-  'HR',
-  'HU',
-  'IE',
-  'IT',
-  'LT',
-  'LU',
-  'LV',
-  'MT',
-  'NL',
-  'PL',
-  'PT',
-  'RO',
-  'SE',
-  'SI',
-  'SK',
-]
-
-const europeanUnionExclusiveLanguageCodes = [
-  'fr',
-  'de',
-  'it',
-  'el',
-  'pl',
-  'fi',
-  'nl',
-  'hr',
-  'cs',
-  'hu',
-  'ro',
-  'sl',
-  'sv',
-  'bg',
-]
-
-export const guessIfUserIsEuropean = () =>
-  navigator.languages.some((language) => {
-    const [languageCode, countryCode] = language.split('-')
-    return countryCode
-      ? europeanUnionCountryCodes.includes(countryCode)
-      : europeanUnionExclusiveLanguageCodes.includes(languageCode)
-  })
-
-export const formatPrice = (price: number) => {
-  const isEuropean = guessIfUserIsEuropean()
-  const formatter = new Intl.NumberFormat(isEuropean ? 'fr-FR' : 'en-US', {
-    style: 'currency',
-    currency: isEuropean ? 'EUR' : 'USD',
-    maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
-  })
-  return formatter.format(price)
-}

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