From df9b72583ddc1858e7fdebdf8c1cb53b7caf3949 Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Thu, 15 May 2025 13:02:57 +0200
Subject: [PATCH] add learn more help link (#21333)

---
 .../billing/components/BillingCredits.tsx       | 17 +++++++++++++++--
 apps/web/public/static/locales/en/common.json   |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/web/modules/settings/billing/components/BillingCredits.tsx b/apps/web/modules/settings/billing/components/BillingCredits.tsx
index 81409bf530..c35425cbba 100644
--- a/apps/web/modules/settings/billing/components/BillingCredits.tsx
+++ b/apps/web/modules/settings/billing/components/BillingCredits.tsx
@@ -1,9 +1,11 @@
 "use client";
 
 import { ProgressBar } from "@tremor/react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 
+import ServerTrans from "@calcom/lib/components/ServerTrans";
 import { IS_SMS_CREDITS_ENABLED } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
@@ -61,7 +63,19 @@ export default function BillingCredits() {
     <div className="border-subtle mt-8 space-y-6 rounded-lg border px-6 py-6 pb-6 text-sm sm:space-y-8">
       <div>
         <h2 className="text-base font-semibold">{t("credits")}</h2>
-        <p>{t("view_and_manage_credits_description")}</p>
+        <ServerTrans
+          t={t}
+          i18nKey="view_and_manage_credits_description"
+          components={[
+            <Link
+              key="Credit System"
+              className="underline underline-offset-2"
+              target="_blank"
+              href="https://cal.com/help/billing-and-usage/messaging-credits">
+              Learn more
+            </Link>,
+          ]}
+        />
         <div className="-mx-6 mt-6">
           <hr className="border-subtle" />
         </div>
@@ -90,7 +104,6 @@ export default function BillingCredits() {
           ) : (
             <></>
           )}
-
           <Label>
             {creditsData.credits.totalMonthlyCredits ? t("additional_credits") : t("available_credits")}
           </Label>
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 41dbdf6a94..a02c36b87f 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -3024,7 +3024,7 @@
   "buy_credits": "Buy Credits",
   "credits": "Credits",
   "view_and_manage_credits": "View and manage credits",
-  "view_and_manage_credits_description": "View and manage credits for sending SMS messages. One credit is worth 1¢ (USD)",
+  "view_and_manage_credits_description": "View and manage credits for sending SMS messages. One credit is worth 1¢ (USD). <0>Learn more</0>",
   "buy_additional_credits": "Buy additional credits ($0.01 per credit)",
   "overview": "Overview",
   "organization_slug_taken": "Organization slug is already taken",