mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-09-25 16:39:02 +02:00
Fix UI popup
This commit is contained in:
Kamran Ahmed
@@ -41,13 +41,15 @@ export function BillingPage() {
|
||||
queryClient,
|
||||
);
|
||||
|
||||
const isCanceled =
|
||||
billingDetails?.status === 'canceled' ||
|
||||
billingDetails?.status === 'incomplete_expired' ||
|
||||
billingDetails?.cancelAtPeriodEnd;
|
||||
console.log(billingDetails);
|
||||
|
||||
const willBeCanceled = billingDetails?.cancelAtPeriodEnd;
|
||||
|
||||
const isCanceled = billingDetails?.status === 'canceled';
|
||||
|
||||
const isPastDue = billingDetails?.status === 'past_due';
|
||||
const isIncomplete = billingDetails?.status === 'incomplete';
|
||||
const isIncompleteExpired = billingDetails?.status === 'incomplete_expired';
|
||||
|
||||
const {
|
||||
mutate: createCustomerPortal,
|
||||
@@ -101,7 +103,7 @@ export function BillingPage() {
|
||||
day: 'numeric',
|
||||
});
|
||||
|
||||
return (
|
||||
const modals = (
|
||||
<>
|
||||
{showUpgradeModal && (
|
||||
<UpgradeAccountModal
|
||||
@@ -112,140 +114,190 @@ export function BillingPage() {
|
||||
)}
|
||||
|
||||
{showVerifyUpgradeModal && <VerifyUpgrade />}
|
||||
</>
|
||||
);
|
||||
|
||||
{billingDetails?.status === 'none' && !isLoadingBillingDetails && (
|
||||
if (!priceDetails) {
|
||||
return (
|
||||
<div className="p-5">
|
||||
<h1 className="text-2xl font-bold">Uh oh!</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
We couldn't find your subscription details. Please contact support at
|
||||
<a className="text-blue-500 underline" href="mailto:info@roadmap.sh">
|
||||
info@roadmap.sh
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (billingDetails?.status === 'none' || isIncompleteExpired) {
|
||||
return (
|
||||
<>
|
||||
{modals}
|
||||
<EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
{billingDetails?.status !== 'none' &&
|
||||
!isLoadingBillingDetails &&
|
||||
priceDetails && (
|
||||
<div className="mt-1">
|
||||
{isIncomplete && (
|
||||
<BillingWarning
|
||||
icon={AlertCircle}
|
||||
message="Your subscription is incomplete "
|
||||
buttonText="please pay invoice on Stripe."
|
||||
onButtonClick={() => {
|
||||
createCustomerPortal({});
|
||||
}}
|
||||
isLoading={
|
||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{isCanceled && (
|
||||
<BillingWarning
|
||||
icon={CircleX}
|
||||
message="Your subscription has been canceled."
|
||||
buttonText="Reactivate?"
|
||||
onButtonClick={() => {
|
||||
createCustomerPortal({});
|
||||
}}
|
||||
isLoading={
|
||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{isPastDue && (
|
||||
<BillingWarning
|
||||
message="We were not able to charge your card."
|
||||
buttonText="Update payment information."
|
||||
onButtonClick={() => {
|
||||
createCustomerPortal({});
|
||||
}}
|
||||
isLoading={
|
||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
||||
}
|
||||
/>
|
||||
)}
|
||||
if (isCanceled) {
|
||||
return (
|
||||
<>
|
||||
{modals}
|
||||
<BillingWarning
|
||||
icon={CircleX}
|
||||
message="Your subscription has been canceled."
|
||||
buttonText="Reactivate?"
|
||||
onButtonClick={() => {
|
||||
if (willBeCanceled) {
|
||||
createCustomerPortal({});
|
||||
} else {
|
||||
setShowUpgradeModal(true);
|
||||
}
|
||||
}}
|
||||
isLoading={
|
||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
||||
}
|
||||
/>
|
||||
|
||||
<h2 className="mb-2 text-xl font-semibold text-black">
|
||||
Current Subscription
|
||||
</h2>
|
||||
<EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
<p className="text-sm text-gray-500">
|
||||
Thank you for being a pro member. Your plan details are below.
|
||||
</p>
|
||||
if (isIncomplete) {
|
||||
return (
|
||||
<>
|
||||
{modals}
|
||||
<BillingWarning
|
||||
icon={AlertCircle}
|
||||
message="Your subscription is incomplete "
|
||||
buttonText="please pay invoice on Stripe."
|
||||
onButtonClick={() => {
|
||||
createCustomerPortal({});
|
||||
}}
|
||||
isLoading={
|
||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="mt-8 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
|
||||
<RefreshCw className="size-5 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs tracking-wider text-gray-400 uppercase">
|
||||
Payment
|
||||
</span>
|
||||
<h3 className="flex items-baseline text-lg font-semibold text-black">
|
||||
${priceDetails.amount}
|
||||
<span className="ml-1 text-sm font-normal text-gray-500">
|
||||
/ {priceDetails.interval}
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{modals}
|
||||
|
||||
<div className="mt-1">
|
||||
{isPastDue && (
|
||||
<BillingWarning
|
||||
message="We were not able to charge your card."
|
||||
buttonText="Update payment information."
|
||||
onButtonClick={() => {
|
||||
createCustomerPortal({});
|
||||
}}
|
||||
isLoading={
|
||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{willBeCanceled && (
|
||||
<BillingWarning
|
||||
icon={CircleX}
|
||||
message={`Your subscription will be canceled on ${formattedNextBillDate}. `}
|
||||
buttonText="Reactivate?"
|
||||
onButtonClick={() => {
|
||||
createCustomerPortal({});
|
||||
}}
|
||||
isLoading={
|
||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<h2 className="mb-2 text-xl font-semibold text-black">
|
||||
Current Subscription
|
||||
</h2>
|
||||
|
||||
<p className="text-sm text-gray-500">
|
||||
Thank you for being a pro member. Your plan details are below.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
|
||||
<RefreshCw className="size-5 text-gray-600" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'mt-6 pt-6',
|
||||
!isIncomplete && 'border-t border-gray-100',
|
||||
isIncomplete && '-mt-6',
|
||||
)}
|
||||
>
|
||||
{!isIncomplete && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
|
||||
<Calendar className="size-5 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs tracking-wider text-gray-400 uppercase">
|
||||
{billingDetails?.cancelAtPeriodEnd
|
||||
? 'Expires On'
|
||||
: 'Renews On'}
|
||||
</span>
|
||||
<h3 className="text-lg font-semibold text-black">
|
||||
{formattedNextBillDate}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-8 flex gap-3 max-sm:flex-col">
|
||||
{!isCanceled && !isIncomplete && (
|
||||
<button
|
||||
className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-xs transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-hidden max-sm:grow"
|
||||
onClick={() => {
|
||||
setShowUpgradeModal(true);
|
||||
}}
|
||||
>
|
||||
<ArrowRightLeft className="mr-2 h-4 w-4" />
|
||||
Switch Plan
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-xs transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
|
||||
onClick={() => {
|
||||
createCustomerPortal({});
|
||||
}}
|
||||
disabled={
|
||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
||||
}
|
||||
>
|
||||
{isCreatingCustomerPortal ||
|
||||
isCreatingCustomerPortalSuccess ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<CreditCard className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Manage Subscription
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs tracking-wider text-gray-400 uppercase">
|
||||
Payment
|
||||
</span>
|
||||
<h3 className="flex items-baseline text-lg font-semibold text-black">
|
||||
${priceDetails.amount}
|
||||
<span className="ml-1 text-sm font-normal text-gray-500">
|
||||
/ {priceDetails.interval}
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'mt-6 pt-6',
|
||||
!isIncomplete && 'border-t border-gray-100',
|
||||
isIncomplete && '-mt-6',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
|
||||
<Calendar className="size-5 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs tracking-wider text-gray-400 uppercase">
|
||||
{willBeCanceled ? 'Expires On' : 'Renews On'}
|
||||
</span>
|
||||
<h3 className="text-lg font-semibold text-black">
|
||||
{formattedNextBillDate}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex gap-3 max-sm:flex-col">
|
||||
{!willBeCanceled && (
|
||||
<button
|
||||
className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-xs transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-hidden max-sm:grow"
|
||||
onClick={() => {
|
||||
setShowUpgradeModal(true);
|
||||
}}
|
||||
>
|
||||
<ArrowRightLeft className="mr-2 h-4 w-4" />
|
||||
Switch Plan
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-xs transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
|
||||
onClick={() => {
|
||||
createCustomerPortal({});
|
||||
}}
|
||||
disabled={
|
||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
||||
}
|
||||
>
|
||||
{isCreatingCustomerPortal || isCreatingCustomerPortalSuccess ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<CreditCard className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Manage Subscription
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user