chore: account health

This commit is contained in:
Muhsin Keloth
2025-08-17 17:32:24 +05:30
parent e5104e0b5e
commit 51d0acb90c
3 changed files with 92 additions and 1 deletions
@@ -46,7 +46,7 @@ watch(
</script>
<template>
<div class="p-4 h-full bg-white rounded-lg border">
<div class="p-4 h-full bg-white rounded-lg border border-n-slate-4">
<h3 class="mb-4 text-lg font-semibold">
{{ t('CAMPAIGN.PLAYGROUND.TITLE') }}
</h3>
@@ -366,6 +366,83 @@ watch(
</div>
</Accordion>
<!-- Account Health Section -->
<Accordion :title="t('CAMPAIGN.FORM.SECTIONS.ACCOUNT_HEALTH')">
<div class="flex flex-col gap-6 pt-4">
<!-- Messaging Tier Card -->
<div class="p-4 border rounded-lg bg-n-alpha-1 border-n-weak">
<div class="flex items-start justify-between">
<div class="flex items-center gap-2">
<span class="i-lucide-gauge text-lg text-n-slate-10" />
<div>
<h4 class="text-sm font-medium text-n-slate-12">
{{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.MESSAGING_TIER') }}
</h4>
<p class="text-xs text-n-slate-11 mt-1">
{{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.TIER_DESCRIPTION') }}
</p>
</div>
</div>
<a
href="https://www.zoko.io/learning-article/whatsapp-business-api-messaging-limits-and-how-to-upgrade-to-the-next-tier"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1 text-n-blue-11 hover:text-n-blue-12 text-xs underline"
>
{{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.LEARN_MORE') }}
<span class="i-lucide-external-link text-xs" />
</a>
</div>
</div>
<!-- Account Health Status -->
<div class="p-4 border rounded-lg bg-n-alpha-1 border-n-weak">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="i-lucide-heart-pulse text-lg text-green-600" />
<div>
<h4 class="text-sm font-medium text-n-slate-12">
{{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.ACCOUNT_HEALTH') }}
</h4>
<p class="text-xs text-n-slate-11 mt-1">
{{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.QUALITY_RATING') }}
</p>
</div>
</div>
<span
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-white bg-green-600 rounded-full"
>
<span class="w-1.5 h-1.5 bg-white rounded-full mr-1.5" />
{{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.HEALTH_GREEN') }}
</span>
</div>
</div>
<!-- Account Status -->
<div class="p-4 border rounded-lg bg-n-alpha-1 border-n-weak">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="i-lucide-wifi text-lg text-blue-600" />
<div>
<h4 class="text-sm font-medium text-n-slate-12">
{{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.ACCOUNT_STATUS') }}
</h4>
<p class="text-xs text-n-slate-11 mt-1">
{{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.API_CONNECTION') }}
</p>
</div>
</div>
<span
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-100 rounded-full"
>
<span class="w-1.5 h-1.5 bg-blue-600 rounded-full mr-1.5" />
{{ t('CAMPAIGN.FORM.ACCOUNT_HEALTH.STATUS_CONNECTED') }}
</span>
</div>
</div>
</div>
</Accordion>
<!-- Schedule Template Section -->
<Accordion :title="t('CAMPAIGN.FORM.SECTIONS.SCHEDULE_TEMPLATE')">
<div class="flex flex-col gap-4 pt-4">
@@ -211,6 +211,7 @@
"BASIC_DETAILS": "Basic Details",
"SELECT_TEMPLATE": "Select Template",
"SELECT_AUDIENCE": "Select Audience",
"ACCOUNT_HEALTH": "Account Health",
"SCHEDULE_TEMPLATE": "Schedule Template"
},
"TITLE": {
@@ -250,6 +251,19 @@
"VIEW_CONTACTS": "view contacts",
"SENDING_TO": "You are sending this campaign to",
"CONTACTS_TOTAL": "contacts"
},
"ACCOUNT_HEALTH": {
"MESSAGING_TIER": "Messaging Tier:",
"ACCOUNT_HEALTH": "Account Health:",
"ACCOUNT_STATUS": "Account Status:",
"TIER_DESCRIPTION": "TIER 3 (MAX 100,000 CUSTOMERS IN 24 HOURS)",
"STATUS_CONNECTED": "CONNECTED",
"HEALTH_GREEN": "GREEN",
"HEALTH_YELLOW": "YELLOW",
"HEALTH_RED": "RED",
"LEARN_MORE": "Learn more about Tiers",
"QUALITY_RATING": "Quality rating",
"API_CONNECTION": "API connection"
}
},
"PLAYGROUND": {