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

Update design for upgrade

Browse Source
feat/ai-courses
Kamran Ahmed 1 month ago
parent e876b10f4d
commit a80d012c23
6 changed files with 230 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .env.example
  2. 20
      src/components/Billing/UpdatePlanConfirmation.tsx
  3. 105
      src/components/Billing/UpgradeAccountModal.tsx
  4. 37
      src/components/Billing/VerifyUpgrade.tsx
  5. 26
      src/components/GenerateCourse/AICourseLimit.tsx
  6. 86
      src/components/GenerateCourse/AILimitsPopup.tsx

4
.env.example
Unescape View File

@ -6,5 +6,5 @@ PUBLIC_COURSE_APP_URL=http://localhost:5173
PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_ID=
PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_ID=
PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_AMOUNT=20
PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_AMOUNT=180
PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_AMOUNT=10
PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_AMOUNT=100

20
src/components/Billing/UpdatePlanConfirmation.tsx
Unescape View File

@ -57,36 +57,36 @@ export function UpdatePlanConfirmation(props: UpdatePlanConfirmationProps) {
return (
<Modal
onClose={isPending ? () => {} : onClose}
bodyClassName="rounded-xl bg-white p-4"
bodyClassName="rounded-xl bg-white p-6"
>
<h3 className="text-xl font-bold">Subscription Update</h3>
<p className="mt-2 text-balance text-gray-500">
<h3 className="text-xl font-bold text-black">Subscription Update</h3>
<p className="mt-2 text-balance text-gray-600">
Your plan will be updated to the{' '}
<b className="text-gray-600">{planDetails.interval}</b> plan, and will
<b className="text-black">{planDetails.interval}</b> plan, and will
be charged{' '}
<b className="text-gray-600">
${selectedPrice.amount} {selectedPrice.interval}
<b className="text-black">
${selectedPrice.amount}/{selectedPrice.interval}
</b>
.
</p>
<div className="mt-6 grid grid-cols-2 gap-2">
<div className="mt-6 grid grid-cols-2 gap-3">
<button
className="rounded-md border border-gray-300 py-2 text-sm font-semibold hover:opacity-80 disabled:opacity-50"
className="rounded-md border border-gray-200 py-2 text-sm font-semibold hover:bg-gray-50 transition-colors disabled:opacity-50"
onClick={onCancel}
disabled={isPending}
>
Cancel
</button>
<button
className="flex items-center justify-center rounded-md border border-gray-800 bg-black py-2 text-sm font-semibold text-white hover:opacity-80 disabled:opacity-50"
className="flex items-center justify-center rounded-md bg-yellow-400 py-2 text-sm font-semibold text-black hover:bg-yellow-500 transition-colors disabled:opacity-50"
disabled={isPending}
onClick={() => {
updatePlan({ priceId: selectedPrice.priceId });
}}
>
{isPending && (
<Loader2Icon className="size-4 animate-spin stroke-[2.5]" />
<Loader2Icon className="size-4 animate-spin stroke-[2.5] mr-2" />
)}
{!isPending && 'Confirm'}
</button>

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

@ -1,4 +1,11 @@
import { Check, Loader2 } from 'lucide-react';
import {
Loader2,
Zap,
Infinity,
MessageSquare,
Sparkles,
Heart,
} from 'lucide-react';
import { useEffect, useState } from 'react';
import { getUser } from '../../lib/jwt';
import { useMutation, useQuery } from '@tanstack/react-query';
@ -91,15 +98,15 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
}
const loader = isLoading ? (
<div className="absolute inset-0 flex h-[540px] w-full items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin stroke-[3px] text-zinc-500" />
<div className="absolute inset-0 flex h-[540px] w-full items-center justify-center bg-white">
<Loader2 className="h-6 w-6 animate-spin stroke-[3px] text-green-600" />
</div>
) : null;
const error = billingError;
const errorContent = error ? (
<div className="flex h-full w-full flex-col">
<p className="text-center text-red-500">
<p className="text-center text-red-400">
{error?.message ||
'An error occurred while loading the billing details.'}
</p>
@ -123,8 +130,9 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
return (
<Modal
onClose={onClose}
wrapperClassName="rounded-xl max-w-3xl w-full min-h-[540px]"
bodyClassName="p-6"
bodyClassName="p-6 bg-white"
wrapperClassName="h-auto rounded-xl max-w-3xl w-full min-h-[540px]"
overlayClassName="items-start md:items-center"
>
<div onClick={(e) => e.stopPropagation()}>
{errorContent}
@ -133,11 +141,15 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
{!isLoading && !error && (
<div className="flex flex-col">
<div className="mb-8 text-left">
<h2 className="text-xl font-bold">
Unlock premium features and by-pass the limits.
<h2 className="text-2xl font-bold text-black">
Unlock Premium Features
</h2>
<p className="mt-2 text-gray-600">
Supercharge your learning experience with premium benefits
</p>
</div>
<div className="grid grid-cols-2 gap-8">
<div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2">
{USER_SUBSCRIPTION_PLAN_PRICES.map((plan) => {
const isCurrentPlanSelected =
currentPlan?.priceId === plan.priceId;
@ -147,19 +159,19 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
<div
key={plan.interval}
className={cn(
'flex flex-col space-y-4 rounded-lg p-6',
'flex flex-col space-y-4 rounded-lg bg-white p-6',
isYearly
? 'border-2 border-yellow-400'
? 'border-2 border-yellow-400 shadow-lg shadow-yellow-400/20'
: 'border border-gray-200',
)}
>
<div className="flex items-start justify-between">
<div>
<h4 className="font-semibold">
<h4 className="font-semibold text-black">
{isYearly ? 'Yearly Payment' : 'Monthly Payment'}
</h4>
{isYearly && (
<span className="text-sm text-green-500">
<span className="text-sm font-medium text-green-600">
(2 months free)
</span>
)}
@ -172,21 +184,23 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
</div>
<div className="flex items-baseline">
{isYearly && (
<p className="mr-2 text-sm text-zinc-400 line-through">
<p className="mr-2 text-sm text-gray-400 line-through">
$
{calculateYearlyPrice(
USER_SUBSCRIPTION_PLAN_PRICES[0].amount,
)}
</p>
)}
<p className="text-3xl font-bold text-yellow-400">
<p className="text-3xl font-bold text-black">
${plan.amount}{' '}
<span className="text-sm font-normal text-zinc-500">
<span className="text-sm font-normal text-gray-500">
/ {isYearly ? 'year' : 'month'}
</span>
</p>
</div>
<div className="flex-grow"></div>
<div>
<button
className={cn(
@ -227,6 +241,65 @@ 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>
<h4 className="font-medium text-black">
Unlimited AI Course Generations
</h4>
<p className="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>
<h4 className="font-medium text-black">
No Daily Limits on course features
</h4>
<p className="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>
<h4 className="font-medium text-black">
Unlimited Course Follow-ups
</h4>
<p className="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>
<h4 className="font-medium text-black">
Early Access to Features
</h4>
<p className="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>
<h4 className="font-medium text-black">
Support Development
</h4>
<p className="text-sm text-gray-600">
Help us continue building roadmap.sh
</p>
</div>
</div>
</div>
</div>
)}
</div>

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

@ -1,6 +1,6 @@
import { useEffect } from 'react';
import { Loader2 } from 'lucide-react';
import { useMutation, useQuery } from '@tanstack/react-query';
import { Loader2, CheckCircle } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { billingDetailsOptions } from '../../queries/billing';
import { queryClient } from '../../stores/query-client';
import { Modal } from '../Modal';
@ -42,31 +42,32 @@ export function VerifyUpgrade(props: VerifyUpgradeProps) {
onClose={() => {}}
bodyClassName="rounded-xl bg-white p-6"
>
<div className="flex items-center justify-between gap-2">
<h3 className="text-xl font-bold">Subscription Activated</h3>
{isFetching && (
<div className="flex animate-pulse items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin stroke-[2.5px] text-gray-500" />
<span className="text-gray-500">Refreshing</span>
</div>
)}
<div className="flex flex-col items-center text-center mb-4">
<CheckCircle className="h-12 w-12 text-green-600 mb-3" />
<h3 className="text-xl font-bold text-black">Subscription Activated</h3>
</div>
<p className="mt-2 text-balance text-gray-500">
<p className="mt-2 text-balance text-gray-600 text-center">
Your subscription has been activated successfully.
</p>
<p className="mt-4 text-balance text-gray-500">
<p className="mt-4 text-balance text-gray-600 text-center">
It might take a few minutes for the changes to reflect. We will{' '}
<b className="text-gray-600">reload</b> the page for you.
<b className="text-black">reload</b> the page for you.
</p>
<p className="mt-4 text-gray-500">
{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>
)}
<p className="mt-6 text-gray-500 text-center text-sm">
If it takes longer than expected, please{' '}
<a className="text-blue-500 underline underline-offset-2 hover:text-blue-300">
<a className="text-blue-600 underline underline-offset-2 hover:text-blue-700">
contact us
</a>
.
</a>.
</p>
</Modal>
);

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

@ -6,9 +6,11 @@ import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
import { billingDetailsOptions } from '../../queries/billing';
import { getPercentage } from '../../helper/number';
import { Gift, Info } from 'lucide-react';
import { AILimitsPopup } from './AILimitsPopup';
export function AICourseLimit() {
const [showUpgradeModal, setShowUpgradeModal] = useState(false);
const [showAILimitsPopup, setShowAILimitsPopup] = useState(false);
const { data: limits, isLoading } = useQuery(
getAiCourseLimitOptions(),
@ -30,12 +32,32 @@ export function AICourseLimit() {
return (
<>
<button className="mr-1 flex items-center gap-1 text-sm font-medium lg:hidden underline underline-offset-2">
<button
className="mr-1 flex items-center gap-1 text-sm font-medium underline underline-offset-2 lg:hidden"
onClick={() => setShowAILimitsPopup(true)}
>
<Info className="size-4" />
{totalPercentage}% limit used
</button>
<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">
{showAILimitsPopup && (
<AILimitsPopup
used={used}
limit={limit}
onClose={() => setShowAILimitsPopup(false)}
onUpgrade={() => {
setShowAILimitsPopup(false);
setShowUpgradeModal(true);
}}
/>
)}
<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>

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

@ -0,0 +1,86 @@
import { Gift } from 'lucide-react';
import { Modal } from '../Modal';
import { formatCommaNumber } from '../../lib/number';
type AILimitsPopupProps = {
used: number;
limit: number;
onClose: () => void;
onUpgrade: () => void;
};
export function AILimitsPopup(props: AILimitsPopupProps) {
const { used, limit, onClose, onUpgrade } = props;
return (
<Modal
onClose={onClose}
wrapperClassName="rounded-xl max-w-xl w-full h-auto"
bodyClassName="p-6"
overlayClassName="items-start md:items-center"
>
<h2 className="mb-8 text-center text-xl font-semibold">
Daily AI Limits
</h2>
{/* Usage Progress Bar */}
<div className="mb-6">
<div className="mb-2 flex justify-between">
<span className="text-sm font-medium">
Usage: {formatCommaNumber(used)}&nbsp;/&nbsp;
{formatCommaNumber(limit)} tokens
</span>
<span className="text-sm font-medium">
{Math.round((used / limit) * 100)}%
</span>
</div>
<div className="h-2.5 w-full rounded-full bg-gray-200">
<div
className="h-2.5 rounded-full bg-yellow-500"
style={{ width: `${Math.min(100, (used / limit) * 100)}%` }}
></div>
</div>
</div>
{/* Usage Stats */}
<div className="rounded-lg bg-gray-50 p-4">
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Used Today</p>
<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-2xl font-bold">{formatCommaNumber(limit)}</p>
</div>
</div>
</div>
{/* Explanation */}
<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.
</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>
<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"
>
Dismiss
</button>
</div>
</Modal>
);
}
Write Preview
Loading…
Cancel
Save