@dev.smartpricing/message-composer-layer 1.0.1

package/app/composables/useTranslationFiltersEmail.ts

@@ -0,0 +1,244 @@
+import { computed, type Ref, type ComputedRef } from 'vue'
+import {
+  type EmailMessage,
+  type EmailBlock,
+  type PostEntity,
+  TRANSLATABLE_BLOCK_TYPES,
+  type TranslatableBlockType,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { extractText, isEmailBlockEmpty } from '@dev.smartpricing/message-composer-utils/utils'
+import { useChangeTrackingEmail } from './useChangeTrackingEmail'
+
+interface EmailTranslationFiltersParams {
+  messages: Ref<Record<string, EmailMessage | PostEntity<EmailMessage>>>
+  currentLanguage: Ref<string>
+  baseLanguage: Ref<string>
+  messageGroupId?: Ref<string | number | undefined>
+  searchQuery: Ref<string>
+  showOnlyMissing: Ref<boolean>
+  showOnlyChanges: Ref<boolean>
+}
+
+/**
+ * Find block by ID recursively (including nested grid blocks)
+ */
+function findBlockById(blocks: EmailBlock[], blockId: string): EmailBlock | null {
+  for (const block of blocks) {
+    if (block.id === blockId) {
+      return block
+    }
+    if (block.type === 'grid') {
+      for (const column of block.settings.columnData) {
+        const found = findBlockById(column.blocks, blockId)
+        if (found) return found
+      }
+    }
+  }
+  return null
+}
+
+/**
+ * Extract searchable text from block
+ */
+function getBlockSearchText(block: EmailBlock): string {
+  switch (block.type) {
+    case 'heading':
+    case 'paragraph':
+    case 'button':
+    case 'discount':
+    case 'footer':
+      if (block.settings.content) {
+        return extractText(block.settings.content, 'email_v1')
+      }
+      return ''
+    case 'raw_html':
+      return block.settings.html || ''
+    default:
+      return ''
+  }
+}
+
+export function useTranslationFiltersEmail(params: EmailTranslationFiltersParams) {
+  const {
+    messages,
+    currentLanguage,
+    baseLanguage,
+    messageGroupId,
+    searchQuery,
+    showOnlyMissing,
+    showOnlyChanges,
+  } = params
+
+  // Initialize change tracking if messageGroupId is provided
+  const changeTracking = computed(() => {
+    if (!messageGroupId?.value) return null
+    return useChangeTrackingEmail(messageGroupId.value)
+  })
+
+  /**
+   * Check if a block matches the search query
+   */
+  function matchesSearch(blockId: string, baseMsg: EmailMessage): boolean {
+    if (!searchQuery.value || !searchQuery.value.trim()) return true
+
+    const query = searchQuery.value.toLowerCase().trim()
+    const block = findBlockById(baseMsg.body.blocks, blockId)
+
+    if (!block) return false
+
+    const searchText = getBlockSearchText(block)
+    return searchText.toLowerCase().includes(query)
+  }
+
+  /**
+   * Check if a block has missing translation
+   */
+  function hasMissingTranslation(blockId: string, targetMsg: EmailMessage): boolean {
+    const block = findBlockById(targetMsg.body.blocks, blockId)
+    if (!block) return true
+
+    return isEmailBlockEmpty(block)
+  }
+
+  /**
+   * Check if a block has changes
+   */
+  function hasChanges(blockId: string): boolean {
+    const tracking = changeTracking.value
+    if (!tracking || !currentLanguage.value) return false
+
+    const currentMsg = messages.value[currentLanguage.value]
+    if (!currentMsg) return false
+
+    const changedBlockIds = tracking.getChangedBlockIds(currentLanguage.value, currentMsg)
+    return changedBlockIds.includes(blockId)
+  }
+
+  /**
+   * Get all translatable block IDs from a message, including parent grid blocks
+   */
+  function getAllTranslatableBlockIds(message: EmailMessage): string[] {
+    const blockIds = new Set<string>()
+
+    function isTranslatableOrMedia(type: string): boolean {
+      return (
+        TRANSLATABLE_BLOCK_TYPES.includes(type as TranslatableBlockType) ||
+        type === 'image' ||
+        type === 'header'
+      )
+    }
+
+    function collectBlockIds(blocks: EmailBlock[]) {
+      for (const block of blocks) {
+        if (isTranslatableOrMedia(block.type)) {
+          blockIds.add(block.id)
+        } else if (block.type === 'grid') {
+          // Check if grid has any translatable children
+          let hasTranslatableChildren = false
+          for (const column of block.settings.columnData) {
+            for (const nestedBlock of column.blocks) {
+              if (isTranslatableOrMedia(nestedBlock.type)) {
+                hasTranslatableChildren = true
+                blockIds.add(nestedBlock.id)
+              }
+            }
+          }
+          // Add grid block ID if it has translatable children
+          if (hasTranslatableChildren) {
+            blockIds.add(block.id)
+          }
+        }
+      }
+    }
+
+    collectBlockIds(message.body.blocks)
+    return Array.from(blockIds)
+  }
+
+  /**
+   * Filter blocks based on active filters
+   */
+  const filteredBlockIds: ComputedRef<string[]> = computed(() => {
+    const baseMsg = messages.value[baseLanguage.value]
+    const targetMsg = messages.value[currentLanguage.value]
+
+    if (!baseMsg || !targetMsg) {
+      return []
+    }
+
+    const allBlockIds = getAllTranslatableBlockIds(baseMsg)
+
+    return allBlockIds.filter((blockId) => {
+      // Search filter
+      if (searchQuery.value && !matchesSearch(blockId, baseMsg)) {
+        return false
+      }
+
+      // Missing translations filter
+      if (showOnlyMissing.value && !hasMissingTranslation(blockId, targetMsg)) {
+        return false
+      }
+
+      // Changes filter
+      if (showOnlyChanges.value && !hasChanges(blockId)) {
+        return false
+      }
+
+      return true
+    })
+  })
+
+  /**
+   * Check if subject should be shown based on filters
+   */
+  const showSubject: ComputedRef<boolean> = computed(() => {
+    const baseMsg = messages.value[baseLanguage.value]
+    const targetMsg = messages.value[currentLanguage.value]
+
+    if (!baseMsg || !targetMsg) return false
+
+    // Search filter
+    if (searchQuery.value) {
+      const query = searchQuery.value.toLowerCase().trim()
+      const subjectText = baseMsg.body.subject?.toLowerCase() || ''
+      if (!subjectText.includes(query)) {
+        return false
+      }
+    }
+
+    // Missing translations filter
+    if (showOnlyMissing.value) {
+      if (targetMsg.body.subject && targetMsg.body.subject.trim() !== '') {
+        return false
+      }
+    }
+
+    // Changes filter
+    if (showOnlyChanges.value) {
+      const tracking = changeTracking.value
+      if (!tracking || !currentLanguage.value) return false
+      if (!tracking.hasSubjectChanged(currentLanguage.value, targetMsg)) {
+        return false
+      }
+    }
+
+    return true
+  })
+
+  /**
+   * Check if any filters are active
+   */
+  const hasActiveFilters: ComputedRef<boolean> = computed(() => {
+    return (
+      (searchQuery.value && searchQuery.value.trim() !== '') ||
+      showOnlyMissing.value ||
+      showOnlyChanges.value
+    )
+  })
+
+  return {
+    filteredBlockIds,
+    showSubject,
+    hasActiveFilters,
+  }
+}

package/app/composables/useWhatsappTemplateBehaviors.ts

@@ -0,0 +1,58 @@
+import { type Ref } from 'vue'
+import type {
+  MessageGroupCategory,
+  WaButtonV1,
+  WhatsappMessage,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { extractFromLocale } from '@/utils/locale'
+
+interface UseWhatsappTemplateBehaviorsOptions {
+  category: Ref<MessageGroupCategory>
+  messages: Ref<Record<string, WhatsappMessage | PostEntity<WhatsappMessage>>>
+}
+
+export function useWhatsappTemplateBehaviors(options: UseWhatsappTemplateBehaviorsOptions) {
+  const { messages } = options
+
+  // Watch for category changes
+  // watch(
+  //   () => category.value,
+  //   (newCategory, oldCategory) => {
+  //     // Only add unsubscribe button if category changed to "marketing"
+  //     if (newCategory === 'marketing' && oldCategory !== 'marketing') {
+  //       addUnsubscribeButtonIfNotExists()
+  //     }
+  //   },
+  //   { immediate: false },
+  // )
+
+  async function addUnsubscribeButtonIfNotExists() {
+    // Check all messages for unsubscribe buttons
+    for (const message of Object.values(messages.value)) {
+      if (message.render_type === 'whatsapp_v1') {
+        const buttons = message.body.buttons.buttons
+        const hasUnsubscribeButton = buttons.some((button) => button.type === 'unsubscribe')
+
+        // Add unsubscribe button if it doesn't exist
+        if (!hasUnsubscribeButton) {
+          const unsubscribeButton: WaButtonV1 = {
+            id: crypto.randomUUID(),
+            type: 'unsubscribe',
+            text: await extractFromLocale(
+              'editor.whatsapp.buttons.default_text.unsubscribe',
+              message.language_id,
+            ),
+          }
+
+          buttons.push(unsubscribeButton)
+        }
+      }
+    }
+  }
+
+  return {
+    // Expose any functions if needed for manual triggering
+    ensureUnsubscribeButton: addUnsubscribeButtonIfNotExists,
+  }
+}

package/app/middleware/channel-guard.ts

@@ -0,0 +1,13 @@
+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'
+
+  if (!isChannelAllowed(channel)) {
+    return navigateTo('/', { replace: true })
+  }
+})

package/app/pages/brands.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import type { BrandFromDb } from '@dev.smartpricing/message-composer-utils/types'
+import { formatDate } from '@dev.smartpricing/message-composer-utils/utils'
+import type { TableColumn } from '#ui/types'
+import { useBrandsQuery, useDeleteBrandMutation } from '~/queries'
+import BrandDrawer from '~/components/Brand/BrandDrawer.vue'
+
+definePageMeta({
+  name: 'brands',
+})
+
+const { t } = useI18n()
+const { confirm } = useConfirm()
+
+const { data: brands, isPending } = useBrandsQuery()
+const { mutateAsync: deleteBrand } = useDeleteBrandMutation()
+
+// Drawer state
+const drawerOpen = ref(false)
+const editingBrandId = ref<string | undefined>(undefined)
+
+// Search
+const search = ref('')
+const filteredBrands = computed(() => {
+  if (!brands.value?.length) return []
+  if (!search.value.trim()) return brands.value
+  const query = search.value.toLowerCase()
+  return brands.value.filter((b) => b.name.toLowerCase().includes(query))
+})
+
+// Table config
+const columns: TableColumn<BrandFromDb>[] = [
+  {
+    id: 'logo',
+    header: '',
+    enableSorting: false,
+    meta: {
+      class: {
+        th: 'w-12',
+        td: 'w-12',
+      },
+    },
+  },
+  {
+    accessorKey: 'name',
+    header: (ctx) => getSortableHeader(ctx, t('pages.brands.column_name')),
+  },
+  {
+    accessorKey: 'created_at',
+    header: (ctx) => getSortableHeader(ctx, t('pages.brands.column_created')),
+    cell: ({ row }) => formatDate(row.original.created_at),
+  },
+  {
+    id: 'actions',
+    enableSorting: false,
+    header: '',
+    meta: {
+      class: {
+        th: 'w-[66px]',
+        td: 'w-[66px]',
+      },
+    },
+  },
+]
+
+const columnPinning = ref({
+  right: ['actions'],
+})
+
+const sorting = ref([
+  {
+    id: 'created_at',
+    desc: true,
+  },
+])
+
+function getRowActions(brand: BrandFromDb) {
+  return [
+    {
+      label: t('common.actions.edit'),
+      icon: 'ph:pencil-simple-line',
+      onSelect: () => openEdit(brand),
+    },
+    {
+      label: t('common.actions.delete'),
+      icon: 'ph:trash',
+      color: 'error' as const,
+      onSelect: () => askDelete(brand),
+    },
+  ]
+}
+
+function openCreate() {
+  editingBrandId.value = undefined
+  drawerOpen.value = true
+}
+
+function openEdit(brand: BrandFromDb) {
+  editingBrandId.value = brand.id
+  drawerOpen.value = true
+}
+
+function askDelete(brand: BrandFromDb) {
+  confirm({
+    title: t('pages.brands.delete_confirm_title'),
+    message: t('pages.brands.delete_confirm_message', { name: brand.name }),
+    destructive: true,
+    confirmProps: {
+      label: t('common.actions.delete'),
+    },
+    cancelProps: {
+      label: t('common.actions.cancel'),
+    },
+    action: async () => {
+      await deleteBrand(brand.id)
+      useToast().add({
+        color: 'success',
+        title: t('common.success'),
+        description: t('pages.brands.brand_deleted', { name: brand.name }),
+      })
+    },
+  })
+}
+
+function handleDrawerSaved() {
+  drawerOpen.value = false
+}
+</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>
+    </template>
+
+    <div class="flex-1 space-y-2.5 relative min-h-0 flex flex-col">
+      <div class="flex gap-2">
+        <UInput
+          v-model="search"
+          class="max-w-xs"
+          leading-icon="ph:magnifying-glass-bold"
+          :placeholder="t('pages.brands.search_placeholder')"
+          type="search"
+        />
+      </div>
+
+      <UCard
+        :ui="{
+          root: 'flex-1 min-h-0 flex flex-col',
+          body: 'overflow-auto relative flex-1 p-0 sm:p-0 relative',
+        }"
+      >
+        <UTable
+          v-model:column-pinning="columnPinning"
+          v-model:sorting="sorting"
+          :data="filteredBrands"
+          :columns="columns"
+          :loading="isPending"
+          :empty="t('pages.brands.no_brands')"
+          sticky
+          class="flex-1 bg-white"
+          :ui="{
+            tr: 'hover:bg-muted',
+            root: 'overflow-visible static',
+          }"
+        >
+          <template #logo-cell="{ row }">
+            <img
+              v-if="row.original.logo_url"
+              :src="row.original.logo_url"
+              :alt="row.original.name"
+              class="h-8 w-8 rounded-full object-cover border border-neutral-200"
+            />
+            <div
+              v-else
+              class="h-8 w-8 rounded-full bg-neutral-200 flex items-center justify-center text-xs font-medium text-neutral-500"
+            >
+              {{ row.original.name.charAt(0).toUpperCase() }}
+            </div>
+          </template>
+
+          <template #actions-cell="{ row }">
+            <SMoreActions :actions="getRowActions(row.original)" />
+          </template>
+        </UTable>
+      </UCard>
+    </div>
+
+    <BrandDrawer v-model="drawerOpen" :brand-id="editingBrandId" @saved="handleDrawerSaved" />
+  </SNavigationPage>
+</template>

package/app/pages/images.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+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'
+
+const { t } = useI18n()
+
+const { data: media, isPending, refetch } = useMediaQuery()
+const { mutateAsync: uploadToSmartchat } = useUploadToSmartchatMutation()
+const { mutateAsync: deleteMedia } = useDeleteMediaMutation()
+
+const uploadingIds = ref<Set<string>>(new Set())
+const deletingIds = ref<Set<string>>(new Set())
+
+async function handleUploadToSmartchat(item: MediaFromDb) {
+  uploadingIds.value.add(item.id)
+  try {
+    await uploadToSmartchat(item.id)
+    useToast().add({
+      color: 'success',
+      title: t('common.success'),
+      description: t('pages.images.image_synced'),
+    })
+    refetch()
+  } finally {
+    uploadingIds.value.delete(item.id)
+  }
+}
+
+async function handleDelete(item: MediaFromDb) {
+  if (!confirm(t('pages.images.delete_confirm', { name: item.file_name }))) return
+
+  deletingIds.value.add(item.id)
+  try {
+    await deleteMedia(item.id)
+    useToast().add({
+      color: 'success',
+      title: t('common.success'),
+      description: t('pages.images.image_deleted'),
+    })
+    refetch()
+  } finally {
+    deletingIds.value.delete(item.id)
+  }
+}
+</script>
+
+<template>
+  <SNavigationPage>
+    <template #header>
+      <SNavigationBarHeader
+        :title="t('pages.images.title')"
+        :data-testid="imagesPageTestIds.navbar"
+      />
+    </template>
+
+    <div v-if="isPending" class="flex justify-center py-12">
+      <UIcon
+        name="i-heroicons-arrow-path"
+        class="animate-spin h-8 w-8"
+        :data-testid="imagesPageTestIds.loadingIcon"
+      />
+    </div>
+
+    <div
+      v-else-if="!media || media.length === 0"
+      class="text-center py-12 text-gray-500"
+      :data-testid="imagesPageTestIds.emptyState"
+    >
+      {{ t('pages.images.no_images_uploaded') }}
+    </div>
+
+    <div
+      v-else
+      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+      :data-testid="imagesPageTestIds.grid"
+    >
+      <UCard
+        v-for="item in media"
+        :key="item.id"
+        :data-testid="`${imagesPageTestIds.card}-${item.id}`"
+      >
+        <div class="space-y-3">
+          <img
+            :src="item.remote_url"
+            :alt="item.file_name"
+            class="h-40 w-full object-cover rounded"
+            :data-testid="`${imagesPageTestIds.image}-${item.id}`"
+          />
+
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <span
+                class="text-sm font-medium truncate"
+                :title="item.file_name"
+                :data-testid="`${imagesPageTestIds.fileName}-${item.id}`"
+              >
+                {{ item.file_name }}
+              </span>
+              <UBadge
+                :color="item.smartchat_media_id ? 'success' : 'neutral'"
+                variant="subtle"
+                size="xs"
+                :data-testid="`${imagesPageTestIds.syncBadge}-${item.id}`"
+              >
+                {{
+                  item.smartchat_media_id ? t('pages.images.synced') : t('pages.images.not_synced')
+                }}
+              </UBadge>
+            </div>
+
+            <div class="text-xs text-gray-500 space-y-1">
+              <div>{{ t('pages.images.type_label') }} {{ item.file_type }}</div>
+              <div>{{ t('pages.images.created_label') }} {{ formatDate(item.created_at) }}</div>
+              <div
+                v-if="item.smartchat_media_id"
+                class="font-mono truncate"
+                :title="item.smartchat_media_id"
+              >
+                {{ t('pages.images.media_id_label') }} {{ item.smartchat_media_id }}
+              </div>
+            </div>
+
+            <div v-if="!item.smartchat_media_id" class="flex gap-2 pt-2">
+              <UButton
+                size="xs"
+                color="primary"
+                block
+                :loading="uploadingIds.has(item.id)"
+                :data-testid="`${imagesPageTestIds.syncButton}-${item.id}`"
+                @click="handleUploadToSmartchat(item)"
+              >
+                {{ t('pages.images.sync_to_smartchat') }}
+              </UButton>
+            </div>
+          </div>
+        </div>
+      </UCard>
+    </div>
+  </SNavigationPage>
+</template>