wip: billing page

src/components/AccountSidebar.astro

@@ -64,6 +64,16 @@ const sidebarLinks = [
       classes: 'h-4 w-4',
     },
   },
+  {
+    href: '/account/billing',
+    title: 'Billing',
+    id: 'billing',
+    isNew: true,
+    icon: {
+      glyph: 'badge',
+      classes: 'h-4 w-4',
+    },
+  },
   {
     href: '/account/settings',
     title: 'Settings',

src/components/Billing/BillingPage.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../queries/billing';
 import { queryClient } from '../../stores/query-client';
 import { httpPost } from '../../lib/query-http';
-import { UpgradePlanModal } from '../CourseLanding/UpgradePlanModal';
+import { UpgradeAccountModal } from './UpgradeAccountModal';
 import { getUrlParams } from '../../lib/browser';
 import { VerifyUpgrade } from './VerifyUpgrade';
 
@@ -66,15 +66,12 @@ export function BillingPage() {
   }
 
   const selectedPlanDetails = USER_SUBSCRIPTION_PLAN_PRICES.find(
-    (plan) => plan.planId === (billingDetails?.planId || 'free'),
+    (plan) => plan.priceId === billingDetails?.priceId,
   );
 
   const shouldHideDeleteButton =
     billingDetails?.status === 'canceled' || billingDetails?.cancelAtPeriodEnd;
-  const priceDetails =
+  const priceDetails = selectedPlanDetails;
-    (billingDetails?.interval || 'month') === 'month'
-      ? selectedPlanDetails?.prices.month
-      : selectedPlanDetails?.prices.year;
 
   const formattedNextBillDate = new Date(
     billingDetails?.currentPeriodEnd || '',
@@ -87,7 +84,7 @@ export function BillingPage() {
   return (
     <>
       {showUpgradeModal && (
-        <UpgradePlanModal
+        <UpgradeAccountModal
           onClose={() => {
             setShowUpgradeModal(false);
           }}
@@ -101,7 +98,7 @@ export function BillingPage() {
       {billingDetails?.status === 'none' && !isLoadingBillingDetails && (
         <div className="flex h-full w-full flex-col">
           <p className="text-gray-800">
-            You are using free plan,&nbsp;
+            You are not subscribed to any plan,&nbsp;
             <button
               className="text-black underline underline-offset-2 hover:text-gray-800"
               onClick={() => {
@@ -114,7 +111,9 @@ export function BillingPage() {
         </div>
       )}
 
-      {billingDetails?.status !== 'none' && !isLoadingBillingDetails && (
+      {billingDetails?.status !== 'none' &&
+        !isLoadingBillingDetails &&
+        priceDetails && (
           <>
             {billingDetails?.status === 'past_due' && (
               <div className="mb-4 rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-500">
@@ -134,9 +133,9 @@ export function BillingPage() {
                 <div className="flex flex-col">
                   <span className="text-gray-500">Payment</span>
                   <span className="mt-1 text-lg font-medium capitalize text-black">
-                  ${priceDetails!.amount / 100}
+                    ${priceDetails.amount}
                     <span className="text-sm font-normal text-gray-500">
-                    &nbsp;/ {priceDetails!.interval}
+                      &nbsp;/ {priceDetails.interval}
                     </span>
                   </span>
                 </div>
@@ -157,7 +156,9 @@ export function BillingPage() {
             <div className="mt-4 flex justify-between gap-2">
               <div className="flex flex-col">
                 <span className="text-gray-500">
-                {billingDetails?.cancelAtPeriodEnd ? 'Expires On' : 'Renews On'}
+                  {billingDetails?.cancelAtPeriodEnd
+                    ? 'Expires On'
+                    : 'Renews On'}
                 </span>
                 <span className="mt-1 text-lg font-medium capitalize text-black">
                   {formattedNextBillDate}

src/components/Billing/UpgradeAccountModal.tsx

@@ -26,10 +26,13 @@ type CreateSubscriptionCheckoutSessionResponse = {
 
 type UpgradeAccountModalProps = {
   onClose: () => void;
+
+  success?: string;
+  cancel?: string;
 };
 
 export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
-  const { onClose } = props;
+  const { onClose, success, cancel } = props;
 
   const [selectedPlan, setSelectedPlan] =
     useState<AllowedSubscriptionInterval>('month');
@@ -199,8 +202,8 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
                             const currentUrlPath = window.location.pathname;
                             createCheckoutSession({
                               priceId: plan.priceId,
-                              success: `${currentUrlPath}?s=1`,
+                              success: success || `${currentUrlPath}?s=1`,
-                              cancel: `${currentUrlPath}?s=0`,
+                              cancel: cancel || `${currentUrlPath}?s=0`,
                             });
                             return;
                           }