@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Email/Translator/RawHtml.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { RawHtmlBlock } from '@dev.smartpricing/message-composer-utils/types'
+import MonacoEditor from '@/components/Common/MonacoEditor.vue'
+import HtmlPreviewIframe from '~/components/Common/HtmlPreviewIframe.vue'
+
+defineOptions({
+  name: 'EmailTranslatorRawHtml',
+})
+
+const { baseBlock } = defineProps<{
+  baseBlock: RawHtmlBlock
+}>()
+
+const targetBlock = defineModel<RawHtmlBlock>({
+  required: true,
+})
+
+// Copy base HTML to target
+function copyFromBase() {
+  targetBlock.value.settings.html = baseBlock.settings.html
+}
+</script>
+
+<template>
+  <div class="flex gap-8 items-stretch" :data-testid="emailTranslatorRawHtmlTestIds.root">
+    <!-- Base language preview (read-only) -->
+    <div class="flex-1 min-w-0">
+      <div class="h-80 overflow-y-auto">
+        <HtmlPreviewIframe
+          :html="baseBlock.settings.html"
+          title="Html preview"
+          :data-testid="emailTranslatorRawHtmlTestIds.basePreview"
+        />
+      </div>
+    </div>
+
+    <!-- Translation editor (editable Monaco) -->
+    <div class="flex-1 min-w-0">
+      <div class="flex flex-col h-80">
+        <div class="flex-1 min-h-0">
+          <MonacoEditor
+            v-model="targetBlock.settings.html"
+            language="html"
+            :line-numbers="'on'"
+            :minimap="false"
+            :word-wrap="'on'"
+            :data-testid="emailTranslatorRawHtmlTestIds.monacoEditor"
+          />
+        </div>
+        <div class="flex justify-end pt-2">
+          <UButton
+            icon="i-lucide-copy"
+            variant="ghost"
+            size="xs"
+            @click="copyFromBase"
+            :label="$t('common.copy')"
+            :data-testid="emailTranslatorRawHtmlTestIds.copyFromBaseButton"
+          />
+          <slot name="actions" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Email/Translator/UnsubscribeLink.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { JSONContent } from '@tiptap/vue-3'
+import { generateHTML } from '@tiptap/vue-3'
+import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+import { useAppContextStore } from '@/stores/appContext'
+import type { UnsubscribeLinkBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+defineOptions({
+  name: 'EmailTranslatorUnsubscribeLink',
+})
+
+const { baseBlock } = defineProps<{
+  baseBlock: UnsubscribeLinkBlock
+}>()
+
+const targetBlock = defineModel<UnsubscribeLinkBlock>({
+  required: true,
+})
+
+const appContext = useAppContextStore()
+
+function generatePreviewHtml(content: JSONContent | undefined): string {
+  if (!content) return ''
+  return generateHTML(content, getTipTapExtensions({ preset: 'email' })).replaceAll(
+    '<p></p>',
+    '<p>&nbsp;</p>',
+  )
+}
+</script>
+
+<template>
+  <div class="flex gap-8 items-start" :data-testid="emailTranslatorUnsubscribeLinkTestIds.root">
+    <div class="flex-1 min-w-0">
+      <div
+        class="paragraph-sm text-primary-700 break-words"
+        v-html="generatePreviewHtml(baseBlock.settings.content)"
+        :data-testid="emailTranslatorUnsubscribeLinkTestIds.basePreview"
+      />
+    </div>
+
+    <div class="flex-1 min-w-0 flex gap-2 items-start">
+      <div class="flex-1">
+        <RichTextEditor
+          v-model:text="targetBlock.settings.content"
+          preset="email"
+          bold
+          italic
+          underline
+          link
+          dynamic-values
+          :data-testid="emailTranslatorUnsubscribeLinkTestIds.contentEditor"
+        />
+      </div>
+
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/app/components/TemplateList/BaseTable.vue

@@ -0,0 +1,354 @@
+<script setup lang="ts">
+import {
+  MESSAGE_GROUP_CATEGORIES,
+  MESSAGE_STATUS,
+  type MessageGroupWithMessageSummary,
+  type RenderType,
+} from '@dev.smartpricing/message-composer-utils/types'
+import StatusCell from '@/components/TemplateList/StatusCell.vue'
+import { useI18n } from 'vue-i18n'
+import { ref, watch } from 'vue'
+import { formatDate } from '@dev.smartpricing/message-composer-utils/utils'
+import type { TableColumn } from '#ui/types'
+import type { TrackingEventMap } from '@/types/tracking'
+
+const emit = defineEmits<{
+  edit: [MessageGroupWithMessageSummary]
+  delete: [MessageGroupWithMessageSummary]
+  duplicate: [MessageGroupWithMessageSummary]
+  publish: [MessageGroupWithMessageSummary]
+  unpublish: [MessageGroupWithMessageSummary]
+}>()
+
+const adminStore = useAdminStore()
+const { trackEvent } = useTracking()
+
+const { t, locale } = useI18n()
+
+function getLocalizedMessage(row: MessageGroupWithMessageSummary) {
+  // Try current locale
+  let message = row.messages.find((m) => m.language === locale.value)
+
+  // Try English
+  if (!message) {
+    message = row.messages.find((m) => m.language === 'en')
+  }
+
+  // Use first message
+  if (!message) {
+    message = row.messages.at(0)
+  }
+
+  return message
+}
+
+function rowActions(row: MessageGroupWithMessageSummary) {
+  const publishAction =
+    adminStore.isAdminModeActive && row.visibility === 'internal'
+      ? {
+          label: t('common.actions.publish'),
+          icon: 'ph:globe',
+          color: 'info' as const,
+          onSelect: () => emit('publish', row),
+          'data-testid': `${templateListTableTestIds.rowPublishAction}-${row.id}`,
+        }
+      : adminStore.isAdminModeActive && row.visibility === 'public'
+        ? {
+            label: t('common.actions.unpublish'),
+            icon: 'ph:globe-x',
+            color: 'warning' as const,
+            onSelect: () => emit('unpublish', row),
+            'data-testid': `${templateListTableTestIds.rowUnpublishAction}-${row.id}`,
+          }
+        : null
+
+  return [
+    {
+      label: t('common.actions.edit'),
+      icon: 'ph:pencil-simple-line',
+      onSelect: () => emit('edit', row),
+      'data-testid': `${templateListTableTestIds.rowEditAction}-${row.id}`,
+    },
+    ...(publishAction ? [publishAction] : []),
+    {
+      label: t('common.actions.duplicate'),
+      icon: 'ph:copy',
+      onSelect: () => emit('duplicate', row),
+      'data-testid': `${templateListTableTestIds.rowDuplicateAction}-${row.id}`,
+    },
+    {
+      label: t('common.actions.delete'),
+      icon: 'ph:trash',
+      color: 'error' as const,
+      onSelect: () => emit('delete', row),
+      'data-testid': `${templateListTableTestIds.rowDeleteAction}-${row.id}`,
+    },
+  ]
+}
+
+const columns: TableColumn<MessageGroupWithMessageSummary>[] = [
+  {
+    id: 'name',
+    accessorKey: 'name',
+    header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.name')),
+  },
+  {
+    id: 'category',
+    accessorKey: 'category',
+    header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.category')),
+    filterFn: (row, columnId, filterValue) => {
+      if (filterValue === 'all') return true
+      return row.original.category.toLowerCase().includes(filterValue.toLowerCase())
+    },
+  },
+  {
+    id: 'preview',
+    accessorFn: (row) => getLocalizedMessage(row)?.preview,
+    header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.preview')),
+  },
+  {
+    id: 'status',
+    accessorFn: (row) => row.messages.map((m) => m.status).join(', '),
+    header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.status')),
+    filterFn: (row, columnId, filterValue) => {
+      if (filterValue === 'all') return true
+      return row.original.messages.some((m) => m.status === filterValue)
+    },
+  },
+  // {
+  //   id: 'tags',
+  //   accessorFn: (row) => row.tags?.join(', ') || '',
+  //   header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.tags')),
+  //   filterFn: (row, _columnId, filterValue: string[]) => {
+  //     if (!filterValue || filterValue.length === 0) return true
+  //     const rowTags = row.original.tags || []
+  //     return filterValue.some((tag) => rowTags.includes(tag))
+  //   },
+  // },
+  {
+    id: 'updated_at',
+    accessorFn: (row) => formatDate(row.updated_at),
+    // header: () => t('pages.message_library.headers.updated_at'),
+    header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.updated_at')),
+  },
+  {
+    id: 'actions',
+    enableSorting: false,
+    header: '',
+    meta: {
+      class: {
+        th: 'w-[66px]',
+        td: 'w-[66px]',
+      },
+    },
+  },
+]
+
+const sorting = ref([
+  {
+    id: 'updated_at',
+    desc: true,
+  },
+])
+
+const props = defineProps<{
+  messageGroups: MessageGroupWithMessageSummary[]
+  loading: boolean
+  renderType: RenderType
+}>()
+
+const filteredMessageGroups = computed(() => {
+  if (adminStore.isAdminModeActive) return props.messageGroups
+  return props.messageGroups.filter((mg) => mg.visibility !== 'internal')
+})
+
+const categoryItems = computed(() => {
+  return [
+    {
+      label: t('common.all'),
+      value: 'all',
+    },
+    ...MESSAGE_GROUP_CATEGORIES.map((category) => ({
+      label: t(`categories.${category}`),
+      value: category,
+    })),
+  ]
+})
+
+const statusItems = computed(() => {
+  return [
+    {
+      label: t('common.all'),
+      value: 'all',
+    },
+
+    ...MESSAGE_STATUS.map((status) => ({
+      label: t(`status.${status}`),
+      value: status,
+    })),
+  ]
+})
+
+// const tagItems = computed(() => {
+//   const allTags = new Set<string>()
+//   messageGroups.forEach((mg) => mg.tags?.forEach((tag) => allTags.add(tag)))
+//   return [...allTags].sort()
+// })
+
+// const selectedTags = ref<string[]>([])
+
+const table = useTemplateRef('table')
+
+const messagesKind = computed(() => (props.renderType === 'email_v1' ? 'email' : 'whatsapp'))
+
+watch(sorting, (val) => {
+  if (val[0]) {
+    trackEvent('table_sorting', {
+      messages_kind: messagesKind.value,
+      sort_column: val[0].id,
+    })
+  }
+})
+
+function trackFilters(overrides: Partial<TrackingEventMap['change_filters']> = {}) {
+  trackEvent('change_filters', {
+    search_term: (table.value?.tableApi?.getColumn('name')?.getFilterValue() as string) || '',
+    category: (table.value?.tableApi?.getColumn('category')?.getFilterValue() as string) || '',
+    status: (table.value?.tableApi?.getColumn('status')?.getFilterValue() as string) || '',
+    messages_kind: messagesKind.value,
+    ...overrides,
+  })
+}
+
+const trackSearchFilter = useDebounceFn((value: string) => {
+  trackFilters({ search_term: value })
+}, 500)
+
+function onSearchInput(value: string) {
+  table.value?.tableApi?.getColumn('name')?.setFilterValue(value)
+  trackSearchFilter(value)
+}
+
+function onCategoryFilter(value: string) {
+  table.value?.tableApi?.getColumn('category')?.setFilterValue(value)
+  trackFilters({ category: value })
+}
+
+function onStatusFilter(value: string) {
+  table.value?.tableApi?.getColumn('status')?.setFilterValue(value)
+  trackFilters({ status: value })
+}
+</script>
+
+<template>
+  <div
+    class="flex-1 space-y-2.5 relative min-h-0 flex flex-col"
+    :data-testid="templateListTableTestIds.root"
+  >
+    <div class="flex gap-2">
+      <UInput
+        :model-value="table?.tableApi?.getColumn('name')?.getFilterValue() as string"
+        class="max-w-xs"
+        leading-icon="ph:magnifying-glass-bold"
+        :placeholder="t('pages.message_library.search_placeholder')"
+        :data-testid="templateListTableTestIds.searchInput"
+        @update:model-value="onSearchInput($event)"
+      />
+      <USelect
+        :model-value="table?.tableApi?.getColumn('category')?.getFilterValue() as string"
+        class="max-w-48"
+        :placeholder="t('pages.message_library.category_placeholder')"
+        :items="categoryItems"
+        :data-testid="templateListTableTestIds.categorySelect"
+        @update:model-value="onCategoryFilter($event)"
+      />
+      <USelect
+        :model-value="table?.tableApi?.getColumn('status')?.getFilterValue() as string"
+        class="max-w-48"
+        :placeholder="t('pages.message_library.status_placeholder')"
+        :items="statusItems"
+        :data-testid="templateListTableTestIds.statusSelect"
+        @update:model-value="onStatusFilter($event)"
+      />
+      <!-- <USelectMenu
+            v-if="tagItems.length > 0"
+            v-model="selectedTags"
+            :items="tagItems"
+            multiple
+            class="max-w-48"
+            :placeholder="t('pages.message_library.tags_placeholder')"
+            @update:model-value="table?.tableApi?.getColumn('tags')?.setFilterValue($event)"
+          /> -->
+    </div>
+
+    <UCard
+      :ui="{
+        root: 'flex-1 min-h-0 flex flex-col',
+        body: 'overflow-auto relative flex-1  p-0 sm:p-0 relative',
+      }"
+      :data-testid="templateListTableTestIds.card"
+    >
+      <UTable
+        :loading="loading"
+        class="flex-1 bg-white"
+        :ui="{
+          tr: 'hover:bg-muted',
+          root: 'overflow-visible static',
+        }"
+        :data="filteredMessageGroups"
+        :columns="columns"
+        sticky
+        ref="table"
+        v-model:sorting="sorting"
+        :data-testid="templateListTableTestIds.table"
+      >
+        <template #name-cell="{ row }">
+          <div
+            class="flex items-center gap-2"
+            :data-testid="`${templateListTableTestIds.rowName}-${row.original.id}`"
+          >
+            <span>{{ row.original.name }}</span>
+            <UBadge
+              v-if="row.original.visibility === 'internal'"
+              :label="t('common.internal')"
+              size="sm"
+              color="info"
+              variant="soft"
+              :data-testid="`${templateListTableTestIds.rowInternalBadge}-${row.original.id}`"
+            />
+          </div>
+        </template>
+
+        <template #category-cell="{ row }">
+          <UBadge
+            :label="row.original.category"
+            size="md"
+            color="neutral"
+            variant="soft"
+            :data-testid="`${templateListTableTestIds.rowCategoryBadge}-${row.original.id}`"
+          />
+        </template>
+
+        <template #status-cell="{ row }">
+          <StatusCell :items="row.original.messages" />
+        </template>
+
+        <template #preview-cell="{ row }">
+          <div
+            class="line-clamp-2 max-w-[200px] truncate"
+            :data-testid="`${templateListTableTestIds.rowPreview}-${row.original.id}`"
+          >
+            {{ getLocalizedMessage(row.original)?.preview }}
+          </div>
+        </template>
+
+        <template #actions-cell="{ row }">
+          <SMoreActions
+            :actions="rowActions(row.original)"
+            :data-testid="`${templateListTableTestIds.rowActions}-${row.original.id}`"
+          />
+        </template>
+      </UTable>
+    </UCard>
+  </div>
+</template>

package/app/components/TemplateList/StatusCell.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type {
+  MessageGroupWithMessageSummary,
+  MessageStatus,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { groupBy } from '@dev.smartpricing/message-composer-utils/utils'
+import { getLanguageDisplayName } from '@dev.smartpricing/message-composer-utils/utils'
+
+const props = defineProps<{
+  items: MessageGroupWithMessageSummary['messages']
+}>()
+
+function getStatusColor(status: MessageStatus) {
+  switch (status) {
+    case 'draft':
+      return 'neutral'
+    case 'approved':
+      return 'success'
+    case 'rejected':
+      return 'error'
+    case 'pending':
+      return 'warning'
+  }
+}
+
+const statusOrder: MessageStatus[] = ['rejected', 'pending', 'approved', 'draft']
+
+const { locale } = useI18n()
+
+const grouped = computed(() => {
+  const groups = groupBy(props.items, (item) => item.status)
+  return statusOrder
+    .filter((status) => groups[status]?.length)
+    .map((status) => ({
+      status,
+      count: groups[status].length,
+      languages: groups[status].map((m) => getLanguageDisplayName(m.language, locale.value)),
+    }))
+})
+</script>
+
+<template>
+  <div class="flex gap-2" :data-testid="templateListStatusCellTestIds.root">
+    <UTooltip
+      v-for="group in grouped"
+      :key="group.status"
+      :ui="{ content: 'h-fit' }"
+      :data-testid="`${templateListStatusCellTestIds.tooltip}-${group.status}`"
+    >
+      <UBadge
+        leading-icon="ph:circle-fill"
+        :label="`${group.count} ${$t(`status.${group.status}`)}`"
+        size="md"
+        :color="getStatusColor(group.status)"
+        variant="outline"
+        :data-testid="`${templateListStatusCellTestIds.badge}-${group.status}`"
+      />
+      <template #content>
+        <div :data-testid="`${templateListStatusCellTestIds.tooltipContent}-${group.status}`">
+          <p v-for="lang in group.languages" :key="lang">{{ lang }}</p>
+        </div>
+      </template>
+    </UTooltip>
+  </div>
+</template>

package/app/components/Whatsapp/CategoryChanger.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+import type { MessageGroupCategory } from '@dev.smartpricing/message-composer-utils/types'
+import { MESSAGE_GROUP_CATEGORIES } from '@dev.smartpricing/message-composer-utils/types'
+import { useI18n } from 'vue-i18n'
+
+const modelValue = defineModel<MessageGroupCategory>('category', { required: true })
+
+const selectedCategory = ref<MessageGroupCategory>(modelValue.value)
+
+const { t } = useI18n()
+const { confirm } = useConfirm()
+
+const categoryItems = computed(() => {
+  return MESSAGE_GROUP_CATEGORIES.map((category) => ({
+    label: t(`categories.${category}`),
+    value: category,
+  }))
+})
+
+function assertIsMessageGroupCategory(newCategory: string): newCategory is MessageGroupCategory {
+  return MESSAGE_GROUP_CATEGORIES.includes(newCategory as MessageGroupCategory)
+}
+
+function handleCategoryChange(newCategory: string) {
+  if (!assertIsMessageGroupCategory(newCategory)) return
+  if (newCategory === modelValue.value) return
+
+  confirm({
+    title: t('dialogs.whatsapp_change_category.title'),
+    message: t('dialogs.whatsapp_change_category.message', [
+      t(`categories.${modelValue.value}`),
+      t(`categories.${newCategory}`),
+    ]),
+    confirmLabel: t('dialogs.whatsapp_change_category.change_to', [t(`categories.${newCategory}`)]),
+    cancelLabel: t('dialogs.whatsapp_change_category.cancel'),
+    action: () => {
+      modelValue.value = newCategory
+      selectedCategory.value = newCategory
+      emit('changed')
+    },
+  }).then((confirmed) => {
+    if (!confirmed) {
+      selectedCategory.value = modelValue.value
+    }
+  })
+}
+
+const emit = defineEmits<{
+  changed: []
+}>()
+</script>
+
+<template>
+  <USelect
+    v-model="selectedCategory"
+    :placeholder="t('pages.whatsapp.create_message_group.category_placeholder')"
+    :items="categoryItems"
+    @update:model-value="handleCategoryChange"
+    :data-testid="categoryChangerTestIds.select"
+  />
+</template>

package/app/components/Whatsapp/Editor/Body.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import ViewLessMore from '@/components/Common/ViewLessMore.vue'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+import {
+  WA_BODY_MAX_LENGTH,
+  type BodyBlockV1,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { useAppContextStore } from '@/stores/appContext'
+
+defineOptions({
+  name: 'WhatsappEditorBody',
+})
+
+const props = defineProps<{
+  generateContext?: string
+}>()
+
+const model = defineModel<BodyBlockV1>({ required: true })
+const appContext = useAppContextStore()
+</script>
+
+<template>
+  <div :data-testid="whatsappEditorBodyTestIds.container">
+    <section class="max-w-[400px] pb-3">
+      <h4 class="label-md pb-3">{{ $t('editor.whatsapp.body.title') }}</h4>
+      <p
+        class="paragraph-sm pb-2 text-primary-800"
+        v-html="$t('editor.whatsapp.body.description_main')"
+      />
+      <ViewLessMore>
+        <ul class="list-disc list-inside text-sm space-y-2 text-primary-800 pb-2">
+          <li class="paragraph-sm" v-html="$t('editor.whatsapp.body.description_link')" />
+          <li class="paragraph-sm" v-html="$t('editor.whatsapp.body.description_dynamic_values')" />
+        </ul>
+      </ViewLessMore>
+    </section>
+
+    <RichTextEditor
+      v-model:text="model.content"
+      preset="whatsapp"
+      dynamic-values
+      bold
+      italic
+      emoji
+      improve
+      generate
+      generate-widget-type="whatsapp_body"
+      :generate-context="props.generateContext"
+      :character-limit="WA_BODY_MAX_LENGTH"
+      :data-testid="whatsappEditorBodyTestIds.contentEditor"
+    />
+  </div>
+</template>