import { Head, Link } from '@inertiajs/react'; import { ArrowLeft, FileText } from 'lucide-react'; import * as React from 'react'; import { TemplatePreview } from '@/components/template-preview'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { StatusBadge } from '@/components/ui/status-badge'; interface MessageTemplate { id: number; name: string; language: string; category: string; status: string; components: any[]; rejection_reason: string | null; phone_number: string; created_at: string; } interface TemplateShowProps { template: MessageTemplate; } export default function TemplateShow({ template }: TemplateShowProps) { // Extract component values for the Preview component const headerComponent = template.components.find( (c) => c.type === 'HEADER', ); const bodyComponent = template.components.find((c) => c.type === 'BODY'); const footerComponent = template.components.find( (c) => c.type === 'FOOTER', ); const buttonsComponent = template.components.find( (c) => c.type === 'BUTTONS', ); const headerType = headerComponent?.format === 'TEXT' ? 'TEXT' : 'NONE'; const headerText = headerComponent?.text || ''; const bodyText = bodyComponent?.text || ''; const footerText = footerComponent?.text || ''; const buttons = buttonsComponent?.buttons || []; return ( <>

{/* Back Link */}

{/* Profile Title */}

{template.name}

Kategori:{' '} {template.category} {' '} | Bahasa:{' '} {template.language}

{/* Specifications Card */}

Spesifikasi Template

Rincian komponen dan struktur pesan yang diajukan ke Meta.

Saluran Nomor Terdaftar

{template.phone_number}

Tanggal Pengajuan

{template.created_at}

{template.rejection_reason && (

Alasan Penolakan Meta

{template.rejection_reason}

)}

{headerText && (

Header (Kepala Pesan)

{headerText}

)}

Isi Pesan (Body)

{bodyText}

{footerText && (

Footer (Kaki Pesan)

{footerText}

)} {buttons.length > 0 && (

Tombol Interaktif

{buttons.map( (btn: any, idx: number) => (

{btn.text} {btn.type}

{btn.url && (


                                                                {btn.url}

)} {btn.phone_number && (


                                                                {
                                                                    btn.phone_number
                                                                }

)}

), )}

)}

{/* Preview Bubble */}

Pratinjau Tampilan Chat Simulasi tampilan balon obrolan sesuai yang dilihat oleh penerima di WhatsApp.

); } TemplateShow.layout = (page: any) => page;