From 5b167b5b5b9de36ee1afaec3748a43e5ba08537d Mon Sep 17 00:00:00 2001 From: Muhsin Keloth Date: Mon, 23 Feb 2026 19:26:45 +0400 Subject: [PATCH] fix(contacts): Show telegram id in contact details form (#13611) ## Summary This change fixes a mismatch in contact details where Telegram data could be shown in the contact profile/social icon area but was not available in the editable contact form. ### What changed - Added Telegram to the social links section of the next-gen contact form so agents can view and edit it alongside Facebook, Instagram, TikTok, Twitter, GitHub, and LinkedIn. - Added Telegram support to the legacy conversation contact edit form for parity between both contact editing experiences. - Mapped social_telegram_user_name into the editable socialProfiles payload when preparing contact form state, so Telegram usernames sourced from channel attributes are visible in the form. - Updated the conversation contact social profile merge logic so Telegram display prefers an explicitly saved social profile value and falls back to social_telegram_user_name when needed. - Added the missing English i18n placeholder: Add Telegram. ### Why Without this, users could see Telegram info in some contact views but could not reliably edit it in contact details, creating inconsistent behavior between display and edit states. --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> --- .../Contacts/ContactsForm/ContactsForm.vue | 11 ++++++++++- app/javascript/dashboard/i18n/locale/en/contact.json | 3 +++ .../dashboard/conversation/contact/ContactForm.vue | 4 ++++ .../dashboard/conversation/contact/ContactInfo.vue | 8 ++++++-- 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue index 3dc29738e..66296257f 100644 --- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue +++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue @@ -44,6 +44,7 @@ const SOCIAL_CONFIG = { LINKEDIN: 'i-ri-linkedin-box-fill', FACEBOOK: 'i-ri-facebook-circle-fill', INSTAGRAM: 'i-ri-instagram-line', + TELEGRAM: 'i-ri-telegram-fill', TIKTOK: 'i-ri-tiktok-fill', TWITTER: 'i-ri-twitter-x-fill', GITHUB: 'i-ri-github-fill', @@ -66,6 +67,7 @@ const defaultState = { facebook: '', github: '', instagram: '', + telegram: '', tiktok: '', linkedin: '', twitter: '', @@ -103,9 +105,13 @@ const prepareStateBasedOnProps = () => { countryCode = '', country = '', city = '', + socialTelegramUserName = '', socialProfiles = {}, } = additionalAttributes || {}; + const telegramUsername = + socialProfiles?.telegram || socialTelegramUserName || ''; + Object.assign(state, { id, name, @@ -119,7 +125,10 @@ const prepareStateBasedOnProps = () => { countryCode, country, city, - socialProfiles, + socialProfiles: { + ...socialProfiles, + telegram: telegramUsername, + }, }, }); }; diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json index fe04e5848..0d9f79984 100644 --- a/app/javascript/dashboard/i18n/locale/en/contact.json +++ b/app/javascript/dashboard/i18n/locale/en/contact.json @@ -458,6 +458,9 @@ "INSTAGRAM": { "PLACEHOLDER": "Add Instagram" }, + "TELEGRAM": { + "PLACEHOLDER": "Add Telegram" + }, "TIKTOK": { "PLACEHOLDER": "Add TikTok" }, diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue index 77d4b9773..d8479c4f2 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue @@ -58,12 +58,14 @@ export default { twitter: '', linkedin: '', github: '', + telegram: '', }, socialProfileKeys: [ { key: 'facebook', prefixURL: 'https://facebook.com/' }, { key: 'twitter', prefixURL: 'https://twitter.com/' }, { key: 'linkedin', prefixURL: 'https://linkedin.com/' }, { key: 'github', prefixURL: 'https://github.com/' }, + { key: 'telegram', prefixURL: 'https://t.me/' }, { key: 'tiktok', prefixURL: 'https://tiktok.com/@' }, ], }; @@ -175,12 +177,14 @@ export default { const { social_profiles: socialProfiles = {}, screen_name: twitterScreenName, + social_telegram_user_name: telegramUserName, } = additionalAttributes; this.socialProfileUserNames = { twitter: socialProfiles.twitter || twitterScreenName || '', facebook: socialProfiles.facebook || '', linkedin: socialProfiles.linkedin || '', github: socialProfiles.github || '', + telegram: socialProfiles.telegram || telegramUserName || '', instagram: socialProfiles.instagram || '', tiktok: socialProfiles.tiktok || '', }; diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue index 7392bea78..3899d1ddf 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue @@ -81,10 +81,14 @@ export default { screen_name: twitterScreenName, social_telegram_user_name: telegramUsername, } = this.additionalAttributes; + + const telegram = socialProfiles?.telegram || telegramUsername || ''; + const twitter = socialProfiles?.twitter || twitterScreenName || ''; + return { - twitter: twitterScreenName, - telegram: telegramUsername, ...(socialProfiles || {}), + twitter, + telegram, }; }, // Delete Modal