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 1 month ago
parent a80d012c23
commit 3f4a5bf4bd
4 changed files with 101 additions and 82 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. 74
      src/components/Billing/UpgradeAccountModal.tsx
  2. 38
      src/components/Billing/VerifyUpgrade.tsx
  3. 38
      src/components/GenerateCourse/AICourseLimit.tsx
  4. 33
      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>

38
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>
)}
<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>
);

38
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,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"

33
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">
<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>

Write Preview
Loading…
Cancel
Save