@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Common/SectionHeader.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  showReset?: boolean
+}>()
+
+const emit = defineEmits<{
+  reset: []
+}>()
+</script>
+
+<template>
+  <div class="flex items-center justify-between" :data-testid="sectionHeaderTestIds.root">
+    <h4 class="paragraph-md-bold">{{ title }}</h4>
+    <UButton
+      v-if="showReset"
+      size="xs"
+      variant="outline"
+      color="primary"
+      icon="ph:arrow-counter-clockwise"
+      :label="$t('editor.email.common.reset')"
+      @click="emit('reset')"
+      :data-testid="sectionHeaderTestIds.resetButton"
+    />
+  </div>
+</template>

package/app/components/Common/TranslationActionBar.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { Message, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { useDebounceFn } from '@vueuse/core'
+import MessagePreviewSlideover from './MessagePreviewSlideover.vue'
+
+interface Props {
+  messages: Record<string, PostEntity<Message>>
+  currentLanguage: string
+  baseLanguage: string
+  messageGroupId?: string | number
+  isTranslating?: boolean
+  searchQuery?: string
+  showOnlyMissing?: boolean
+  showOnlyChanges?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  searchQuery: '',
+  showOnlyMissing: false,
+  showOnlyChanges: false,
+})
+
+const emit = defineEmits<{
+  'update:searchQuery': [query: string]
+  'update:showOnlyMissing': [enabled: boolean]
+  'update:showOnlyChanges': [enabled: boolean]
+  'auto-translate': []
+  preview: []
+}>()
+
+// Local refs synced with props
+const localSearchQuery = ref(props.searchQuery)
+const localShowOnlyMissing = ref(props.showOnlyMissing)
+const localShowOnlyChanges = ref(props.showOnlyChanges)
+
+// Sync with props when they change
+watch(
+  () => props.searchQuery,
+  (newValue) => {
+    localSearchQuery.value = newValue
+  },
+)
+
+watch(
+  () => props.showOnlyMissing,
+  (newValue) => {
+    localShowOnlyMissing.value = newValue
+  },
+)
+
+watch(
+  () => props.showOnlyChanges,
+  (newValue) => {
+    localShowOnlyChanges.value = newValue
+  },
+)
+
+const debouncedSearch = useDebounceFn((query: string) => {
+  emit('update:searchQuery', query)
+}, 300)
+
+watch(localSearchQuery, (newQuery) => {
+  debouncedSearch(newQuery)
+})
+
+watch(localShowOnlyMissing, (newValue) => {
+  emit('update:showOnlyMissing', newValue)
+})
+
+watch(localShowOnlyChanges, (newValue) => {
+  emit('update:showOnlyChanges', newValue)
+})
+
+const handleAutoTranslate = () => {
+  emit('auto-translate')
+}
+</script>
+
+<template>
+  <div
+    class="sticky top-0 z-10 flex items-center gap-3 p-4 bg-white border-b border-muted"
+    :data-testid="translationActionBarTestIds.root"
+  >
+    <!-- Search Input -->
+    <UInput
+      v-model="localSearchQuery"
+      :placeholder="$t('translation_action_bar.search_placeholder')"
+      trailing-icon="ph:magnifying-glass"
+      size="sm"
+      class="w-60"
+      :data-testid="translationActionBarTestIds.searchInput"
+    >
+    </UInput>
+
+    <!-- Filter Toggles -->
+    <USwitch
+      v-model="localShowOnlyMissing"
+      :label="$t('translation_action_bar.show_missing')"
+      size="sm"
+      :data-testid="translationActionBarTestIds.showMissingSwitch"
+    />
+
+    <USwitch
+      v-model="localShowOnlyChanges"
+      :label="$t('translation_action_bar.show_changes')"
+      size="sm"
+      :data-testid="translationActionBarTestIds.showChangesSwitch"
+    />
+
+    <!-- Action Buttons -->
+    <UButton
+      size="sm"
+      icon="ph:translate"
+      square
+      color="ai"
+      variant="outline"
+      class="ml-auto"
+      @click="handleAutoTranslate"
+      :label="
+        isTranslating
+          ? $t('translation_action_bar.translating')
+          : $t('translation_action_bar.auto_translate_button')
+      "
+      :ui="{
+        label: 'hidden xl:block',
+      }"
+      :loading="isTranslating"
+      :disabled="isTranslating"
+      :data-testid="translationActionBarTestIds.autoTranslateButton"
+    />
+
+    <MessagePreviewSlideover
+      v-if="messages[currentLanguage]"
+      :message="messages[currentLanguage]"
+      @opened="emit('preview')"
+    />
+  </div>
+</template>

package/app/components/Common/ViewLessMore.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :data-testid="viewLessMoreTestIds.root">
+    <div
+      class="overflow-clip duration-300"
+      style="transition-property: height"
+      :class="{
+        'h-0': !open,
+        'h-auto': open,
+      }"
+    >
+      <div v-show="open">
+        <slot />
+      </div>
+    </div>
+
+    <button
+      @click="toggle"
+      class="paragraph-xs text-secondary-700 flex gap-2 items-center"
+      :data-testid="viewLessMoreTestIds.toggleButton"
+    >
+      {{ open ? $t('common.view_less') : $t('common.view_more') }}
+      <UIcon :name="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" class="size-4" />
+    </button>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {}
+
+defineProps<Props>()
+
+const open = ref(false)
+
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+<style scoped></style>

package/app/components/CreateTemplateButton.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const { hasWhatsapp, hasEmail } = useChannels()
+const { t } = useI18n()
+const { trackEvent } = useTracking()
+
+function createTemplate(type: 'whatsapp' | 'email') {
+  trackEvent('message_create', { message_kind: type })
+  router.push(`/template/${type}/create`)
+}
+
+const templateOptions = computed(() => {
+  const options = []
+  if (hasWhatsapp.value) {
+    options.push({
+      label: t('message.render_type.whatsapp_v1'),
+      onSelect: () => createTemplate('whatsapp'),
+    })
+  }
+  if (hasEmail.value) {
+    options.push({
+      label: t('message.render_type.email_v1'),
+      onSelect: () => createTemplate('email'),
+    })
+  }
+  return options
+})
+
+const singleChannelType = computed(() => {
+  if (hasWhatsapp.value && !hasEmail.value) return 'whatsapp'
+  if (hasEmail.value && !hasWhatsapp.value) return 'email'
+  return null
+})
+</script>
+
+<template>
+  <UButton
+    v-if="singleChannelType"
+    :label="$t('pages.message_library.add_message_group')"
+    color="primary"
+    :data-testid="homeTestIds.createTemplateButton"
+    @click="createTemplate(singleChannelType)"
+  />
+  <UDropdownMenu
+    v-else
+    :items="templateOptions"
+    :popper="{ placement: 'bottom-end' }"
+    :data-testid="homeTestIds.createTemplateDropdown"
+  >
+    <UButton
+      :label="$t('pages.message_library.add_message_group')"
+      color="primary"
+      :data-testid="homeTestIds.createTemplateButton"
+    />
+  </UDropdownMenu>
+</template>

package/app/components/DynamicDataButton.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+interface DynamicValue {
+  value: string
+  label: string
+}
+
+const props = defineProps<{
+  values: DynamicValue[]
+}>()
+
+const emit = defineEmits<{
+  select: [data: DynamicValue]
+}>()
+
+const isOpen = ref(false)
+
+function onSelectData(value: DynamicValue) {
+  emit('select', value)
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <UButton
+    icon="ph:brackets-curly-thin"
+    color="primary"
+    variant="ghost"
+    :data-testid="dynamicDataButtonTestIds.triggerButton"
+    @click="isOpen = true"
+  />
+
+  <UModal
+    v-model:open="isOpen"
+    :title="$t('modals.dynamic_data_modal.title')"
+    close-icon="ph:x"
+    :close="{ 'data-testid': dynamicDataButtonTestIds.modalCloseButton }"
+    :data-testid="dynamicDataButtonTestIds.modal"
+  >
+    <template #body>
+      <p class="text-sm text-primary-800 pb-4" :data-testid="dynamicDataButtonTestIds.description">
+        {{ $t('modals.dynamic_data_modal.description') }}
+      </p>
+
+      <p
+        class="text-xs font-bold text-primary-800 pb-2"
+        :data-testid="dynamicDataButtonTestIds.selectValueLabel"
+      >
+        {{ $t('modals.dynamic_data_modal.select_value') }}
+      </p>
+
+      <div
+        class="flex flex-col divide-y divide-gray-200 rounded-sm border border-gray-200"
+        :data-testid="dynamicDataButtonTestIds.valueList"
+      >
+        <div
+          v-for="(value, index) in props.values"
+          :key="index"
+          class="px-4 py-2.5 cursor-pointer hover:bg-primary-100"
+          :data-testid="`${dynamicDataButtonTestIds.valueItem}-${value.value}`"
+          @click="onSelectData(value)"
+        >
+          <p class="text-sm text-gray-900 pb-1">
+            {{ value.label }}
+          </p>
+          <p
+            class="text-xs text-primary-800"
+            v-html="$t('modals.dynamic_data_modal.will_display', { value: value.value })"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/DynamicDataSlideover.vue

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import type { ListboxItem, TabsItem } from '#ui/types'
+import type { DynamicValueField } from '@dev.smartpricing/message-composer-utils/types'
+import { useDynamicValuesQuery } from '~/queries'
+
+const props = defineProps<{
+  defaultContext?: string
+}>()
+
+const emit = defineEmits<{
+  select: [data: { value: string; label: string }]
+}>()
+
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const { data, isLoading } = useDynamicValuesQuery()
+
+const contextKeys = computed(() => (data.value ? Object.keys(data.value) : []))
+const hasMultipleContexts = computed(() => contextKeys.value.length > 1)
+
+const activeTab = ref<string | number>('')
+
+// Pre-select tab when data loads
+watch(
+  [data, () => props.defaultContext],
+  () => {
+    if (!data.value) return
+    if (props.defaultContext && contextKeys.value.includes(props.defaultContext)) {
+      activeTab.value = props.defaultContext
+    } else if (contextKeys.value.length > 0) {
+      activeTab.value = contextKeys.value[0]
+    }
+  },
+  { immediate: true },
+)
+
+const { t } = useI18n()
+
+const tabItems = computed<TabsItem[]>(() =>
+  contextKeys.value.map((key) => ({
+    label: t(`modals.dynamic_data_modal.tabs.${key}`),
+    value: key,
+  })),
+)
+
+const activeContextKey = computed(() => {
+  const tab = String(activeTab.value)
+  return contextKeys.value.includes(tab) ? tab : contextKeys.value[0]
+})
+
+const contextDescriptions = computed(() => {
+  if (!data.value) return []
+  return contextKeys.value
+    .map((key) => ({
+      label: t(`modals.dynamic_data_modal.tabs.${key}`),
+      description: data.value![key]?.description || '',
+    }))
+    .filter((ctx) => ctx.description)
+})
+
+const commandGroups = computed<CommandPaletteGroup<DynamicValueField>[]>(() => {
+  if (!data.value || !activeContextKey.value) return []
+
+  const fields = data.value[activeContextKey.value]?.fields || []
+  return [
+    {
+      id: activeContextKey.value,
+      items: fields.map((field) => ({
+        ...field,
+        onSelect: () => {
+          emit('select', { value: field.value, label: field.value })
+          isOpen.value = false
+        },
+      })),
+    },
+  ]
+})
+</script>
+<template>
+  <USlideover
+    v-model:open="isOpen"
+    :title="$t('modals.dynamic_data_modal.title')"
+    side="right"
+    :close="{ 'data-testid': dynamicDataSlideoverTestIds.closeButton }"
+    :ui="{ content: 'max-w-2xl', body: 'sm:p-0 p-0 flex flex-col', footer: 'justify-end' }"
+    :data-testid="dynamicDataSlideoverTestIds.slideover"
+  >
+    <UButton icon="ph:brackets-curly-thin" color="primary" variant="ghost" size="sm" />
+
+    <template #actions>
+      <UPopover>
+        <UButton
+          icon="i-lucide-info"
+          variant="ghost"
+          size="sm"
+          color="neutral"
+          :data-testid="dynamicDataSlideoverTestIds.infoButton"
+        />
+        <template #content>
+          <div class="p-4 max-w-xs space-y-3">
+            <p class="text-sm text-default">{{ $t('modals.dynamic_data_modal.info') }}</p>
+            <dl v-if="contextDescriptions.length > 0" class="space-y-2">
+              <div v-for="ctx in contextDescriptions" :key="ctx.label">
+                <dt class="text-sm font-medium text-default">{{ ctx.label }}</dt>
+                <dd class="text-sm text-muted">{{ ctx.description }}</dd>
+              </div>
+            </dl>
+          </div>
+        </template>
+      </UPopover>
+    </template>
+
+    <template #body>
+      <div v-if="isLoading" class="flex items-center justify-center py-8">
+        <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin text-muted" />
+      </div>
+
+      <template v-else-if="data && contextKeys.length > 0">
+        <UTabs
+          v-if="hasMultipleContexts"
+          v-model="activeTab"
+          :items="tabItems"
+          :content="false"
+          variant="link"
+          :data-testid="dynamicDataSlideoverTestIds.tabs"
+        />
+        <UCommandPalette
+          :groups="commandGroups"
+          :placeholder="$t('modals.dynamic_data_modal.search_placeholder')"
+          :fuse="{
+            resultLimit: 100,
+            fuseOptions: {
+              keys: [
+                { name: 'label', weight: 2 },
+                { name: 'description', weight: 1 },
+              ],
+            },
+          }"
+          class="flex-1"
+          :data-testid="dynamicDataSlideoverTestIds.listbox"
+        />
+      </template>
+
+      <div v-else class="text-sm text-muted py-8 text-center">
+        {{ $t('modals.dynamic_data_modal.no_values') }}
+      </div>
+    </template>
+  </USlideover>
+</template>