From 3f4a5bf4bd62fa46013e7a29d715f325ecfeb23c Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 10 Mar 2025 12:17:57 +0000
Subject: [PATCH] Improve logic for upgrade and limits button

---
 .../Billing/UpgradeAccountModal.tsx           | 74 +++++++++----------
 src/components/Billing/VerifyUpgrade.tsx      | 38 +++++-----
 .../GenerateCourse/AICourseLimit.tsx          | 38 ++++++----
 .../GenerateCourse/AILimitsPopup.tsx          | 33 ++++++---
 4 files changed, 101 insertions(+), 82 deletions(-)

diff --git a/src/components/Billing/UpgradeAccountModal.tsx b/src/components/Billing/UpgradeAccountModal.tsx
index 47852f720..8039179f6 100644
--- a/src/components/Billing/UpgradeAccountModal.tsx
+++ b/src/components/Billing/UpgradeAccountModal.tsx
@@ -130,8 +130,8 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
   return (
     <Modal
       onClose={onClose}
-      bodyClassName="p-6 bg-white"
-      wrapperClassName="h-auto rounded-xl max-w-3xl w-full min-h-[540px]"
+      bodyClassName="p-4 sm:p-6 bg-white"
+      wrapperClassName="h-auto rounded-xl max-w-3xl w-full min-h-[540px] mx-2 sm:mx-4"
       overlayClassName="items-start md:items-center"
     >
       <div onClick={(e) => e.stopPropagation()}>
@@ -140,16 +140,16 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
         {loader}
         {!isLoading && !error && (
           <div className="flex flex-col">
-            <div className="mb-8 text-left">
-              <h2 className="text-2xl font-bold text-black">
+            <div className="mb-6 sm:mb-8 text-left">
+              <h2 className="text-xl sm:text-2xl font-bold text-black">
                 Unlock Premium Features
               </h2>
-              <p className="mt-2 text-gray-600">
+              <p className="mt-1 sm:mt-2 text-sm sm:text-base text-gray-600">
                 Supercharge your learning experience with premium benefits
               </p>
             </div>
 
-            <div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2">
+            <div className="mb-6 sm:mb-8 grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2">
               {USER_SUBSCRIPTION_PLAN_PRICES.map((plan) => {
                 const isCurrentPlanSelected =
                   currentPlan?.priceId === plan.priceId;
@@ -159,41 +159,41 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
                   <div
                     key={plan.interval}
                     className={cn(
-                      'flex flex-col space-y-4 rounded-lg bg-white p-6',
+                      'flex flex-col space-y-3 sm:space-y-4 rounded-lg bg-white p-4 sm:p-6',
                       isYearly
-                        ? 'border-2 border-yellow-400 shadow-lg shadow-yellow-400/20'
+                        ? 'border-2 border-yellow-400'
                         : 'border border-gray-200',
                     )}
                   >
                     <div className="flex items-start justify-between">
                       <div>
-                        <h4 className="font-semibold text-black">
+                        <h4 className="text-sm sm:text-base font-semibold text-black">
                           {isYearly ? 'Yearly Payment' : 'Monthly Payment'}
                         </h4>
                         {isYearly && (
-                          <span className="text-sm font-medium text-green-600">
+                          <span className="text-xs sm:text-sm font-medium text-green-600">
                             (2 months free)
                           </span>
                         )}
                       </div>
                       {isYearly && (
-                        <span className="rounded-full bg-yellow-400 px-2 py-1 text-xs font-semibold text-black">
+                        <span className="rounded-full bg-yellow-400 px-1.5 py-0.5 sm:px-2 sm:py-1 text-xs font-semibold text-black">
                           Most Popular
                         </span>
                       )}
                     </div>
                     <div className="flex items-baseline">
                       {isYearly && (
-                        <p className="mr-2 text-sm text-gray-400 line-through">
+                        <p className="mr-2 text-xs sm:text-sm text-gray-400 line-through">
                           $
                           {calculateYearlyPrice(
                             USER_SUBSCRIPTION_PLAN_PRICES[0].amount,
                           )}
                         </p>
                       )}
-                      <p className="text-3xl font-bold text-black">
+                      <p className="text-2xl sm:text-3xl font-bold text-black">
                         ${plan.amount}{' '}
-                        <span className="text-sm font-normal text-gray-500">
+                        <span className="text-xs sm:text-sm font-normal text-gray-500">
                           / {isYearly ? 'year' : 'month'}
                         </span>
                       </p>
@@ -204,7 +204,7 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
                     <div>
                       <button
                         className={cn(
-                          'flex min-h-11 w-full items-center justify-center rounded-md py-2.5 font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400 disabled:cursor-not-allowed disabled:opacity-60',
+                          'flex min-h-9 sm:min-h-11 w-full items-center justify-center rounded-md py-2 sm:py-2.5 text-sm sm:text-base font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400 disabled:cursor-not-allowed disabled:opacity-60',
                           'bg-yellow-400 text-black hover:bg-yellow-500',
                         )}
                         disabled={
@@ -229,7 +229,7 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
                       >
                         {isCreatingCheckoutSession &&
                         selectedPlan === plan.interval ? (
-                          <Loader2 className="h-4 w-4 animate-spin" />
+                          <Loader2 className="h-3.5 w-3.5 sm:h-4 sm:w-4 animate-spin" />
                         ) : isCurrentPlanSelected ? (
                           'Current Plan'
                         ) : (
@@ -243,58 +243,58 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
             </div>
 
             {/* Benefits Section */}
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-              <div className="flex items-start space-x-3">
-                <Zap className="mt-0.5 h-5 w-5 text-yellow-400" />
+            <div className="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2">
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <Zap className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-yellow-400" />
                 <div>
-                  <h4 className="font-medium text-black">
+                  <h4 className="text-sm sm:text-base font-medium text-black">
                     Unlimited AI Course Generations
                   </h4>
-                  <p className="text-sm text-gray-600">
+                  <p className="text-xs sm:text-sm text-gray-600">
                     Generate as many custom courses as you need
                   </p>
                 </div>
               </div>
-              <div className="flex items-start space-x-3">
-                <Infinity className="mt-0.5 h-5 w-5 text-yellow-400" />
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <Infinity className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-yellow-400" />
                 <div>
-                  <h4 className="font-medium text-black">
+                  <h4 className="text-sm sm:text-base font-medium text-black">
                     No Daily Limits on course features
                   </h4>
-                  <p className="text-sm text-gray-600">
+                  <p className="text-xs sm:text-sm text-gray-600">
                     Use all features without restrictions
                   </p>
                 </div>
               </div>
-              <div className="flex items-start space-x-3">
-                <MessageSquare className="mt-0.5 h-5 w-5 text-yellow-400" />
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <MessageSquare className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-yellow-400" />
                 <div>
-                  <h4 className="font-medium text-black">
+                  <h4 className="text-sm sm:text-base font-medium text-black">
                     Unlimited Course Follow-ups
                   </h4>
-                  <p className="text-sm text-gray-600">
+                  <p className="text-xs sm:text-sm text-gray-600">
                     Ask as many questions as you need
                   </p>
                 </div>
               </div>
-              <div className="flex items-start space-x-3">
-                <Sparkles className="mt-0.5 h-5 w-5 text-yellow-400" />
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <Sparkles className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-yellow-400" />
                 <div>
-                  <h4 className="font-medium text-black">
+                  <h4 className="text-sm sm:text-base font-medium text-black">
                     Early Access to Features
                   </h4>
-                  <p className="text-sm text-gray-600">
+                  <p className="text-xs sm:text-sm text-gray-600">
                     Be the first to try new tools and features
                   </p>
                 </div>
               </div>
-              <div className="flex items-start space-x-3">
-                <Heart className="mt-0.5 h-5 w-5 text-yellow-400" />
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <Heart className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-yellow-400" />
                 <div>
-                  <h4 className="font-medium text-black">
+                  <h4 className="text-sm sm:text-base font-medium text-black">
                     Support Development
                   </h4>
-                  <p className="text-sm text-gray-600">
+                  <p className="text-xs sm:text-sm text-gray-600">
                     Help us continue building roadmap.sh
                   </p>
                 </div>
diff --git a/src/components/Billing/VerifyUpgrade.tsx b/src/components/Billing/VerifyUpgrade.tsx
index a96673b0b..f59105fd0 100644
--- a/src/components/Billing/VerifyUpgrade.tsx
+++ b/src/components/Billing/VerifyUpgrade.tsx
@@ -13,7 +13,7 @@ type VerifyUpgradeProps = {
 export function VerifyUpgrade(props: VerifyUpgradeProps) {
   const { newPriceId } = props;
 
-  const { data: userBillingDetails, isFetching } = useQuery(
+  const { data: userBillingDetails } = useQuery(
     {
       ...billingDetailsOptions(),
       refetchInterval: 1000,
@@ -42,32 +42,34 @@ export function VerifyUpgrade(props: VerifyUpgradeProps) {
       onClose={() => {}}
       bodyClassName="rounded-xl bg-white p-6"
     >
-      <div className="flex flex-col items-center text-center mb-4">
-        <CheckCircle className="h-12 w-12 text-green-600 mb-3" />
+      <div className="mb-4 flex flex-col items-center text-center">
+        <CheckCircle className="mb-3 h-12 w-12 text-green-600" />
         <h3 className="text-xl font-bold text-black">Subscription Activated</h3>
       </div>
-      
-      <p className="mt-2 text-balance text-gray-600 text-center">
+
+      <p className="mt-2 text-balance text-center text-gray-600">
         Your subscription has been activated successfully.
       </p>
 
-      <p className="mt-4 text-balance text-gray-600 text-center">
-        It might take a few minutes for the changes to reflect. We will{' '}
+      <p className="mt-4 text-balance text-center text-gray-600">
+        It might take a minute for the changes to reflect. We will{' '}
         <b className="text-black">reload</b> the page for you.
       </p>
 
-      {isFetching && (
-        <div className="flex animate-pulse items-center justify-center gap-2 mt-4">
-          <Loader2 className="h-5 w-5 animate-spin stroke-[2.5px] text-green-600" />
-          <span className="text-gray-600">Refreshing</span>
-        </div>
-      )}
+      <div className="my-6 flex animate-pulse items-center justify-center gap-2">
+        <Loader2 className="size-4 animate-spin stroke-[2.5px] text-green-600" />
+        <span className="text-gray-600">Please wait...</span>
+      </div>
 
-      <p className="mt-6 text-gray-500 text-center text-sm">
-        If it takes longer than expected, please{' '}
-        <a className="text-blue-600 underline underline-offset-2 hover:text-blue-700">
-          contact us
-        </a>.
+      <p className="text-center text-sm text-gray-500">
+        If it takes longer than expected, please email us at{' '}
+        <a
+          href="mailto:info@roadmap.sh"
+          className="text-blue-600 underline underline-offset-2 hover:text-blue-700"
+        >
+          info@roadmap.sh
+        </a>
+        .
       </p>
     </Modal>
   );
diff --git a/src/components/GenerateCourse/AICourseLimit.tsx b/src/components/GenerateCourse/AICourseLimit.tsx
index 9c04c9535..e38fe91aa 100644
--- a/src/components/GenerateCourse/AICourseLimit.tsx
+++ b/src/components/GenerateCourse/AICourseLimit.tsx
@@ -30,6 +30,10 @@ export function AICourseLimit() {
 
   const totalPercentage = getPercentage(used, limit);
 
+  // has consumed 80% of the limit
+  const isNearLimit = used >= limit * 0.8;
+  const isPaidUser = userBillingDetails.status !== 'none';
+
   return (
     <>
       <button
@@ -52,24 +56,26 @@ export function AICourseLimit() {
         />
       )}
 
-      <button
-        onClick={() => {
-          setShowAILimitsPopup(true);
-        }}
-        className="relative hidden h-full min-h-[38px] cursor-pointer items-center overflow-hidden rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50 lg:flex"
-      >
-        <span className="relative z-10">
-          {totalPercentage}% of the daily limit used
-        </span>
-        <div
-          className="absolute inset-0 h-full bg-gray-200/80"
-          style={{
-            width: `${totalPercentage}%`,
+      {(!isPaidUser || isNearLimit) && (
+        <button
+          onClick={() => {
+            setShowAILimitsPopup(true);
           }}
-        ></div>
-      </button>
+          className="relative hidden h-full min-h-[38px] cursor-pointer items-center overflow-hidden rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50 lg:flex"
+        >
+          <span className="relative z-10">
+            {totalPercentage}% of the daily limit used
+          </span>
+          <div
+            className="absolute inset-0 h-full bg-gray-200/80"
+            style={{
+              width: `${totalPercentage}%`,
+            }}
+          ></div>
+        </button>
+      )}
 
-      {userBillingDetails.status === 'none' && (
+      {!isPaidUser && (
         <>
           <button
             className="hidden items-center justify-center gap-1 rounded-md bg-yellow-400 px-4 py-1 text-sm font-medium underline-offset-2 hover:bg-yellow-500 lg:flex"
diff --git a/src/components/GenerateCourse/AILimitsPopup.tsx b/src/components/GenerateCourse/AILimitsPopup.tsx
index e3f414287..3dee3df78 100644
--- a/src/components/GenerateCourse/AILimitsPopup.tsx
+++ b/src/components/GenerateCourse/AILimitsPopup.tsx
@@ -1,6 +1,9 @@
 import { Gift } from 'lucide-react';
 import { Modal } from '../Modal';
 import { formatCommaNumber } from '../../lib/number';
+import { billingDetailsOptions } from '../../queries/billing';
+import { queryClient } from '../../stores/query-client';
+import { useQuery } from '@tanstack/react-query';
 
 type AILimitsPopupProps = {
   used: number;
@@ -12,6 +15,11 @@ type AILimitsPopupProps = {
 export function AILimitsPopup(props: AILimitsPopupProps) {
   const { used, limit, onClose, onUpgrade } = props;
 
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
+    useQuery(billingDetailsOptions(), queryClient);
+
+  const isPaidUser = userBillingDetails?.status !== 'none';
+
   return (
     <Modal
       onClose={onClose}
@@ -50,7 +58,7 @@ export function AILimitsPopup(props: AILimitsPopupProps) {
             <p className="text-2xl font-bold">{formatCommaNumber(used)}</p>
           </div>
           <div>
-            <p className="text-sm text-gray-500">Daily Token Limit</p>
+            <p className="text-sm text-gray-500">Daily Limit</p>
             <p className="text-2xl font-bold">{formatCommaNumber(limit)}</p>
           </div>
         </div>
@@ -60,25 +68,28 @@ export function AILimitsPopup(props: AILimitsPopupProps) {
       <div className="mt-2">
         <div className="space-y-3 text-gray-600">
           <p className="text-sm">
-            Limit resets every 24 hours. Consider upgrading for more tokens.
+            Limit resets every 24 hours.{' '}
+            {!isPaidUser && 'Consider upgrading for more tokens.'}
           </p>
         </div>
       </div>
 
       {/* Action Button */}
       <div className="mt-auto flex flex-col gap-2 pt-4">
-        <button
-          onClick={onUpgrade}
-          className="flex w-full items-center justify-center gap-2 rounded-lg bg-yellow-400 px-4 py-2.5 font-medium text-black transition-colors hover:bg-yellow-500"
-        >
-          <Gift className="size-4" />
-          Upgrade
-        </button>
+        {!isPaidUser && (
+          <button
+            onClick={onUpgrade}
+            className="flex w-full items-center justify-center gap-2 rounded-lg bg-yellow-400 px-4 py-2.5 text-sm font-medium text-black transition-colors hover:bg-yellow-500"
+          >
+            <Gift className="size-4" />
+            Upgrade to Unlimited
+          </button>
+        )}
         <button
           onClick={onClose}
-          className="w-full rounded-lg bg-gray-200 px-4 py-2.5 text-gray-600 transition-colors hover:bg-gray-300"
+          className="w-full rounded-lg bg-gray-200 px-4 py-2.5 text-sm text-gray-600 transition-colors hover:bg-gray-300"
         >
-          Dismiss
+          Close
         </button>
       </div>
     </Modal>