From a80d012c233cb7f9d92af5b7afa1fce4510440e6 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Mon, 10 Mar 2025 11:46:28 +0000 Subject: [PATCH] Update design for upgrade --- .env.example | 4 +- .../Billing/UpdatePlanConfirmation.tsx | 20 ++-- .../Billing/UpgradeAccountModal.tsx | 105 +++++++++++++++--- src/components/Billing/VerifyUpgrade.tsx | 37 +++--- .../GenerateCourse/AICourseLimit.tsx | 26 ++++- .../GenerateCourse/AILimitsPopup.tsx | 86 ++++++++++++++ 6 files changed, 230 insertions(+), 48 deletions(-) create mode 100644 src/components/GenerateCourse/AILimitsPopup.tsx diff --git a/.env.example b/.env.example index edfaac8fe..9bb481b2b 100644 --- a/.env.example +++ b/.env.example @@ -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 \ No newline at end of file +PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_AMOUNT=10 +PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_AMOUNT=100 \ No newline at end of file diff --git a/src/components/Billing/UpdatePlanConfirmation.tsx b/src/components/Billing/UpdatePlanConfirmation.tsx index 656e57b9f..d0bf0893e 100644 --- a/src/components/Billing/UpdatePlanConfirmation.tsx +++ b/src/components/Billing/UpdatePlanConfirmation.tsx @@ -57,36 +57,36 @@ export function UpdatePlanConfirmation(props: UpdatePlanConfirmationProps) { return ( {} : onClose} - bodyClassName="rounded-xl bg-white p-4" + bodyClassName="rounded-xl bg-white p-6" > -

Subscription Update

-

+

Subscription Update

+

Your plan will be updated to the{' '} - {planDetails.interval} plan, and will + {planDetails.interval} plan, and will be charged{' '} - - ${selectedPrice.amount} {selectedPrice.interval} + + ${selectedPrice.amount}/{selectedPrice.interval} .

-
+
diff --git a/src/components/Billing/UpgradeAccountModal.tsx b/src/components/Billing/UpgradeAccountModal.tsx index 18a57e0e3..47852f720 100644 --- a/src/components/Billing/UpgradeAccountModal.tsx +++ b/src/components/Billing/UpgradeAccountModal.tsx @@ -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 ? ( -
- +
+
) : null; const error = billingError; const errorContent = error ? (
-

+

{error?.message || 'An error occurred while loading the billing details.'}

@@ -123,8 +130,9 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) { return (
e.stopPropagation()}> {errorContent} @@ -133,11 +141,15 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) { {!isLoading && !error && (
-

- Unlock premium features and by-pass the limits. +

+ Unlock Premium Features

+

+ Supercharge your learning experience with premium benefits +

-
+ +
{USER_SUBSCRIPTION_PLAN_PRICES.map((plan) => { const isCurrentPlanSelected = currentPlan?.priceId === plan.priceId; @@ -147,19 +159,19 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
-

+

{isYearly ? 'Yearly Payment' : 'Monthly Payment'}

{isYearly && ( - + (2 months free) )} @@ -172,21 +184,23 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
{isYearly && ( -

+

$ {calculateYearlyPrice( USER_SUBSCRIPTION_PLAN_PRICES[0].amount, )}

)} -

+

${plan.amount}{' '} - + / {isYearly ? 'year' : 'month'}

+
+
)}
diff --git a/src/components/Billing/VerifyUpgrade.tsx b/src/components/Billing/VerifyUpgrade.tsx index efb913a30..a96673b0b 100644 --- a/src/components/Billing/VerifyUpgrade.tsx +++ b/src/components/Billing/VerifyUpgrade.tsx @@ -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" > -
-

Subscription Activated

- - {isFetching && ( -
- - Refreshing -
- )} +
+ +

Subscription Activated

-

+ +

Your subscription has been activated successfully.

-

+

It might take a few minutes for the changes to reflect. We will{' '} - reload the page for you. + reload the page for you.

-

+ {isFetching && ( +

+ + Refreshing +
+ )} + +

If it takes longer than expected, please{' '} - + contact us - - . + .

); diff --git a/src/components/GenerateCourse/AICourseLimit.tsx b/src/components/GenerateCourse/AICourseLimit.tsx index e85f0d2ae..9c04c9535 100644 --- a/src/components/GenerateCourse/AICourseLimit.tsx +++ b/src/components/GenerateCourse/AICourseLimit.tsx @@ -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 ( <> - - + +
+ + ); +}