Arik Chakma
1 week ago
parent
758642764c
commit
a749f36df1
5 changed files with 258 additions and 490 deletions
@ -0,0 +1,130 @@ |
||||
import { useMutation, useQuery } from '@tanstack/react-query'; |
||||
import { cn } from '../../lib/classname'; |
||||
import { queryClient } from '../../stores/query-client'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { httpPost } from '../../lib/query-http'; |
||||
import { courseProgressOptions } from '../../queries/course-progress'; |
||||
import { isLoggedIn } from '../../lib/jwt'; |
||||
import { showLoginPopup } from '../../lib/popup'; |
||||
import { Loader2Icon } from 'lucide-react'; |
||||
import { coursePriceOptions } from '../../queries/billing'; |
||||
|
||||
type CreateCheckoutSessionBody = { |
||||
courseId: string; |
||||
success?: string; |
||||
cancel?: string; |
||||
}; |
||||
|
||||
type CreateCheckoutSessionResponse = { |
||||
checkoutUrl: string; |
||||
}; |
||||
|
||||
type EnrollButtonProps = { |
||||
courseId: string; |
||||
courseSlug: string; |
||||
isLoading: boolean; |
||||
}; |
||||
|
||||
export function EnrollButton(props: EnrollButtonProps) { |
||||
const { courseId, courseSlug, isLoading } = props; |
||||
|
||||
const toast = useToast(); |
||||
|
||||
const { data: courseProgress, isLoading: isCourseProgressLoading } = useQuery( |
||||
{ |
||||
...courseProgressOptions(courseSlug), |
||||
enabled: !!isLoggedIn(), |
||||
}, |
||||
queryClient, |
||||
); |
||||
|
||||
const { data: coursePricing } = useQuery( |
||||
coursePriceOptions({ courseSlug }), |
||||
queryClient, |
||||
); |
||||
|
||||
const { |
||||
mutate: createCheckoutSession, |
||||
isPending: isCreatingCheckoutSession, |
||||
} = useMutation( |
||||
{ |
||||
mutationFn: (body: CreateCheckoutSessionBody) => { |
||||
return httpPost<CreateCheckoutSessionResponse>( |
||||
'/v1-create-checkout-session', |
||||
body, |
||||
); |
||||
}, |
||||
onSuccess: (data) => { |
||||
window.location.href = data.checkoutUrl; |
||||
}, |
||||
onError: (error) => { |
||||
console.error(error); |
||||
toast.error(error?.message || 'Failed to create checkout session'); |
||||
}, |
||||
}, |
||||
queryClient, |
||||
); |
||||
|
||||
const hasEnrolled = !!courseProgress?.startedAt; |
||||
|
||||
return ( |
||||
<button |
||||
className={cn( |
||||
'relative flex min-h-10 w-full items-center justify-between gap-1 overflow-hidden rounded-lg bg-gradient-to-r from-purple-500 to-purple-700 p-2 px-3 text-slate-50 disabled:cursor-not-allowed disabled:opacity-50', |
||||
(hasEnrolled || isCreatingCheckoutSession) && 'justify-center', |
||||
)} |
||||
onClick={() => { |
||||
if (isCourseProgressLoading || isCreatingCheckoutSession) { |
||||
return; |
||||
} |
||||
|
||||
if (!isLoggedIn()) { |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
if (!courseSlug) { |
||||
toast.error('Course slug not found'); |
||||
return; |
||||
} |
||||
|
||||
if (hasEnrolled) { |
||||
const courseUrl = `${import.meta.env.PUBLIC_COURSE_APP_URL}/${courseSlug}`; |
||||
window.location.href = courseUrl; |
||||
return; |
||||
} |
||||
|
||||
createCheckoutSession({ |
||||
courseId, |
||||
success: `/learn/${courseSlug}?e=1`, |
||||
cancel: `/learn/${courseSlug}`, |
||||
}); |
||||
}} |
||||
disabled={isCreatingCheckoutSession || isLoading} |
||||
> |
||||
{hasEnrolled && !isCreatingCheckoutSession && ( |
||||
<span>Resume Learning</span> |
||||
)} |
||||
|
||||
{!hasEnrolled && !isCreatingCheckoutSession && ( |
||||
<> |
||||
<span>Enroll now</span> |
||||
<span> |
||||
$ |
||||
{coursePricing?.isEligibleForDiscount |
||||
? coursePricing?.regionalPrice |
||||
: coursePricing?.fullPrice} |
||||
</span> |
||||
</> |
||||
)} |
||||
|
||||
{isCreatingCheckoutSession && ( |
||||
<Loader2Icon className="size-4 animate-spin stroke-[2.5]" /> |
||||
)} |
||||
|
||||
{isLoading && ( |
||||
<div className="striped-loader-darker absolute inset-0 z-10 h-full w-full bg-purple-500" /> |
||||
)} |
||||
</button> |
||||
); |
||||
} |
||||
@ -1,290 +0,0 @@ |
||||
import { useEffect, useState } from 'react'; |
||||
import { |
||||
billingDetailsOptions, |
||||
USER_SUBSCRIPTION_PLANS, |
||||
} from '../../queries/billing'; |
||||
import { Modal } from '../Modal'; |
||||
import { useMutation, useQuery } from '@tanstack/react-query'; |
||||
import { queryClient } from '../../stores/query-client'; |
||||
import { cn } from '../../lib/classname'; |
||||
import { httpPost } from '../../lib/query-http'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { Loader2Icon } from 'lucide-react'; |
||||
import { UpdatePlanConfirmation } from '../Billing/UpdatePlanConfirmation'; |
||||
import type { |
||||
CreateCustomerPortalBody, |
||||
CreateCustomerPortalResponse, |
||||
} from '../Billing/BillingPage'; |
||||
|
||||
type CreateCheckoutSessionBody = { |
||||
priceId: string; |
||||
success?: string; |
||||
cancel?: string; |
||||
}; |
||||
|
||||
type CreateCheckoutSessionResponse = { |
||||
checkoutUrl: string; |
||||
}; |
||||
|
||||
export type IntervalType = 'month' | 'year'; |
||||
|
||||
type UpgradePlanModalProps = { |
||||
onClose: () => void; |
||||
|
||||
success?: string; |
||||
cancel?: string; |
||||
}; |
||||
|
||||
export function UpgradePlanModal(props: UpgradePlanModalProps) { |
||||
const { onClose, success, cancel } = props; |
||||
|
||||
const { data: billingDetails } = useQuery( |
||||
billingDetailsOptions(), |
||||
queryClient, |
||||
); |
||||
|
||||
const toast = useToast(); |
||||
const [interval, setInterval] = useState<IntervalType>('month'); |
||||
const [planId, setPlanId] = useState<string>('free'); |
||||
const [isUpdatingPlan, setIsUpdatingPlan] = useState(false); |
||||
|
||||
const { mutate: createCheckoutSession, isPending } = useMutation( |
||||
{ |
||||
mutationFn: (body: CreateCheckoutSessionBody) => { |
||||
return httpPost<CreateCheckoutSessionResponse>( |
||||
'/v1-create-checkout-session', |
||||
body, |
||||
); |
||||
}, |
||||
onSuccess: (data) => { |
||||
window.location.href = data.checkoutUrl; |
||||
}, |
||||
onError: (error) => { |
||||
console.error(error); |
||||
toast.error(error?.message || 'Failed to create checkout session'); |
||||
}, |
||||
}, |
||||
queryClient, |
||||
); |
||||
|
||||
const { mutate: createCustomerPortal, isPending: isCreatingCustomerPortal } = |
||||
useMutation( |
||||
{ |
||||
mutationFn: (body: CreateCustomerPortalBody) => { |
||||
return httpPost<CreateCustomerPortalResponse>( |
||||
'/v1-create-customer-portal', |
||||
body, |
||||
); |
||||
}, |
||||
onSuccess: (data) => { |
||||
window.location.href = data.url; |
||||
}, |
||||
onError: (error) => { |
||||
console.error(error); |
||||
toast.error(error?.message || 'Failed to Create Customer Portal'); |
||||
}, |
||||
}, |
||||
queryClient, |
||||
); |
||||
|
||||
useEffect(() => { |
||||
if (!billingDetails) { |
||||
return; |
||||
} |
||||
|
||||
setInterval((billingDetails.interval as IntervalType) || 'month'); |
||||
setPlanId(billingDetails.planId || 'free'); |
||||
}, [billingDetails]); |
||||
|
||||
const isCurrentPlanSelected = |
||||
billingDetails?.planId === planId && |
||||
(interval === billingDetails.interval || billingDetails?.planId === 'free'); |
||||
|
||||
const selectedPlan = USER_SUBSCRIPTION_PLANS.find( |
||||
(plan) => plan.planId === planId, |
||||
); |
||||
|
||||
if (isUpdatingPlan && selectedPlan) { |
||||
return ( |
||||
<UpdatePlanConfirmation |
||||
planDetails={selectedPlan} |
||||
interval={interval} |
||||
onClose={() => { |
||||
setIsUpdatingPlan(false); |
||||
}} |
||||
onCancel={() => { |
||||
setIsUpdatingPlan(false); |
||||
}} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
const showCancelSubscription = |
||||
billingDetails?.planId !== 'free' && planId === 'free'; |
||||
|
||||
return ( |
||||
<> |
||||
<Modal |
||||
onClose={onClose} |
||||
wrapperClassName="max-w-2xl" |
||||
bodyClassName="overflow-hidden" |
||||
> |
||||
<div className="grid grid-cols-2"> |
||||
<div className="p-4"> |
||||
<h2 className="font-medium">Upgrade Plan</h2> |
||||
<p className="mt-1 text-balance text-sm text-gray-500"> |
||||
Upgrade your plan to unlock more features, courses, and more. |
||||
</p> |
||||
|
||||
<div className="mt-6 flex flex-col gap-1"> |
||||
{USER_SUBSCRIPTION_PLANS.map((plan) => { |
||||
const isSelectedPlan = plan.planId === planId; |
||||
const price = plan.prices[interval]; |
||||
const isCurrentPlan = billingDetails?.planId === plan.planId; |
||||
|
||||
return ( |
||||
<button |
||||
key={plan.planId} |
||||
className={cn( |
||||
'flex items-center justify-between gap-2 rounded-lg border p-2', |
||||
isSelectedPlan && 'border-purple-500', |
||||
)} |
||||
onClick={() => { |
||||
setPlanId(plan.planId); |
||||
}} |
||||
> |
||||
<div className="flex items-center gap-3"> |
||||
<div |
||||
className={cn( |
||||
'size-2 rounded-full bg-gray-300', |
||||
isSelectedPlan && 'bg-purple-500', |
||||
)} |
||||
></div> |
||||
<h4>{plan.name}</h4> |
||||
{isCurrentPlan && ( |
||||
<span className="rounded-full bg-purple-500 px-1.5 py-0.5 text-xs leading-none text-white"> |
||||
Current |
||||
</span> |
||||
)} |
||||
</div> |
||||
<span className="text-sm"> |
||||
<span className="font-medium"> |
||||
${price?.amount / 100} |
||||
</span> |
||||
|
||||
<span className="text-gray-500">/ {interval}</span> |
||||
</span> |
||||
</button> |
||||
); |
||||
})} |
||||
</div> |
||||
|
||||
<div className="mt-16"> |
||||
{!showCancelSubscription && ( |
||||
<button |
||||
className={cn( |
||||
'mb-2 rounded-lg border border-dashed p-2 text-left', |
||||
interval === 'year' |
||||
? 'border-purple-500 bg-purple-100/40' |
||||
: 'border-gray-300', |
||||
)} |
||||
onClick={() => { |
||||
setInterval(interval === 'month' ? 'year' : 'month'); |
||||
}} |
||||
> |
||||
<h3 className="font-medium">Enjoy 20% Off</h3> |
||||
<p className="mt-1 text-balance text-sm text-gray-500"> |
||||
Get 20% off when you upgrade to a yearly plan. |
||||
</p> |
||||
</button> |
||||
)} |
||||
|
||||
{showCancelSubscription && ( |
||||
<button |
||||
className="mb-2 rounded-lg border border-dashed p-2 text-left" |
||||
onClick={() => { |
||||
createCustomerPortal({}); |
||||
}} |
||||
> |
||||
<h3 className="font-medium">Cancel Subscription</h3> |
||||
<p className="mt-1 text-balance text-sm text-gray-500"> |
||||
To downgrade to the free plan, you need to cancel |
||||
your current subscription. |
||||
</p> |
||||
</button> |
||||
)} |
||||
|
||||
<button |
||||
className="flex min-h-10 w-full items-center justify-center rounded-lg bg-purple-500 p-2 text-white disabled:cursor-not-allowed disabled:bg-zinc-600 disabled:opacity-70" |
||||
disabled={isCurrentPlanSelected || isPending} |
||||
onClick={() => { |
||||
const priceId = selectedPlan?.prices[interval].id; |
||||
if (!priceId) { |
||||
toast.error('Price id is missing'); |
||||
return; |
||||
} |
||||
|
||||
// if downgrading from paid plan to free plan
|
||||
// then redirect to customer portal to cancel the subscription
|
||||
if (planId === 'free') { |
||||
createCustomerPortal({}); |
||||
return; |
||||
} |
||||
|
||||
// if user is already on a paid plan
|
||||
// then show a confirmation modal to update the plan
|
||||
// instead of creating a new checkout session
|
||||
if (billingDetails?.planId !== 'free') { |
||||
setIsUpdatingPlan(true); |
||||
return; |
||||
} |
||||
|
||||
createCheckoutSession({ |
||||
priceId, |
||||
success, |
||||
cancel, |
||||
}); |
||||
}} |
||||
> |
||||
{(isPending || isCreatingCustomerPortal) && ( |
||||
<Loader2Icon className="size-4 animate-spin stroke-[2.5]" /> |
||||
)} |
||||
|
||||
{!isPending && |
||||
!isCreatingCustomerPortal && |
||||
!showCancelSubscription && ( |
||||
<> |
||||
{isCurrentPlanSelected |
||||
? 'Current Plan' |
||||
: `Select ${selectedPlan?.name}`} |
||||
</> |
||||
)} |
||||
|
||||
{!isPending && |
||||
!isCreatingCustomerPortal && |
||||
showCancelSubscription && <>Cancel Subscription</>} |
||||
</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className="border-l bg-gray-100/40 p-4"> |
||||
<h3 className="font-medium">{selectedPlan?.name} Features</h3> |
||||
<div className="mt-4 space-y-1"> |
||||
{USER_SUBSCRIPTION_PLANS.find( |
||||
(plan) => plan.planId === planId, |
||||
)?.features.map((feature, index) => ( |
||||
<div |
||||
key={index} |
||||
className="flex items-center gap-2 text-gray-700" |
||||
> |
||||
<feature.icon className="size-4" /> |
||||
<p>{feature.label}</p> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</Modal> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,75 @@ |
||||
import { useEffect, useState } from 'react'; |
||||
import { Loader2 } from 'lucide-react'; |
||||
import { useMutation, useQuery } from '@tanstack/react-query'; |
||||
import { billingDetailsOptions } from '../../queries/billing'; |
||||
import { queryClient } from '../../stores/query-client'; |
||||
import { Modal } from '../Modal'; |
||||
import { httpPost } from '../../lib/query-http'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { courseProgressOptions } from '../../queries/course-progress'; |
||||
import { isLoggedIn } from '../../lib/jwt'; |
||||
import { deleteUrlParam } from '../../lib/browser'; |
||||
|
||||
type VerifyEnrollmentProps = { |
||||
courseSlug: string; |
||||
}; |
||||
|
||||
export function VerifyEnrollment(props: VerifyEnrollmentProps) { |
||||
const { courseSlug } = props; |
||||
|
||||
const { data: courseProgress, isFetching } = useQuery( |
||||
{ |
||||
...courseProgressOptions(courseSlug), |
||||
enabled: !!isLoggedIn(), |
||||
refetchInterval: 1000, |
||||
}, |
||||
queryClient, |
||||
); |
||||
|
||||
const toast = useToast(); |
||||
|
||||
useEffect(() => { |
||||
if (!courseProgress) { |
||||
return; |
||||
} |
||||
|
||||
if (courseProgress.startedAt) { |
||||
deleteUrlParam('e'); |
||||
window.location.reload(); |
||||
} |
||||
}, [courseProgress]); |
||||
|
||||
return ( |
||||
<Modal |
||||
// it's an unique modal, so we don't need to close it
|
||||
// user can close it by refreshing the page
|
||||
onClose={() => {}} |
||||
bodyClassName="rounded-xl bg-white p-6" |
||||
> |
||||
<div className="flex items-center justify-between gap-2"> |
||||
<h3 className="text-xl font-bold">Enrolling</h3> |
||||
|
||||
<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> |
||||
<p className="mt-2 text-balance text-gray-500"> |
||||
We are enrolling you to the course. Please wait. |
||||
</p> |
||||
|
||||
<p className="mt-4 text-balance text-gray-500"> |
||||
It might take a few minutes for the changes to reflect. We will{' '} |
||||
<b className="text-gray-600">reload</b> the page for you. |
||||
</p> |
||||
|
||||
<p className="mt-4 text-gray-500"> |
||||
If it takes longer than expected, please{' '} |
||||
<a className="text-blue-500 underline underline-offset-2 hover:text-blue-300"> |
||||
contact us |
||||
</a> |
||||
. |
||||
</p> |
||||
</Modal> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue