fix: move plans into a composable, to have access to runtime variables

dotmethodme · Oct 7, 2023 · b99b3c3 · b99b3c3
1 parent 7f5a012
commit b99b3c3
Show file tree

Hide file tree

Showing 8 changed files with 186 additions and 177 deletions.
diff --git a/website/components/PricingSimple.vue b/website/components/PricingSimple.vue
@@ -7,6 +7,8 @@ const { user } = storeToRefs(adminStore);
 const slider = ref(0);
 const yearly = ref(false);
 
+const { annualPlans, monthlyPlans, generateUrlByVariantId } = usePlans();
+
 const plan = computed(() => (yearly.value ? annualPlans[slider.value] : monthlyPlans[slider.value]));
 
 const url = computed(() => {

diff --git a/website/components/Usage.vue b/website/components/Usage.vue
@@ -7,9 +7,9 @@ import { render } from "nuxt/dist/app/compat/capi";
 const chartDom = ref<HTMLDivElement | null>(null);
 const myChart = ref<echarts.ECharts>();
 
+const { getPlanById } = usePlans();
 const adminStore = useAdminStore();
 const { subscription } = storeToRefs(adminStore);
-
 const { data: dbSize } = await useFetch("/api/admin/database/size");
 
 const usage = computed(() => {

diff --git a/website/components/sections/Pricing.vue b/website/components/sections/Pricing.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { annualPlans, monthlyPlans } from "~/utils/plans";
-
 const slider = ref(0);
 const yearly = ref(false);
 
+const { annualPlans, monthlyPlans } = usePlans();
+
 const plan = computed(() => (yearly.value ? annualPlans[slider.value] : monthlyPlans[slider.value]));
 const benefits = [
   "Full data ownership",

diff --git a/website/composables/usePlans.ts b/website/composables/usePlans.ts
@@ -0,0 +1,178 @@
+export function usePlans() {
+  const config = useRuntimeConfig();
+
+  const monthlyPlans = [
+    {
+      variantId: config.public.PLAN_MONTHLY_1GB,
+      slug: config.public.PLAN_MONTHLY_1GB_SLUG,
+      size: "1GB storage",
+      sizeBytes: 1073741824,
+      price: "$10",
+      events: "(~1 million events)",
+      type: "monthly",
+    },
+    {
+      variantId: config.public.PLAN_MONTHLY_2GB,
+      slug: config.public.PLAN_MONTHLY_2GB_SLUG,
+      size: "2GB storage",
+      sizeBytes: 2147483648,
+      price: "$19",
+      events: "(~2 million events)",
+      type: "monthly",
+    },
+    {
+      variantId: config.public.PLAN_MONTHLY_4GB,
+      slug: config.public.PLAN_MONTHLY_4GB_SLUG,
+      size: "4GB storage",
+      sizeBytes: 4294967296,
+      price: "$36",
+      events: "(~4 million events)",
+      type: "monthly",
+    },
+    {
+      variantId: config.public.PLAN_MONTHLY_6GB,
+      slug: config.public.PLAN_MONTHLY_6GB_SLUG,
+      size: "6GB storage",
+      sizeBytes: 6442450944,
+      price: "$54",
+      events: "(~6 million events)",
+      type: "monthly",
+    },
+    {
+      variantId: config.public.PLAN_MONTHLY_8GB,
+      slug: config.public.PLAN_MONTHLY_8GB_SLUG,
+      size: "8GB storage",
+      sizeBytes: 8589934592,
+      price: "$70.4",
+      events: "(~8 million events)",
+      type: "monthly",
+    },
+    {
+      variantId: config.public.PLAN_MONTHLY_10GB,
+      slug: config.public.PLAN_MONTHLY_10GB_SLUG,
+      size: "10GB storage",
+      sizeBytes: 10737418240,
+      price: "$85",
+      events: "(~10 million events)",
+      type: "monthly",
+    },
+    {
+      variantId: config.public.PLAN_MONTHLY_12GB,
+      slug: config.public.PLAN_MONTHLY_12GB_SLUG,
+      size: "12GB storage",
+      sizeBytes: 12884901888,
+      price: "$102",
+      events: "(~12 million events)",
+      type: "monthly",
+    },
+    {
+      size: "Contact us",
+      price: "Let's find out",
+      events: "Super duper pro",
+      type: "monthly",
+    },
+  ];
+
+  const annualPlans = [
+    {
+      variantId: config.public.PLAN_YEARLY_1GB,
+      slug: config.public.PLAN_YEARLY_1GB_SLUG,
+      size: "1GB storage",
+      sizeBytes: 1073741824,
+      price: "$108",
+      events: "(~1 million events)",
+      type: "annually",
+    },
+    {
+      variantId: config.public.PLAN_YEARLY_2GB,
+      slug: config.public.PLAN_YEARLY_2GB_SLUG,
+      size: "2GB storage",
+      sizeBytes: 2147483648,
+      price: "$205.2",
+      events: "(~2 million events)",
+      type: "annually",
+    },
+    {
+      variantId: config.public.PLAN_YEARLY_4GB,
+      slug: config.public.PLAN_YEARLY_4GB_SLUG,
+      size: "4GB storage",
+      sizeBytes: 4294967296,
+      price: "$367.2",
+      events: "(~4 million events)",
+      type: "annually",
+    },
+    {
+      variantId: config.public.PLAN_YEARLY_6GB,
+      slug: config.public.PLAN_YEARLY_6GB_SLUG,
+      size: "6GB storage",
+      sizeBytes: 6442450944,
+      price: "$550.8",
+      events: "(~6 million events)",
+      type: "annually",
+    },
+    {
+      variantId: config.public.PLAN_YEARLY_8GB,
+      slug: config.public.PLAN_YEARLY_8GB_SLUG,
+      size: "8GB storage",
+      sizeBytes: 8589934592,
+      price: "$718.08",
+      events: "(~8 million events)",
+      type: "annually",
+    },
+    {
+      variantId: config.public.PLAN_YEARLY_10GB,
+      slug: config.public.PLAN_YEARLY_10GB_SLUG,
+      size: "10GB storage",
+      sizeBytes: 10737418240,
+      price: "$867",
+      events: "(~10 million events)",
+      type: "annually",
+    },
+    {
+      variantId: config.public.PLAN_YEARLY_12GB,
+      slug: config.public.PLAN_YEARLY_12GB_SLUG,
+      size: "12GB storage",
+      sizeBytes: 12884901888,
+      price: "$1040.4",
+      events: "(~12 million events)",
+      type: "annually",
+    },
+    {
+      size: "Contact us",
+      price: "Let's find out",
+      events: "Super duper pro",
+    },
+  ];
+
+  const allPlans = [...monthlyPlans, ...annualPlans];
+
+  function getPlanById(id: string) {
+    return allPlans.find((plan) => plan.variantId === id);
+  }
+
+  function generateUrlByVariantId(variantId: string, email: string, profileId: string): string | undefined {
+    const plan = getPlanById(variantId);
+    if (!plan) return;
+
+    const otherVariants = allPlans
+      .filter((p) => p.type !== plan.type)
+      .map((x) => x.variantId)
+      .join(",");
+
+    const url = new URL(`https://storywise.lemonsqueezy.com/checkout/buy/${plan.slug}`);
+    url.searchParams.append("disabled", otherVariants);
+    url.searchParams.set("checkout[email]", email);
+    url.searchParams.set("checkout[custom][user_id]", profileId);
+    url.searchParams.set("redirect_url", window.location.origin + "/admin");
+
+    return url.toString();
+  }
+
+  return {
+    monthlyPlans,
+    annualPlans,
+    allPlans,
+    getPlanById,
+    generateUrlByVariantId,
+  };
+}
diff --git a/website/pages/admin/index.vue b/website/pages/admin/index.vue
@@ -6,6 +6,7 @@ definePageMeta({
   layout: "admin",
 });
 
+const { generateUrlByVariantId } = usePlans();
 const route = useRoute();
 const adminStore = useAdminStore();
 const { apps, user, subscriptionLoading, subscription } = storeToRefs(adminStore);

diff --git a/website/pages/admin/subscription.vue b/website/pages/admin/subscription.vue
@@ -7,6 +7,7 @@ definePageMeta({
   layout: "admin",
 });
 
+const { getPlanById } = usePlans();
 const adminStore = useAdminStore();
 const { subscription, subscriptionLoading } = storeToRefs(adminStore);
 

diff --git a/website/pages/onboarding.vue b/website/pages/onboarding.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import { getPlanById } from "~/utils/plans";
-
 // layout
 defineAppConfig({
   layout: "docs",
 });
 
+const { getPlanById } = usePlans();
 const router = useRouter();
 const route = useRoute();
 const { signIn, data, status } = useAuth();