From d8a3eb6474e022de55a66cc5ac53a03bbc27a968 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 26 Nov 2024 17:46:24 +0800
Subject: [PATCH] chore: remove markdown component from billing (#30664)

---
 .../interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx  | 12 ++++++------
 .../BillingSettings/Subscription/Subscription.tsx   | 13 ++++++++-----
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx b/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx
index 870af2ef2d40b..e8f0c26b13456 100644
--- a/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx
+++ b/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx
@@ -2,7 +2,7 @@ import { useProjectsQuery } from 'data/projects/projects-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import type { Organization } from 'types'
 import { Admonition } from 'ui-patterns'
-import { Markdown } from '../Markdown'
+import Link from 'next/link'
 
 interface NoProjectsOnPaidOrgInfoProps {
   organization?: Organization
@@ -28,11 +28,11 @@ export const NoProjectsOnPaidOrgInfo = ({ organization }: NoProjectsOnPaidOrgInf
       type="default"
       title={`Your organization is on the ${orgSubscription.plan.name} plan with no projects running`}
       description={
-        <Markdown
-          className="!max-w-full"
-          content={`The monthly fees for the paid plan still apply. To cancel your subscription, head over to
-          your [organization billing settings](/dashboard/org/${organization?.slug}/billing).`}
-        />
+        <div className="!max-w-full prose text-sm">
+          The monthly fees for the paid plan still apply. To cancel your subscription, head over to
+          your{' '}
+          <Link href={`/org/${organization?.slug}/billing`}>organization billing settings</Link>
+        </div>
       }
     />
   )
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
index 8e8828f65ded7..57d3b730ba17f 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
@@ -4,7 +4,6 @@ import dayjs from 'dayjs'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 
-import { Markdown } from 'components/interfaces/Markdown'
 import {
   ScaffoldSection,
   ScaffoldSectionContent,
@@ -147,10 +146,14 @@ const Subscription = () => {
                       type="default"
                       title="This organization is limited by the included usage"
                     >
-                      <Markdown
-                        className="[&>p]:!leading-normal"
-                        content={`Projects may become unresponsive when this organization exceeds its [included usage quota](/org/${slug}/usage). To scale seamlessly and pay for over-usage, ${currentPlan?.id === 'free' ? 'upgrade to a paid plan.' : 'you can disable Spend Cap under the Cost Control settings.'}`}
-                      />
+                      <div className="[&>p]:!leading-normal prose text-sm">
+                        Projects may become unresponsive when this organization exceeds its
+                        <Link href={`/org/${slug}/usage`}>included usage quota</Link>. To scale
+                        seamlessly and pay for over-usage, $
+                        {currentPlan?.id === 'free'
+                          ? 'upgrade to a paid plan.'
+                          : 'you can disable Spend Cap under the Cost Control settings.'}
+                      </div>
                       <Button
                         type="default"
                         className="mt-1"