From 979e3f3e71367cc8e8f32ba0448abf3a297eb6c9 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Fri, 15 Nov 2024 21:34:39 +0700
Subject: [PATCH] fix: always allow access to billing (#1476)

---
 .../billing/billing-portal-button.tsx         |   5 +-
 .../app/(dashboard)/settings/billing/page.tsx | 112 ++++++++++--------
 2 files changed, 66 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx b/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
index da230908a..c8ab8c132 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
@@ -12,9 +12,10 @@ import { createBillingPortal } from './create-billing-portal.action';
 
 export type BillingPortalButtonProps = {
   buttonProps?: React.ComponentProps<typeof Button>;
+  children?: React.ReactNode;
 };
 
-export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) => {
+export const BillingPortalButton = ({ buttonProps, children }: BillingPortalButtonProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -63,7 +64,7 @@ export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) =
       onClick={async () => handleFetchPortalUrl()}
       loading={isFetchingPortalUrl}
     >
-      <Trans>Manage Subscription</Trans>
+      {children || <Trans>Manage Subscription</Trans>}
     </Button>
   );
 };
diff --git a/apps/web/src/app/(dashboard)/settings/billing/page.tsx b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
index e60698818..05be0c6cb 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -68,60 +68,74 @@ export default async function BillingSettingsPage() {
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">
-        <Trans>Billing</Trans>
-      </h3>
+      <div className="flex flex-row items-end justify-between">
+        <div>
+          <h3 className="text-2xl font-semibold">
+            <Trans>Billing</Trans>
+          </h3>
 
-      <div className="text-muted-foreground mt-2 text-sm">
-        {isMissingOrInactiveOrFreePlan && (
-          <p>
-            <Trans>
-              You are currently on the <span className="font-semibold">Free Plan</span>.
-            </Trans>
-          </p>
-        )}
-
-        {/* Todo: Translation */}
-        {!isMissingOrInactiveOrFreePlan &&
-          match(subscription.status)
-            .with('ACTIVE', () => (
-              <p>
-                {subscriptionProduct ? (
-                  <span>
-                    You are currently subscribed to{' '}
-                    <span className="font-semibold">{subscriptionProduct.name}</span>
-                  </span>
-                ) : (
-                  <span>You currently have an active plan</span>
-                )}
-
-                {subscription.periodEnd && (
-                  <span>
-                    {' '}
-                    which is set to{' '}
-                    {subscription.cancelAtPeriodEnd ? (
-                      <span>
-                        end on{' '}
-                        <span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span>
-                      </span>
-                    ) : (
-                      <span>
-                        automatically renew on{' '}
-                        <span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span>
-                      </span>
-                    )}
-                  </span>
-                )}
-              </p>
-            ))
-            .with('PAST_DUE', () => (
+          <div className="text-muted-foreground mt-2 text-sm">
+            {isMissingOrInactiveOrFreePlan && (
               <p>
                 <Trans>
-                  Your current plan is past due. Please update your payment information.
+                  You are currently on the <span className="font-semibold">Free Plan</span>.
                 </Trans>
               </p>
-            ))
-            .otherwise(() => null)}
+            )}
+
+            {/* Todo: Translation */}
+            {!isMissingOrInactiveOrFreePlan &&
+              match(subscription.status)
+                .with('ACTIVE', () => (
+                  <p>
+                    {subscriptionProduct ? (
+                      <span>
+                        You are currently subscribed to{' '}
+                        <span className="font-semibold">{subscriptionProduct.name}</span>
+                      </span>
+                    ) : (
+                      <span>You currently have an active plan</span>
+                    )}
+
+                    {subscription.periodEnd && (
+                      <span>
+                        {' '}
+                        which is set to{' '}
+                        {subscription.cancelAtPeriodEnd ? (
+                          <span>
+                            end on{' '}
+                            <span className="font-semibold">
+                              {i18n.date(subscription.periodEnd)}.
+                            </span>
+                          </span>
+                        ) : (
+                          <span>
+                            automatically renew on{' '}
+                            <span className="font-semibold">
+                              {i18n.date(subscription.periodEnd)}.
+                            </span>
+                          </span>
+                        )}
+                      </span>
+                    )}
+                  </p>
+                ))
+                .with('PAST_DUE', () => (
+                  <p>
+                    <Trans>
+                      Your current plan is past due. Please update your payment information.
+                    </Trans>
+                  </p>
+                ))
+                .otherwise(() => null)}
+          </div>
+        </div>
+
+        {isMissingOrInactiveOrFreePlan && (
+          <BillingPortalButton>
+            <Trans>Manage billing</Trans>
+          </BillingPortalButton>
+        )}
       </div>
 
       <hr className="my-4" />