From e11f478c1ae272369f686ba3beb4900fcff7a30e Mon Sep 17 00:00:00 2001
From: Rogee <rogeecn@users.noreply.github.com>
Date: Sun, 23 Aug 2026 20:38:01 +0800
Subject: [PATCH] fix(HH-550): scope assignment upgrade prompts to cloud (#129)

Co-authored-by: Rogee <rogee@ipao.vip>
---
 .../advancedAssignmentPaywall.spec.js         | 23 +++++++++++++++++++
 .../components/AgentAssignmentPolicyForm.vue  | 20 +++++++++++-----
 .../inbox/settingsPage/CollaboratorsPage.vue  | 10 ++++++--
 3 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 frontend/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/advancedAssignmentPaywall.spec.js

diff --git a/frontend/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/advancedAssignmentPaywall.spec.js b/frontend/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/advancedAssignmentPaywall.spec.js
new file mode 100644
index 00000000..e8e7a8c4
--- /dev/null
+++ b/frontend/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/advancedAssignmentPaywall.spec.js
@@ -0,0 +1,23 @@
+import { readFileSync } from 'node:fs';
+
+describe('advanced assignment paywalls', () => {
+  it.each([
+    [
+      '../inbox/settingsPage/CollaboratorsPage.vue',
+      'v-if="showAdvancedAssignmentPaywall"',
+    ],
+    [
+      './pages/components/AgentAssignmentPolicyForm.vue',
+      'disabled && showAdvancedAssignmentPaywall.value',
+    ],
+  ])('uses the deployment-aware paywall policy in %s', (path, condition) => {
+    const source = readFileSync(
+      `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/${path}`,
+      'utf8'
+    );
+
+    expect(source).toContain('shouldShowPaywall');
+    expect(source).toContain('showAdvancedAssignmentPaywall');
+    expect(source).toContain(condition);
+  });
+});
diff --git a/frontend/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue b/frontend/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
index cbf22b4d..d0097f69 100644
--- a/frontend/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
+++ b/frontend/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
@@ -3,6 +3,8 @@ import { computed, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import BaseInfo from 'dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue';
 import RadioCard from 'dashboard/components-next/radioCard/RadioCard.vue';
 import FairDistribution from 'dashboard/components-next/AssignmentPolicy/components/FairDistribution.vue';
@@ -67,6 +69,7 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 const route = useRoute();
+const { shouldShowPaywall } = usePolicy();
 
 const accountId = computed(() => Number(route.params.accountId));
 const isFeatureEnabledonAccount = useMapGetter(
@@ -74,6 +77,9 @@ const isFeatureEnabledonAccount = useMapGetter(
 );
 
 const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY';
+const showAdvancedAssignmentPaywall = computed(() =>
+  shouldShowPaywall(FEATURE_FLAGS.ADVANCED_ASSIGNMENT)
+);
 
 const state = reactive({
   name: '',
@@ -115,12 +121,14 @@ const assignmentOrderOptions = computed(() => {
   return OPTIONS.ORDER.map(key => {
     const isBalanced = key === 'balanced';
     const disabled = isBalanced && !hasAdvancedAssignment;
-    const disabledMessage = disabled
-      ? t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_MESSAGE`)
-      : '';
-    const disabledLabel = disabled
-      ? t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_BADGE`)
-      : '';
+    const disabledMessage =
+      disabled && showAdvancedAssignmentPaywall.value
+        ? t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_MESSAGE`)
+        : '';
+    const disabledLabel =
+      disabled && showAdvancedAssignmentPaywall.value
+        ? t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_BADGE`)
+        : '';
 
     return createOption(
       'ASSIGNMENT_ORDER',
diff --git a/frontend/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue b/frontend/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
index 083ca024..b36c1801 100644
--- a/frontend/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/frontend/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -14,6 +14,8 @@ import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.v
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 import assignmentPoliciesAPI from 'dashboard/api/assignmentPolicies';
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -27,6 +29,7 @@ const store = useStore();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
+const { shouldShowPaywall } = usePolicy();
 
 const selectedAgentIds = ref([]);
 const isAgentListUpdating = ref(false);
@@ -90,6 +93,10 @@ const showAdvancedAssignmentUI = computed(() => {
   return hasAdvancedAssignment.value && hasAssignmentV2.value;
 });
 
+const showAdvancedAssignmentPaywall = computed(() =>
+  shouldShowPaywall(FEATURE_FLAGS.ADVANCED_ASSIGNMENT)
+);
+
 const assignmentOrderLabel = computed(() => {
   if (!assignmentPolicy.value) return '';
   const priority = assignmentPolicy.value.conversation_priority;
@@ -613,8 +620,7 @@ onMounted(() => {
 
                   <div class="w-full h-px bg-n-weak my-4" />
 
-                  <!-- Upgrade prompt when advanced_assignment is not enabled -->
-                  <div v-if="!hasAdvancedAssignment">
+                  <div v-if="showAdvancedAssignmentPaywall">
                     <p class="text-body-main text-n-slate-11 mb-1">
                       {{ $t('INBOX_MGMT.ASSIGNMENT.UPGRADE_PROMPT') }}
                     </p>