@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import {
+  WA_BUTTON_TEXT_MAX_LENGTH,
+  type WaButtonV1,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { useI18n } from 'vue-i18n'
+import PhoneInput from '~/components/Common/PhoneInput.vue'
+import { z } from 'zod'
+import {
+  VALID_PHONE_NUMBER_REGEX,
+  VALID_URL_REGEX,
+} from '@dev.smartpricing/message-composer-utils/utils'
+
+defineOptions({
+  name: 'WhatsappTranslatorButtons',
+})
+
+const { baseButtons } = defineProps<{
+  baseButtons: WaButtonV1[]
+}>()
+
+const targetButtons = defineModel<WaButtonV1[]>({
+  required: true,
+})
+
+const { t } = useI18n()
+
+const { copy } = useClipboard()
+
+async function copyToClipboard(text: string) {
+  try {
+    await copy(text)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+
+// Validation schemas
+const buttonTextSchema = z.object({
+  text: z.string().max(WA_BUTTON_TEXT_MAX_LENGTH, {
+    message: t('editor.validation.error.textTooLong'),
+  }),
+})
+
+const phoneButtonSchema = z.object({
+  phoneNumber: z
+    .string()
+    .regex(VALID_PHONE_NUMBER_REGEX, { message: t('editor.validation.error.phoneInvalid') }),
+})
+
+const linkButtonSchema = z.object({
+  url: z.string().regex(VALID_URL_REGEX, { message: t('editor.validation.error.urlInvalid') }),
+})
+</script>
+
+<template>
+  <div
+    class="space-y-3 divide-y divide-muted"
+    :data-testid="whatsappTranslatorButtonTestIds.container"
+  >
+    <!-- Loop through all buttons -->
+    <div
+      v-for="(button, index) in baseButtons"
+      :key="button.id"
+      class="space-y-2 pb-3 last:pb-0"
+      :data-testid="`${whatsappTranslatorButtonTestIds.buttonItem}-${button.id}`"
+    >
+      <!-- Button text field -->
+      <div class="flex gap-8 items-start">
+        <!-- Base language preview (read-only) -->
+        <div class="flex-1 min-w-0">
+          <div class="paragraph-sm text-primary-700 break-words">
+            {{ button.text }}
+          </div>
+        </div>
+
+        <!-- Translation editor (editable) -->
+        <div v-if="targetButtons[index]" class="flex-1 min-w-0 flex gap-2 items-start">
+          <div class="flex-1">
+            <UForm
+              :schema="buttonTextSchema"
+              :state="targetButtons[index]"
+              :validate-on="['blur', 'change']"
+            >
+              <UFormField
+                name="text"
+                :data-testid="`${whatsappTranslatorButtonTestIds.textField}-${button.id}`"
+              >
+                <UInput
+                  v-model="targetButtons[index].text"
+                  :placeholder="$t('editor.whatsapp.translations.placeholder')"
+                  :maxlength="WA_BUTTON_TEXT_MAX_LENGTH"
+                  :aria-describedby="`character-count-${index}`"
+                  :ui="{ trailing: 'pointer-events-none' }"
+                  :data-testid="`${whatsappTranslatorButtonTestIds.textInput}-${button.id}`"
+                >
+                  <template #trailing>
+                    <div
+                      :id="`character-count-${index}`"
+                      class="text-xs text-muted tabular-nums"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      {{ targetButtons[index].text.length }}/{{ WA_BUTTON_TEXT_MAX_LENGTH }}
+                    </div>
+                  </template>
+                </UInput>
+              </UFormField>
+            </UForm>
+          </div>
+
+          <slot name="actions" />
+        </div>
+      </div>
+
+      <!-- Button URL field (for link buttons) -->
+      <div
+        v-if="button.type === 'link' && 'url' in button && baseButtons[index]"
+        class="flex gap-8 items-start"
+      >
+        <!-- Base language preview (read-only) with copy button -->
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2 paragraph-sm text-primary-700">
+            <span class="break-all">{{ button.url }}</span>
+            <UButton
+              color="primary"
+              variant="ghost"
+              icon="ph:copy"
+              size="xs"
+              @click="copyToClipboard(button.url || '')"
+              :data-testid="`${whatsappTranslatorButtonTestIds.copyUrlButton}-${button.id}`"
+            />
+          </div>
+        </div>
+
+        <!-- Translation editor (editable) - no auto-translate for URLs -->
+        <div class="flex-1 min-w-0 flex gap-2 items-start">
+          <div class="flex-1">
+            <UForm
+              v-if="button.type === 'link'"
+              :schema="linkButtonSchema"
+              :state="targetButtons[index]"
+              :validate-on="['blur']"
+            >
+              <UFormField
+                name="url"
+                :data-testid="`${whatsappTranslatorButtonTestIds.urlField}-${button.id}`"
+              >
+                <UInput
+                  v-model="(targetButtons[index] as any).url"
+                  :placeholder="$t('editor.whatsapp.translations.placeholder')"
+                  :data-testid="`${whatsappTranslatorButtonTestIds.urlInput}-${button.id}`"
+                />
+              </UFormField>
+            </UForm>
+          </div>
+          <!-- Empty space to align with text field above -->
+          <!-- <div class="w-[40px]"></div> -->
+        </div>
+      </div>
+      <!-- Button Phone Number field (for phone buttons) -->
+      <div
+        v-if="button.type === 'phone' && 'phoneNumber' in button && baseButtons[index]"
+        class="flex gap-8 items-start"
+      >
+        <!-- Base language preview (read-only) with copy button -->
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2 paragraph-sm text-primary-700">
+            <span class="break-all">{{ button.phoneNumber }}</span>
+            <UButton
+              color="primary"
+              variant="ghost"
+              icon="ph:copy"
+              size="xs"
+              @click="copyToClipboard(button.phoneNumber || '')"
+              :data-testid="`${whatsappTranslatorButtonTestIds.copyPhoneButton}-${button.id}`"
+            />
+          </div>
+        </div>
+
+        <!-- Translation editor (editable) - no auto-translate for phone numbers -->
+        <div class="flex-1 min-w-0 flex gap-2 items-start">
+          <div class="flex-1">
+            <UForm
+              v-if="button.type === 'phone'"
+              :schema="phoneButtonSchema"
+              :state="targetButtons[index]"
+              :validate-on="['blur']"
+            >
+              <UFormField
+                name="phoneNumber"
+                :data-testid="`${whatsappTranslatorButtonTestIds.phoneField}-${button.id}`"
+              >
+                <PhoneInput
+                  class="w-full"
+                  v-model="(targetButtons[index] as any).phoneNumber"
+                  default-prefix="39"
+                  :data-testid="`${whatsappTranslatorButtonTestIds.phoneInput}-${button.id}`"
+                />
+              </UFormField>
+            </UForm>
+          </div>
+          <!-- Empty space to align with text field above -->
+          <!-- <div class="w-[40px]"></div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { WA_FOOTER_MAX_LENGTH } from '@dev.smartpricing/message-composer-utils/types'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+  name: 'WhatsappTranslatorFooter',
+})
+
+const { baseContent } = defineProps<{
+  baseContent: string | undefined
+}>()
+
+const targetContent = defineModel<string>({
+  required: true,
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex gap-8 items-start" :data-testid="whatsappTranslatorFooterTestIds.container">
+    <!-- Base language preview (read-only) -->
+    <div class="flex-1 min-w-0" :data-testid="whatsappTranslatorFooterTestIds.basePreview">
+      <div class="paragraph-sm text-primary-700 break-words">
+        {{ baseContent }}
+      </div>
+    </div>
+
+    <!-- Translation editor (editable) -->
+    <div class="flex-1 min-w-0 flex gap-2 items-start">
+      <div class="flex-1">
+        <UInput
+          v-model="targetContent"
+          :maxlength="WA_FOOTER_MAX_LENGTH"
+          :placeholder="$t('editor.whatsapp.translations.placeholder')"
+          aria-describedby="character-count"
+          :ui="{ trailing: 'pointer-events-none' }"
+          :data-testid="whatsappTranslatorFooterTestIds.targetInput"
+        >
+          <template #trailing>
+            <div
+              id="character-count"
+              class="text-xs text-muted tabular-nums"
+              aria-live="polite"
+              role="status"
+            >
+              {{ targetContent?.length }}/{{ WA_FOOTER_MAX_LENGTH }}
+            </div>
+          </template>
+        </UInput>
+      </div>
+
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/app/components/Whatsapp/Translator/Header.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_HEADER_TEXT_MAX_LENGTH } from '@dev.smartpricing/message-composer-utils/types'
+
+defineOptions({
+  name: 'WhatsappTranslatorHeader',
+})
+
+const { baseContent } = defineProps<{
+  baseContent: JSONContent | undefined
+}>()
+
+const targetContent = defineModel<JSONContent | undefined>({
+  required: true,
+})
+
+const appContext = useAppContextStore()
+
+// Generate HTML for preview of base language with rich text support
+function generatePreviewHtml(content: JSONContent | undefined): string {
+  if (!content) return ''
+  return generateHTML(content, getTipTapExtensions({ preset: 'whatsapp-header' })).replaceAll(
+    '<p></p>',
+    '<p>&nbsp;</p>',
+  )
+}
+</script>
+
+<template>
+  <div class="flex gap-8 items-start" :data-testid="whatsappTranslatorHeaderTestIds.container">
+    <!-- Base language preview (read-only) -->
+    <div class="flex-1 min-w-0" :data-testid="whatsappTranslatorHeaderTestIds.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"
+          bold
+          italic
+          emoji
+          dynamic-values
+          :character-limit="WA_HEADER_TEXT_MAX_LENGTH"
+          :data-testid="whatsappTranslatorHeaderTestIds.targetEditor"
+        />
+      </div>
+
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { MediaFromDb, WaHeaderTypeV1Url } from '@dev.smartpricing/message-composer-utils/types'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import MediaUploadOrSelect from '@/components/Common/MediaUploadOrSelect.vue'
+
+defineOptions({
+  name: 'WhatsappTranslatorHeaderMedia',
+})
+
+const { baseHeader } = defineProps<{
+  baseHeader: WaHeaderTypeV1Url
+}>()
+
+const model = defineModel<WaHeaderTypeV1Url>({ required: true })
+
+const { t } = useI18n()
+
+const isCustom = computed(() => model.value.url !== baseHeader.url)
+
+function getBasename(url: string): string {
+  if (!url) return ''
+  try {
+    return decodeURIComponent(url.split('/').pop() || url)
+  } catch {
+    return url.split('/').pop() || url
+  }
+}
+
+function handleMediaSelected(media: MediaFromDb) {
+  model.value = {
+    ...model.value,
+    url: media.remote_url,
+    metaMediaId: media.meta_handle_id ?? '',
+  }
+}
+
+function resetToMain() {
+  model.value = {
+    ...model.value,
+    url: baseHeader.url,
+    metaMediaId: baseHeader.metaMediaId,
+  }
+}
+
+function clearMedia() {
+  model.value = {
+    ...model.value,
+    url: '',
+    metaMediaId: '',
+  }
+}
+</script>
+
+<template>
+  <div class="flex gap-8 items-start" :data-testid="whatsappTranslatorHeaderMediaTestIds.container">
+    <!-- Base language preview (read-only) -->
+    <div class="flex-1 min-w-0" :data-testid="whatsappTranslatorHeaderMediaTestIds.basePreview">
+      <div v-if="baseHeader.type === 'image' && baseHeader.url" class="max-w-[200px]">
+        <img
+          :src="baseHeader.url"
+          class="rounded border border-muted max-h-[120px] object-contain"
+        />
+      </div>
+      <div v-else-if="baseHeader.url" class="flex items-center gap-2 paragraph-sm text-primary-700">
+        <UIcon
+          :name="baseHeader.type === 'video' ? 'ph:video' : 'ph:file'"
+          class="w-5 h-5 shrink-0"
+        />
+        <span class="truncate">{{ getBasename(baseHeader.url) }}</span>
+      </div>
+      <div v-else class="paragraph-sm text-muted">
+        {{ t('editor.whatsapp.header.types.' + baseHeader.type) }}
+      </div>
+    </div>
+
+    <!-- Translation editor (editable) -->
+    <div class="flex-1 min-w-0">
+      <!-- Upload/Select + actions -->
+      <div class="flex items-center gap-2">
+        <MediaUploadOrSelect
+          :key="model.type"
+          v-model="model.url"
+          :media-type="model.type"
+          class="flex-1"
+          show-preview
+          @media-selected="handleMediaSelected"
+          :data-testid="whatsappTranslatorHeaderMediaTestIds.mediaUpload"
+        >
+          <template #actions>
+            <UButton
+              v-if="model.url"
+              color="error"
+              variant="ghost"
+              icon="ph:trash"
+              @click="clearMedia"
+              :data-testid="whatsappTranslatorHeaderMediaTestIds.clearMediaButton"
+            />
+            <UTooltip
+              :text="t('editor.whatsapp.translator.reset_to_main')"
+              :data-testid="whatsappTranslatorHeaderMediaTestIds.resetTooltip"
+            >
+              <UButton
+                v-if="isCustom"
+                color="warning"
+                variant="ghost"
+                icon="ph:arrow-counter-clockwise-thin"
+                @click="resetToMain"
+                :data-testid="whatsappTranslatorHeaderMediaTestIds.resetButton"
+              />
+            </UTooltip>
+          </template>
+        </MediaUploadOrSelect>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import type { WhatsappMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { computed } from 'vue'
+import Header from './Header.vue'
+import HeaderMedia from './HeaderMedia.vue'
+import Body from './Body.vue'
+import Footer from './Footer.vue'
+import Button from './Button.vue'
+import { getLanguageDisplayName } from '@dev.smartpricing/message-composer-utils/utils'
+
+defineOptions({
+  name: 'WhatsappTranslator',
+})
+
+interface Props {
+  baseMessage: WhatsappMessage | PostEntity<WhatsappMessage>
+  filteredSections?: Array<'header' | 'body' | 'footer' | 'buttons'>
+}
+
+const props = defineProps<Props>()
+
+const targetMessage = defineModel<WhatsappMessage | PostEntity<WhatsappMessage>>('targetMessage', {
+  required: true,
+})
+
+type Section = {
+  title: string
+  component: 'header' | 'body' | 'footer' | 'buttons'
+}
+
+// Compute enabled sections from base message
+const allSections = computed(() => {
+  const result: Section[] = []
+
+  // Header section (text or media)
+  if (props.baseMessage.body.header && props.baseMessage.body.header.type !== 'none') {
+    result.push({
+      title: t('editor.whatsapp.translator.header'),
+      component: 'header',
+    })
+  }
+
+  // Body section (always required)
+  if (props.baseMessage.body.body) {
+    result.push({
+      title: t('editor.whatsapp.translator.body'),
+      component: 'body',
+    })
+  }
+
+  // Footer section
+  if (props.baseMessage.body.footer?.enabled) {
+    result.push({
+      title: t('editor.whatsapp.translator.footer'),
+      component: 'footer',
+    })
+  }
+
+  // Buttons section (all buttons in one section)
+  if (props.baseMessage.body.buttons.buttons && props.baseMessage.body.buttons.buttons.length > 0) {
+    result.push({
+      title: t('editor.whatsapp.translator.button'),
+      component: 'buttons',
+    })
+  }
+
+  return result
+})
+
+// Apply filtering if filteredSections prop is provided
+const sections = computed(() => {
+  if (!props.filteredSections) {
+    return allSections.value
+  }
+
+  return allSections.value.filter((section) => props.filteredSections!.includes(section.component))
+})
+
+const { locale, t } = useI18n()
+</script>
+
+<template>
+  <div class="p-4 space-y-2" :data-testid="whatsappTranslatorIndexTestIds.container">
+    <!-- Translation cards for each section -->
+    <div
+      v-for="(section, sectionIndex) in sections"
+      :key="sectionIndex"
+      class="bg-white border border-muted rounded-lg overflow-hidden"
+      :data-testid="`${whatsappTranslatorIndexTestIds.sectionCard}-${section.component}`"
+    >
+      <!-- Card header with title -->
+      <div class="px-4 py-3 border-b border-muted">
+        <h4 class="label-sm">{{ section.title }}</h4>
+      </div>
+
+      <!-- Card content -->
+      <div class="px-px">
+        <!-- Column headers -->
+        <div class="bg-muted px-4 py-2 flex gap-8">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-1">
+              <p class="label-xs text-primary-700">
+                {{ getLanguageDisplayName(baseMessage.language_id, locale) }}
+              </p>
+            </div>
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-1">
+              <p class="label-xs text-primary-700">
+                {{ getLanguageDisplayName(targetMessage.language_id, locale) }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Content row -->
+        <div class="px-4 py-3" :key="targetMessage.language_id">
+          <!-- Header text translator -->
+          <Header
+            v-if="section.component === 'header' && baseMessage.body.header.type === 'text'"
+            :base-content="baseMessage.body.header.content"
+            v-model="(targetMessage.body.header as any).content"
+          />
+
+          <!-- Header media translator -->
+          <HeaderMedia
+            v-else-if="
+              section.component === 'header' &&
+              ['image', 'video', 'document'].includes(baseMessage.body.header.type)
+            "
+            :base-header="baseMessage.body.header as any"
+            v-model="targetMessage.body.header as any"
+          />
+
+          <!-- Body translator -->
+          <Body
+            v-else-if="section.component === 'body'"
+            :base-content="baseMessage.body.body.content"
+            v-model="targetMessage.body.body.content"
+          />
+
+          <!-- Footer translator -->
+          <Footer
+            v-else-if="section.component === 'footer'"
+            :base-content="baseMessage.body.footer?.content"
+            v-model="targetMessage.body.footer!.content"
+          />
+
+          <!-- Buttons translator (all buttons) -->
+          <Button
+            v-else-if="section.component === 'buttons'"
+            :base-buttons="baseMessage.body.buttons.buttons"
+            v-model="targetMessage.body.buttons.buttons"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/composables/composerContext.ts

@@ -0,0 +1,35 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { AppContextConfig } from '@dev.smartpricing/message-composer-utils/types'
+
+export interface ComposerContext {
+  authenticationToken: Ref<string>
+  owner_id?: Ref<string>
+  product?: Ref<AppContextConfig['product']>
+  strategy?: Ref<AppContextConfig['strategy']>
+  channels?: Ref<AppContextConfig['channels']>
+  languages?: Ref<string[]>
+  mainLanguage?: Ref<string>
+  dinamicValues?: Ref<Array<{ value: string; label: string }>>
+  default_tags?: Ref<string[]>
+  metaWabaId?: Ref<string>
+  metaAccessToken?: Ref<string>
+}
+
+export const COMPOSER_CONTEXT_KEY: InjectionKey<ComposerContext> = Symbol('composer-context')
+
+/** Must be called in parent's app.vue or plugin before layer components render. */
+export function defineComposerContext(context: ComposerContext): void {
+  // Use app-level provide so Pinia stores (which run in their own effectScope) can inject it.
+  useNuxtApp().vueApp.provide(COMPOSER_CONTEXT_KEY, context)
+}
+
+export function useComposerContext(): ComposerContext {
+  const context = inject(COMPOSER_CONTEXT_KEY)
+  if (!context) {
+    throw new Error(
+      '[message-composer] ComposerContext not provided. ' +
+        'Call defineComposerContext() in your app.vue or a plugin before using layer components.',
+    )
+  }
+  return context
+}