fix: carify what sender ID means (#9431)

* add tooltip on info icon

* fix text

* fix UI in addActionDialog

---------

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

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

@@ -1824,5 +1824,6 @@
   "first_event_type_webhook_description": "Create your first webhook for this event type",
   "create_for": "Create for",
   "additional_url_parameters": "Additional URL parameters",
+  "sender_id_info": "Name or number shown as the sender of an SMS (some countries do not allow alphanumeric sender IDs)",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/features/ee/workflows/components/AddActionDialog.tsx

@@ -23,7 +23,9 @@ import {
   Label,
   PhoneInput,
   Select,
+  Tooltip,
 } from "@calcom/ui";
+import { Info } from "@calcom/ui/components/icon";
 
 import { WORKFLOW_ACTIONS } from "../lib/constants";
 import { onlyLettersNumbersSpaces } from "../pages/workflow";
@@ -195,7 +197,12 @@ export const AddActionDialog = (props: IAddActionDialog) => {
               {isSenderIdNeeded ? (
                 <>
                   <div className="mt-5">
-                    <Label>{t("sender_id")}</Label>
+                    <div className="flex">
+                      <Label>{t("sender_id")}</Label>
+                      <Tooltip content={t("sender_id_info")}>
+                        <Info className="mr-1 mt-0.5 ml-2 h-4 w-4 text-gray-500" />
+                      </Tooltip>
+                    </div>
                     <Input
                       type="text"
                       placeholder={SENDER_ID}

packages/features/ee/workflows/components/WorkflowStepContainer.tsx

@@ -35,6 +35,7 @@ import {
   Editor,
   AddVariablesDropdown,
   Input,
+  Tooltip,
 } from "@calcom/ui";
 import { ArrowDown, MoreHorizontal, Trash2, HelpCircle, Info } from "@calcom/ui/components/icon";
 
@@ -558,7 +559,12 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 {isSenderIdNeeded ? (
                   <>
                     <div className="pt-4">
-                      <Label>{t("sender_id")}</Label>
+                      <div className="flex">
+                        <Label>{t("sender_id")}</Label>
+                        <Tooltip content={t("sender_id_info")}>
+                          <Info className="mr-1 mt-0.5 ml-2 h-4 w-4 text-gray-500" />
+                        </Tooltip>
+                      </div>
                       <Input
                         type="text"
                         placeholder={SENDER_ID}