github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve logic for upgrade and limits button

Browse Source
feat/ai-courses
Kamran Ahmed 2 months ago
parent a80d012c23
commit 3f4a5bf4bd
4 changed files with 101 additions and 82 deletions
Split View
  1. 74
      src/components/Billing/UpgradeAccountModal.tsx
  2. 34
      src/components/Billing/VerifyUpgrade.tsx
  3. 8
      src/components/GenerateCourse/AICourseLimit.tsx
  4. 23
      src/components/GenerateCourse/AILimitsPopup.tsx

74
src/components/Billing/UpgradeAccountModal.tsx
Unescape View File

@ -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>

34
src/components/Billing/VerifyUpgrade.tsx
Unescape View File

@ -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 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>
);

8
src/components/GenerateCourse/AICourseLimit.tsx
Unescape View File

@ -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,6 +56,7 @@ export function AICourseLimit() {
/>
)}
{(!isPaidUser || isNearLimit) && (
<button
onClick={() => {
setShowAILimitsPopup(true);
@ -68,8 +73,9 @@ export function AICourseLimit() {
}}
></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"

23
src/components/GenerateCourse/AILimitsPopup.tsx
Unescape View File

@ -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">
{!isPaidUser && (
<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"
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
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>

Write Preview
Loading…
Cancel
Save