@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import type {
+  WhatsappMessage,
+  WaButtonV1,
+  HeaderBlockV1,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { toRaw } from 'vue'
+import WhatsappEditor from './Index.vue'
+
+interface Props {
+  /**
+   * All messages by language ID
+   */
+  messages: Record<string, WhatsappMessage>
+  /**
+   * Main language ID to edit
+   */
+  mainLanguageId: string
+}
+
+const props = defineProps<Props>()
+
+const model = defineModel<WhatsappMessage>({ required: true })
+
+/**
+ * Syncs button addition to all other languages
+ */
+function handleButtonAdded(button: WaButtonV1) {
+  for (const langId in props.messages) {
+    if (langId === props.mainLanguageId) continue
+
+    const targetMsg = props.messages[langId]
+    if (!targetMsg?.body?.buttons) continue
+
+    // Check if button already exists
+    const exists = targetMsg.body.buttons.buttons.some((btn) => btn.id === button.id)
+    if (exists) continue
+
+    // Add button with same structure but empty text for translation
+    const newButton: WaButtonV1 = {
+      ...structuredClone(toRaw(button)),
+      text: '', // Empty for translation
+    }
+
+    targetMsg.body.buttons.buttons.push(newButton)
+    targetMsg.body.buttons.enabled = targetMsg.body.buttons.buttons.length > 0
+  }
+}
+
+/**
+ * Syncs button removal to all other languages
+ */
+function handleButtonRemoved(buttonId: string) {
+  for (const langId in props.messages) {
+    if (langId === props.mainLanguageId) continue
+
+    const targetMsg = props.messages[langId]
+    if (!targetMsg?.body?.buttons) continue
+
+    // Remove button by ID
+    targetMsg.body.buttons.buttons = targetMsg.body.buttons.buttons.filter(
+      (btn) => btn.id !== buttonId,
+    )
+    targetMsg.body.buttons.enabled = targetMsg.body.buttons.buttons.length > 0
+  }
+}
+
+/**
+ * Syncs button type change to all other languages
+ */
+function handleButtonTypeChanged(button: WaButtonV1) {
+  for (const langId in props.messages) {
+    if (langId === props.mainLanguageId) continue
+
+    const targetMsg = props.messages[langId]
+    if (!targetMsg?.body?.buttons) continue
+
+    // Find matching button by ID and update type/structure
+    const index = targetMsg.body.buttons.buttons.findIndex((btn) => btn.id === button.id)
+    if (index === -1) continue
+
+    const existingButton = targetMsg.body.buttons.buttons[index]
+    if (!existingButton) continue
+
+    // Update button structure while preserving translated text
+    const updatedButton: WaButtonV1 = {
+      ...structuredClone(toRaw(button)),
+      text: existingButton.text, // Keep translated text
+    }
+
+    targetMsg.body.buttons.buttons.splice(index, 1, updatedButton)
+  }
+}
+
+/**
+ * Syncs header type change to all other languages.
+ * Always overrides target header with correct structure for the new type.
+ */
+function handleHeaderTypeChanged(header: HeaderBlockV1) {
+  for (const langId in props.messages) {
+    if (langId === props.mainLanguageId) continue
+
+    const targetMsg = props.messages[langId]
+    if (!targetMsg?.body) continue
+
+    if (header.type === 'none') {
+      targetMsg.body.header = { type: 'none' }
+    } else if (header.type === 'text') {
+      targetMsg.body.header = { type: 'text', content: undefined }
+    } else {
+      // Media types: copy url and smartchatMediaId from base
+      targetMsg.body.header = structuredClone(toRaw(header))
+    }
+  }
+}
+
+/**
+ * Syncs header media (url/metaMediaId) to all other languages.
+ * Always overrides all languages with the new media.
+ */
+function handleHeaderMediaChanged(payload: { header: HeaderBlockV1; previousUrl: string }) {
+  if (payload.header.type === 'none' || payload.header.type === 'text') return
+
+  for (const langId in props.messages) {
+    if (langId === props.mainLanguageId) continue
+
+    const targetMsg = props.messages[langId]
+    if (!targetMsg?.body?.header) continue
+    if (targetMsg.body.header.type !== payload.header.type) continue
+
+    targetMsg.body.header = structuredClone(toRaw(payload.header))
+  }
+}
+
+/**
+ * Syncs footer enabled state to all other languages
+ */
+function handleFooterEnabledChanged(enabled: boolean) {
+  for (const langId in props.messages) {
+    if (langId === props.mainLanguageId) continue
+
+    const targetMsg = props.messages[langId]
+    if (!targetMsg?.body?.footer) continue
+
+    targetMsg.body.footer.enabled = enabled
+
+    // Clear content when disabled
+    if (!enabled) {
+      targetMsg.body.footer.content = ''
+    }
+  }
+}
+</script>
+
+<template>
+  <WhatsappEditor
+    v-model="model"
+    @button-added="handleButtonAdded"
+    @button-removed="handleButtonRemoved"
+    @button-type-changed="handleButtonTypeChanged"
+    @header-type-changed="handleHeaderTypeChanged"
+    @header-media-changed="handleHeaderMediaChanged"
+    @footer-enabled-changed="handleFooterEnabledChanged"
+    :data-testid="whatsappEditorSyncWrapperTestIds.container"
+  />
+</template>

package/app/components/Whatsapp/Preview.vue

@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import type {
+  PostEntity,
+  WaButtonTypeV1,
+  WhatsappMessage,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { generateHTML } from '@tiptap/vue-3'
+import { computed } from 'vue'
+import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+
+defineOptions({
+  name: 'WhatsappPreview',
+})
+
+const props = defineProps<{
+  message: PostEntity<WhatsappMessage>
+  dynamicData?: Record<string, any>
+}>()
+
+function replaceMentionsWithValues(html: string): string {
+  if (!props.dynamicData) return html
+
+  let replacedHtml = html
+  for (const [key, value] of Object.entries(props.dynamicData)) {
+    const mentionRegex = new RegExp(`{{${key}}}`, 'g')
+    replacedHtml = replacedHtml.replace(mentionRegex, value || `{{${key}}}`)
+  }
+
+  return replacedHtml
+}
+
+const bodyHtml = computed(() => {
+  if (!props.message.body.body.content) return ''
+  const html = generateHTML(
+    props.message.body.body.content,
+    getTipTapExtensions({ preset: 'whatsapp' }),
+  ).replaceAll('<p></p>', '<p>&nbsp;</p>')
+  return replaceMentionsWithValues(html)
+})
+
+const headerHtml = computed(() => {
+  if (props.message.body.header.type !== 'text') return ''
+  if (!props.message.body.header.content) return ''
+  const html = generateHTML(
+    props.message.body.header.content,
+    getTipTapExtensions({ preset: 'whatsapp-header' }),
+  ).replaceAll('<p></p>', '<p>&nbsp;</p>')
+  return replaceMentionsWithValues(html)
+})
+
+const currentTime = computed(() => {
+  const now = new Date()
+  return now.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  })
+})
+
+const hasHeader = computed(() => props.message.body.header.type !== 'none')
+const hasFooter = computed(
+  () => props.message.body.footer.enabled && props.message.body.footer.content,
+)
+const hasButtons = computed(
+  () => props.message.body.buttons.enabled && props.message.body.buttons.buttons.length > 0,
+)
+
+const getIcon = (type: WaButtonTypeV1) => {
+  if (type === 'unsubscribe') return 'ph:arrow-line-up-right'
+  if (type === 'link') return 'ph:arrow-line-up-right'
+  if (type === 'phone') return 'ph:phone-fill'
+  return null
+}
+</script>
+
+<template>
+  <div
+    class="w-full flex flex-col items-center justify-start p-4"
+    :data-testid="whatsappPreviewTestIds.container"
+  >
+    <div
+      class="bg-[#f3edea] rounded border-4 border-transparent p-4 w-full max-w-[306px] min-h-[400px] relative"
+      :data-testid="whatsappPreviewTestIds.chatWindow"
+    >
+      <!-- Chat Bubble Container -->
+      <div class="flex flex-col items-end w-full">
+        <!-- Message Bubble -->
+        <div class="flex items-end justify-start w-full shadow-sm">
+          <!-- Speech Bubble Tail -->
+          <div class="flex items-center justify-center flex-shrink-0">
+            <div class="w-2 h-4 transform rotate-180 scale-y-[-1]">
+              <svg
+                viewBox="0 0 8 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-full h-full"
+              >
+                <path d="M0 0v15c0-8.284 6.716-15 15-15H0z" fill="white" />
+              </svg>
+            </div>
+          </div>
+
+          <!-- Message Content -->
+          <div class="bg-white rounded-md p-1 flex-1 min-w-0">
+            <div class="flex flex-col w-full">
+              <!-- Message Content Section -->
+              <div class="flex flex-col p-1.5 pb-0">
+                <!-- Header Content (if exists) -->
+                <div v-if="hasHeader" class="mb-2" :data-testid="whatsappPreviewTestIds.header">
+                  <div
+                    v-if="message.body.header.type === 'text'"
+                    class="text-sm text-primary-950 break-all"
+                  >
+                    <p v-html="headerHtml" />
+                  </div>
+                  <div v-else-if="message.body.header.type === 'image'" class="mb-2">
+                    <img
+                      v-show="message.body.header.url"
+                      :src="message.body.header.url"
+                      :alt="$t('editor.whatsapp.preview.header_image_alt')"
+                      class="max-w-full h-auto rounded"
+                    />
+                  </div>
+                  <div v-else-if="message.body.header.type === 'video'" class="mb-2">
+                    <video
+                      v-show="message.body.header.url"
+                      :src="message.body.header.url"
+                      controls
+                      class="max-w-full h-auto rounded"
+                    />
+                  </div>
+                  <div v-else-if="message.body.header.type === 'document'" class="mb-2">
+                    <a
+                      v-show="message.body.header.url"
+                      :href="message.body.header.url"
+                      class="text-blue-600 underline text-sm"
+                    >
+                      📎 {{ $t('editor.whatsapp.preview.document_link') }}
+                    </a>
+                  </div>
+                </div>
+
+                <!-- Body Content -->
+                <div
+                  class="text-sm text-primary-950 leading-[18px] break-all"
+                  v-html="bodyHtml"
+                  :data-testid="whatsappPreviewTestIds.body"
+                />
+
+                <!-- Footer Content -->
+                <div
+                  v-if="hasFooter"
+                  class="mt-1 pt-0.5"
+                  :data-testid="whatsappPreviewTestIds.footer"
+                >
+                  <div class="text-sm text-primary-600 leading-[18px]">
+                    {{ message.body.footer.content }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- Timestamp -->
+              <div class="px-1.5 pb-1 pt-2">
+                <div class="text-xs text-primary-600 text-right leading-3">
+                  {{ currentTime }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="hasButtons"
+        class="mt-2 ml-2"
+        :data-testid="whatsappPreviewTestIds.buttonsContainer"
+      >
+        <div class="flex flex-col gap-2">
+          <div
+            v-for="button in message.body.buttons.buttons"
+            :key="button.id"
+            class="p-2 bg-white text-[#0096DE] flex items-center justify-center rounded-md text-sm gap-1"
+            :data-testid="`${whatsappPreviewTestIds.button}-${button.id}`"
+          >
+            <UIcon
+              v-if="getIcon(button.type)"
+              :name="getIcon(button.type) ?? ''"
+              :size="16"
+              class="fill-current"
+            />
+
+            {{ button.text }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Whatsapp/PreviewPanel.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { PostEntity, WhatsappMessage } from '@dev.smartpricing/message-composer-utils/types'
+import WhatsappPreview from './Preview.vue'
+
+defineOptions({
+  name: 'WhatsappPreviewPanel',
+})
+
+defineProps<{
+  message: PostEntity<WhatsappMessage>
+  dynamicData?: Record<string, any>
+}>()
+</script>
+
+<template>
+  <div class="bg-white flex flex-col w-full" :data-testid="whatsappPreviewPanelTestIds.container">
+    <!-- Header Section -->
+    <div class="flex items-center justify-between p-4 pb-0">
+      <h3 class="label-lg">{{ $t('common.preview') }}</h3>
+    </div>
+
+    <WhatsappPreview :message="message" :dynamic-data="dynamicData" />
+  </div>
+</template>

package/app/components/Whatsapp/TranslationEditor.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { WhatsappMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import WhatsappTranslator from '@/components/Whatsapp/Translator/Index.vue'
+import TranslationActionBar from '@/components/Common/TranslationActionBar.vue'
+
+interface Props {
+  baseMessage: WhatsappMessage | PostEntity<WhatsappMessage>
+  messages: Record<string, PostEntity<WhatsappMessage>>
+  currentLanguage: string
+  baseLanguage: string
+  messageGroupId?: string | number
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'auto-translate-tracked': [language: string]
+  preview: [language: string]
+  'filters-changed': [
+    payload: {
+      language: string
+      search_term: string
+      show_only_missing: boolean
+      show_only_changes: boolean
+    },
+  ]
+}>()
+
+const targetMessage = defineModel<WhatsappMessage | PostEntity<WhatsappMessage>>('targetMessage', {
+  required: true,
+})
+
+// Filter states
+const searchQuery = ref('')
+const showOnlyMissing = ref(false)
+const showOnlyChanges = ref(false)
+
+// Auto-translate composable
+const { translateMessage, isTranslating, error } = useAutoTranslate()
+
+// Filters composable
+const messagesRef = computed(() => props.messages)
+const currentLanguageRef = computed(() => props.currentLanguage)
+const baseLanguageRef = computed(() => props.baseLanguage)
+const messageGroupIdRef = computed(() => props.messageGroupId)
+
+const { filteredSections, hasActiveFilters } = useTranslationFilters({
+  messages: messagesRef,
+  currentLanguage: currentLanguageRef,
+  baseLanguage: baseLanguageRef,
+  messageGroupId: messageGroupIdRef,
+  searchQuery,
+  showOnlyMissing,
+  showOnlyChanges,
+})
+
+// Event handlers
+async function handleAutoTranslate() {
+  const baseMsg = props.messages[props.baseLanguage]
+  const targetMsg = props.messages[props.currentLanguage]
+
+  if (!baseMsg || !targetMsg) {
+    return
+  }
+
+  emit('auto-translate-tracked', props.currentLanguage)
+
+  const success = await translateMessage(
+    baseMsg,
+    targetMsg,
+    props.baseLanguage,
+    props.currentLanguage,
+  )
+
+  if (success) {
+    // Success notification will be handled by parent or toast
+    console.log('Translation completed successfully')
+  } else if (error.value) {
+    // Error notification will be handled by parent or toast
+    console.error('Translation failed:', error.value)
+  }
+}
+
+function handlePreview() {
+  emit('preview', props.currentLanguage)
+}
+
+// Emit filters-changed when any filter changes
+watch([searchQuery, showOnlyMissing, showOnlyChanges], () => {
+  emit('filters-changed', {
+    language: props.currentLanguage,
+    search_term: searchQuery.value,
+    show_only_missing: showOnlyMissing.value,
+    show_only_changes: showOnlyChanges.value,
+  })
+})
+
+function clearFilters() {
+  searchQuery.value = ''
+  showOnlyMissing.value = false
+  showOnlyChanges.value = false
+}
+</script>
+
+<template>
+  <div class="flex flex-col relative" :data-testid="whatsappTranslationEditorTestIds.container">
+    <!-- Action Bar -->
+    <TranslationActionBar
+      :messages="messages"
+      :current-language="currentLanguage"
+      :base-language="baseLanguage"
+      :message-group-id="messageGroupId"
+      :is-translating="isTranslating"
+      v-model:search-query="searchQuery"
+      v-model:show-only-missing="showOnlyMissing"
+      v-model:show-only-changes="showOnlyChanges"
+      @auto-translate="handleAutoTranslate"
+      @preview="handlePreview"
+    />
+
+    <!-- Empty State when no sections match filters -->
+    <UEmpty
+      v-if="hasActiveFilters && filteredSections.length === 0"
+      icon="ph:funnel"
+      :title="$t('translation_action_bar.no_sections_found')"
+      :data-testid="whatsappTranslationEditorTestIds.emptyState"
+    >
+      <template #actions>
+        <UButton
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="clearFilters"
+          :data-testid="whatsappTranslationEditorTestIds.clearFiltersButton"
+        >
+          {{ $t('translation_action_bar.clear_filters') }}
+        </UButton>
+      </template>
+    </UEmpty>
+
+    <!-- Translator -->
+    <WhatsappTranslator
+      v-if="!hasActiveFilters || filteredSections.length > 0"
+      :base-message="baseMessage"
+      v-model:target-message="targetMessage"
+      :filtered-sections="hasActiveFilters ? filteredSections : undefined"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,61 @@
+<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 { WA_BODY_MAX_LENGTH } from '@dev.smartpricing/message-composer-utils/types'
+
+defineOptions({
+  name: 'WhatsappTranslatorBody',
+})
+
+const { baseContent } = defineProps<{
+  baseContent: JSONContent | undefined
+}>()
+
+const targetContent = defineModel<JSONContent | undefined>({
+  required: true,
+})
+
+const appContext = useAppContextStore()
+
+// Generate HTML for preview of base language
+function generatePreviewHtml(content: JSONContent | undefined): string {
+  if (!content) return ''
+  return generateHTML(content, getTipTapExtensions({ preset: 'whatsapp' })).replaceAll(
+    '<p></p>',
+    '<p>&nbsp;</p>',
+  )
+}
+</script>
+
+<template>
+  <div class="flex gap-8 items-start" :data-testid="whatsappTranslatorBodyTestIds.container">
+    <!-- Base language preview (read-only) -->
+    <div class="flex-1 min-w-0" :data-testid="whatsappTranslatorBodyTestIds.basePreview">
+      <div
+        class="paragraph-sm text-primary-700 break-words"
+        v-html="generatePreviewHtml(baseContent)"
+      />
+    </div>
+
+    <!-- Translation editor (editable) -->
+    <div class="flex-1 min-w-0 flex gap-2 items-start">
+      <div class="flex-1">
+        <RichTextEditor
+          v-model:text="targetContent"
+          preset="whatsapp"
+          dynamic-values
+          bold
+          italic
+          emoji
+          :character-limit="WA_BODY_MAX_LENGTH"
+          :data-testid="whatsappTranslatorBodyTestIds.targetEditor"
+        />
+      </div>
+
+      <slot name="actions" />
+    </div>
+  </div>
+</template>