@dev.smartpricing/message-composer-layer 1.0.2 → 1.0.4

package/app/components/Common/PreviewById.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { EmailMessage, WhatsappMessage } from '@dev.smartpricing/message-composer-utils/types'
+import { useMessageGroupQuery } from '~/queries/messageGroups'
+
+defineOptions({ name: 'PreviewById' })
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    showSubject?: boolean
+    view?: 'desktop' | 'mobile'
+    dynamicData?: Record<string, string>
+    brandId?: string
+  }>(),
+  { showSubject: false, view: 'desktop' },
+)
+
+const { locale } = useI18n()
+const { data: messageGroup, isLoading } = useMessageGroupQuery(() => props.id)
+
+const selectedMessage = computed(() => {
+  if (!messageGroup.value?.messages.length) return undefined
+
+  const msgByLocale = messageGroup.value.messages.find((m) => m.language_id === locale.value)
+  if (msgByLocale) return msgByLocale
+
+  return messageGroup.value.messages[0]
+})
+
+const isWhatsapp = computed(() => selectedMessage.value?.render_type === 'whatsapp_v1')
+const isEmail = computed(() => selectedMessage.value?.render_type === 'email_v1')
+</script>
+
+<template>
+  <div class="flex-1" :data-testid="previewByIdTestIds.root">
+    <div v-if="isLoading" class="space-y-2 p-4" :data-testid="previewByIdTestIds.loading">
+      <USkeleton class="h-6 w-1/3" />
+      <USkeleton class="h-4" />
+      <USkeleton class="h-4 w-5/8" />
+      <USkeleton class="h-32" />
+    </div>
+
+    <EmailPreview
+      v-else-if="isEmail && selectedMessage"
+      :message="selectedMessage as EmailMessage"
+      :message-group-id="id"
+      :show-subject="showSubject"
+      :view="view"
+      :dynamic-data="dynamicData"
+      :brand-id="brandId"
+    />
+
+    <WhatsappPreview
+      v-else-if="isWhatsapp && selectedMessage"
+      :message="selectedMessage as WhatsappMessage"
+      :dynamic-data="dynamicData"
+    />
+  </div>
+</template>

package/app/components/Common/TemplateSelect.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import { useMessageGroupsQuery } from '~/queries/messageGroups'
+
+defineOptions({ name: 'TemplateSelect' })
+
+const props = withDefaults(
+  defineProps<{
+    renderType?: RenderType
+    placeholder?: string
+    searchPlaceholder?: string
+  }>(),
+  {
+    placeholder: 'Select a template',
+    searchPlaceholder: 'Search...',
+  },
+)
+
+const modelValue = defineModel<string>()
+
+const emit = defineEmits<{
+  select: [item: { id: string; name: string }]
+}>()
+
+const { data: messageGroups, isLoading } = useMessageGroupsQuery(() => ({
+  renderType: props.renderType,
+}))
+
+const items = computed(() => {
+  if (!messageGroups.value) return []
+  return messageGroups.value.map((group) => ({
+    label: group.name,
+    value: group.id,
+  }))
+})
+
+function handleUpdate(value: string) {
+  modelValue.value = value
+  const group = messageGroups.value?.find((g) => g.id === value)
+  emit('select', { id: value, name: group?.name ?? '' })
+}
+</script>
+
+<template>
+  <USelectMenu
+    :model-value="modelValue"
+    :items="items"
+    value-key="value"
+    :loading="isLoading"
+    searchable
+    :placeholder="placeholder"
+    :search-input="{ placeholder: searchPlaceholder }"
+    :data-testid="templateSelectTestIds.root"
+    @update:model-value="handleUpdate"
+  />
+</template>

package/app/utils/testIds.const.ts

@@ -726,3 +726,12 @@ export const unsubscribeLinkSettingsTestIds = {
   textColorInput: 'unsubscribe-link-settings-text-color-input',
   backgroundColorInput: 'unsubscribe-link-settings-background-color-input',
 } as const
+
+export const previewByIdTestIds = {
+  root: 'preview-by-id-root',
+  loading: 'preview-by-id-loading',
+} as const
+
+export const templateSelectTestIds = {
+  root: 'template-select-root',
+} as const

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": false,
   "type": "module",
   "files": [
@@ -10,12 +10,24 @@
     "nuxt.config.ts",
     "app.config.ts"
   ],
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "lint": "eslint app/ --fix",
+    "format": "prettier --write app/",
+    "postinstall": "nuxt prepare",
+    "test:e2e": "playwright test",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:ui": "playwright test --ui",
+    "cleanup": "nuxt cleanup && rm -rf node_modules pnpm-lock.yaml"
+  },
   "dependencies": {
     "@formkit/drag-and-drop": "^0.5.3",
     "@nuxtjs/i18n": "^10.3.0",
     "@pinia/colada": "^1.2.1",
     "@pinia/colada-nuxt": "^1.0.0",
     "@pinia/nuxt": "^0.11.3",
+    "@dev.smartpricing/message-composer-utils": "workspace:*",
     "@tiptap/extension-character-count": "^3.22.5",
     "@tiptap/extension-emoji": "^3.22.5",
     "@tiptap/extension-link": "^3.22.5",
@@ -28,17 +40,16 @@
     "@tiptap/vue-3": "^3.22.5",
     "@vueuse/core": "^14.2.1",
     "@vueuse/nuxt": "^14.2.1",
+    "colorthief": "^2.4.0",
     "jwt-decode": "^4.0.0",
     "monaco-editor": "^0.55.1",
-    "colorthief": "^2.4.0",
     "nuxt": "^4.4.2",
     "ofetch": "^1.5.1",
     "typescript": "^6.0.3",
     "vue": "^3.5.33",
     "vue-router": "^5.0.6",
     "vue3-emoji-picker": "^1.1.8",
-    "zod": "^4.4.1",
-    "@dev.smartpricing/message-composer-utils": "3.1.2-layer.0"
+    "zod": "^4.4.1"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",
@@ -49,16 +60,5 @@
   },
   "peerDependencies": {
     "nuxt-ui-layer": ">=1.3.0"
-  },
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "lint": "eslint app/ --fix",
-    "format": "prettier --write app/",
-    "postinstall": "nuxt prepare",
-    "test:e2e": "playwright test",
-    "test:e2e:debug": "playwright test --debug",
-    "test:e2e:ui": "playwright test --ui",
-    "cleanup": "nuxt cleanup && rm -rf node_modules pnpm-lock.yaml"
   }
-}
+}