416 lines
11 KiB
Vue
416 lines
11 KiB
Vue
<!--
|
||
Copyright 2024-2026 ChatterMate
|
||
|
||
Licensed under the Apache License, Version 2.0 (the "License");
|
||
you may not use this file except in compliance with the License.
|
||
You may obtain a copy of the License at
|
||
|
||
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
||
Unless required by applicable law or agreed to in writing, software
|
||
distributed under the License is distributed on an "AS IS" BASIS,
|
||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
See the License for the specific language governing permissions and
|
||
limitations under the License.
|
||
-->
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch, onMounted } from 'vue'
|
||
import channelsService, {
|
||
type ChannelAccount,
|
||
type WhatsAppTemplate,
|
||
} from '@/services/channels'
|
||
import BaseModal from '@/components/common/BaseModal.vue'
|
||
import { templatePreviewText, templateKey } from '@/utils/whatsappTemplates'
|
||
import { languageLabel } from '@/utils/whatsappLanguages'
|
||
|
||
const props = defineProps<{
|
||
accounts: ChannelAccount[]
|
||
}>()
|
||
|
||
const emit = defineEmits<{ (e: 'close'): void }>()
|
||
|
||
const accountId = ref(props.accounts[0]?.id ?? '')
|
||
const templates = ref<WhatsAppTemplate[]>([])
|
||
const loading = ref(true)
|
||
const loadError = ref('')
|
||
|
||
/**
|
||
* Templates are written in Meta's Template Library, not here — it has ~150
|
||
* pre-written, pre-localised ones built to pass its own review.
|
||
*
|
||
* The link is fetched rather than built: it is scoped to this number's Business
|
||
* Account, and only the server can resolve which that is. It is fetched up
|
||
* front so the anchor is a real href by the time it is clicked — resolving it
|
||
* on click, after an await, would hand the browser a popup to block.
|
||
*/
|
||
const libraryUrl = ref('')
|
||
|
||
// Guards against a slow response for a previously selected number landing after
|
||
// a newer one and rendering its templates under the wrong account.
|
||
let loadToken = 0
|
||
// The link's own token: it is keyed to the account, not the list, so the two
|
||
// reload on different schedules and cannot invalidate each other.
|
||
let libraryToken = 0
|
||
|
||
const load = async () => {
|
||
const token = ++loadToken
|
||
loadError.value = ''
|
||
if (!accountId.value) {
|
||
templates.value = []
|
||
loading.value = false
|
||
return
|
||
}
|
||
loading.value = true
|
||
try {
|
||
const result = await channelsService.listWhatsAppTemplates(accountId.value)
|
||
if (token !== loadToken) return
|
||
templates.value = result
|
||
} catch (error: any) {
|
||
if (token !== loadToken) return
|
||
loadError.value = error?.response?.data?.detail || '无法加载模板'
|
||
templates.value = []
|
||
} finally {
|
||
if (token === loadToken) loading.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Fetched alongside the list but deliberately not awaited with it: this costs a
|
||
* Graph call, and failing it must not take the list down with it. Without a URL
|
||
* the link simply doesn't render.
|
||
*
|
||
* Only ever called for a change of account. The link is derived from the
|
||
* account's Business Account, so re-resolving it when the list reloads would
|
||
* spend a Graph round trip to learn what we already know — and the list
|
||
* reloads on every "refresh" click.
|
||
*/
|
||
const loadLibraryUrl = async () => {
|
||
const token = ++libraryToken
|
||
libraryUrl.value = ''
|
||
if (!accountId.value) return
|
||
try {
|
||
const url = await channelsService.getWhatsAppTemplateLibraryUrl(accountId.value)
|
||
if (token === libraryToken) libraryUrl.value = url
|
||
} catch {
|
||
// Left empty: the list is still useful, and there is nothing to act on.
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
load()
|
||
loadLibraryUrl()
|
||
})
|
||
|
||
watch(accountId, () => {
|
||
load()
|
||
loadLibraryUrl()
|
||
})
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<BaseModal title="WhatsApp 模板" width="620px" @close="emit('close')">
|
||
<p class="wtm-intro">
|
||
客户 24 小时会话窗口关闭后，可通过模板重新发起会话。模板需在 WhatsApp Manager 中编写；
|
||
经 Meta 审核通过后会显示在此处，客服即可发送。
|
||
</p>
|
||
|
||
<label v-if="accounts.length > 1" class="wtm-field">
|
||
<span class="wtm-label">号码</span>
|
||
<select v-model="accountId" class="wtm-input">
|
||
<option v-for="account in accounts" :key="account.id" :value="account.id">
|
||
{{ account.display_name || account.external_account_id }}
|
||
</option>
|
||
</select>
|
||
</label>
|
||
|
||
<div class="wtm-body">
|
||
<div v-if="loading" class="wtm-skeleton" aria-live="polite" aria-busy="true">
|
||
<div v-for="n in 3" :key="n" class="wtm-skeleton-row"></div>
|
||
</div>
|
||
|
||
<div v-else-if="loadError" class="wtm-empty">
|
||
<font-awesome-icon icon="fa-solid fa-circle-exclamation" />
|
||
<p>{{ loadError }}</p>
|
||
</div>
|
||
|
||
<div v-else-if="templates.length === 0" class="wtm-empty">
|
||
<p>暂无模板。</p>
|
||
</div>
|
||
|
||
<ul v-else class="wtm-list">
|
||
<!-- Keyed on name+language: one name can have a row per language, and
|
||
Vue needs them distinct. -->
|
||
<li v-for="template in templates" :key="templateKey(template)" class="wtm-row">
|
||
<div class="wtm-row-main">
|
||
<div class="wtm-row-head">
|
||
<span class="wtm-name">{{ template.name }}</span>
|
||
<span v-if="template.status" class="wtm-pill" :class="template.status.toLowerCase()">
|
||
{{ template.status }}
|
||
</span>
|
||
</div>
|
||
<div class="wtm-row-meta">
|
||
<span v-if="template.category">{{ template.category }}</span>
|
||
<span v-if="template.language">· {{ languageLabel(template.language) }}</span>
|
||
</div>
|
||
<p class="wtm-row-body">{{ templatePreviewText(template) }}</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Meta's Template Library is where these get written: ~150 pre-written,
|
||
pre-localised templates, already shaped to pass its review. -->
|
||
<div v-if="accountId && !loading" class="wtm-create-guide">
|
||
<h4 class="wtm-guide-title">添加模板</h4>
|
||
<ol class="wtm-steps">
|
||
<li>打开 WhatsApp Manager，进入<strong>模板库</strong>。</li>
|
||
<li>选择现成模板，或选择<strong>创建模板</strong>自行编写。</li>
|
||
<li>
|
||
待 Meta 审核通过后，返回此处并点击<button type="button" class="wtm-link" @click="load">刷新</button>。
|
||
</li>
|
||
</ol>
|
||
<a
|
||
v-if="libraryUrl"
|
||
class="wtm-btn wtm-btn-primary wtm-guide-link"
|
||
:href="libraryUrl"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
打开 WhatsApp Manager
|
||
<font-awesome-icon icon="fa-solid fa-arrow-up-right-from-square" />
|
||
</a>
|
||
</div>
|
||
</BaseModal>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.wtm-intro {
|
||
margin: 0 0 16px;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.wtm-body {
|
||
flex: 1;
|
||
}
|
||
|
||
.wtm-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.wtm-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-btn, 8px);
|
||
background: var(--background-soft);
|
||
}
|
||
|
||
.wtm-row-main {
|
||
min-width: 0;
|
||
}
|
||
|
||
.wtm-row-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.wtm-name {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Neutral by default: Meta adds statuses over time (PENDING_DELETION, IN_APPEAL,
|
||
FLAGGED, ...) and an unrecognised one must still read as a pill, not vanish. */
|
||
.wtm-pill {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
background: color-mix(in srgb, var(--c-neutral) 16%, transparent);
|
||
color: var(--c-neutral);
|
||
border: 1px solid color-mix(in srgb, var(--c-neutral) 35%, transparent);
|
||
}
|
||
|
||
.wtm-pill.approved {
|
||
background: color-mix(in srgb, var(--c-positive) 16%, transparent);
|
||
color: var(--c-positive);
|
||
border-color: color-mix(in srgb, var(--c-positive) 35%, transparent);
|
||
}
|
||
|
||
.wtm-pill.pending {
|
||
background: color-mix(in srgb, var(--c-warn) 16%, transparent);
|
||
color: var(--c-warn);
|
||
border-color: color-mix(in srgb, var(--c-warn) 35%, transparent);
|
||
}
|
||
|
||
/* Rejected, paused and disabled all mean "cannot send" */
|
||
.wtm-pill.rejected,
|
||
.wtm-pill.paused,
|
||
.wtm-pill.disabled {
|
||
background: color-mix(in srgb, var(--c-danger) 16%, transparent);
|
||
color: var(--c-danger);
|
||
border-color: color-mix(in srgb, var(--c-danger) 35%, transparent);
|
||
}
|
||
|
||
.wtm-row-meta {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.wtm-row-body {
|
||
margin: 6px 0 0;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
line-height: 1.5;
|
||
word-break: break-word;
|
||
}
|
||
|
||
|
||
|
||
.wtm-field {
|
||
display: block;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.wtm-label {
|
||
display: block;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.wtm-input {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-btn, 8px);
|
||
background: var(--background-soft);
|
||
color: inherit;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.wtm-skeleton {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* Mirrors .wtm-row, the row it stands in for: a real row is legible because of
|
||
its border, not its fill (--background-soft is #0E0F14 against a #0B0C10
|
||
modal — a contrast ratio of 1.02). Without the border this was rendering
|
||
perfectly and showing nothing, so the modal just looked blank until the
|
||
fetch returned. */
|
||
.wtm-skeleton-row {
|
||
height: 64px;
|
||
border-radius: var(--radius-btn, 8px);
|
||
border: 1px solid var(--border-color);
|
||
background: var(--o08);
|
||
animation: wtm-pulse 1.4s ease-in-out infinite;
|
||
}
|
||
|
||
/* Only down to 0.6: at 0.5 the trough fell back below the threshold where the
|
||
row reads as being there at all. */
|
||
@keyframes wtm-pulse {
|
||
50% {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.wtm-skeleton-row {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
.wtm-empty {
|
||
text-align: center;
|
||
padding: 24px 8px;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.wtm-empty p {
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.wtm-create-guide {
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
.wtm-guide-title {
|
||
margin: 0 0 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.wtm-steps {
|
||
margin: 0 0 12px;
|
||
padding-left: 20px;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* A button, because it acts on this page — styled as the inline link it reads as */
|
||
.wtm-link {
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
font: inherit;
|
||
color: var(--c-info);
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.wtm-guide-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.wtm-btn {
|
||
padding: 8px 14px;
|
||
border-radius: var(--radius-btn, 8px);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
border: 1px solid var(--border-color);
|
||
background: var(--background-soft);
|
||
color: inherit;
|
||
}
|
||
|
||
.wtm-btn-primary {
|
||
background: var(--accent-solid);
|
||
color: var(--on-accent-solid);
|
||
border-color: transparent;
|
||
}
|
||
|
||
|
||
</style>
|