Fix UI popup

src/components/Billing/BillingPage.tsx

@@ -41,13 +41,15 @@ export function BillingPage() {
     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 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,16 +114,62 @@ 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' &&
+  if (isCanceled) {
-        !isLoadingBillingDetails &&
+    return (
-        priceDetails && (
+      <>
-          <div className="mt-1">
+        {modals}
-            {isIncomplete && (
+        <BillingWarning
+          icon={CircleX}
+          message="Your subscription has been canceled."
+          buttonText="Reactivate?"
+          onButtonClick={() => {
+            if (willBeCanceled) {
+              createCustomerPortal({});
+            } else {
+              setShowUpgradeModal(true);
+            }
+          }}
+          isLoading={
+            isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
+          }
+        />
+
+        <EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
+      </>
+    );
+  }
+
+  if (isIncomplete) {
+    return (
+      <>
+        {modals}
         <BillingWarning
           icon={AlertCircle}
           message="Your subscription is incomplete "
@@ -133,12 +181,21 @@ export function BillingPage() {
             isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
           }
         />
-            )}
+
-            {isCanceled && (
+        <EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      {modals}
+
+      <div className="mt-1">
+        {isPastDue && (
           <BillingWarning
-                icon={CircleX}
+            message="We were not able to charge your card."
-                message="Your subscription has been canceled."
+            buttonText="Update payment information."
-                buttonText="Reactivate?"
             onButtonClick={() => {
               createCustomerPortal({});
             }}
@@ -147,10 +204,12 @@ export function BillingPage() {
             }
           />
         )}
-            {isPastDue && (
+
+        {willBeCanceled && (
           <BillingWarning
-                message="We were not able to charge your card."
+            icon={CircleX}
-                buttonText="Update payment information."
+            message={`Your subscription will be canceled on ${formattedNextBillDate}. `}
+            buttonText="Reactivate?"
             onButtonClick={() => {
               createCustomerPortal({});
             }}
@@ -194,26 +253,22 @@ export function BillingPage() {
             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
+                {willBeCanceled ? 'Expires On' : 'Renews On'}
-                        ? '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 && (
+            {!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={() => {
@@ -224,7 +279,6 @@ export function BillingPage() {
                 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={() => {
@@ -234,8 +288,7 @@ export function BillingPage() {
                 isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
               }
             >
-                  {isCreatingCustomerPortal ||
+              {isCreatingCustomerPortal || isCreatingCustomerPortalSuccess ? (
-                  isCreatingCustomerPortalSuccess ? (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
               ) : (
                 <CreditCard className="mr-2 h-4 w-4" />
@@ -245,7 +298,6 @@ export function BillingPage() {
           </div>
         </div>
       </div>
-        )}
     </>
   );
 }