@dev.smartpricing/message-composer-layer 1.0.11 → 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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ButtonProps, TabsItem } from '#ui/types'
+
+const props = defineProps<{
+  title: string
+  tabs?: TabsItem[]
+  activeTab?: string | number
+  back?: ButtonProps
+  testId?: string
+}>()
+
+const emit = defineEmits<{
+  tabChange: [value: string | number]
+}>()
+
+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 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

@@ -0,0 +1,5 @@
+<template>
+  <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/brands.vue

@@ -128,13 +128,9 @@ function handleDrawerSaved() {
 </script>
 
 <template>
-  <SNavigationPage>
-    <template #header>
-      <SNavigationBarHeader :title="t('pages.brands.title')">
-        <template #actions>
-          <UButton icon="ph:plus" :label="t('pages.brands.new_brand')" @click="openCreate" />
-        </template>
-      </SNavigationBarHeader>
+  <LayoutBasePage :title="t('pages.brands.title')">
+    <template #actions>
+      <UButton icon="ph:plus" :label="t('pages.brands.new_brand')" @click="openCreate" />
     </template>
 
     <div class="flex-1 space-y-2.5 relative min-h-0 flex flex-col">
@@ -191,5 +187,5 @@ function handleDrawerSaved() {
     </div>
 
     <BrandDrawer v-model="drawerOpen" :brand-id="editingBrandId" @saved="handleDrawerSaved" />
-  </SNavigationPage>
+  </LayoutBasePage>
 </template>

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,14 +50,7 @@ async function handleDelete(item: MediaFromDb) {
 </script>
 
 <template>
-  <SNavigationPage>
-    <template #header>
-      <SNavigationBarHeader
-        :title="t('pages.images.title')"
-        :data-testid="imagesPageTestIds.navbar"
-      />
-    </template>
-
+  <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"
@@ -137,5 +134,5 @@ async function handleDelete(item: MediaFromDb) {
         </div>
       </UCard>
     </div>
-  </SNavigationPage>
+  </LayoutBasePage>
 </template>

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()
@@ -169,19 +169,15 @@ const tabItems = computed(() => {
 </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>
+  <LayoutBasePage
+    :title="$t('pages.message_library.title')"
+    :tabs="tabItems.length > 1 ? tabItems : undefined"
+    :active-tab="renderType"
+    :test-id="homeTestIds.navbar"
+    @tab-change="renderType = $event"
+  >
+    <template #actions>
+      <CreateTemplateButton />
     </template>
 
     <BaseTable
@@ -194,5 +190,5 @@ const tabItems = computed(() => {
       @publish="askPublishGroup"
       @unpublish="askUnpublishGroup"
     />
-  </SNavigationPage>
+  </LayoutBasePage>
 </template>

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

@@ -5,6 +5,11 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useMessageGroupQuery } from '~/queries/messageGroups'
 
+definePageMeta({
+  name: 'message-preview',
+  layout: false,
+})
+
 const route = useRoute()
 const { locale } = useI18n()
 const { data: messageGroup } = useMessageGroupQuery(() => route.params.id as string)

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'
@@ -412,55 +413,51 @@ watch(
 </script>
 
 <template>
-  <SNavigationPage>
-    <template #header>
-      <SNavigationBarHeader
-        :title="$t('pages.email.edit_message_group.title')"
-        :tabs="[
-          {
-            label: $t('pages.email.edit_message_group.tab_content'),
-            value: 'content',
-          },
-          {
-            label: $t('pages.email.edit_message_group.tab_translations'),
-            value: 'translations',
-          },
-        ]"
-        :active-tab="activeTab"
-        :data-testid="templateEmailEditTestIds.navbar"
-        @tab-change="activeTab = $event"
-      >
-        <template #actions>
-          <UButton
-            @click="
-              () => {
-                notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
-                goBackOrFallback()
-              }
-            "
-            :label="$t('common.actions.cancel')"
-            color="primary"
-            variant="ghost"
-            :loading="saving || isTranslating"
-            :data-testid="templateEmailEditTestIds.cancelButton"
-          />
-          <UButton
-            @click="handleSaveAsDraft"
-            :label="$t('pages.email.edit_message_group.save_as_draft')"
-            color="primary"
-            variant="outline"
-            :loading="saving || isTranslating"
-            :data-testid="templateEmailEditTestIds.saveDraftButton"
-          />
-          <UButton
-            @click="handleSaveTemplate"
-            :label="$t('pages.email.edit_message_group.save_message')"
-            color="primary"
-            :loading="saving || isTranslating"
-            :data-testid="templateEmailEditTestIds.saveTemplateButton"
-          />
-        </template>
-      </SNavigationBarHeader>
+  <LayoutBasePage
+    :title="$t('pages.email.edit_message_group.title')"
+    :tabs="[
+      {
+        label: $t('pages.email.edit_message_group.tab_content'),
+        value: 'content',
+      },
+      {
+        label: $t('pages.email.edit_message_group.tab_translations'),
+        value: 'translations',
+      },
+    ]"
+    :active-tab="activeTab"
+    :test-id="templateEmailEditTestIds.navbar"
+    @tab-change="activeTab = $event"
+  >
+    <template #actions>
+      <UButton
+        @click="
+          () => {
+            notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
+            goBackOrFallback()
+          }
+        "
+        :label="$t('common.actions.cancel')"
+        color="primary"
+        variant="ghost"
+        :loading="saving || isTranslating"
+        :data-testid="templateEmailEditTestIds.cancelButton"
+      />
+      <UButton
+        @click="handleSaveAsDraft"
+        :label="$t('pages.email.edit_message_group.save_as_draft')"
+        color="primary"
+        variant="outline"
+        :loading="saving || isTranslating"
+        :data-testid="templateEmailEditTestIds.saveDraftButton"
+      />
+      <UButton
+        @click="handleSaveTemplate"
+        :label="$t('pages.email.edit_message_group.save_message')"
+        color="primary"
+        :loading="saving || isTranslating"
+        :data-testid="templateEmailEditTestIds.saveTemplateButton"
+      />
     </template>
 
     <div v-if="validationErrors.length">
@@ -592,5 +589,5 @@ watch(
       @translate-and-save="translateAndSave"
       @go-to-translations="goToTranslations"
     />
-  </SNavigationPage>
+  </LayoutBasePage>
 </template>

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'
@@ -375,55 +377,51 @@ async function translateAndSave() {
 </script>
 
 <template>
-  <SNavigationPage>
-    <template #header>
-      <SNavigationBarHeader
-        :title="$t('pages.email.create_message_group.title')"
-        :tabs="[
-          {
-            label: $t('pages.email.create_message_group.tab_content'),
-            value: 'content',
-          },
-          {
-            label: $t('pages.email.create_message_group.tab_translations'),
-            value: 'translations',
-          },
-        ]"
-        :active-tab="activeTab"
-        :data-testid="templateEmailCreateTestIds.navbar"
-        @tab-change="activeTab = $event"
-      >
-        <template #actions>
-          <UButton
-            @click="
-              () => {
-                notifyParent('TEMPLATE_CANCELLED')
-                goBackOrFallback()
-              }
-            "
-            :label="$t('common.actions.cancel')"
-            color="primary"
-            variant="ghost"
-            :loading="saving || isTranslating"
-            :data-testid="templateEmailCreateTestIds.cancelButton"
-          />
-          <UButton
-            @click="handleSaveAsDraft"
-            :label="$t('pages.email.create_message_group.save_as_draft')"
-            color="primary"
-            variant="outline"
-            :loading="saving || isTranslating"
-            :data-testid="templateEmailCreateTestIds.saveDraftButton"
-          />
-          <UButton
-            @click="handleSaveTemplate"
-            :label="$t('pages.email.create_message_group.save_message')"
-            color="primary"
-            :loading="saving || isTranslating"
-            :data-testid="templateEmailCreateTestIds.saveTemplateButton"
-          />
-        </template>
-      </SNavigationBarHeader>
+  <LayoutBasePage
+    :title="$t('pages.email.create_message_group.title')"
+    :tabs="[
+      {
+        label: $t('pages.email.create_message_group.tab_content'),
+        value: 'content',
+      },
+      {
+        label: $t('pages.email.create_message_group.tab_translations'),
+        value: 'translations',
+      },
+    ]"
+    :active-tab="activeTab"
+    :test-id="templateEmailCreateTestIds.navbar"
+    @tab-change="activeTab = $event"
+  >
+    <template #actions>
+      <UButton
+        @click="
+          () => {
+            notifyParent('TEMPLATE_CANCELLED')
+            goBackOrFallback()
+          }
+        "
+        :label="$t('common.actions.cancel')"
+        color="primary"
+        variant="ghost"
+        :loading="saving || isTranslating"
+        :data-testid="templateEmailCreateTestIds.cancelButton"
+      />
+      <UButton
+        @click="handleSaveAsDraft"
+        :label="$t('pages.email.create_message_group.save_as_draft')"
+        color="primary"
+        variant="outline"
+        :loading="saving || isTranslating"
+        :data-testid="templateEmailCreateTestIds.saveDraftButton"
+      />
+      <UButton
+        @click="handleSaveTemplate"
+        :label="$t('pages.email.create_message_group.save_message')"
+        color="primary"
+        :loading="saving || isTranslating"
+        :data-testid="templateEmailCreateTestIds.saveTemplateButton"
+      />
     </template>
 
     <div v-if="validationErrors.length">
@@ -558,5 +556,5 @@ async function translateAndSave() {
       @translate-and-save="translateAndSave"
       @go-to-translations="goToTranslations"
     />
-  </SNavigationPage>
+  </LayoutBasePage>
 </template>

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 })
   }
 }
 
@@ -361,61 +362,58 @@ watch(
 </script>
 
 <template>
-  <SNavigationPage>
-    <template #header>
-      <SNavigationBarHeader
-        v-if="messageGroup"
-        :title="$t('pages.whatsapp.edit_message_group.title')"
-        :tabs="[
-          { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
-          { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
-        ]"
-        :active-tab="activeTab"
-        :data-testid="templateWhatsappEditTestIds.navbar"
-        @tab-change="activeTab = $event"
-      >
-        <template #actions>
-          <UButton
-            @click="
-              () => {
-                notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
-                goBackOrFallback()
-              }
-            "
-            :label="$t('common.actions.cancel')"
-            color="primary"
-            variant="ghost"
-            :loading="saving || isTranslating"
-            :data-testid="templateWhatsappEditTestIds.cancelButton"
-          />
-          <UButton
-            v-if="isPending || isApproved"
-            @click="handleSaveAsNew()"
-            :label="$t('pages.whatsapp.create_message_group.save_as_new')"
-            color="secondary"
-            variant="outline"
-            :loading="saving || isTranslating"
-            :data-testid="templateWhatsappEditTestIds.saveAsNewButton"
-          />
-          <UButton
-            v-else
-            @click="handleSaveDraft()"
-            :label="$t('pages.whatsapp.create_message_group.save_draft')"
-            color="secondary"
-            variant="outline"
-            :loading="saving || isTranslating"
-            :data-testid="templateWhatsappEditTestIds.saveDraftButton"
-          />
-          <UButton
-            v-if="!isPending && !isApproved"
-            @click="handleRequestApproval()"
-            :label="$t('pages.whatsapp.create_message_group.request_approval')"
-            color="primary"
-            :loading="saving || isTranslating"
-            :data-testid="templateWhatsappEditTestIds.requestApprovalButton"
-          />
-        </template>
-      </SNavigationBarHeader>
+  <LayoutBasePage
+    :title="$t('pages.whatsapp.edit_message_group.title')"
+    :tabs="[
+      { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
+      { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
+    ]"
+    :active-tab="activeTab"
+    :test-id="templateWhatsappEditTestIds.navbar"
+    @tab-change="activeTab = $event"
+  >
+    <template #actions>
+      <template v-if="messageGroup">
+        <UButton
+          @click="
+            () => {
+              notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
+              goBackOrFallback()
+            }
+          "
+          :label="$t('common.actions.cancel')"
+          color="primary"
+          variant="ghost"
+          :loading="saving || isTranslating"
+          :data-testid="templateWhatsappEditTestIds.cancelButton"
+        />
+        <UButton
+          v-if="isPending || isApproved"
+          @click="handleSaveAsNew()"
+          :label="$t('pages.whatsapp.create_message_group.save_as_new')"
+          color="secondary"
+          variant="outline"
+          :loading="saving || isTranslating"
+          :data-testid="templateWhatsappEditTestIds.saveAsNewButton"
+        />
+        <UButton
+          v-else
+          @click="handleSaveDraft()"
+          :label="$t('pages.whatsapp.create_message_group.save_draft')"
+          color="secondary"
+          variant="outline"
+          :loading="saving || isTranslating"
+          :data-testid="templateWhatsappEditTestIds.saveDraftButton"
+        />
+        <UButton
+          v-if="!isPending && !isApproved"
+          @click="handleRequestApproval()"
+          :label="$t('pages.whatsapp.create_message_group.request_approval')"
+          color="primary"
+          :loading="saving || isTranslating"
+          :data-testid="templateWhatsappEditTestIds.requestApprovalButton"
+        />
+      </template>
     </template>
 
     <div v-if="validationErrors.length">
@@ -557,5 +555,5 @@ watch(
       @translate-and-save="translateAndSave"
       @go-to-translations="goToTranslations"
     />
-  </SNavigationPage>
+  </LayoutBasePage>
 </template>

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'
@@ -275,49 +277,45 @@ async function translateAndSave() {
 </script>
 
 <template>
-  <SNavigationPage>
-    <template #header>
-      <SNavigationBarHeader
-        :title="$t('pages.whatsapp.create_message_group.title')"
-        :tabs="[
-          { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
-          { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
-        ]"
-        :active-tab="activeTab"
-        :data-testid="templateWhatsappCreateTestIds.navbar"
-        @tab-change="activeTab = $event"
-      >
-        <template #actions>
-          <UButton
-            @click="
-              () => {
-                notifyParent('TEMPLATE_CANCELLED')
-                goBackOrFallback()
-              }
-            "
-            :label="$t('common.actions.cancel')"
-            color="primary"
-            variant="ghost"
-            :loading="saving || isTranslating"
-            :data-testid="templateWhatsappCreateTestIds.cancelButton"
-          />
-          <UButton
-            @click="handleSaveDraft()"
-            :label="$t('pages.whatsapp.create_message_group.save_draft')"
-            color="primary"
-            variant="outline"
-            :loading="saving || isTranslating"
-            :data-testid="templateWhatsappCreateTestIds.saveDraftButton"
-          />
-          <UButton
-            @click="handleRequestApproval()"
-            :label="$t('pages.whatsapp.create_message_group.request_approval')"
-            color="primary"
-            :loading="saving || isTranslating"
-            :data-testid="templateWhatsappCreateTestIds.requestApprovalButton"
-          />
-        </template>
-      </SNavigationBarHeader>
+  <LayoutBasePage
+    :title="$t('pages.whatsapp.create_message_group.title')"
+    :tabs="[
+      { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
+      { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
+    ]"
+    :active-tab="activeTab"
+    :test-id="templateWhatsappCreateTestIds.navbar"
+    @tab-change="activeTab = $event"
+  >
+    <template #actions>
+      <UButton
+        @click="
+          () => {
+            notifyParent('TEMPLATE_CANCELLED')
+            goBackOrFallback()
+          }
+        "
+        :label="$t('common.actions.cancel')"
+        color="primary"
+        variant="ghost"
+        :loading="saving || isTranslating"
+        :data-testid="templateWhatsappCreateTestIds.cancelButton"
+      />
+      <UButton
+        @click="handleSaveDraft()"
+        :label="$t('pages.whatsapp.create_message_group.save_draft')"
+        color="primary"
+        variant="outline"
+        :loading="saving || isTranslating"
+        :data-testid="templateWhatsappCreateTestIds.saveDraftButton"
+      />
+      <UButton
+        @click="handleRequestApproval()"
+        :label="$t('pages.whatsapp.create_message_group.request_approval')"
+        color="primary"
+        :loading="saving || isTranslating"
+        :data-testid="templateWhatsappCreateTestIds.requestApprovalButton"
+      />
     </template>
 
     <div v-if="validationErrors.length">
@@ -464,5 +462,5 @@ async function translateAndSave() {
       @translate-and-save="translateAndSave"
       @go-to-translations="goToTranslations"
     />
-  </SNavigationPage>
+  </LayoutBasePage>
 </template>

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.11",
+  "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.11"
+    "@dev.smartpricing/message-composer-utils": "3.1.13"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",