fix(branding): add SuperAdmin-only notice on upgrade gates (#278)

* fix(branding): add SuperAdmin-only notice on upgrade gates

Some upgrade prompts (Kanban paywall, group creation form, group-disabled
banner in conversation view) are rendered only to SuperAdmins and link to
fazer.ai. Admins viewing those screens were worried that the fazer.ai
link was also being shown to their agents, even though it is not.

Add a discreet "Only system administrators can see this message" line
under each SuperAdmin-only block to make the audience explicit.

* fix(branding): inline SuperAdmin notice into Banner component

The notice was being rendered as a standalone <p> below the conversation
banner, which made it easy to miss. Add an optional noticeMessage prop
to the Banner component and render it inside the banner with italic +
reduced opacity styling, then pass it from the groups-disabled branch
of the MessagesView banner.
This commit is contained in:
Gabriel Jablonski 2026-04-28 13:20:38 -03:00 committed by GitHub
parent 8b663342c2
commit b5757eea5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 35 additions and 13 deletions

View File

@ -167,20 +167,25 @@ defineExpose({ resetForm });
<div class="flex-1 divide-y divide-n-strong overflow-visible">
<div
v-if="isGroupsDisabled"
class="flex items-center gap-2 mx-4 mt-3 px-3 py-2 rounded-lg text-sm text-n-amber-11 bg-n-amber-2"
class="flex items-start gap-2 mx-4 mt-3 px-3 py-2 rounded-lg text-sm text-n-amber-11 bg-n-amber-2"
>
<span class="i-lucide-triangle-alert text-base flex-shrink-0" />
<span v-if="isSuperAdmin">
{{ t('GROUP.CREATE.GROUPS_DISABLED') }}
<a
:href="wootConstants.FAZER_AI_GUIDES_URL"
target="_blank"
rel="noopener noreferrer"
class="underline font-medium"
>
{{ t('GROUP.CREATE.GROUPS_DISABLED_CTA') }}
</a>
</span>
<span class="i-lucide-triangle-alert text-base flex-shrink-0 mt-0.5" />
<div v-if="isSuperAdmin" class="flex flex-col gap-0.5">
<span>
{{ t('GROUP.CREATE.GROUPS_DISABLED') }}
<a
:href="wootConstants.FAZER_AI_GUIDES_URL"
target="_blank"
rel="noopener noreferrer"
class="underline font-medium"
>
{{ t('GROUP.CREATE.GROUPS_DISABLED_CTA') }}
</a>
</span>
<span class="text-xs opacity-70">
{{ t('GENERAL_SETTINGS.SUPER_ADMIN_ONLY_NOTICE') }}
</span>
</div>
<span v-else>
{{ t('GROUP.CREATE.GROUPS_DISABLED_NON_ADMIN') }}
</span>

View File

@ -42,6 +42,10 @@ export default {
type: Boolean,
default: false,
},
noticeMessage: {
type: String,
default: '',
},
},
emits: ['primaryAction', 'close'],
computed: {
@ -92,6 +96,9 @@ export default {
>
{{ hrefLinkText }}
</a>
<span v-if="noticeMessage" class="banner-notice">
{{ noticeMessage }}
</span>
</span>
<div class="actions">
<NextButton
@ -155,6 +162,10 @@ export default {
@apply inline;
}
.banner-notice {
@apply ml-2 italic opacity-70;
}
.actions {
@apply flex gap-1 right-3;
}

View File

@ -693,6 +693,7 @@ export default {
color-scheme="warning"
class="mx-2 mt-2 overflow-hidden rounded-lg"
:banner-message="$t('CONVERSATION.GROUPS_DISABLED_BANNER')"
:notice-message="$t('GENERAL_SETTINGS.SUPER_ADMIN_ONLY_NOTICE')"
has-action-button
:action-button-label="$t('CONVERSATION.GROUPS_DISABLED_CTA')"
@primary-action="onOpenGroupsEnabledLink"

View File

@ -10,6 +10,7 @@
"SUBMIT": "Update settings",
"BACK": "Back",
"DISMISS": "Dismiss",
"SUPER_ADMIN_ONLY_NOTICE": "Only system administrators can see this message.",
"UPDATE": {
"ERROR": "Could not update settings, try again!",
"SUCCESS": "Successfully updated account settings"

View File

@ -10,6 +10,7 @@
"SUBMIT": "Atualizar configurações",
"BACK": "Anterior",
"DISMISS": "Recusar",
"SUPER_ADMIN_ONLY_NOTICE": "Esta mensagem só é visível para administradores do sistema.",
"UPDATE": {
"ERROR": "Não foi possível atualizar as configurações, tente novamente!",
"SUCCESS": "Configurações de conta atualizadas com sucesso"

View File

@ -60,6 +60,9 @@ const upgradeUrl = 'https://fazer.ai/kanban';
{{ t('KANBAN.PAYWALL.UPGRADE_NOW') }}
</Button>
</a>
<p v-if="isSuperAdmin" class="mt-3 text-xs text-center text-n-slate-10">
{{ t('GENERAL_SETTINGS.SUPER_ADMIN_ONLY_NOTICE') }}
</p>
</div>
</section>
</template>