refactor(plan) Extract and refactor generic plan utils

.storybook/mock/user.ts

@@ -1,10 +1,7 @@
 // import { getTodaysEnd } from '@/utils/dates'
+import { checkIsBusinessPlan, Plan, Product } from '$lib/utils/plans/index.js'
+
 import { getTodaysEnd } from '../../src/lib/utils/dates/index.js'
-import {
-  SubscriptionPlan,
-  Product,
-  checkIsBusinessPlan,
-} from '../../src/lib/ui/app/SubscriptionPlan/index.js'
 
 export type CurrentUser = null | {
   /** @default 42 */
@@ -147,14 +144,14 @@ export function mockUser(currentUser: CurrentUser) {
 
     if (pro || max || proPlus || businessPro || businessMax || custom || planName) {
       let name = planName
-      if (pro) name = SubscriptionPlan.PRO.key
-      else if (max) name = SubscriptionPlan.MAX.key
-      else if (proPlus) name = SubscriptionPlan.PRO_PLUS.key
-      else if (businessPro) name = SubscriptionPlan.BUSINESS_PRO.key
-      else if (businessMax) name = SubscriptionPlan.BUSINESS_MAX.key
-      else if (custom) name = SubscriptionPlan.CUSTOM.key
-
-      const id = name && checkIsBusinessPlan(name) ? Product.SanAPI.id : Product.Sanbase.id
+      if (pro) name = Plan.PRO
+      else if (max) name = Plan.MAX
+      else if (proPlus) name = Plan.PRO_PLUS
+      else if (businessPro) name = Plan.BUSINESS_PRO
+      else if (businessMax) name = Plan.BUSINESS_MAX
+      else if (custom) name = Plan.CUSTOM
+
+      const id = name && checkIsBusinessPlan(name) ? Product.SANAPI.id : Product.SANBASE.id
 
       subscriptions[0] = {
         status: trial ? 'TRIALING' : 'ACTIVE',

src/lib/analytics/amplitude/flow.svelte.ts

@@ -3,7 +3,7 @@ import * as amplitude from '@amplitude/analytics-browser'
 
 import { useCustomerCtx } from '$lib/ctx/customer/index.svelte.js'
 import { useUiCtx } from '$lib/ctx/ui/index.svelte.js'
-import { SubscriptionPlan } from '$ui/app/SubscriptionPlan/plans.js'
+import { Plan } from '$lib/utils/plans/index.js'
 
 import { useABTestCtx } from '../ab.js'
 
@@ -53,7 +53,7 @@ export function useAmplitudeFlow() {
   )
 
   const updateUserSanbasePlan = useDebouncedFn(1000, (sanbase_plan?: string) =>
-    setAmplitudeUserProperties({ sanbase_plan: sanbase_plan || SubscriptionPlan.FREE.key }),
+    setAmplitudeUserProperties({ sanbase_plan: sanbase_plan || Plan.FREE }),
   )
 
   $effect(() => {

src/lib/analytics/posthog/flow.svelte.ts

@@ -2,7 +2,7 @@ import { posthog } from 'posthog-js'
 import { BROWSER } from 'esm-env'
 
 import { useCustomerCtx } from '$lib/ctx/customer/index.js'
-import { SubscriptionPlan } from '$ui/app/SubscriptionPlan/plans.js'
+import { Plan } from '$lib/utils/plans/index.js'
 
 import { useDebouncedFn } from '../amplitude/flow.svelte.js'
 import { useABTestCtx } from '../ab.js'
@@ -29,7 +29,7 @@ export function usePosthogFlow() {
     (sanbase_plan?: string, featureAccessLevel?: string) =>
       posthog.capture('$set', {
         $set: {
-          sanbase_plan: sanbase_plan || SubscriptionPlan.FREE.key,
+          sanbase_plan: sanbase_plan || Plan.FREE,
           feature_access_level: featureAccessLevel,
         },
       }),

src/lib/ui/app/ExpiredSessionDialog/index.svelte.ts

@@ -1,4 +1,3 @@
-import { onMount } from 'svelte'
 import { BROWSER } from 'esm-env'
 
 import { useCustomerCtx } from '$lib/ctx/customer/index.svelte.js'

src/lib/ui/app/PaymentForm/flow.ts

@@ -6,10 +6,10 @@ import { useStripeCtx } from '$lib/ctx/stripe/index.js'
 import { notification } from '$ui/core/Notifications/index.js'
 import { useCustomerCtx } from '$lib/ctx/customer/index.js'
 import { trackEvent } from '$lib/analytics/index.js'
+import { getPlanDisplayName } from '$lib/utils/plans/index.js'
 
 import { mutateSubscribe } from './api.js'
 import { usePaymentFormCtx } from './state.js'
-import { getPlanName } from '../SubscriptionPlan/utils.js'
 
 export type TPaymentFlowResult = undefined | API.ExtractData<typeof mutateSubscribe>
 
@@ -134,7 +134,7 @@ export function usePaymentFlow() {
       return Promise.reject('paymentMethod is missing')
     }
 
-    const planDisplayName = getPlanName(plan.name)
+    const planDisplayName = getPlanDisplayName(plan.name)
     const isEligibleForSanbaseTrial =
       subscriptionPlan.$.formatted?.isTrialSupported && customer.$.isEligibleForSanbaseTrial
 

src/lib/ui/app/PlanChangeDialog/PlanChangeDialog.svelte

@@ -16,9 +16,10 @@
   import { useCustomerCtx } from '$lib/ctx/customer/index.svelte.js'
   import { Query } from '$lib/api/executor.js'
   import { getFormattedMonthDayYear } from '$lib/utils/dates/index.js'
+  import { getPlanDisplayName } from '$lib/utils/plans/index.js'
 
   import { mutateUpdateSubscription } from './api.js'
-  import { getFormattedBillingPlan, getPlanName } from '../SubscriptionPlan/utils.js'
+  import { getFormattedBillingPlan } from '../SubscriptionPlan/utils.js'
 
   let {
     source = '',
@@ -42,7 +43,7 @@
     if (!primarySubscription) return
     if (loading) return
 
-    const planDisplayName = getPlanName(newPlan.name)
+    const planDisplayName = getPlanDisplayName(newPlan.name)
     loading = true
     Controller.lock()
 

src/lib/ui/app/SubscriptionPlan/BreakdownTable/breakdown.ts

@@ -1,4 +1,4 @@
-import { SubscriptionPlan } from '../plans.js'
+import { Plan } from '$lib/utils/plans/index.js'
 
 export type TBreakdownFeature = {
   name: string
@@ -207,7 +207,7 @@ export const SubscriptionPlanBreakdown: Record<
   string,
   undefined | Record<string, TPlanFeatureBreakdown>
 > = {
-  [SubscriptionPlan.FREE.key]: {
+  [Plan.FREE]: {
     'Browser tabs': 'Up to 4',
     'Bi-weekly report': false,
     'Pro Insights': false,
@@ -249,7 +249,7 @@ export const SubscriptionPlanBreakdown: Record<
     'Direct technical support': false,
   },
 
-  [SubscriptionPlan.PRO.key]: {
+  [Plan.PRO]: {
     'Dedicated account manager': false,
     'Custom onboarding & education': false,
 
@@ -274,7 +274,7 @@ export const SubscriptionPlanBreakdown: Record<
     'Direct technical support': false,
   },
 
-  [SubscriptionPlan.MAX.key]: {
+  [Plan.MAX]: {
     'Custom Alerts': 20,
 
     'Historical data restriction': '1 year',
@@ -291,7 +291,7 @@ export const SubscriptionPlanBreakdown: Record<
     'Private queries': 'No',
   },
 
-  [SubscriptionPlan.CUSTOM.key]: {
+  [Plan.CUSTOM]: {
     'Multi-seat account': 'Custom',
 
     'Historical data restriction': 'No restriction',
@@ -311,7 +311,7 @@ export const SubscriptionPlanBreakdown: Record<
     'Custom Alerts': 'Custom',
   },
 
-  [SubscriptionPlan.BUSINESS_PRO.key]: {
+  [Plan.BUSINESS_PRO]: {
     'Multi-seat account': false,
 
     'Historical data restriction': 'Last 2 years',
@@ -339,7 +339,7 @@ export const SubscriptionPlanBreakdown: Record<
     'Custom data integratoins': false,
   },
 
-  [SubscriptionPlan.BUSINESS_MAX.key]: {
+  [Plan.BUSINESS_MAX]: {
     'Multi-seat account': '3 seats',
 
     'Historical data restriction': 'No restriction',

src/lib/ui/app/SubscriptionPlan/PlanButton.svelte

@@ -4,19 +4,19 @@
   import { trackEvent } from '$lib/analytics/index.js'
   import { useCustomerCtx } from '$lib/ctx/customer/index.js'
   import { onSupportClick } from '$lib/utils/support.js'
-  import {
-    BUSINESS_PLANS,
-    checkIsTrialEligiblePlan,
-    CONSUMER_PLANS,
-    SubscriptionPlan,
-  } from '$ui/app/SubscriptionPlan/plans.js'
   import {
     checkIsAlternativeBillingPlan,
     checkIsCurrentPlan,
-    getPlanName,
   } from '$ui/app/SubscriptionPlan/utils.js'
   import Button from '$ui/core/Button/index.js'
   import { cn } from '$ui/utils/index.js'
+  import {
+    checkIsBusinessPlan,
+    checkIsConsumerPlan,
+    checkIsTrialEligiblePlan,
+    getPlanDisplayName,
+    Plan,
+  } from '$lib/utils/plans/index.js'
 
   import { useSubscriptionPlanButtonCtx } from './ctx.js'
 
@@ -35,8 +35,8 @@
   const { customer } = useCustomerCtx()
 
   let source = $derived(_source + '_plan_button')
-  let isBusinessPlan = $derived(BUSINESS_PLANS.has(plan.name))
-  let isConsumerPlan = $derived(CONSUMER_PLANS.has(plan.name))
+  let isBusinessPlan = $derived(checkIsBusinessPlan(plan.name))
+  let isConsumerPlan = $derived(checkIsConsumerPlan(plan.name))
 
   let isCurrentPlan = $derived(checkIsCurrentPlan(customer.$.plan, plan))
   let isSameProductPlan = $derived(
@@ -91,7 +91,7 @@
       Your current plan
     </Button>
   {/if}
-{:else if plan.name === SubscriptionPlan.FREE.key}
+{:else if plan.name === Plan.FREE}
   <Button
     variant="border"
     size="lg"
@@ -103,7 +103,7 @@
   >
     Default plan
   </Button>
-{:else if plan.name === SubscriptionPlan.CUSTOM.key}
+{:else if plan.name === Plan.CUSTOM}
   <Button
     variant="fill"
     size="lg"
@@ -141,7 +141,7 @@
     {...anonymousProps}
     data-type="get_business"
   >
-    Get {getPlanName(plan.name)}
+    Get {getPlanDisplayName(plan.name)}
   </Button>
 {:else if checkIsTrialEligiblePlan(plan.name) && (customer.$.isEligibleForSanbaseTrial || isAnonymous)}
   <Button

src/lib/ui/app/SubscriptionPlan/api.ts

@@ -1,6 +1,5 @@
 import { ApiQuery } from '$lib/api/index.js'
-
-import { BUSINESS_PLANS, CONSUMER_PLANS, Product, SubscriptionPlan } from './plans.js'
+import { checkIsBusinessPlan, checkIsConsumerPlan, Plan, Product } from '$lib/utils/plans/index.js'
 
 export type TProductsWithPlans = readonly {
   id: string
@@ -45,7 +44,7 @@ export type TPlanBillingGroup = Record<string, { month: TProductPlan; year?: TPr
 export function getProductPlans(
   productsWithPlans: TProductsWithPlans,
   productId: string,
-  listOfPlans: Set<string>,
+  planChecker: (planName: string) => boolean,
 ): null | {
   plans: TProductPlan[]
   planBillingGroup: TPlanBillingGroup
@@ -55,13 +54,9 @@ export function getProductPlans(
   if (!productPlans) return null
 
   const plans = productPlans.plans
-    .filter((plan) => listOfPlans.has(plan.name) && !plan.isDeprecated)
+    .filter((plan) => planChecker(plan.name) && !plan.isDeprecated)
     .sort((a, b) =>
-      a.name === SubscriptionPlan.CUSTOM.key
-        ? 1
-        : b.name === SubscriptionPlan.CUSTOM.key
-          ? -1
-          : +a.amount - +b.amount,
+      a.name === Plan.CUSTOM ? 1 : b.name === Plan.CUSTOM ? -1 : +a.amount - +b.amount,
     )
 
   const planBillingGroup = plans.reduce<
@@ -78,7 +73,7 @@ export function getProductPlans(
 export type TProductPlans = ReturnType<typeof getProductPlans>
 
 export const getSanbaseConsumerPlans = (productsWithPlans: TProductsWithPlans) =>
-  getProductPlans(productsWithPlans, Product.Sanbase.id, CONSUMER_PLANS)
+  getProductPlans(productsWithPlans, Product.SANBASE.id, checkIsConsumerPlan)
 
 export const getApiBusinessPlans = (productsWithPlans: TProductsWithPlans) =>
-  getProductPlans(productsWithPlans, Product.SanAPI.id, BUSINESS_PLANS)
+  getProductPlans(productsWithPlans, Product.SANAPI.id, checkIsBusinessPlan)

src/lib/ui/app/SubscriptionPlan/index.ts

@@ -5,22 +5,8 @@ export {
   getSanbaseConsumerPlans,
 } from './api.js'
 
-export {
-  Product,
-  SubscriptionPlan,
-  SubscriptionPlanDetails,
-  BUSINESS_PLANS,
-  CONSUMER_PLANS,
-} from './plans.js'
-export {
-  checkIsSanbaseProduct,
-  checkIsSanApiProduct,
-  checkIsBusinessPlan,
-  checkIsAlternativeBillingPlan,
-  checkIsCurrentPlan,
-  getPlanName,
-  getFormattedPlan,
-} from './utils.js'
+export { SubscriptionPlanDetails } from './plans.js'
+export { checkIsAlternativeBillingPlan, checkIsCurrentPlan, getFormattedPlan } from './utils.js'
 
 export { default as PlanButton } from './PlanButton.svelte'
 export { default as PlanCard } from './PlanCard.svelte'