@dev.smartpricing/message-composer-layer 1.0.12 → 1.0.13

package/app/components/CreateTemplateButton.vue

@@ -9,7 +9,7 @@ const { trackEvent } = useTracking()
 
 function createTemplate(type: 'whatsapp' | 'email') {
   trackEvent('message_create', { message_kind: type })
-  router.push(`/template/${type}/create`)
+  router.push({ name: `${type}-message-create` })
 }
 
 const templateOptions = computed(() => {

package/app/components/Layout/BasePage.vue

@@ -1,43 +1,43 @@
 <script setup lang="ts">
-	import type { ButtonProps, TabsItem } from "#ui/types";
+import type { ButtonProps, TabsItem } from '#ui/types'
 
-	const props = defineProps<{
-		title: string
-		tabs?: TabsItem[]
-		activeTab?: string | number
-		back?: ButtonProps
-		testId?: string
-	}>();
+const props = defineProps<{
+  title: string
+  tabs?: TabsItem[]
+  activeTab?: string | number
+  back?: ButtonProps
+  testId?: string
+}>()
 
-	const emit = defineEmits<{
-		tabChange: [value: string | number]
-	}>();
+const emit = defineEmits<{
+  tabChange: [value: string | number]
+}>()
 
-	watchEffect(() => {
-		useHead({ title: props.title });
-	});
+watchEffect(() => {
+  useHead({ title: props.title })
+})
 </script>
 
 <template>
-	<div class="flex flex-col min-h-0">
-		<SNavigationBarHeader
-			:title="title"
-			:back="back"
-			:tabs="tabs"
-			:active-tab="activeTab"
-			:data-testid="testId"
-			class="bg-white sticky top-0 z-10"
-			@tab-change="emit('tabChange', $event)"
-		>
-			<template #actions>
-				<div class="flex items-center gap-1.5">
-					<slot name="actions" />
-				</div>
-			</template>
-		</SNavigationBarHeader>
+  <div class="flex flex-col min-h-0">
+    <SNavigationBarHeader
+      :title="title"
+      :back="back"
+      :tabs="tabs"
+      :active-tab="activeTab"
+      :data-testid="testId"
+      class="bg-white sticky top-0 z-10"
+      @tab-change="emit('tabChange', $event)"
+    >
+      <template #actions>
+        <div class="flex items-center gap-1.5">
+          <slot name="actions" />
+        </div>
+      </template>
+    </SNavigationBarHeader>
 
-		<div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto  sm:p-4 p-4">
-			<slot />
-		</div>
-	</div>
+    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto sm:p-4 p-4">
+      <slot />
+    </div>
+  </div>
 </template>

package/app/composables/useGoBack.ts

@@ -3,7 +3,7 @@ import type { RouteLocationRaw } from 'vue-router'
 export function useGoBack() {
   const router = useRouter()
 
-  function goBackOrFallback(fallback: RouteLocationRaw = '/') {
+  function goBackOrFallback(fallback: RouteLocationRaw = { name: 'message-library' }) {
     if (router.options.history.state.back) {
       router.back()
     } else {

package/app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-	<SNavigationPage :panel-props="{ ui: { body: 'p-0 sm:p-0 gap-0 sm:gap-0 overflow-hidden' } }">
-	<slot />
-	</SNavigationPage>
+  <SNavigationPage :panel-props="{ ui: { body: 'p-0 sm:p-0 gap-0 sm:gap-0 overflow-hidden' } }">
+    <slot />
+  </SNavigationPage>
 </template>

package/app/middleware/channel-guard.ts

@@ -1,13 +1,10 @@
 export default defineNuxtRouteMiddleware((to) => {
   const { isChannelAllowed } = useChannels()
 
-  // Extract channel from route path: /template/(whatsapp|email)/...
-  const pathMatch = to.path.match(/\/template\/(whatsapp|email)/)
-  if (!pathMatch) return
-
-  const channel = pathMatch[1] as 'whatsapp' | 'email'
+  const channel = to.meta.channel as 'whatsapp' | 'email' | undefined
+  if (!channel) return
 
   if (!isChannelAllowed(channel)) {
-    return navigateTo('/', { replace: true })
+    return navigateTo({ name: 'message-library' }, { replace: true })
   }
 })

package/app/pages/images.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  name: 'images',
+})
+
 import type { MediaFromDb } from '@dev.smartpricing/message-composer-utils/types'
 import { useMediaQuery, useUploadToSmartchatMutation, useDeleteMediaMutation } from '~/queries'
 import { formatDate } from '@dev.smartpricing/message-composer-utils/utils'
@@ -46,10 +50,7 @@ async function handleDelete(item: MediaFromDb) {
 </script>
 
 <template>
-  <LayoutBasePage
-    :title="t('pages.images.title')"
-    :test-id="imagesPageTestIds.navbar"
-  >
+  <LayoutBasePage :title="t('pages.images.title')" :test-id="imagesPageTestIds.navbar">
     <div v-if="isPending" class="flex justify-center py-12">
       <UIcon
         name="i-heroicons-arrow-path"

package/app/pages/index.vue

@@ -143,7 +143,7 @@ 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}`)
+  router.push({ name: `${type}-message-edit`, params: { id: row.id } })
 }
 
 const { t } = useI18n()

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

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
 import { useMessageGroupQuery } from '~/queries/messageGroups'
 
 definePageMeta({
+  name: 'message-preview',
   layout: false,
 })
 

package/app/pages/template/email/[id].vue

@@ -2,6 +2,7 @@
 definePageMeta({
   name: 'email-message-edit',
   middleware: ['channel-guard'],
+  channel: 'email',
 })
 
 import EmailEditor from '@/components/Email/Editor/Index.vue'

package/app/pages/template/email/create.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 definePageMeta({
+  name: 'email-message-create',
   middleware: ['channel-guard'],
+  channel: 'email',
 })
 
 import EmailEditor from '@/components/Email/Editor/Index.vue'

package/app/pages/template/whatsapp/[id].vue

@@ -2,6 +2,7 @@
 definePageMeta({
   name: 'whatsapp-message-edit',
   middleware: ['channel-guard'],
+  channel: 'whatsapp',
 })
 
 import WhatsappEditorSyncWrapper from '@/components/Whatsapp/Editor/SyncWrapper.vue'
@@ -239,7 +240,7 @@ async function saveAsNew() {
   const result = await createTemplate(templateData, 'draft')
   if (result) {
     notifyParent('TEMPLATE_SAVED_AS_NEW', { id: result.id, name: result.name })
-    navigateTo(`/template/whatsapp/${result.id}`, { replace: true })
+    navigateTo({ name: 'whatsapp-message-edit', params: { id: result.id } }, { replace: true })
   }
 }
 

package/app/pages/template/whatsapp/create.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 definePageMeta({
+  name: 'whatsapp-message-create',
   middleware: ['channel-guard'],
+  channel: 'whatsapp',
 })
 
 import WhatsappEditorSyncWrapper from '@/components/Whatsapp/Editor/SyncWrapper.vue'

package/app/types/page-meta.d.ts

@@ -0,0 +1,7 @@
+declare module 'nuxt/app' {
+  interface PageMeta {
+    channel?: 'whatsapp' | 'email'
+  }
+}
+
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -39,7 +39,7 @@
     "vue-router": "^5.0.6",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.1",
-    "@dev.smartpricing/message-composer-utils": "3.1.12"
+    "@dev.smartpricing/message-composer-utils": "3.1.13"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",