@dev.smartpricing/message-composer-layer 1.0.1

package/app/pages/index.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'message-library',
+})
+
+import {
+  useMessageGroupsQuery,
+  useDeleteMessageGroupMutation,
+  usePublishMessageGroupMutation,
+  useUnpublishMessageGroupMutation,
+} from '~/queries'
+import type {
+  MessageGroupWithMessageSummary,
+  RenderType,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { MessageActionProperties, MessagesKind } from '@/types/tracking'
+import { ref, watch, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import BaseTable from '@/components/TemplateList/BaseTable.vue'
+import CreateTemplateButton from '@/components/CreateTemplateButton.vue'
+
+const { hasWhatsapp, hasEmail, defaultRenderType, isRenderTypeAllowed } = useChannels()
+const { trackEvent } = useTracking()
+
+// Load render type from session or default to first allowed
+const RENDER_TYPE_KEY = 'template_render_type'
+const storedRenderType = sessionStorage.getItem(RENDER_TYPE_KEY) as RenderType | null
+const initialRenderType =
+  storedRenderType && isRenderTypeAllowed(storedRenderType)
+    ? storedRenderType
+    : defaultRenderType.value
+const renderType = ref<RenderType>(initialRenderType)
+
+// Persist render type to session when it changes
+watch(renderType, (newType) => {
+  sessionStorage.setItem(RENDER_TYPE_KEY, newType)
+  trackEvent('change_tab', { messages_kind: newType === 'email_v1' ? 'email' : 'whatsapp' })
+})
+const {
+  data: messageGroups,
+  isPending: isFetching,
+  refetch: execute,
+} = useMessageGroupsQuery(computed(() => ({ renderType: renderType.value })))
+
+// Manual polling (Pinia Colada doesn't support automatic polling yet)
+const interval = setInterval(() => {
+  execute()
+}, 15000)
+
+onBeforeUnmount(() => {
+  clearInterval(interval)
+})
+
+const { confirm } = useConfirm()
+const { mutateAsync: deleteGroup } = useDeleteMessageGroupMutation()
+const { mutateAsync: publishGroup } = usePublishMessageGroupMutation()
+const { mutateAsync: unpublishGroup } = useUnpublishMessageGroupMutation()
+
+function getMessageTrackingProps(row: MessageGroupWithMessageSummary): MessageActionProperties {
+  return {
+    message_name: row.name,
+    languages: row.messages.map((m) => m.language),
+    message_id: row.id,
+    message_kind: (row.messages[0]?.render_type === 'email_v1'
+      ? 'email'
+      : 'whatsapp') as MessagesKind,
+    message_category: row.category,
+  }
+}
+
+function askDeleteGroup(row: MessageGroupWithMessageSummary) {
+  confirm({
+    title: t('dialogs.delete_message_group.title'),
+    message: t('dialogs.delete_message_group.message', { name: row.name }),
+    destructive: true,
+    confirmLabel: t('common.actions.delete'),
+    cancelLabel: t('common.actions.cancel'),
+    action: async () => {
+      await deleteGroup(row.id)
+      trackEvent('message_delete', getMessageTrackingProps(row))
+      notifyParent('TEMPLATE_DELETED', { id: row.id, name: row.name })
+      useToast().add({
+        title: t('common.success'),
+        description: t('dialogs.delete_message_group.success', { name: row.name }),
+        color: 'success',
+      })
+      execute()
+    },
+  })
+}
+
+function askPublishGroup(row: MessageGroupWithMessageSummary) {
+  confirm({
+    title: t('dialogs.publish_message_group.title'),
+    message: t('dialogs.publish_message_group.message', { name: row.name }),
+    confirmLabel: t('common.actions.publish'),
+    cancelLabel: t('common.actions.cancel'),
+    action: async () => {
+      await publishGroup(row.id)
+      notifyParent('TEMPLATE_PUBLISHED', { id: row.id, name: row.name })
+      useToast().add({
+        title: t('common.success'),
+        description: t('dialogs.publish_message_group.success', { name: row.name }),
+        color: 'success',
+      })
+      execute()
+    },
+  })
+}
+
+function askUnpublishGroup(row: MessageGroupWithMessageSummary) {
+  confirm({
+    title: t('dialogs.unpublish_message_group.title'),
+    message: t('dialogs.unpublish_message_group.message', { name: row.name }),
+    confirmLabel: t('common.actions.unpublish'),
+    cancelLabel: t('common.actions.cancel'),
+    action: async () => {
+      await unpublishGroup(row.id)
+      notifyParent('TEMPLATE_UNPUBLISHED', { id: row.id, name: row.name })
+      useToast().add({
+        title: t('common.success'),
+        description: t('dialogs.unpublish_message_group.success', { name: row.name }),
+        color: 'success',
+      })
+      execute()
+    },
+  })
+}
+
+const { duplicateTemplate } = useTemplateOperations({
+  onSuccess: () => execute(), // Refresh the list
+})
+
+async function handleDuplicate(row: MessageGroupWithMessageSummary) {
+  trackEvent('message_duplicate', getMessageTrackingProps(row))
+  const result = await duplicateTemplate(row.id.toString(), t('common.copy_of', { name: row.name }))
+  if (result) {
+    notifyParent('TEMPLATE_DUPLICATED', { id: result.id, sourceId: row.id, name: result.name })
+  }
+}
+
+const router = useRouter()
+function navigate(row: MessageGroupWithMessageSummary) {
+  trackEvent('message_edit', getMessageTrackingProps(row))
+  const type = row.messages[0]?.render_type === 'email_v1' ? 'email' : 'whatsapp'
+  router.push(`/template/${type}/${row.id}`)
+}
+
+const { t } = useI18n()
+
+const tabItems = computed(() => {
+  const items = []
+  if (hasWhatsapp.value) {
+    items.push({
+      label: t('message.render_type.whatsapp_v1'),
+      value: 'whatsapp_v1',
+      slot: 'whatsapp_v1',
+    })
+  }
+  if (hasEmail.value) {
+    items.push({
+      label: t('message.render_type.email_v1'),
+      value: 'email_v1',
+      slot: 'email_v1',
+    })
+  }
+  return items
+})
+</script>
+
+<template>
+  <SNavigationPage>
+    <template #header>
+      <SNavigationBarHeader
+        :title="$t('pages.message_library.title')"
+        :tabs="tabItems.length > 1 ? tabItems : undefined"
+        :active-tab="renderType"
+        :data-testid="homeTestIds.navbar"
+        @tab-change="renderType = $event"
+      >
+        <template #actions>
+          <CreateTemplateButton />
+        </template>
+      </SNavigationBarHeader>
+    </template>
+
+    <BaseTable
+      :loading="isFetching"
+      :message-groups="messageGroups || []"
+      :render-type="renderType"
+      @edit="navigate"
+      @delete="askDeleteGroup"
+      @duplicate="handleDuplicate"
+      @publish="askPublishGroup"
+      @unpublish="askUnpublishGroup"
+    />
+  </SNavigationPage>
+</template>

package/app/pages/preview/[id].vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import WhatsappPreview from '@/components/Whatsapp/Preview.vue'
+import EmailPreview from '@/components/Email/Preview.vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useMessageGroupQuery } from '~/queries/messageGroups'
+
+const route = useRoute()
+const { locale } = useI18n()
+const { data: messageGroup } = useMessageGroupQuery(() => route.params.id as string)
+
+const selectedMessage = computed(() => {
+  if (!messageGroup.value?.messages.length) return undefined
+
+  // 1. Try query param language
+  const langParam = route.query.lang as string | undefined
+  if (langParam) {
+    const msgByParam = messageGroup.value.messages.find((m) => m.language_id === langParam)
+    if (msgByParam) return msgByParam
+  }
+
+  // 2. Fallback to current locale
+  const msgByLocale = messageGroup.value.messages.find((m) => m.language_id === locale.value)
+  if (msgByLocale) return msgByLocale
+
+  // 3. Fallback to first message
+  return messageGroup.value.messages[0]
+})
+
+const brandId = computed(() => route.query.brand_id as string | undefined)
+const isWhatsapp = computed(() => selectedMessage.value?.render_type === 'whatsapp_v1')
+const isEmail = computed(() => selectedMessage.value?.render_type === 'email_v1')
+</script>
+
+<template>
+  <div :data-testid="previewPageTestIds.page" class="w-full overflow-y-auto">
+    <WhatsappPreview v-if="isWhatsapp && selectedMessage" :message="selectedMessage" />
+
+    <EmailPreview
+      v-else-if="isEmail && selectedMessage"
+      :message="selectedMessage"
+      :show-subject="route.query.showSubject === 'true'"
+      :message-group-id="route.params.id as string"
+      :brand-id="brandId"
+    />
+  </div>
+</template>