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

package/app/components/Composer/BrandList.vue

@@ -0,0 +1,191 @@
+<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'
+
+const emit = defineEmits<{
+  created: [brand: BrandFromDb]
+  updated: [brand: BrandFromDb]
+  deleted: [brand: BrandFromDb]
+}>()
+
+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)
+      emit('deleted', brand)
+      useToast().add({
+        color: 'success',
+        title: t('common.success'),
+        description: t('pages.brands.brand_deleted', { name: brand.name }),
+      })
+    },
+  })
+}
+
+function handleDrawerSaved() {
+  drawerOpen.value = false
+}
+
+defineExpose({ openCreate, openEdit })
+</script>
+
+<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"
+      />
+      <slot name="actions"/>
+    </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" />
+</template>

package/app/components/Composer/EmailComposer.vue

@@ -0,0 +1,505 @@
+<script setup lang="ts">
+import IncompleteTranslationsDialog from '@/components/Common/IncompleteTranslationsDialog.vue'
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
+import type { EmailMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  duplicateBlocksForNewLanguage,
+  syncLayoutFromBase,
+} from '@dev.smartpricing/message-composer-utils/utils'
+import { useAppContextStore } from '@/stores/appContext'
+import { useMessageGroupQuery, useLanguagesQuery } from '~/queries'
+
+const props = defineProps<{
+  mode: 'create' | 'edit'
+  messageGroupId?: string
+}>()
+
+const emit = defineEmits<{
+  saved: [data: { id: string | number; name: string; status?: string }]
+  cancelled: [data?: { id?: string | number }]
+}>()
+
+const store = useEmailComposerStore()
+const emailEditorStore = useEmailEditorStore()
+const { mainLanguage } = storeToRefs(useAppContextStore())
+const { trackEvent } = useTracking()
+const { goBackOrFallback } = useGoBack()
+
+// ── Init ──────────────────────────────────────────────────────────
+if (props.mode === 'create') {
+  store.initCreate(mainLanguage.value)
+  emailEditorStore.initBrand()
+} else {
+  // Edit mode: data loaded via watcher below
+}
+
+// ── Edit mode: fetch message group ────────────────────────────────
+const { data: messageGroupData, isPending: isFetching } =
+  props.mode === 'edit' && props.messageGroupId
+    ? useMessageGroupQuery(props.messageGroupId)
+    : { data: ref(null), isPending: ref(false) }
+
+// Change tracking (edit mode only)
+const messageGroupIdRef = computed(() => store.messageGroupId ?? '')
+const changeTracking = props.mode === 'edit' ? useChangeTrackingEmail(messageGroupIdRef) : null
+
+// Watch messageGroupData to init edit mode
+if (props.mode === 'edit') {
+  watch(
+    messageGroupData,
+    (data) => {
+      if (!data?.messages) return
+
+      store.initEdit(data, mainLanguage.value)
+
+      // Record original states for change tracking
+      if (changeTracking) {
+        for (const [langId, message] of Object.entries(store.messages)) {
+          changeTracking.recordOriginalState(langId, message as EmailMessage)
+        }
+      }
+
+      // Load current language into editor store
+      const currentMessage = store.currentMessage
+      if (currentMessage) {
+        emailEditorStore.loadFromData(currentMessage as PostEntity<EmailMessage>)
+      }
+
+      // Restore brand
+      emailEditorStore.initBrand(data.brand_id ?? null)
+    },
+    { immediate: true },
+  )
+}
+
+// ── Initialize store on mount (create mode) ───────────────────────
+onMounted(() => {
+  if (props.mode === 'create') {
+    const currentMessage = store.currentMessage
+    if (currentMessage) {
+      emailEditorStore.loadFromData(currentMessage as PostEntity<EmailMessage>)
+    }
+  }
+})
+
+// ── Watchers ──────────────────────────────────────────────────────
+
+// Watch language changes to load correct message into editor
+watch(
+  () => store.language,
+  (newLang) => {
+    if (props.mode === 'create') {
+      store.ensureLanguageMessage(newLang)
+    }
+
+    const message = store.messages[newLang]
+    if (message) {
+      emailEditorStore.loadFromData(message as PostEntity<EmailMessage>)
+    }
+  },
+)
+
+// Sync all languages when switching to translations tab
+watch(
+  () => store.activeTab,
+  (newTab) => {
+    if (newTab === 'translations') {
+      store.syncLayoutToAllLanguages()
+    }
+  },
+)
+
+// Set initial target language when languages are added
+watch(
+  () => Object.keys(store.messages).length,
+  () => {
+    const languages = Object.keys(store.messages)
+    if (languages.length > 1 && store.targetLanguage === store.language) {
+      store.targetLanguage = languages.find((l) => l !== store.language) || store.language
+    }
+  },
+)
+
+// Sync editor store changes back to messages
+watch(
+  () => emailEditorStore.blocks,
+  () => {
+    const currentMessage = store.messages[store.language]
+    if (currentMessage && currentMessage.render_type === 'email_v1') {
+      const editorData = emailEditorStore.toJSON()
+      currentMessage.body.blocks = editorData.blocks
+      currentMessage.body.settings = editorData.settings
+    }
+  },
+  { deep: true },
+)
+
+// Edit mode: watch for mainLanguage resolution
+if (props.mode === 'edit') {
+  watch(
+    () => store.messages[mainLanguage.value],
+    () => {
+      const resolved = resolveDefaultLanguage(store.messages, mainLanguage.value)
+      if (resolved && resolved !== mainLanguage.value) {
+        store.language = resolved
+        store.targetLanguage = resolved
+      }
+    },
+  )
+}
+
+// ── Validation ────────────────────────────────────────────────────
+const messagesRef = computed(() => store.messages)
+const { formState, draftSchema, validationErrors, validateDraft, validateFull, clearErrors } =
+  useTemplateFormValidation({
+    type: 'email',
+    name: computed(() => store.name),
+    category: computed(() => store.category),
+    messages: messagesRef,
+  })
+
+// ── Template operations ───────────────────────────────────────────
+const successFlag = ref(false)
+
+const { saving, createTemplate, updateTemplate } = useTemplateOperations({
+  onSuccess: () => {
+    successFlag.value = true
+    goBackOrFallback()
+  },
+})
+
+// ── Change detection ──────────────────────────────────────────────
+const hasAnyChanges = computed(() => {
+  if (props.mode === 'create') {
+    return store.name.trim() !== '' || emailEditorStore.hasBlocks
+  }
+
+  // Edit mode
+  if (store.name !== store.originalName) return true
+  if (store.category !== store.originalCategory) return true
+  return Object.keys(store.messages).length > 0
+})
+
+useExitConfirmation(computed(() => hasAnyChanges.value && !successFlag.value))
+
+// ── Incomplete translations ───────────────────────────────────────
+const { data: languages } = useLanguagesQuery()
+
+const { incompleteLanguages, hasIncompleteTranslations } = useIncompleteTranslationsEmail({
+  messages: messagesRef,
+  languages,
+})
+
+const showIncompleteDialog = ref(false)
+const pendingAction = ref<'save_draft' | 'save_message' | null>(null)
+
+// ── Auto-translate ────────────────────────────────────────────────
+const { translateMessage, isTranslating } = useAutoTranslateEmail()
+
+// ── Cleanup ───────────────────────────────────────────────────────
+onUnmounted(() => {
+  emailEditorStore.resetEditor()
+  store.$reset()
+})
+
+// ── Tracking helpers ──────────────────────────────────────────────
+function track(suffix: string, data: Record<string, unknown>) {
+  const name = props.mode === 'create' ? `email_create.${suffix}` : `email_edit.${suffix}`
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  trackEvent(name as any, data as any)
+}
+
+function getEmailBaseProps() {
+  return {
+    name: store.name,
+    subject: (store.messages[store.language] as PostEntity<EmailMessage>)?.body?.subject ?? '',
+  }
+}
+
+function getEmailDraftProps() {
+  return {
+    ...getEmailBaseProps(),
+    languages: Object.keys(store.messages),
+    widgets: emailEditorStore.blocks.map((b) => b.type),
+    is_internal: store.isInternal,
+  }
+}
+
+watch(
+  () => store.activeTab,
+  (tab) => {
+    track('change_tab', { ...getEmailBaseProps(), tab })
+  },
+)
+
+// ── Save logic ────────────────────────────────────────────────────
+function syncAllLanguagesBeforeSave() {
+  store.syncLayoutToAllLanguages()
+}
+
+async function saveAsDraft() {
+  track('save_draft', getEmailDraftProps())
+  syncAllLanguagesBeforeSave()
+
+  if (props.mode === 'create') {
+    const result = await createTemplate(
+      { messageGroup: store.messageGroupData, messages: store.messages },
+      'draft',
+    )
+    if (result) {
+      emit('saved', { id: result.id, name: result.name })
+      notifyParent('TEMPLATE_SAVED_DRAFT', { id: result.id, name: result.name })
+    }
+  } else {
+    if (!store.messageGroupId) return
+    await updateTemplate(
+      store.messageGroupId,
+      { messageGroup: store.messageGroupUpdateData, messages: store.messages },
+      'draft',
+    )
+    emit('saved', { id: store.messageGroupId, name: store.name })
+    notifyParent('TEMPLATE_SAVED_DRAFT', { id: store.messageGroupId, name: store.name })
+  }
+}
+
+async function saveTemplate() {
+  track('save', getEmailDraftProps())
+  syncAllLanguagesBeforeSave()
+
+  if (props.mode === 'create') {
+    const result = await createTemplate(
+      { messageGroup: store.messageGroupData, messages: store.messages },
+      'approved',
+    )
+    if (result) {
+      emit('saved', { id: result.id, name: result.name, status: 'approved' })
+      notifyParent('TEMPLATE_SAVED', { id: result.id, name: result.name, status: 'approved' })
+    }
+  } else {
+    if (!store.messageGroupId) return
+    await updateTemplate(
+      store.messageGroupId,
+      { messageGroup: store.messageGroupUpdateData, messages: store.messages },
+      'approved',
+    )
+    emit('saved', { id: store.messageGroupId, name: store.name, status: 'approved' })
+    notifyParent('TEMPLATE_SAVED', {
+      id: store.messageGroupId,
+      name: store.name,
+      status: 'approved',
+    })
+  }
+}
+
+// ── Public action handlers ────────────────────────────────────────
+async function handleSaveAsDraft() {
+  if (!(await validateDraft())) return
+  if (hasIncompleteTranslations.value) {
+    pendingAction.value = 'save_draft'
+    showIncompleteDialog.value = true
+  } else {
+    saveAsDraft()
+  }
+}
+
+async function handleSaveTemplate() {
+  if (!(await validateFull())) return
+  if (hasIncompleteTranslations.value) {
+    pendingAction.value = 'save_message'
+    showIncompleteDialog.value = true
+  } else {
+    saveTemplate()
+  }
+}
+
+function handleCancel() {
+  const data =
+    props.mode === 'edit' && store.messageGroupId ? { id: store.messageGroupId } : undefined
+  emit('cancelled', data)
+  notifyParent('TEMPLATE_CANCELLED', data ? { id: data.id } : undefined)
+  goBackOrFallback()
+}
+
+function proceedWithSave() {
+  if (pendingAction.value === 'save_draft') {
+    saveAsDraft()
+  } else if (pendingAction.value === 'save_message') {
+    saveTemplate()
+  }
+  pendingAction.value = null
+}
+
+function goToTranslations() {
+  store.activeTab = 'translations'
+  pendingAction.value = null
+}
+
+async function translateAndSave() {
+  if (!incompleteLanguages.value.length) {
+    proceedWithSave()
+    return
+  }
+
+  const baseMessage = store.messages[store.language]
+  if (!baseMessage) {
+    proceedWithSave()
+    return
+  }
+
+  for (const { language: lang } of incompleteLanguages.value) {
+    const targetMsg = store.messages[lang.id]
+    if (!targetMsg) continue
+
+    await translateMessage(
+      baseMessage as EmailMessage,
+      targetMsg as EmailMessage,
+      store.language,
+      lang.id,
+    )
+  }
+
+  proceedWithSave()
+}
+
+// ── Tracking event forwarders ─────────────────────────────────────
+function onAddLanguage(lang: string) {
+  track('add_language', { ...getEmailBaseProps(), language: lang })
+}
+
+function onRemoveLanguage(lang: string) {
+  track('remove_language', { ...getEmailBaseProps(), language: lang })
+}
+
+function onAutoTranslateTracked(lang: string) {
+  track('auto_translate', { ...getEmailBaseProps(), language: lang })
+}
+
+function onPreview(lang: string) {
+  track('preview', { ...getEmailBaseProps(), language: lang })
+}
+
+function onFiltersChanged(payload: {
+  language: string
+  search_term: string
+  show_only_missing: boolean
+  show_only_changes: boolean
+}) {
+  track('translations_filters', { ...getEmailBaseProps(), ...payload })
+}
+
+function onBlockAdded(payload: { type: string; adding_mode: string }) {
+  track('add_widget', {
+    ...getEmailBaseProps(),
+    widget_type: payload.type,
+    adding_mode: payload.adding_mode,
+  })
+}
+
+function onBlockDuplicated(payload: { type: string }) {
+  track('duplicate_widget', {
+    ...getEmailBaseProps(),
+    widget_type: payload.type,
+  })
+}
+
+function onBlockDeleted(payload: { type: string }) {
+  track('remove_widget', {
+    ...getEmailBaseProps(),
+    widget_type: payload.type,
+  })
+}
+
+function onBlockSorted(payload: {
+  type: string
+  before_sort_position: number
+  new_position: number
+}) {
+  track('sort_widget', {
+    ...getEmailBaseProps(),
+    widget_type: payload.type,
+    before_sort_position: payload.before_sort_position,
+    new_position: payload.new_position,
+  })
+}
+
+function onWidgetTabChanged(tab: string) {
+  track('change_widget_tab', { ...getEmailBaseProps(), tab })
+}
+
+function onTestSent(payload: { to_recipients: number }, lang?: string) {
+  track('send_test', {
+    ...getEmailBaseProps(),
+    widgets: emailEditorStore.blocks.map((b) => b.type),
+    to_recipients: payload.to_recipients,
+    language: lang ?? store.language,
+  })
+}
+
+// ── Expose ────────────────────────────────────────────────────────
+defineExpose({
+  handleSaveAsDraft,
+  handleSaveTemplate,
+  handleCancel,
+  saving,
+  isTranslating,
+  validationErrors,
+})
+</script>
+
+<template>
+  <UForm
+    ref="templateForm"
+    :schema="draftSchema"
+    :state="formState"
+    :validate-on="[]"
+    class="flex-1 relative min-h-0 flex flex-col"
+  >
+    <div v-if="validationErrors.length">
+      <UAlert
+        color="error"
+        variant="subtle"
+        icon="i-lucide-alert-triangle"
+        :title="$t('editor.validation.error.title')"
+        :close="true"
+        @update:open="clearErrors()"
+      >
+        <template #description>
+          <ul class="list-disc pl-4 space-y-1">
+            <li v-for="err in validationErrors" :key="err">
+              {{ err }}
+            </li>
+          </ul>
+        </template>
+      </UAlert>
+    </div>
+
+    <ComposerEmailContent
+      v-if="store.activeTab === 'content'"
+      :mode="mode"
+      @block-added="onBlockAdded"
+      @block-deleted="onBlockDeleted"
+      @block-duplicated="onBlockDuplicated"
+      @block-sorted="onBlockSorted"
+      @widget-tab-changed="onWidgetTabChanged"
+      @test-sent="onTestSent"
+    />
+
+    <ComposerEmailTranslations
+      v-if="store.activeTab === 'translations'"
+      :mode="mode"
+      @add-language="onAddLanguage"
+      @remove-language="onRemoveLanguage"
+      @auto-translate-tracked="onAutoTranslateTracked"
+      @preview="onPreview"
+      @filters-changed="onFiltersChanged"
+    />
+  </UForm>
+
+  <IncompleteTranslationsDialog
+    v-model="showIncompleteDialog"
+    :incomplete-languages="incompleteLanguages"
+    @save-without-translating="proceedWithSave"
+    @translate-and-save="translateAndSave"
+    @go-to-translations="goToTranslations"
+  />
+</template>