info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-03 14:22:41 +02:00
Code Issues Releases Wiki Activity

Add terms and conditions link

Browse Source
This commit is contained in:
Kamran Ahmed
2025-07-11 16:20:44 +01:00
parent bc71395f64
commit 76dd708f1f
1 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Billing/UpgradeAccountModal.tsx
View File

@@ -1,6 +1,14 @@
import { useMutation, useQuery } from '@tanstack/react-query'; import { useMutation, useQuery } from '@tanstack/react-query';
import type { LucideIcon } from 'lucide-react'; import type { LucideIcon } from 'lucide-react';
import { Archive, Crown, Loader2, Map, MessageCircleIcon, X, Zap } from 'lucide-react'; import {
Archive,
Crown,
Loader2,
Map,
MessageCircleIcon,
X,
Zap,
} from 'lucide-react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useToast } from '../../hooks/use-toast'; import { useToast } from '../../hooks/use-toast';
import { getUser } from '../../lib/jwt'; import { getUser } from '../../lib/jwt';
@@ -261,9 +269,9 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
const Icon = perk.icon; const Icon = perk.icon;
return ( return (
<div key={index} className="flex items-start space-x-3"> <div key={index} className="flex items-start space-x-3">
<Icon className="size-4 mt-1 top-[0.5px] relative text-gray-600" /> <Icon className="relative top-[0.5px] mt-1 size-4 text-gray-600" />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-medium text-gray-900 mb-0.5"> <p className="mb-0.5 text-sm font-medium text-gray-900">
{perk.title} {perk.title}
</p> </p>
<p className="text-xs text-gray-600">{perk.description}</p> <p className="text-xs text-gray-600">{perk.description}</p>
@@ -284,23 +292,29 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
disabled={ disabled={
isCreatingCheckoutSession || currentPlan?.interval === 'year' isCreatingCheckoutSession || currentPlan?.interval === 'year'
} }
className={`w-full h-11 rounded-lg px-4 text-sm font-medium transition-colors flex items-center justify-center disabled:opacity-50 ${ className={`flex h-11 w-full items-center justify-center rounded-lg px-4 text-sm font-medium transition-colors disabled:opacity-50 ${
currentPlan?.interval === 'year' currentPlan?.interval === 'year'
? 'bg-yellow-300 text-gray-700 cursor-not-allowed' ? 'cursor-not-allowed bg-yellow-300 text-gray-700'
: 'bg-yellow-400 text-black hover:bg-yellow-500' : 'bg-yellow-400 text-black hover:bg-yellow-500'
}`} }`}
> >
{isCreatingCheckoutSession && selectedPlan === 'year' ? ( {isCreatingCheckoutSession && selectedPlan === 'year' ? (
<Loader2 className="mx-auto h-4 w-4 animate-spin" /> <Loader2 className="mx-auto h-4 w-4 animate-spin" />
) : ( ) : (
<div className="flex items-center justify-between text-left w-full"> <div className="flex w-full items-center justify-between text-left">
<span>Yearly Plan - ${yearlyPlan.amount}/year</span> <span>Yearly Plan - ${yearlyPlan.amount}/year</span>
{currentPlan?.interval === 'year' ? ( {currentPlan?.interval === 'year' ? (
<span className="rounded bg-green-600 px-2 py-1 text-xs text-white">Current Plan</span> <span className="rounded bg-green-600 px-2 py-1 text-xs text-white">
Current Plan
</span>
) : ( ) : (
monthlyPlan && ( monthlyPlan && (
<span className="rounded bg-yellow-600 px-2 py-1 text-xs text-white"> <span className="rounded bg-yellow-600 px-2 py-1 text-xs text-white">
{Math.round((monthlyPlan.amount * 12 - yearlyPlan.amount) / monthlyPlan.amount)} months free {Math.round(
(monthlyPlan.amount * 12 - yearlyPlan.amount) /
monthlyPlan.amount,
)}{' '}
months free
</span> </span>
) )
)} )}
@@ -316,19 +330,21 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
disabled={ disabled={
isCreatingCheckoutSession || currentPlan?.interval === 'month' isCreatingCheckoutSession || currentPlan?.interval === 'month'
} }
className={`w-full h-11 rounded-lg border px-4 text-sm font-medium transition-colors flex items-center justify-center disabled:opacity-50 ${ className={`flex h-11 w-full items-center justify-center rounded-lg border px-4 text-sm font-medium transition-colors disabled:opacity-50 ${
currentPlan?.interval === 'month' currentPlan?.interval === 'month'
? 'border-yellow-300 bg-yellow-50 text-gray-700 cursor-not-allowed' ? 'cursor-not-allowed border-yellow-300 bg-yellow-50 text-gray-700'
: 'border-yellow-400 bg-yellow-50 text-black hover:bg-yellow-100' : 'border-yellow-400 bg-yellow-50 text-black hover:bg-yellow-100'
}`} }`}
> >
{isCreatingCheckoutSession && selectedPlan === 'month' ? ( {isCreatingCheckoutSession && selectedPlan === 'month' ? (
<Loader2 className="mx-auto h-4 w-4 animate-spin" /> <Loader2 className="mx-auto h-4 w-4 animate-spin" />
) : ( ) : (
<div className="flex items-center justify-between text-left w-full"> <div className="flex w-full items-center justify-between text-left">
<span>Monthly Plan - ${monthlyPlan.amount}/month</span> <span>Monthly Plan - ${monthlyPlan.amount}/month</span>
{currentPlan?.interval === 'month' && ( {currentPlan?.interval === 'month' && (
<span className="rounded bg-black px-2 py-1 text-xs text-white">Current Plan</span> <span className="rounded bg-black px-2 py-1 text-xs text-white">
Current Plan
</span>
)} )}
</div> </div>
)} )}
@@ -339,7 +355,10 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
{/* Trust indicators */} {/* Trust indicators */}
<div className="mt-4 text-center"> <div className="mt-4 text-center">
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500">
By upgrading you agree to our terms and conditions By upgrading you agree to our{' '}
<a href="/terms" className="text-yellow-600 hover:underline">
terms and conditions
</a>
</p> </p>
</div> </div>
</div> </div>