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,
|
queryClient,
|
||||||
);
|
);
|
||||||
|
|
||||||
const isCanceled =
|
console.log(billingDetails);
|
||||||
billingDetails?.status === 'canceled' ||
|
|
||||||
billingDetails?.status === 'incomplete_expired' ||
|
const willBeCanceled = billingDetails?.cancelAtPeriodEnd;
|
||||||
billingDetails?.cancelAtPeriodEnd;
|
|
||||||
|
const isCanceled = billingDetails?.status === 'canceled';
|
||||||
|
|
||||||
const isPastDue = billingDetails?.status === 'past_due';
|
const isPastDue = billingDetails?.status === 'past_due';
|
||||||
const isIncomplete = billingDetails?.status === 'incomplete';
|
const isIncomplete = billingDetails?.status === 'incomplete';
|
||||||
|
const isIncompleteExpired = billingDetails?.status === 'incomplete_expired';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
mutate: createCustomerPortal,
|
mutate: createCustomerPortal,
|
||||||
@@ -101,7 +103,7 @@ export function BillingPage() {
|
|||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
const modals = (
|
||||||
<>
|
<>
|
||||||
{showUpgradeModal && (
|
{showUpgradeModal && (
|
||||||
<UpgradeAccountModal
|
<UpgradeAccountModal
|
||||||
@@ -112,140 +114,190 @@ export function BillingPage() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{showVerifyUpgradeModal && <VerifyUpgrade />}
|
{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)} />
|
<EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
|
||||||
)}
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
{billingDetails?.status !== 'none' &&
|
if (isCanceled) {
|
||||||
!isLoadingBillingDetails &&
|
return (
|
||||||
priceDetails && (
|
<>
|
||||||
<div className="mt-1">
|
{modals}
|
||||||
{isIncomplete && (
|
<BillingWarning
|
||||||
<BillingWarning
|
icon={CircleX}
|
||||||
icon={AlertCircle}
|
message="Your subscription has been canceled."
|
||||||
message="Your subscription is incomplete "
|
buttonText="Reactivate?"
|
||||||
buttonText="please pay invoice on Stripe."
|
onButtonClick={() => {
|
||||||
onButtonClick={() => {
|
if (willBeCanceled) {
|
||||||
createCustomerPortal({});
|
createCustomerPortal({});
|
||||||
}}
|
} else {
|
||||||
isLoading={
|
setShowUpgradeModal(true);
|
||||||
isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
|
}
|
||||||
}
|
}}
|
||||||
/>
|
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
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<h2 className="mb-2 text-xl font-semibold text-black">
|
<EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
|
||||||
Current Subscription
|
</>
|
||||||
</h2>
|
);
|
||||||
|
}
|
||||||
|
|
||||||
<p className="text-sm text-gray-500">
|
if (isIncomplete) {
|
||||||
Thank you for being a pro member. Your plan details are below.
|
return (
|
||||||
</p>
|
<>
|
||||||
|
{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">
|
<EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
|
||||||
<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>
|
return (
|
||||||
<span className="text-xs tracking-wider text-gray-400 uppercase">
|
<>
|
||||||
Payment
|
{modals}
|
||||||
</span>
|
|
||||||
<h3 className="flex items-baseline text-lg font-semibold text-black">
|
<div className="mt-1">
|
||||||
${priceDetails.amount}
|
{isPastDue && (
|
||||||
<span className="ml-1 text-sm font-normal text-gray-500">
|
<BillingWarning
|
||||||
/ {priceDetails.interval}
|
message="We were not able to charge your card."
|
||||||
</span>
|
buttonText="Update payment information."
|
||||||
</h3>
|
onButtonClick={() => {
|
||||||
</div>
|
createCustomerPortal({});
|
||||||
</div>
|
}}
|
||||||
|
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>
|
||||||
|
<div>
|
||||||
<div
|
<span className="text-xs tracking-wider text-gray-400 uppercase">
|
||||||
className={cn(
|
Payment
|
||||||
'mt-6 pt-6',
|
</span>
|
||||||
!isIncomplete && 'border-t border-gray-100',
|
<h3 className="flex items-baseline text-lg font-semibold text-black">
|
||||||
isIncomplete && '-mt-6',
|
${priceDetails.amount}
|
||||||
)}
|
<span className="ml-1 text-sm font-normal text-gray-500">
|
||||||
>
|
/ {priceDetails.interval}
|
||||||
{!isIncomplete && (
|
</span>
|
||||||
<div className="flex items-start gap-4">
|
</h3>
|
||||||
<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>
|
</div>
|
||||||
</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