File size: 5,003 Bytes
070478f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
document.addEventListener('DOMContentLoaded', () => {
const app = document.getElementById('app');
// Main app structure
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>
`;
// Initialize feather icons
feather.replace();
});
// Sample data for templates
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",
},
// More templates...
]; |