From 80b132e1559ea5b16399e8b74e08b9f6bc9154c7 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 19 Jun 2026 12:29:07 +0400
Subject: [PATCH] feat(tiktok): add cloud warning (#14768)

Adds Cloud-only warning on the TikTok connect page while North American
account connections may be temporarily unavailable.

Fixes
https://linear.app/chatwoot/issue/CW-7322/cloud-show-tiktok-north-america-warning-on-connect-page

---------

Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>
---
 .../dashboard/i18n/locale/en/inboxMgmt.json   |  3 +-
 .../settings/inbox/channels/Tiktok.vue        | 50 +++++++++++++------
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 574cf5b9b..8eefe5fde 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -65,7 +65,8 @@
         "CONNECT_YOUR_TIKTOK_PROFILE": "Connect your TikTok Profile",
         "HELP": "To add your TikTok profile as a channel, you need to authenticate your TikTok Profile by clicking on 'Continue with TikTok' ",
         "ERROR_MESSAGE": "There was an error connecting to TikTok, please try again",
-        "ERROR_AUTH": "There was an error connecting to TikTok, please try again"
+        "ERROR_AUTH": "There was an error connecting to TikTok, please try again",
+        "NORTH_AMERICA_WARNING": "TikTok connections for North American accounts are temporarily unavailable while we wait for an update from the TikTok team."
       },
       "TWITTER": {
         "HELP": "To add your Twitter profile as a channel, you need to authenticate your Twitter Profile by clicking on 'Sign in with Twitter' ",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Tiktok.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Tiktok.vue
index 50a326835..50f253603 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Tiktok.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Tiktok.vue
@@ -3,8 +3,12 @@ import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import tiktokClient from 'dashboard/api/channel/tiktokClient';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { useAccount } from 'dashboard/composables/useAccount';
 
 const { t } = useI18n();
+const { isOnChatwootCloud } = useAccount();
 
 const hasError = ref(false);
 const errorStateMessage = ref('');
@@ -56,23 +60,37 @@ const requestAuthorization = async () => {
       </div>
       <div
         v-else
-        class="flex flex-col items-center justify-center px-8 py-10 text-center rounded-2xl outline outline-1 outline-n-weak"
+        class="flex flex-col items-center justify-center w-full px-8 py-10 text-center rounded-2xl outline outline-1 outline-n-weak"
       >
-        <h6 class="text-2xl font-medium">
-          {{ $t('INBOX_MGMT.ADD.TIKTOK.CONNECT_YOUR_TIKTOK_PROFILE') }}
-        </h6>
-        <p class="py-6 text-sm text-n-slate-11">
-          {{ $t('INBOX_MGMT.ADD.TIKTOK.HELP') }}
-        </p>
-        <Button
-          class="text-white !rounded-full !px-6 bg-gradient-to-r from-[#00f2ea] via-[#ff0050] to-[#000000]"
-          lg
-          icon="i-ri-tiktok-line"
-          :disabled="isRequestingAuthorization"
-          :is-loading="isRequestingAuthorization"
-          :label="$t('INBOX_MGMT.ADD.TIKTOK.CONTINUE_WITH_TIKTOK')"
-          @click="requestAuthorization()"
-        />
+        <div class="flex flex-col items-center w-full max-w-2xl">
+          <h6 class="text-2xl font-medium">
+            {{ $t('INBOX_MGMT.ADD.TIKTOK.CONNECT_YOUR_TIKTOK_PROFILE') }}
+          </h6>
+          <p class="max-w-xl py-6 text-sm text-n-slate-11">
+            {{ $t('INBOX_MGMT.ADD.TIKTOK.HELP') }}
+          </p>
+
+          <Button
+            class="text-white !rounded-full !px-6 bg-gradient-to-r from-[#00f2ea] via-[#ff0050] to-[#000000]"
+            lg
+            icon="i-ri-tiktok-line"
+            :disabled="isRequestingAuthorization"
+            :is-loading="isRequestingAuthorization"
+            :label="$t('INBOX_MGMT.ADD.TIKTOK.CONTINUE_WITH_TIKTOK')"
+            @click="requestAuthorization()"
+          />
+          <Banner v-if="isOnChatwootCloud" color="amber" class="w-full mt-6">
+            <div class="flex items-start gap-3 text-left">
+              <Icon
+                icon="i-lucide-triangle-alert"
+                class="flex-shrink-0 size-4 mt-0.5"
+              />
+              <span>
+                {{ $t('INBOX_MGMT.ADD.TIKTOK.NORTH_AMERICA_WARNING') }}
+              </span>
+            </div>
+          </Banner>
+        </div>
       </div>
     </div>
   </div>