Undangan/proyek-frontend/app/pages/p/[code].vue

<template>
  <div class="w-full min-h--screen bg-gray-100">
   

    <!-- Loading State -->
    <div v-if="pending" class="text-center">
      <div class="animate-spin rounded-full h-12 w-12 border-t-4 border-blue-500 mx-auto"></div>
      <p class="mt-4 text-gray-600">Loading invitation...</p>
    </div>

    <!-- Error State -->
    <div v-else-if="error || !data" class="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
      <svg class="w-12 h-12 mx-auto text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
        </path>
      </svg>
      <p class="text-lg font-semibold text-gray-800 mb-2">Undangan Tidak Ditemukan</p>
      <p class="text-gray-600 mb-6">Maaf, undangan yang Anda cari tidak tersedia atau sudah tidak berlaku.</p>
      <NuxtLink to="/"
        class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
        Kembali ke Beranda
      </NuxtLink>
    </div>

    <!-- Data Loaded Successfully -->
    <div v-else-if="data && data.template">
      <!-- Dynamic Component for Known Slugs -->
      <component v-if="dynamicComponent" :is="dynamicComponent" :data="data" />

      <!-- Fallback for Unknown Slugs -->
      <div v-else class="w-full bg-white rounded-lg shadow-lg p-8">
        <h1 class="text-2xl font-bold text-gray-800 mb-1">Invitation Data</h1>
        <div class="text-sm mb-4 text-gray-500">Tampilan ini muncul saat komponen template belum tersedia</div>
        <div v-for="(value, key) in data" :key="key" class="mb-4">
          <h2 class="text-lg font-semibold text-gray-700 capitalize">{{ key.replace('_', ' ') }}</h2>
          <p v-if="typeof value !== 'object'" class="text-gray-600">{{ value }}</p>
          <pre v-else class="text-gray-600 bg-gray-50 p-2 rounded">{{ JSON.stringify(value, null, 2) }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent, computed } from 'vue'
import { useRoute, useRuntimeConfig, useAsyncData, createError } from '#app'

const route = useRoute()
const config = useRuntimeConfig()
const backendUrl = config.public.apiBaseUrl

const { data, pending, error } = await useAsyncData(
  'invitation',
  async () => {
    try {
      const response = await $fetch(`${backendUrl}/api/pelanggans/code/${route.params.code}`)
      console.log('✅ API response:', response)
      console.log('🧾 response.data:', response.data)
      console.log('🧩 Template data:', response.data?.template)
      console.log('🔖 Template slug:', response.data?.template?.slug)
      // Check if the API response indicates failure
      if (!response.success) {
        throw createError({
          statusCode: 404,
          message: response.message || 'Undangan tidak ditemukan',
          fatal: false
        })
      }

      // Validate data structure
      if (!response.data || !response.data.template) {
        throw createError({
          statusCode: 404,
          message: 'Data undangan tidak valid',
          fatal: false
        })
      }

      return response.data
    } catch (err) {
      // Handle network errors or other exceptions
      if (err.statusCode) {
        throw err
      }

      throw createError({
        statusCode: err.statusCode || 500,
        message: 'Undangan tidak ditemukan',
        fatal: false
      })
    }
  },
  {
    // Prevent automatic error propagation
    lazy: false,
    server: true,
    // Transform function to ensure consistent data structure
    transform: (data) => data
  }
)

const componentMap = {
  'undangan-minimalis': defineAsyncComponent(() => import('~/components/undangan/undangan-minimalis.vue')),
  'undangan-ulang-tahun-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-premium.vue')),
  'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
  'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
  'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue'))
  // Add more mappings as templates are developed
}

const dynamicComponent = computed(() => {
  if (!data.value?.template?.slug) return null
  return componentMap[data.value.template.slug] || null
})

// === DEBUG WATCHER ===
watchEffect(() => {
  if (data.value) {
    console.log('📦 Template slug:', data.value?.template?.slug)
    console.log('🧩 Dynamic component:', dynamicComponent.value)
  }
})

// Set meta tags only if data exists
useHead(() => ({
  title: data.value?.nama_pemesan || 'Undangan Tak Bernama',
  meta: [
    {
      name: 'description',
      content: data.value
        ? `${data.value.nama_pemesan} mengundang Anda untuk menghadiri acara berikut!`
        : 'Undangan Digital'
    },
  ],
}))
</script>

<style scoped>
pre {
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>