fix: update routing form identifier hint text with learn more link (calcom#27837)

* fix: update routing form identifier hint text with learn more link

Co-Authored-By: carina@cal.com <c.wollendorfer@me.com>

* UI improvements

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: CarinaWolli <wollencarina@gmail.com>

Author: 3 people

apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx

@@ -2,6 +2,7 @@
 
 import { FieldTypes } from "@calcom/app-store/routing-forms/lib/FieldTypes";
 import type { RoutingFormWithResponseCount } from "@calcom/app-store/routing-forms/types/types";
+import { LearnMoreLink } from "@calcom/features/eventtypes/components/LearnMoreLink";
 import { getFieldIdentifier } from "@calcom/features/form-builder/utils/getFieldIdentifier";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
@@ -132,7 +133,13 @@ function Field({
             <TextField
               disabled={!!router}
               label={t("identifier_url_parameter")}
-              hint={t("identifier_url_parameter_hint")}
+              hint={
+                <LearnMoreLink
+                  t={t}
+                  i18nKey="identifier_url_parameter_hint"
+                  href="https://cal.com/help/routing/connect-routing-form-to-booking-questions"
+                />
+              }
               name={`${hookFieldNamespace}.identifier`}
               required
               placeholder={t("identifies_name_field")}

apps/web/public/static/locales/en/common.json

@@ -2563,7 +2563,7 @@
   "this_is_what_your_users_would_see": "This is what your users would see",
   "identifies_name_field": "Identifies field by this name.",
   "identifier_url_parameter": "Identifier",
-  "identifier_url_parameter_hint": "Used for URL parameters, like &name=john",
+  "identifier_url_parameter_hint": "Passed as a URL parameter and can be used to prefill booking questions, e.g. &name=john. <0>Learn more</0>",
   "add_1_option_per_line": "Add 1 option per line",
   "select_a_router": "Select a router",
   "add_a_new_route": "Add a new route",

packages/features/eventtypes/components/LearnMoreLink.tsx

@@ -19,19 +19,21 @@ export const LearnMoreLink = ({ t, i18nKey, href }: LearnMoreLinkProps) => {
   }
 
   return (
-    <ServerTrans
-      t={t}
-      i18nKey={i18nKey}
-      components={[
-        <Link
-          key={i18nKey}
-          className="underline underline-offset-2"
-          target="_blank"
-          rel="noopener noreferrer"
-          href={href}>
-          Learn more
-        </Link>,
-      ]}
-    />
+    <span>
+      <ServerTrans
+        t={t}
+        i18nKey={i18nKey}
+        components={[
+          <Link
+            key={i18nKey}
+            className="underline underline-offset-2"
+            target="_blank"
+            rel="noopener noreferrer"
+            href={href}>
+            Learn more
+          </Link>,
+        ]}
+      />
+    </span>
   );
 };

packages/ui/components/form/inputs/types.d.ts

@@ -6,7 +6,7 @@ export type InputFieldProps<Translations extends Record<string, string> = object
   translations?: Translations;
   label?: React.ReactNode;
   LockedIcon?: React.ReactNode;
-  hint?: string;
+  hint?: React.ReactNode;
   hintErrors?: string[];
   addOnLeading?: React.ReactNode;
   addOnSuffix?: React.ReactNode;