diff --git a/.storybook/mock/user.ts b/.storybook/mock/user.ts index a04b786f7..3ea2e5cd7 100644 --- a/.storybook/mock/user.ts +++ b/.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', diff --git a/src/lib/analytics/amplitude/flow.svelte.ts b/src/lib/analytics/amplitude/flow.svelte.ts index 491561acb..81ee0d3e9 100644 --- a/src/lib/analytics/amplitude/flow.svelte.ts +++ b/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(() => { diff --git a/src/lib/analytics/posthog/flow.svelte.ts b/src/lib/analytics/posthog/flow.svelte.ts index d0886fd76..b9a904593 100644 --- a/src/lib/analytics/posthog/flow.svelte.ts +++ b/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, }, }), diff --git a/src/lib/ui/app/ExpiredSessionDialog/index.svelte.ts b/src/lib/ui/app/ExpiredSessionDialog/index.svelte.ts index 7a729d37f..78106b094 100644 --- a/src/lib/ui/app/ExpiredSessionDialog/index.svelte.ts +++ b/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' diff --git a/src/lib/ui/app/PaymentForm/flow.ts b/src/lib/ui/app/PaymentForm/flow.ts index 915951dd0..26b539655 100644 --- a/src/lib/ui/app/PaymentForm/flow.ts +++ b/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 @@ -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 diff --git a/src/lib/ui/app/PlanChangeDialog/PlanChangeDialog.svelte b/src/lib/ui/app/PlanChangeDialog/PlanChangeDialog.svelte index 0f7e29de5..449f268cc 100644 --- a/src/lib/ui/app/PlanChangeDialog/PlanChangeDialog.svelte +++ b/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() diff --git a/src/lib/ui/app/SubscriptionPlan/BreakdownTable/breakdown.ts b/src/lib/ui/app/SubscriptionPlan/BreakdownTable/breakdown.ts index fc7ebb877..97cd5b809 100644 --- a/src/lib/ui/app/SubscriptionPlan/BreakdownTable/breakdown.ts +++ b/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 > = { - [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', diff --git a/src/lib/ui/app/SubscriptionPlan/PlanButton.svelte b/src/lib/ui/app/SubscriptionPlan/PlanButton.svelte index 7cf8288d9..1c36579b5 100644 --- a/src/lib/ui/app/SubscriptionPlan/PlanButton.svelte +++ b/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 {/if} -{:else if plan.name === SubscriptionPlan.FREE.key} +{:else if plan.name === Plan.FREE} -{:else if plan.name === SubscriptionPlan.CUSTOM.key} +{:else if plan.name === Plan.CUSTOM} {:else if checkIsTrialEligiblePlan(plan.name) && (customer.$.isEligibleForSanbaseTrial || isAnonymous)}