|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const app = document.getElementById('app'); |
|
|
|
|
|
|
|
|
app.innerHTML = ` |
|
|
<custom-navbar></custom-navbar> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8"> |
|
|
<!-- Templates list column --> |
|
|
<div class="md:col-span-1"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800">Templates</h2> |
|
|
<button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i data-feather="plus" class="w-4 h-4 mr-2"></i> |
|
|
New |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="relative mb-4"> |
|
|
<i data-feather="search" class="absolute left-3 top-3 text-gray-400"></i> |
|
|
<input type="text" placeholder="Search templates..." |
|
|
class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-2 mb-4"> |
|
|
<button class="px-3 py-1 text-sm rounded-full bg-primary-100 text-primary-800">All</button> |
|
|
<button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-800">Approved</button> |
|
|
<button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-800">Pending</button> |
|
|
<button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-800">Rejected</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3 h-[500px] overflow-y-auto"> |
|
|
<!-- Template cards will be inserted here --> |
|
|
<custom-template-card |
|
|
name="purchase_confirmation" |
|
|
status="approved" |
|
|
category="transactional" |
|
|
language="pt_BR" |
|
|
></custom-template-card> |
|
|
|
|
|
<custom-template-card |
|
|
name="checkout_abandoned" |
|
|
status="approved" |
|
|
category="marketing" |
|
|
language="pt_BR" |
|
|
></custom-template-card> |
|
|
|
|
|
<custom-template-card |
|
|
name="special_promotion" |
|
|
status="pending" |
|
|
category="marketing" |
|
|
language="pt_BR" |
|
|
></custom-template-card> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Template editor column --> |
|
|
<div class="md:col-span-2"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6 template-editor"> |
|
|
<div class="text-center py-12"> |
|
|
<div class="mx-auto w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4"> |
|
|
<i data-feather="zap" class="text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium mb-2">No template selected</h3> |
|
|
<p class="text-gray-500 mb-4">Select a template from the list or create a new one</p> |
|
|
<button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg"> |
|
|
Create New Template |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
}); |
|
|
|
|
|
|
|
|
const templates = [ |
|
|
{ |
|
|
id: "purchase_confirmation", |
|
|
name: "purchase_confirmation", |
|
|
language: "pt_BR", |
|
|
components: [ |
|
|
{ |
|
|
type: "HEADER", |
|
|
format: "TEXT", |
|
|
text: "Compra Confirmada! 🔆", |
|
|
}, |
|
|
{ |
|
|
type: "BODY", |
|
|
text: "E aí, campeão da energia limpa! Sua compra do kit solar {{1}} foi confirmada. Valor total: R$ {{2}}. Prepare-se para revolucionar sua forma de consumir energia! Acompanhe o status do seu pedido #{{3}} pelo nosso app.", |
|
|
example: { |
|
|
body_text: [["Premium 450W", "15.990,00", "YS-78945"]], |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
type: "FOOTER", |
|
|
text: "Yello Solar - Energia que não cai. Igual a gente.", |
|
|
}, |
|
|
], |
|
|
status: "APPROVED", |
|
|
category: "transactional", |
|
|
}, |
|
|
|
|
|
]; |
