From 92312183502598b8d97cd7da322401d866e8faed Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Sun, 11 Jun 2023 05:20:13 +0200
Subject: [PATCH] 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            | 1 +
 .../features/ee/workflows/components/AddActionDialog.tsx | 9 ++++++++-
 .../ee/workflows/components/WorkflowStepContainer.tsx    | 8 +++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index ffe979efbf..47010923fd 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/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 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx
index 42aa1610db..a721abf46c 100644
--- a/packages/features/ee/workflows/components/AddActionDialog.tsx
+++ b/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}
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index 4b7fc37ee1..7068432dd2 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/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}