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

package/app/components/Composer/EmailContent.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import EmailEditor from '@/components/Email/Editor/Index.vue'
+import type { PostEntity, EmailMessage } from '@dev.smartpricing/message-composer-utils/types'
+
+const props = defineProps<{
+  mode: 'create' | 'edit'
+}>()
+
+const emit = defineEmits<{
+  'block-added': [payload: { type: string; adding_mode: string }]
+  'block-deleted': [payload: { type: string }]
+  'block-duplicated': [payload: { type: string }]
+  'block-sorted': [payload: { type: string; before_sort_position: number; new_position: number }]
+  'widget-tab-changed': [tab: string]
+  'test-sent': [payload: { to_recipients: number }, lang?: string]
+}>()
+
+const store = useEmailComposerStore()
+const emailEditorStore = useEmailEditorStore()
+const adminStore = useAdminStore()
+
+const testIds = computed(() =>
+  props.mode === 'create' ? templateEmailCreateTestIds : templateEmailEditTestIds,
+)
+</script>
+
+<template>
+  <UCard
+    v-if="store.currentMessage"
+    :ui="{
+      root: 'flex flex-col flex-1 min-h-0',
+      body: 'flex-1 overflow-hidden sm:px-0 px-0 py-0 sm:py-0 min-h-0',
+      header: 'sm:px-4 px-4 py-4 sm:py-4',
+    }"
+    :data-testid="testIds.contentCard"
+  >
+    <template #header>
+      <div class="grid grid-cols-3 gap-2 items-center">
+        <UFieldGroup>
+          <UBadge variant="outline" color="neutral" size="lg">{{
+            $t(`pages.email.${mode === 'create' ? 'create' : 'edit'}_message_group.name`)
+          }}</UBadge>
+          <UInput
+            v-model="store.name"
+            :placeholder="
+              $t(
+                `pages.email.${mode === 'create' ? 'create' : 'edit'}_message_group.name_placeholder`,
+              )
+            "
+            :data-testid="testIds.nameInput"
+          />
+        </UFieldGroup>
+
+        <UFieldGroup v-if="store.currentMessage">
+          <UBadge variant="outline" color="neutral" size="lg">{{
+            $t(`pages.email.${mode === 'create' ? 'create' : 'edit'}_message_group.subject`)
+          }}</UBadge>
+          <UInput
+            v-model="(store.messages[store.language] as PostEntity<EmailMessage>).body.subject"
+            :placeholder="
+              $t(
+                `pages.email.${mode === 'create' ? 'create' : 'edit'}_message_group.subject_placeholder`,
+              )
+            "
+            :data-testid="testIds.subjectInput"
+          />
+        </UFieldGroup>
+
+        <USwitch
+          v-if="mode === 'create' && adminStore.isAdminModeActive"
+          :label="$t('common.internal')"
+          v-model="store.isInternal"
+          color="info"
+          :data-testid="testIds.internalSwitch"
+        />
+      </div>
+    </template>
+
+    <div class="flex flex-col h-full overflow-hidden">
+      <template v-if="store.currentMessage" :key="store.language">
+        <div class="flex-1 overflow-hidden">
+          <EmailEditor
+            :message="store.currentMessage as PostEntity<EmailMessage>"
+            @block-added="emit('block-added', $event)"
+            @block-deleted="emit('block-deleted', $event)"
+            @block-duplicated="emit('block-duplicated', $event)"
+            @block-sorted="emit('block-sorted', $event)"
+            @widget-tab-changed="emit('widget-tab-changed', $event)"
+            @test-sent="(payload, lang) => emit('test-sent', payload, lang)"
+          />
+        </div>
+      </template>
+    </div>
+  </UCard>
+</template>

package/app/components/Composer/EmailTranslations.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import TranslationEditor from '@/components/Email/TranslationEditor.vue'
+import LanguageList from '@/components/Common/LanguageList.vue'
+import type { EmailMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+
+const props = defineProps<{
+  mode: 'create' | 'edit'
+}>()
+
+const emit = defineEmits<{
+  'add-language': [lang: string]
+  'remove-language': [lang: string]
+  'auto-translate-tracked': [lang: string]
+  preview: [lang: string]
+  'filters-changed': [
+    payload: {
+      language: string
+      search_term: string
+      show_only_missing: boolean
+      show_only_changes: boolean
+    },
+  ]
+}>()
+
+const store = useEmailComposerStore()
+
+const testIds = computed(() =>
+  props.mode === 'create' ? templateEmailCreateTestIds : templateEmailEditTestIds,
+)
+</script>
+
+<template>
+  <UCard
+    v-if="store.currentMessage"
+    :ui="{
+      root: 'flex flex-col h-full',
+      body: 'flex-1 overflow-hidden sm:px-0 px-0 py-0 sm:py-0',
+      header: 'sm:px-4 px-4 py-4 sm:py-4',
+    }"
+    :data-testid="testIds.translationsCard"
+  >
+    <div class="grid grid-cols-[auto_1fr] divide-x divide-muted overflow-auto max-h-full h-full">
+      <div class="overflow-y-auto">
+        <LanguageList
+          v-model:messages="store.messages"
+          v-model:language="store.targetLanguage"
+          render-type="email_v1"
+          :main-language-id="store.language"
+          :message-group-id="store.messageGroupId ?? undefined"
+          @add-language="emit('add-language', $event)"
+          @remove-language="emit('remove-language', $event)"
+        />
+      </div>
+      <div class="overflow-y-auto" v-if="store.currentMessage && store.targetMessage">
+        <TranslationEditor
+          :base-message="store.currentMessage as PostEntity<EmailMessage>"
+          v-model="store.messages[store.targetLanguage] as PostEntity<EmailMessage>"
+          :messages="store.messages as Record<string, PostEntity<EmailMessage>>"
+          :current-language="store.targetLanguage"
+          :base-language="store.language"
+          :message-group-id="store.messageGroupId ?? undefined"
+          :key="store.targetLanguage"
+          @auto-translate-tracked="emit('auto-translate-tracked', $event)"
+          @preview="emit('preview', $event)"
+          @filters-changed="emit('filters-changed', $event)"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/Composer/ImageGallery.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 emit = defineEmits<{
+  synced: [item: MediaFromDb]
+  deleted: [item: MediaFromDb]
+}>()
+
+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'),
+    })
+    emit('synced', item)
+    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'),
+    })
+    emit('deleted', item)
+    refetch()
+  } finally {
+    deletingIds.value.delete(item.id)
+  }
+}
+
+defineExpose({ refetch })
+</script>
+
+<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>
+</template>

package/app/components/Composer/MessageLibrary.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import {
+  useMessageGroupsQuery,
+  useDeleteMessageGroupMutation,
+  usePublishMessageGroupMutation,
+  useUnpublishMessageGroupMutation,
+} from '~/queries'
+import type {
+  MessageGroupWithMessageSummary,
+  RenderType,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { MessageActionProperties, MessagesKind } from '@/types/tracking'
+import { computed } from 'vue'
+import BaseTable from '@/components/TemplateList/BaseTable.vue'
+
+const renderType = defineModel<RenderType>('renderType', { required: true })
+
+const emit = defineEmits<{
+  edit: [row: MessageGroupWithMessageSummary]
+  deleted: [row: MessageGroupWithMessageSummary]
+  duplicated: [result: { id: string | number; sourceId: string | number; name: string }]
+  published: [row: MessageGroupWithMessageSummary]
+  unpublished: [row: MessageGroupWithMessageSummary]
+}>()
+
+const { trackEvent } = useTracking()
+const { t } = useI18n()
+
+// Query
+const {
+  data: messageGroups,
+  isPending: isFetching,
+  refetch: execute,
+} = useMessageGroupsQuery(computed(() => ({ renderType: renderType.value })))
+
+// Polling
+const interval = setInterval(() => execute(), 15000)
+onBeforeUnmount(() => clearInterval(interval))
+
+// Mutations
+const { confirm } = useConfirm()
+const { mutateAsync: deleteGroup } = useDeleteMessageGroupMutation()
+const { mutateAsync: publishGroup } = usePublishMessageGroupMutation()
+const { mutateAsync: unpublishGroup } = useUnpublishMessageGroupMutation()
+
+function getMessageTrackingProps(row: MessageGroupWithMessageSummary): MessageActionProperties {
+  return {
+    message_name: row.name,
+    languages: row.messages.map((m) => m.language),
+    message_id: row.id,
+    message_kind: (row.messages[0]?.render_type === 'email_v1'
+      ? 'email'
+      : 'whatsapp') as MessagesKind,
+    message_category: row.category,
+  }
+}
+
+function askDeleteGroup(row: MessageGroupWithMessageSummary) {
+  confirm({
+    title: t('dialogs.delete_message_group.title'),
+    message: t('dialogs.delete_message_group.message', { name: row.name }),
+    destructive: true,
+    confirmLabel: t('common.actions.delete'),
+    cancelLabel: t('common.actions.cancel'),
+    action: async () => {
+      await deleteGroup(row.id)
+      trackEvent('message_delete', getMessageTrackingProps(row))
+      notifyParent('TEMPLATE_DELETED', { id: row.id, name: row.name })
+      useToast().add({
+        title: t('common.success'),
+        description: t('dialogs.delete_message_group.success', { name: row.name }),
+        color: 'success',
+      })
+      emit('deleted', row)
+      execute()
+    },
+  })
+}
+
+function askPublishGroup(row: MessageGroupWithMessageSummary) {
+  confirm({
+    title: t('dialogs.publish_message_group.title'),
+    message: t('dialogs.publish_message_group.message', { name: row.name }),
+    confirmLabel: t('common.actions.publish'),
+    cancelLabel: t('common.actions.cancel'),
+    action: async () => {
+      await publishGroup(row.id)
+      notifyParent('TEMPLATE_PUBLISHED', { id: row.id, name: row.name })
+      useToast().add({
+        title: t('common.success'),
+        description: t('dialogs.publish_message_group.success', { name: row.name }),
+        color: 'success',
+      })
+      emit('published', row)
+      execute()
+    },
+  })
+}
+
+function askUnpublishGroup(row: MessageGroupWithMessageSummary) {
+  confirm({
+    title: t('dialogs.unpublish_message_group.title'),
+    message: t('dialogs.unpublish_message_group.message', { name: row.name }),
+    confirmLabel: t('common.actions.unpublish'),
+    cancelLabel: t('common.actions.cancel'),
+    action: async () => {
+      await unpublishGroup(row.id)
+      notifyParent('TEMPLATE_UNPUBLISHED', { id: row.id, name: row.name })
+      useToast().add({
+        title: t('common.success'),
+        description: t('dialogs.unpublish_message_group.success', { name: row.name }),
+        color: 'success',
+      })
+      emit('unpublished', row)
+      execute()
+    },
+  })
+}
+
+const { duplicateTemplate } = useTemplateOperations({
+  onSuccess: () => execute(),
+})
+
+async function handleDuplicate(row: MessageGroupWithMessageSummary) {
+  trackEvent('message_duplicate', getMessageTrackingProps(row))
+  const result = await duplicateTemplate(row.id.toString(), t('common.copy_of', { name: row.name }))
+  if (result) {
+    notifyParent('TEMPLATE_DUPLICATED', { id: result.id, sourceId: row.id, name: result.name })
+    emit('duplicated', { id: result.id, sourceId: row.id, name: result.name })
+  }
+}
+
+const router = useRouter()
+function navigate(row: MessageGroupWithMessageSummary) {
+  trackEvent('message_edit', getMessageTrackingProps(row))
+  emit('edit', row)
+  const type = row.messages[0]?.render_type === 'email_v1' ? 'email' : 'whatsapp'
+  router.push({ name: `${type}-message-edit`, params: { id: row.id } })
+}
+
+defineExpose({ execute })
+</script>
+
+<template>
+  <BaseTable
+    :loading="isFetching"
+    :message-groups="messageGroups || []"
+    :render-type="renderType"
+    @edit="navigate"
+    @delete="askDeleteGroup"
+    @duplicate="handleDuplicate"
+    @publish="askPublishGroup"
+    @unpublish="askUnpublishGroup"
+  />
+</template>