@dev.smartpricing/message-composer-layer 1.0.26 → 4.0.1

package/app/api/brands.ts

@@ -12,6 +12,8 @@ import type { BrandCascadeData } from '@dev.smartpricing/message-composer-utils/
 import { apiClient } from './client'
 
 export type BrandWithProperties = BrandFromDb & { properties: BrandProperty[] }
+export type BrandCreateResponse = BrandFromDb & { brand_count: number }
+export type BrandDeleteResponse = { brand_count: number }
 
 export const brandsApi = {
   getAll: (options?: { sort_by?: 'created_at' | 'name'; direction?: 'asc' | 'desc' }) => {
@@ -25,7 +27,7 @@ export const brandsApi = {
   getById: (id: string) => apiClient<BrandWithProperties>(`/brands/${id}`),
 
   create: (data: BrandCreateBody) =>
-    apiClient<BrandFromDb>('/brands', {
+    apiClient<BrandCreateResponse>('/brands', {
       method: 'POST',
       body: data,
     }),
@@ -36,7 +38,7 @@ export const brandsApi = {
       body: data,
     }),
 
-  delete: (id: string) => apiClient(`/brands/${id}`, { method: 'DELETE' }),
+  delete: (id: string) => apiClient<BrandDeleteResponse>(`/brands/${id}`, { method: 'DELETE' }),
 
   preview: (data: {
     message: PostEntity<EmailMessage>

package/app/components/Brand/BrandDrawer.vue

@@ -15,6 +15,7 @@ import BrandStepGeneral from '~/components/Brand/Steps/BrandStepGeneral.vue'
 import BrandStepVisual from '~/components/Brand/Steps/BrandStepVisual.vue'
 import BrandStepSocials from '~/components/Brand/Steps/BrandStepSocials.vue'
 import { useBrandQuery, useCreateBrandMutation, useUpdateBrandMutation } from '~/queries'
+import type { BrandCreateResponse } from '~/api/brands'
 
 defineOptions({ name: 'BrandDrawer' })
 
@@ -29,6 +30,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const { trackEvent } = useTracking()
 
 const isEditMode = computed(() => !!props.brandId)
 
@@ -199,8 +201,50 @@ async function handleSave() {
     let result: BrandFromDb
     if (isEditMode.value && props.brandId) {
       result = await updateBrand({ id: props.brandId, data: payload })
+
+      const changedFields: string[] = []
+      const brand = existingBrand.value
+      if (brand) {
+        if (payload.name !== brand.name) changedFields.push('name')
+        if (payload.logo_media_id !== brand.logo_media_id) changedFields.push('logo')
+        if (JSON.stringify(payload.colors) !== JSON.stringify(brand.colors))
+          changedFields.push('colors')
+        if (
+          JSON.stringify(payload.default_email_settings) !==
+          JSON.stringify(brand.default_email_settings)
+        )
+          changedFields.push('email_settings')
+        if (
+          JSON.stringify(payload.default_button_settings) !==
+          JSON.stringify(brand.default_button_settings)
+        )
+          changedFields.push('button_settings')
+        if (JSON.stringify(payload.default_socials) !== JSON.stringify(brand.default_socials))
+          changedFields.push('socials')
+        if (
+          JSON.stringify(payload.property_ids) !==
+          JSON.stringify(brand.properties?.map((bp) => bp.property_id))
+        )
+          changedFields.push('properties')
+      }
+
+      trackEvent('brand_update', {
+        brand_id: result.id,
+        brand_name: result.name,
+        changed_fields: changedFields,
+      })
     } else {
-      result = await createBrand(payload)
+      const createResult = (await createBrand(payload)) as BrandCreateResponse
+      result = createResult
+
+      trackEvent('brand_create', {
+        brand_id: result.id,
+        brand_name: result.name,
+        has_logo: !!payload.logo_media_id,
+      })
+      trackEvent('brand_count_changed', {
+        brand_count: createResult.brand_count,
+      })
     }
 
     useToast().add({

package/app/components/Brand/BrandSwitcher.vue

@@ -7,6 +7,7 @@ const { brand, brands } = storeToRefs(emailEditorStore)
 
 const { t } = useI18n()
 const { confirm } = useConfirm()
+const { trackEvent } = useTracking()
 
 // Local selection tracks USelectMenu value; reverted on cancel
 const selectedBrand = shallowRef<BrandFromDb | undefined>(brand.value)
@@ -24,7 +25,13 @@ function handleBrandChange(newBrand: BrandFromDb) {
       label: t('dialogs.email_change_brand.cancel'),
     },
     action: () => {
+      const previousBrandId = brand.value?.id ?? null
       emailEditorStore.resetToBrand(newBrand)
+      trackEvent('brand_select', {
+        brand_id: newBrand.id,
+        brand_name: newBrand.name,
+        previous_brand_id: previousBrandId,
+      })
     },
   }).then((confirmed) => {
     if (!confirmed) {

package/app/components/Composer/BrandList.vue

@@ -13,6 +13,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const { confirm } = useConfirm()
+const { trackEvent } = useTracking()
 
 const { data: brands, isPending } = useBrandsQuery()
 const { mutateAsync: deleteBrand } = useDeleteBrandMutation()
@@ -115,7 +116,16 @@ function askDelete(brand: BrandFromDb) {
     },
     action: async () => {
       editingBrandId.value = undefined
-      await deleteBrand(brand.id)
+      const result = await deleteBrand(brand.id)
+
+      trackEvent('brand_delete', {
+        brand_id: brand.id,
+        brand_name: brand.name,
+      })
+      trackEvent('brand_count_changed', {
+        brand_count: result.brand_count,
+      })
+
       emit('deleted', brand)
       useToast().add({
         color: 'success',

package/app/components/Composer/EmailContent.vue

@@ -17,7 +17,7 @@ const emit = defineEmits<{
 
 const store = useEmailComposerStore()
 const emailEditorStore = useEmailEditorStore()
-const adminStore = useAdminStore()
+const appContext = useAppContextStore()
 
 const testIds = computed(() =>
   props.mode === 'create' ? templateEmailCreateTestIds : templateEmailEditTestIds,
@@ -67,7 +67,7 @@ const testIds = computed(() =>
         </UFieldGroup>
 
         <USwitch
-          v-if="mode === 'create' && adminStore.isAdminModeActive"
+          v-if="mode === 'create' && appContext.isAdmin"
           :label="$t('common.internal')"
           v-model="store.isInternal"
           color="info"

package/app/components/Composer/WhatsappContent.vue

@@ -13,7 +13,7 @@ const emit = defineEmits<{
 }>()
 
 const store = useWhatsappComposerStore()
-const adminStore = useAdminStore()
+const appContext = useAppContextStore()
 
 const testIds = computed(() =>
   props.mode === 'create' ? templateWhatsappCreateTestIds : templateWhatsappEditTestIds,
@@ -55,7 +55,7 @@ const testIds = computed(() =>
         </UFieldGroup>
 
         <USwitch
-          v-if="mode === 'create' && adminStore.isAdminModeActive"
+          v-if="mode === 'create' && appContext.isAdmin"
           v-model="store.isInternal"
           :label="$t('common.internal')"
           color="info"

package/app/components/Email/Preview.vue

@@ -21,7 +21,7 @@ const props = withDefaults(
 )
 
 const iframeWidth = computed(() => {
-  return props.view === 'mobile' ? '400px' : '600px'
+  return props.view === 'mobile' ? '400px' : '800px'
 })
 
 // Extract parameters directly from message
@@ -108,7 +108,6 @@ watch(
       <HtmlPreviewIframe
         :html="iframeContent"
         title="Email preview"
-        :min-height="600"
         class="border-0 bg-white w-full"
         :data-testid="emailPreviewTestIds.iframe"
       />

package/app/components/TemplateList/BaseTable.vue

@@ -20,7 +20,7 @@ const emit = defineEmits<{
   unpublish: [MessageGroupWithMessageSummary]
 }>()
 
-const adminStore = useAdminStore()
+const appContext = useAppContextStore()
 const { trackEvent } = useTracking()
 
 const { t, locale } = useI18n()
@@ -44,7 +44,7 @@ function getLocalizedMessage(row: MessageGroupWithMessageSummary) {
 
 function rowActions(row: MessageGroupWithMessageSummary) {
   const publishAction =
-    adminStore.isAdminModeActive && row.visibility === 'internal'
+    appContext.isAdmin && row.visibility === 'internal'
       ? {
           label: t('common.actions.publish'),
           icon: 'ph:globe',
@@ -52,7 +52,7 @@ function rowActions(row: MessageGroupWithMessageSummary) {
           onSelect: () => emit('publish', row),
           'data-testid': `${templateListTableTestIds.rowPublishAction}-${row.id}`,
         }
-      : adminStore.isAdminModeActive && row.visibility === 'public'
+      : appContext.isAdmin && row.visibility === 'public'
         ? {
             label: t('common.actions.unpublish'),
             icon: 'ph:globe-x',
@@ -158,7 +158,7 @@ const props = defineProps<{
 }>()
 
 const filteredMessageGroups = computed(() => {
-  if (adminStore.isAdminModeActive) return props.messageGroups
+  if (appContext.isAdmin) return props.messageGroups
   return props.messageGroups.filter((mg) => mg.visibility !== 'internal')
 })
 

package/app/composables/composerContext.ts

@@ -13,6 +13,7 @@ export interface ComposerContext {
   default_tags?: Ref<string[]>
   metaWabaId?: Ref<string>
   metaAccessToken?: Ref<string>
+  isAdmin?: Ref<boolean>
 }
 
 export const COMPOSER_CONTEXT_KEY: InjectionKey<ComposerContext> = Symbol.for('composer-context')
@@ -23,7 +24,13 @@ export function defineComposerContext(context: ComposerContext): void {
   useNuxtApp().vueApp.provide(COMPOSER_CONTEXT_KEY, context)
 }
 
+const SERVER_FALLBACK: ComposerContext = {
+  authenticationToken: ref(''),
+}
+
 export function useComposerContext(): ComposerContext {
+  if (import.meta.server) return SERVER_FALLBACK
+
   // runWithContext ensures inject() can reach app-level provides
   // even outside component setup (e.g. Pinia stores, middleware).
   const context = useNuxtApp().vueApp.runWithContext(() => inject(COMPOSER_CONTEXT_KEY))

package/app/composables/useTracking.ts

@@ -1,15 +1,14 @@
 import type { TrackingEventMap } from '~/types/tracking'
 
 export function useTracking() {
-  const { product, mainLanguage } = storeToRefs(useAppContextStore())
-  const { isAdminModeActive } = storeToRefs(useAdminStore())
+  const { product, mainLanguage, isAdmin } = storeToRefs(useAppContextStore())
 
   function getDefaultProperties(): Record<string, unknown> {
     return {
       event_origin: 'message-composer',
       product: product.value,
       main_language: mainLanguage.value,
-      is_admin: isAdminModeActive.value,
+      is_admin: isAdmin.value,
     }
   }
 

package/app/stores/appContext.ts

@@ -27,6 +27,7 @@ export const useAppContextStore = defineStore('appContext', () => {
     () => ctx.dinamicValues?.value ?? [],
   )
   const default_tags = computed<string[]>(() => ctx.default_tags?.value ?? [])
+  const isAdmin = computed(() => ctx.isAdmin?.value ?? false)
   const metaWabaId = computed(() => ctx.metaWabaId?.value ?? '')
   const metaAccessToken = computed(() => ctx.metaAccessToken?.value ?? '')
 
@@ -88,6 +89,7 @@ export const useAppContextStore = defineStore('appContext', () => {
     metaAccessToken,
     owner_id,
     default_tags,
+    isAdmin,
 
     isInitialized: computed(() => isInitialized.value),
 

package/app/types/tracking.ts

@@ -58,12 +58,26 @@ export interface EmailTranslationsFiltersProperties extends EmailLanguagePropert
   show_only_changes: boolean
 }
 
+// ── Brand shared property interfaces ──
+
+export interface BrandBaseProperties {
+  brand_id: string
+  brand_name: string
+}
+
 // ── Event map ──
 
 export interface TrackingEventMap {
   // === Global ===
   'Page View': { page_name: string }
 
+  // === Brand ===
+  brand_create: BrandBaseProperties & { has_logo: boolean }
+  brand_update: BrandBaseProperties & { changed_fields: string[] }
+  brand_delete: BrandBaseProperties
+  brand_select: BrandBaseProperties & { previous_brand_id: string | null }
+  brand_count_changed: { brand_count: number }
+
   // === Table_List ===
   change_filters: {
     search_term: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.26",
+  "version": "4.0.1",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -30,7 +30,6 @@
     "@vueuse/core": "^14.3.0",
     "@vueuse/nuxt": "^14.3.0",
     "colorthief": "^3.3.1",
-    "jwt-decode": "^4.0.0",
     "monaco-editor": "^0.55.1",
     "nuxt": "^4.4.5",
     "ofetch": "^1.5.1",
@@ -39,7 +38,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "3.1.26"
+    "@dev.smartpricing/message-composer-utils": "4.0.1"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",

package/app/plugins/admin-shortcut.client.ts

@@ -1,7 +0,0 @@
-export default defineNuxtPlugin(() => {
-  onNuxtReady(() => {
-    const adminStore = useAdminStore()
-    const { shift_space } = useMagicKeys()
-    whenever(shift_space!, () => adminStore.toggleAdminMode())
-  })
-})

package/app/stores/adminStore.ts

@@ -1,50 +0,0 @@
-import { jwtDecode } from 'jwt-decode'
-
-interface TokenData {
-  id: number
-  role: string
-  accounting: boolean
-  email: string
-}
-
-export const useAdminStore = defineStore('admin', () => {
-  const appContext = useAppContextStore()
-  const adminModeActive = ref(false)
-
-  const isAccounting = computed(() => {
-    const token = appContext.authenticationToken
-    if (!token) return false
-    try {
-      const payload = jwtDecode<TokenData>(token)
-      return payload.accounting === true
-    } catch {
-      return false
-    }
-  })
-
-  function activateAdminMode() {
-    if (!isAccounting.value) return
-    adminModeActive.value = true
-  }
-
-  function deactivateAdminMode() {
-    adminModeActive.value = false
-  }
-
-  function toggleAdminMode() {
-    if (!isAccounting.value) {
-      adminModeActive.value = false
-      return
-    }
-    adminModeActive.value = !adminModeActive.value
-  }
-
-  const isAdminModeActive = computed(() => adminModeActive.value)
-
-  return {
-    activateAdminMode,
-    deactivateAdminMode,
-    isAdminModeActive,
-    toggleAdminMode,
-  }
-})