chore: improve stripe portal button and biling hero spacing (#25598)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Oct 15, 2024 · 9a7deda · 9a7deda
1 parent 348f7c9
commit 9a7deda
Show file tree

Hide file tree

Showing 12 changed files with 10 additions and 8 deletions.
diff --git a/cypress/e2e/billingUpgradeCTA.cy.ts b/cypress/e2e/billingUpgradeCTA.cy.ts
@@ -21,6 +21,6 @@ describe('Billing Upgrade CTA', () => {
         cy.reload()
 
         cy.get('[data-attr=billing-page-core-upgrade-cta] .LemonButton__content').should('not.exist')
-        cy.get('[data-attr=manage-billing]').should('have.text', 'Manage card details and view past invoices')
+        cy.get('[data-attr=manage-billing]').should('have.text', 'Manage card details and invoices')
     })
 })
diff --git a/frontend/__snapshots__/scenes-other-billing--billing--dark.png b/frontend/__snapshots__/scenes-other-billing--billing--dark.png
diff --git a/frontend/__snapshots__/scenes-other-billing--billing--light.png b/frontend/__snapshots__/scenes-other-billing--billing--light.png
diff --git a/frontend/__snapshots__/scenes-other-billing--billing-with-credit-cta--dark.png b/frontend/__snapshots__/scenes-other-billing--billing-with-credit-cta--dark.png
diff --git a/frontend/__snapshots__/scenes-other-billing--billing-with-credit-cta--light.png b/frontend/__snapshots__/scenes-other-billing--billing-with-credit-cta--light.png
diff --git a/frontend/__snapshots__/scenes-other-billing--billing-with-credits--dark.png b/frontend/__snapshots__/scenes-other-billing--billing-with-credits--dark.png
diff --git a/frontend/__snapshots__/scenes-other-billing--billing-with-credits--light.png b/frontend/__snapshots__/scenes-other-billing--billing-with-credits--light.png
diff --git a/frontend/__snapshots__/scenes-other-billing--billing-with-discount--dark.png b/frontend/__snapshots__/scenes-other-billing--billing-with-discount--dark.png
diff --git a/frontend/__snapshots__/scenes-other-billing--billing-with-discount--light.png b/frontend/__snapshots__/scenes-other-billing--billing-with-discount--light.png
diff --git a/...s__/scenes-other-billing--billing-with-limit-and-100-percent-discount--dark.png b/...s__/scenes-other-billing--billing-with-limit-and-100-percent-discount--dark.png
diff --git a/...__/scenes-other-billing--billing-with-limit-and-100-percent-discount--light.png b/...__/scenes-other-billing--billing-with-limit-and-100-percent-discount--light.png
diff --git a/frontend/src/scenes/billing/Billing.tsx b/frontend/src/scenes/billing/Billing.tsx
@@ -115,7 +115,7 @@ export function Billing(): JSX.Element {
             ) : null}
 
             {!billing?.has_active_subscription && platformAndSupportProduct && (
-                <div className="mb-6">
+                <div className="mb-4">
                     <BillingCTAHero product={platformAndSupportProduct} />
                 </div>
             )}
@@ -130,7 +130,7 @@ export function Billing(): JSX.Element {
             >
                 <div>
                     <div
-                        className={clsx('flex flex-wrap gap-6 w-fit', {
+                        className={clsx('flex flex-wrap gap-6 w-fit mb-4', {
                             'flex-col items-stretch': size === 'small',
                             'items-center': size !== 'small',
                         })}
@@ -193,7 +193,7 @@ export function Billing(): JSX.Element {
                                             </div>
                                         </>
                                     )}
-                                    <div className="my-4">
+                                    <div>
                                         <p className="ml-0 mb-0">
                                             {billing?.has_active_subscription ? 'Billing period' : 'Cycle'}:{' '}
                                             <b>{billing.billing_period.current_period_start.format('LL')}</b> to{' '}
@@ -202,7 +202,7 @@ export function Billing(): JSX.Element {
                                             remaining)
                                         </p>
                                         {!billing.has_active_subscription && (
-                                            <p className="italic ml-0 text-muted">
+                                            <p className="italic ml-0 text-muted mb-0">
                                                 Monthly free allocation resets at the end of the cycle.
                                             </p>
                                         )}
@@ -212,8 +212,8 @@ export function Billing(): JSX.Element {
                         )}
                     </div>
 
-                    {!isOnboarding && billing?.has_active_subscription && (
-                        <div className="w-fit mt-4">
+                    {!isOnboarding && billing?.customer_id && billing?.stripe_portal_url && (
+                        <div className="w-fit">
                             <LemonButton
                                 type="primary"
                                 htmlType="submit"
@@ -223,7 +223,9 @@ export function Billing(): JSX.Element {
                                 center
                                 data-attr="manage-billing"
                             >
-                                Manage card details and view past invoices
+                                {billing.has_active_subscription
+                                    ? 'Manage card details and invoices'
+                                    : 'View past invoices'}
                             </LemonButton>
                         </div>
                     )}