From ae4f103e80a0f36b41aaaaaeaebd3dcdde096ed8 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 2 Jun 2025 14:55:57 +0100
Subject: [PATCH] Fix UI popup

---
 src/components/Billing/BillingPage.tsx | 312 ++++++++++++++-----------
 1 file changed, 182 insertions(+), 130 deletions(-)

diff --git a/src/components/Billing/BillingPage.tsx b/src/components/Billing/BillingPage.tsx
index dcdd0c074..e977ee5dd 100644
--- a/src/components/Billing/BillingPage.tsx
+++ b/src/components/Billing/BillingPage.tsx
@@ -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>
     </>
   );
 }