From 7fab6d73355435b53bbc6e135ee8d04a6a8c3d59 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Sun, 14 Apr 2024 19:44:18 +0800
Subject: [PATCH] Refactor billing components and enhance UX

This commit includes significant changes to the layout and presentation of billing related components. The most notable updates are replacing the static back button in 'billing-session-status.tsx' with a fully clickable link button, and improving the product description lookup to use i18n in 'current-subscription-card.tsx'. Additionally, the general structure and spacing of elements within 'billing/page.tsx' are enhanced for better user experience.
---
 .../home/[account]/billing/page.tsx           | 38 +++++++++----------
 .../src/components/billing-session-status.tsx | 18 ++++-----
 .../components/current-subscription-card.tsx  | 13 ++++++-
 3 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
index 8dd519fd2..28217edfd 100644
--- a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
@@ -75,28 +75,24 @@ async function TeamAccountBillingPage({ params }: Params) {
       />
 
       <PageBody>
-        <div className={'mx-auto w-full'}>
-          <div>
-            <div className={'flex flex-col space-y-6'}>
-              <If
-                condition={subscription}
-                fallback={
-                  <>
-                    <Checkout />
-                  </>
-                }
-              >
-                {(subscription) => (
-                  <CurrentSubscriptionCard
-                    subscription={subscription}
-                    config={billingConfig}
-                  />
-                )}
-              </If>
+        <div className={'mx-auto flex w-full max-w-2xl flex-col space-y-6'}>
+          <If
+            condition={subscription}
+            fallback={
+              <>
+                <Checkout />
+              </>
+            }
+          >
+            {(subscription) => (
+              <CurrentSubscriptionCard
+                subscription={subscription}
+                config={billingConfig}
+              />
+            )}
+          </If>
 
-              <BillingPortal />
-            </div>
-          </div>
+          <BillingPortal />
         </div>
       </PageBody>
     </>
diff --git a/packages/billing/gateway/src/components/billing-session-status.tsx b/packages/billing/gateway/src/components/billing-session-status.tsx
index 102e04192..5760deab7 100644
--- a/packages/billing/gateway/src/components/billing-session-status.tsx
+++ b/packages/billing/gateway/src/components/billing-session-status.tsx
@@ -78,17 +78,15 @@ function SuccessSessionStatus({
           </p>
         </div>
 
-        <Button data-test={'checkout-success-back-button'} variant={'outline'}>
-          <Link href={redirectPath}>
-            <span className={'flex items-center space-x-2.5'}>
-              <span>
-                <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
-              </span>
-
-              <ChevronRight className={'h-4'} />
+        <Link data-test={'checkout-success-back-link'} href={redirectPath}>
+          <Button>
+            <span>
+              <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
             </span>
-          </Link>
-        </Button>
+
+            <ChevronRight className={'h-4'} />
+          </Button>
+        </Link>
       </div>
     </section>
   );
diff --git a/packages/billing/gateway/src/components/current-subscription-card.tsx b/packages/billing/gateway/src/components/current-subscription-card.tsx
index 8c65b0dbb..ff5d68436 100644
--- a/packages/billing/gateway/src/components/current-subscription-card.tsx
+++ b/packages/billing/gateway/src/components/current-subscription-card.tsx
@@ -65,7 +65,7 @@ export function CurrentSubscriptionCard({
         </CardDescription>
       </CardHeader>
 
-      <CardContent className={'space-y-3 text-sm'}>
+      <CardContent className={'space-y-4 border-t pt-4 text-sm'}>
         <div className={'flex flex-col space-y-1'}>
           <div className={'flex items-center space-x-2 text-lg font-semibold'}>
             <BadgeCheck
@@ -75,11 +75,20 @@ export function CurrentSubscriptionCard({
             />
 
             <span data-test={'current-plan-card-product-name'}>
-              {product.name}
+              <Trans i18nKey={product.name} defaults={product.name} />
             </span>
 
             <CurrentPlanBadge status={subscription.status} />
           </div>
+
+          <div>
+            <p className={'text-muted-foreground'}>
+              <Trans
+                i18nKey={product.description}
+                defaults={product.description}
+              />
+            </p>
+          </div>
         </div>
 
         {/*