Use Price objects to show pricing

nemoyn · Sep 26, 2023 · 6c6e87e · 6c6e87e
1 parent 53f9033
commit 6c6e87e
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 15 deletions.
diff --git a/app/(app)/billing/refresh-plans/page.jsx b/app/(app)/billing/refresh-plans/page.jsx
@@ -1,7 +1,6 @@
 import prisma from "@/lib/prisma";
 import LemonSqueezy from '@lemonsqueezy/lemonsqueezy.js';
 
-
 const ls = new LemonSqueezy(process.env.LEMONSQUEEZY_API_KEY);
 
 
@@ -64,6 +63,11 @@ async function getPlans() {
     product = variant['product']
     productId = parseInt(variant['attributes']['product_id'])
 
+    // Get variant's Price objects
+    let prices = await ls.getPrices({ variantId: variantId, perPage: 100 })
+    // The first object is the latest/current price
+    let variant_price = prices['data'][0]['attributes']['unit_price']
+
     variant = variant['attributes']
 
     try {
@@ -79,7 +83,7 @@ async function getPlans() {
           status: variant['status'],
           sort: variant['sort'],
           description: variant['description'],
-          price: variant['price'],
+          price: variant_price, // display price in the app matches current Price object in LS
           interval: variant['interval'],
           intervalCount: variant['interval_count'],
         },
@@ -91,7 +95,7 @@ async function getPlans() {
           status: variant['status'],
           sort: variant['sort'],
           description: variant['description'],
-          price: variant['price'],
+          price: variant_price, // display price in the app matches current Price object in LS
           interval: variant['interval'],
           intervalCount: variant['interval_count'],
         }

diff --git a/app/(app)/billing/webhook/route.js b/app/(app)/billing/webhook/route.js
@@ -1,4 +1,7 @@
 import prisma from "@/lib/prisma";
+import LemonSqueezy from '@lemonsqueezy/lemonsqueezy.js';
+
+const ls = new LemonSqueezy(process.env.LEMONSQUEEZY_API_KEY);
 
 
 async function processEvent(event) {
@@ -42,6 +45,11 @@ async function processEvent(event) {
 
         const lemonSqueezyId = parseInt(obj['id'])
 
+        // Get subscription's Price object
+        // We save the Price value to the subscription so we can display it to the user
+        let resp = await ls.getPrice({ id: data['first_subscription_item']['price_id'] })
+        let subItemPrice = resp['data']['attributes']['unit_price']
+
         const updateData = {
           orderId: data['order_id'],
           name: data['user_name'],
@@ -52,7 +60,7 @@ async function processEvent(event) {
           trialEndsAt: data['trial_ends_at'],
           planId: plan['id'],
           userId: customData['user_id'],
-          price: event.eventName == 'subscription_created' ? plan['price'] : null
+          price: subItemPrice
         }
 
         const createData = updateData

diff --git a/app/api/subscriptions/[id]/route.js b/app/api/subscriptions/[id]/route.js
@@ -94,6 +94,10 @@ export async function POST(request, { params }) {
   // Return values needed to refresh state in UI
   // DB will be updated in the background with webhooks
 
+  // Get price
+  let resp = await ls.getPrice({ id: subscription['data']['attributes']['first_subscription_item']['price_id'] })
+  let subItemPrice = resp['data']['attributes']['unit_price']
+
   // Filtered object
   const sub = {
     product_id: subscription['data']['attributes']['product_id'],
@@ -105,7 +109,8 @@ export async function POST(request, { params }) {
     renews_at: subscription['data']['attributes']['renews_at'],
     ends_at: subscription['data']['attributes']['ends_at'],
     resumes_at: subscription['data']['attributes']['resumes_at'],
-    plan: {}
+    plan: {},
+    price: subItemPrice,
   }
 
   // Get new plan's data

diff --git a/components/plan-button.jsx b/components/plan-button.jsx
@@ -64,6 +64,7 @@ For upgrades you will be charged a prorated amount.`)) {
           planInterval: result['subscription']['plan']['interval'],
           status: result['subscription']['status'],
           renewalDate: result['subscription']['renews_at'],
+          price: result['subscription']['price']
         })
 
         toast.success('Your subscription plan has changed!')

diff --git a/components/subscription-customer-portal.jsx b/components/subscription-customer-portal.jsx
@@ -55,6 +55,7 @@ export const PortalSubscriptionComponent = ({ sub, plans }) => {
         trialEndDate: sub.trialEndsAt,
         expiryDate: sub.endsAt,
         unpauseDate: sub.resumesAt,
+        price: sub.price / 100,
       }
     } else {
       return {}
@@ -99,7 +100,7 @@ const ActiveSubscription = ({ subscription }) => {
   return (
     <>
       <p className="mb-2">
-        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan, paying ${subscription.price}/{subscription.planInterval}.
       </p>
 
       <p className="mb-8">Your next renewal will be on {formatDate(subscription.renewalDate)}.</p>
@@ -114,7 +115,7 @@ const CancelledSubscription = ({ subscription }) => {
   return (
     <>
       <p className="mb-2">
-        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan, paying ${subscription.price}/{subscription.planInterval}.
       </p>
 
       <p className="mb-8">Your subscription has been cancelled and <b>will end on {formatDate(subscription.expiryDate)}</b>. After this date you will no longer have access to the app.</p>
@@ -129,7 +130,7 @@ const PausedSubscription = ({ subscription }) => {
   return (
     <>
       <p className="mb-2">
-        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan, paying ${subscription.price}/{subscription.planInterval}.
       </p>
 
       {subscription.unpauseDate ? (
@@ -148,7 +149,7 @@ const TrialSubscription = ({ subscription }) => {
   return (
     <>
       <p className="mb-2">
-        You are currently on a free trial of the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on a free trial of the <b>{subscription.planName} {subscription.planInterval}ly</b> plan (${subscription.price}/{subscription.planInterval}).
       </p>
 
       <p className="mb-8">Your trial ends on {formatDate(subscription.trialEndDate)}. You can cancel your subscription before this date and you won&apos;t be charged.</p>
@@ -168,7 +169,7 @@ const PastDueSubscription = ({ subscription }) => {
       </div>
 
       <p className="mb-2">
-        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan, paying ${subscription.price}/{subscription.planInterval}.
       </p>
 
       <p className="mb-8">We will attempt a payment on {formatDate(subscription.renewalDate)}.</p>

diff --git a/components/subscription.jsx b/components/subscription.jsx
@@ -33,6 +33,7 @@ export const SubscriptionComponent = ({ sub, plans }) => {
         trialEndDate: sub.trialEndsAt,
         expiryDate: sub.endsAt,
         unpauseDate: sub.resumesAt,
+        price: sub.price / 100,
       }
     } else {
       return {}
@@ -77,7 +78,7 @@ const ActiveSubscription = ({ subscription, setSubscription }) => {
   return (
     <>
       <p className="mb-2">
-        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan, paying ${subscription.price}/{subscription.planInterval}.
       </p>
 
       <p className="mb-2">Your next renewal will be on {formatDate(subscription.renewalDate)}.</p>
@@ -104,7 +105,7 @@ const CancelledSubscription = ({ subscription, setSubscription }) => {
   return (
     <>
       <p className="mb-2">
-        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan, paying ${subscription.price}/{subscription.planInterval}.
       </p>
 
       <p className="mb-8">Your subscription has been cancelled and <b>will end on {formatDate(subscription.expiryDate)}</b>. After this date you will no longer have access to the app.</p>
@@ -119,7 +120,7 @@ const PausedSubscription = ({ subscription, setSubscription }) => {
   return (
     <>
       <p className="mb-2">
-        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan, paying ${subscription.price}/{subscription.planInterval}.
       </p>
 
       {subscription.unpauseDate ? (
@@ -138,7 +139,7 @@ const TrialSubscription = ({ subscription, setSubscription }) => {
   return (
     <>
       <p className="mb-2">
-        You are currently on a free trial of the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on a free trial of the <b>{subscription.planName} {subscription.planInterval}ly</b> plan, paying ${subscription.price}/{subscription.planInterval}.
       </p>
 
       <p className="mb-6">Your trial ends on {formatDate(subscription.trialEndDate)}. You can cancel your subscription before this date and you won&apos;t be charged.</p>
@@ -168,7 +169,7 @@ const PastDueSubscription = ({ subscription, setSubscription }) => {
       </div>
 
       <p className="mb-2">
-        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan.
+        You are currently on the <b>{subscription.planName} {subscription.planInterval}ly</b> plan, paying ${subscription.price}/{subscription.planInterval}.
       </p>
 
       <p className="mb-2">We will attempt a payment on {formatDate(subscription.renewalDate)}.</p>