@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Common/HtmlPreviewIframe.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core'
+
+defineOptions({
+  name: 'HtmlPreviewIframe',
+  inheritAttrs: true,
+})
+
+const props = withDefaults(
+  defineProps<{
+    html: string
+    title: string
+    minHeight?: number
+  }>(),
+  { minHeight: 0 },
+)
+
+const iframeRef = useTemplateRef<HTMLIFrameElement>('iframe')
+const measuredHeight = ref(0)
+
+const heightStyle = computed(() => {
+  if (!measuredHeight.value) return `${props.minHeight}px`
+  return `${Math.max(measuredHeight.value + 2, props.minHeight)}px`
+})
+
+function fitToContent() {
+  const doc = iframeRef.value?.contentDocument
+  if (!doc) return
+  measuredHeight.value = doc.documentElement.scrollHeight || doc.body?.scrollHeight || 0
+}
+
+let stopObserver: (() => void) | undefined
+
+function observeContent() {
+  stopObserver?.()
+  const doc = iframeRef.value?.contentDocument
+  if (!doc?.documentElement) return
+  const { stop } = useResizeObserver(doc.documentElement, () => fitToContent())
+  stopObserver = stop
+}
+
+function onLoad() {
+  fitToContent()
+  observeContent()
+}
+
+watch(
+  () => props.html,
+  () => {
+    measuredHeight.value = 0
+  },
+)
+
+onBeforeUnmount(() => {
+  stopObserver?.()
+})
+</script>
+
+<template>
+  <iframe
+    ref="iframe"
+    :srcdoc="html"
+    :title="title"
+    sandbox="allow-same-origin"
+    :style="{ height: heightStyle }"
+    @load="onLoad"
+  />
+</template>

package/app/components/Common/IncompleteTranslationsDialog.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { LanguageFromDb } from '@dev.smartpricing/message-composer-utils/types'
+
+interface Props {
+  incompleteLanguages: Array<{ language: LanguageFromDb; percentage: number }>
+}
+
+const props = defineProps<Props>()
+
+const isOpen = defineModel<boolean>('modelValue', { required: true })
+
+const emit = defineEmits<{
+  saveWithoutTranslating: []
+  translateAndSave: []
+  goToTranslations: []
+}>()
+
+const handleSaveWithoutTranslating = () => {
+  emit('saveWithoutTranslating')
+  isOpen.value = false
+}
+
+const handleTranslateAndSave = () => {
+  emit('translateAndSave')
+  isOpen.value = false
+}
+
+const handleGoToTranslations = () => {
+  emit('goToTranslations')
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="isOpen"
+    :title="$t('dialogs.incomplete_translations.title')"
+    close-icon="ph:x"
+    :close="{
+      onClick: handleGoToTranslations,
+      'data-testid': incompleteTranslationsDialogTestIds.modalCloseButton,
+    }"
+    dismissible
+    :data-testid="incompleteTranslationsDialogTestIds.modal"
+  >
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <!-- Warning message -->
+        <p
+          class="text-sm text-muted"
+          :data-testid="incompleteTranslationsDialogTestIds.description"
+        >
+          {{ $t('dialogs.incomplete_translations.description') }}
+        </p>
+
+        <!-- Info note -->
+        <UAlert
+          icon="ph:info"
+          variant="soft"
+          color="neutral"
+          :description="$t('dialogs.incomplete_translations.note')"
+          :data-testid="incompleteTranslationsDialogTestIds.noteAlert"
+        />
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex gap-2 justify-between w-full">
+        <UButton
+          variant="link"
+          color="neutral"
+          @click="handleGoToTranslations"
+          :data-testid="incompleteTranslationsDialogTestIds.goToTranslationsButton"
+        >
+          {{ $t('dialogs.incomplete_translations.go_to_translations') }}
+        </UButton>
+        <div class="flex gap-2">
+          <UButton
+            variant="outline"
+            color="neutral"
+            @click="handleSaveWithoutTranslating"
+            :data-testid="incompleteTranslationsDialogTestIds.cancelButton"
+          >
+            {{ $t('common.actions.cancel') }}
+          </UButton>
+          <UButton
+            color="primary"
+            @click="handleTranslateAndSave"
+            :data-testid="incompleteTranslationsDialogTestIds.translateAndSaveButton"
+          >
+            {{ $t('dialogs.incomplete_translations.translate_and_save') }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/Common/LanguageList.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="w-[280px]" :data-testid="languageListTestIds.root">
+    <div class="flex justify-between items-center p-4">
+      <h3 class="label-lg">
+        {{ $t('editor.languages.title') }}
+      </h3>
+
+      <UPopover :data-testid="languageListTestIds.addPopover">
+        <UButton
+          color="primary"
+          variant="ghost"
+          trailing-icon="ph:caret-down"
+          size="sm"
+          square
+          :data-testid="languageListTestIds.addButton"
+        >
+          {{ $t('editor.languages.add') }}
+        </UButton>
+
+        <template #content>
+          <UCommandPalette
+            default-value=""
+            @update:model-value="addLanguage($event.value)"
+            :placeholder="$t('common.search')"
+            :groups="languageGroups"
+            :data-testid="languageListTestIds.commandPalette"
+          />
+        </template>
+      </UPopover>
+    </div>
+    <div
+      class="px-4 py-2.5 cursor-pointer w-full hover:bg-secondary-100 flex justify-between items-center"
+      :class="{
+        'bg-secondary-50': lang.id === language,
+      }"
+      v-for="lang in grouped.used"
+      :key="lang.id"
+      @click="language = lang.id"
+      :data-testid="`${languageListTestIds.languageItem}-${lang.id}`"
+    >
+      <div class="flex flex-col gap-0.5">
+        <p class="paragraph-sm">
+          {{ lang.name }}
+        </p>
+        <div class="flex items-center gap-1.5">
+          <span class="paragraph-xs">
+            {{
+              t('language_list.translated_percentage', {
+                percentage: getTranslationPercentage(lang.id),
+              })
+            }}
+          </span>
+          <Icon
+            v-if="getTranslationPercentage(lang.id) === 100"
+            name="ph:check-circle-fill"
+            class="text-success-500 w-4 h-4"
+          />
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <div v-if="hasLanguageChanges(lang.id)" class="flex items-center gap-1.5">
+          <Icon name="ph:arrow-clockwise" class="text-warning-700 w-4 h-4" />
+          <span class="paragraph-sm text-warning-700">
+            {{ getLanguageChangeCount(lang.id) }}
+            {{
+              getLanguageChangeCount(lang.id) === 1
+                ? t('language_list.change')
+                : t('language_list.changes')
+            }}
+          </span>
+        </div>
+        <UButton
+          size="sm"
+          :disabled="grouped.used.length <= 1 || lang.id === 'en' || lang.id === mainLanguageId"
+          @click.stop="messages[lang.id] && askDeleteMessage(messages[lang.id]!)"
+          color="primary"
+          variant="ghost"
+          icon="ph:trash"
+          :data-testid="`${languageListTestIds.deleteButton}-${lang.id}`"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLanguagesQuery } from '~/queries'
+import type {
+  LanguageFromDb,
+  Message,
+  PostEntity,
+  RenderType,
+  WhatsappMessage,
+  EmailMessage,
+} from '@dev.smartpricing/message-composer-utils/types'
+import {
+  getWhatsappEmpty,
+  calculateWhatsappTranslationPercentage,
+  getEmailEmpty,
+  duplicateBlocksForNewLanguage,
+  calculateEmailTranslationPercentage,
+} from '@dev.smartpricing/message-composer-utils/utils'
+import { ref, computed } from 'vue'
+import { useDeleteMessageMutation } from '~/queries'
+import { useAppContextStore } from '@/stores/appContext'
+
+const { data: languages } = useLanguagesQuery()
+const appContext = useAppContextStore()
+
+const { confirm } = useConfirm()
+const { mutateAsync: deleteMessageMutation } = useDeleteMessageMutation()
+
+const grouped = computed(() => {
+  const result: { available: LanguageFromDb[]; used: LanguageFromDb[] } = {
+    available: [],
+    used: [],
+  }
+  if (!languages.value) return result
+
+  for (const lang of languages.value) {
+    if (Object.keys(messages.value).includes(lang.id)) {
+      result.used.push(lang)
+    } else {
+      result.available.push(lang)
+    }
+  }
+
+  return result
+})
+
+const availableLanguages = computed(() => {
+  if (!languages.value) return { recommended: [], others: [] }
+
+  const used = Object.keys(messages.value)
+  const unused = languages.value.filter((lang) => !used.includes(lang.id))
+
+  const recommended = unused.filter((lang) => appContext.languages.includes(lang.id))
+  const others = unused.filter((lang) => !appContext.languages.includes(lang.id))
+
+  return { recommended, others }
+})
+
+const { t } = useI18n()
+
+const languageGroups = computed(() => {
+  const groups = []
+
+  if (availableLanguages.value.recommended.length > 0) {
+    groups.push({
+      id: 'recommended',
+      label: t('editor.languages.recommended'),
+      items: availableLanguages.value.recommended.map((lang) => ({
+        value: lang.id,
+        label: lang.name,
+      })),
+    })
+  }
+
+  if (availableLanguages.value.others.length > 0) {
+    groups.push({
+      id: 'all',
+      label: t('editor.languages.all_languages'),
+      items: availableLanguages.value.others.map((lang) => ({
+        value: lang.id,
+        label: lang.name,
+      })),
+    })
+  }
+
+  return groups
+})
+
+const props = defineProps<{
+  renderType: RenderType
+  messageGroupId?: string | number
+  mainLanguageId: string
+}>()
+
+// Initialize change tracking if messageGroupId is provided
+const changeTracking = props.messageGroupId ? useChangeTracking(props.messageGroupId) : null
+const changeTrackingEmail = props.messageGroupId
+  ? useChangeTrackingEmail(props.messageGroupId)
+  : null
+
+const messages = defineModel<Record<string, PostEntity<Message>>>('messages', {
+  required: true,
+})
+
+function askDeleteMessage(message: Message | PostEntity<Message>) {
+  const languageId = message.language_id
+
+  confirm({
+    title: t('dialogs.delete_message.title'),
+    message: t('dialogs.delete_message.message', { name: message.language_id }),
+    destructive: true,
+    confirmLabel: t('common.actions.delete'),
+    cancelLabel: t('common.actions.cancel'),
+    action: async () => {
+      if ('id' in message && 'message_group_id' in message) {
+        await deleteMessageMutation({
+          id: message.id,
+          messageGroupId: message.message_group_id,
+        })
+      }
+      useToast().add({
+        title: t('common.success'),
+        description: t('dialogs.delete_message.success', { name: message.language_id }),
+        color: 'success',
+      })
+      delete messages.value[message.language_id]
+      if (language.value === message.language_id) {
+        language.value = grouped.value.used.at(0)?.id as string
+      }
+      emit('removeLanguage', languageId)
+    },
+  })
+}
+
+const language = defineModel<string>('language', {
+  required: true,
+})
+
+const emit = defineEmits<{
+  addLanguage: [languageId: string]
+  removeLanguage: [languageId: string]
+}>()
+
+// Helper functions for change tracking
+function hasLanguageChanges(languageId: string): boolean {
+  const message = messages.value[languageId]
+  if (!message) return false
+
+  if (message.render_type === 'whatsapp_v1' && changeTracking) {
+    return changeTracking.hasChanges(languageId, message as WhatsappMessage)
+  }
+  if (message.render_type === 'email_v1' && changeTrackingEmail) {
+    return changeTrackingEmail.hasChanges(languageId, message as EmailMessage)
+  }
+  return false
+}
+
+function getLanguageChangeCount(languageId: string): number {
+  const message = messages.value[languageId]
+  if (!message) return 0
+
+  if (message.render_type === 'whatsapp_v1' && changeTracking) {
+    return changeTracking.getChangeCount(languageId, message as WhatsappMessage)
+  }
+  if (message.render_type === 'email_v1' && changeTrackingEmail) {
+    return changeTrackingEmail.getChangeCount(languageId, message as EmailMessage)
+  }
+  return 0
+}
+
+function addLanguage(_language: string) {
+  switch (props.renderType) {
+    case 'whatsapp_v1': {
+      const newMessage = getWhatsappEmpty(_language)
+
+      // Copy structure from base message (main language)
+      const baseMessage = messages.value[props.mainLanguageId]
+      if (baseMessage && baseMessage.render_type === 'whatsapp_v1') {
+        const whatsappBase = baseMessage as PostEntity<WhatsappMessage>
+
+        // Copy header structure
+        if (whatsappBase.body.header.type === 'text') {
+          newMessage.body.header = {
+            type: 'text',
+            content: undefined,
+          }
+        } else if (whatsappBase.body.header.type !== 'none') {
+          // Copy media header as-is (editable per-language in translations)
+          newMessage.body.header = { ...whatsappBase.body.header }
+        }
+
+        // Copy footer enabled state
+        if (whatsappBase.body.footer.enabled) {
+          newMessage.body.footer = {
+            enabled: true,
+            content: '',
+          }
+        }
+
+        // Copy button structure
+        if (whatsappBase.body.buttons?.buttons) {
+          newMessage.body.buttons.buttons = whatsappBase.body.buttons.buttons.map((btn: any) => ({
+            ...btn,
+            text: '',
+          }))
+          newMessage.body.buttons.enabled = whatsappBase.body.buttons.enabled
+        }
+      }
+
+      messages.value[_language] = newMessage
+
+      // Record original state for the new language in change tracker
+      if (changeTracking) {
+        changeTracking.recordOriginalState(_language, newMessage as WhatsappMessage)
+      }
+
+      break
+    }
+    case 'email_v1': {
+      const newMessage = getEmailEmpty(_language)
+
+      // Copy structure from base message (main language)
+      const baseMessage = messages.value[props.mainLanguageId]
+      if (baseMessage && baseMessage.render_type === 'email_v1') {
+        const emailBase = baseMessage as PostEntity<EmailMessage>
+
+        // Duplicate blocks with new UUIDs and clear translatable content
+        newMessage.body.blocks = duplicateBlocksForNewLanguage(emailBase.body.blocks)
+        // Copy global settings (colors, fonts, etc.)
+        newMessage.body.settings = { ...emailBase.body.settings }
+        // Clear subject line (translatable)
+        newMessage.body.subject = ''
+      }
+
+      messages.value[_language] = newMessage
+
+      // Record original state for the new language in change tracker
+      if (changeTrackingEmail) {
+        changeTrackingEmail.recordOriginalState(_language, newMessage as EmailMessage)
+      }
+
+      break
+    }
+  }
+  language.value = _language
+  emit('addLanguage', _language)
+}
+
+function getTranslationPercentage(languageId: string): number {
+  const message = messages.value[languageId]
+  if (!message) return 0
+
+  // Use the first message as base language for comparison
+  const baseMessage = messages.value[props.mainLanguageId]
+  if (!baseMessage) return 0
+
+  switch (message.render_type) {
+    case 'whatsapp_v1':
+      return calculateWhatsappTranslationPercentage(
+        message as PostEntity<WhatsappMessage>,
+        baseMessage as PostEntity<WhatsappMessage>,
+      )
+    case 'email_v1':
+      return calculateEmailTranslationPercentage(
+        message as PostEntity<EmailMessage>,
+        baseMessage as PostEntity<EmailMessage>,
+      )
+    default:
+      return 0
+  }
+}
+</script>

package/app/components/Common/LoadingOverlay.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="fixed isolate z-[9999] inset-0 bg-white/50 flex items-center justify-center backdrop-blur-[2px]"
+      :data-testid="loadingOverlayTestIds.root"
+    >
+      <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900"></div>
+    </div>
+  </Teleport>
+</template>