@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Common/MediaUploadOrSelect.vue

@@ -0,0 +1,299 @@
+<script lang="ts" setup>
+import type { MediaFromDb, MediaType } from '@dev.smartpricing/message-composer-utils/types'
+import { useMediaQuery, useUploadMediaMutation } from '~/queries'
+
+const props = withDefaults(
+  defineProps<{
+    showPreview?: boolean
+    accept?: string
+    mediaType?: MediaType
+    limitations?: string
+  }>(),
+  {
+    showPreview: false,
+    accept: undefined,
+    mediaType: 'image',
+    limitations: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'media-selected': [media: MediaFromDb]
+}>()
+
+const modelValue = defineModel<string>({
+  required: true,
+})
+
+const { t } = useI18n()
+
+// Media limits (derived from mediaType, overridable via props)
+const {
+  accept: derivedAccept,
+  limitationsText,
+  validateFile,
+} = useMediaLimits(() => props.mediaType!)
+
+const effectiveAccept = computed(() => props.accept ?? derivedAccept.value)
+const effectiveLimitations = computed(() => props.limitations ?? limitationsText.value)
+
+// Media queries
+const { data: mediaList } = useMediaQuery()
+const { mutateAsync: uploadMedia } = useUploadMediaMutation()
+
+// Upload handling
+const mediaFile = ref<File | null>(null)
+const isUploading = ref(false)
+
+async function handleFileUpload() {
+  try {
+    if (!mediaFile.value) return
+    if (!validateFile(mediaFile.value)) {
+      mediaFile.value = null
+      return
+    }
+    isUploading.value = true
+    const response = await uploadMedia(mediaFile.value)
+    if (response) {
+      modelValue.value = response.remote_url
+      emit('media-selected', response)
+    }
+  } finally {
+    isUploading.value = false
+    mediaFile.value = null
+  }
+}
+
+// Media selector
+const searchQuery = ref('')
+
+function matchesAccept(fileType: string): boolean {
+  const patterns = effectiveAccept.value.split(',').map((s) => s.trim())
+  return patterns.some((pattern) => {
+    if (pattern.endsWith('/*')) return fileType.startsWith(pattern.replace('/*', '/'))
+    return fileType === pattern
+  })
+}
+
+const filteredMedia = computed(() => {
+  if (!mediaList.value) return []
+
+  let list = mediaList.value.filter((media) => matchesAccept(media.file_type))
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    list = list.filter((media) => media.file_name.toLowerCase().includes(query))
+  }
+
+  return list
+})
+
+const hasMediaInLibrary = computed(() => {
+  if (!mediaList.value) return false
+  return mediaList.value.some((media) => matchesAccept(media.file_type))
+})
+
+function selectMedia(media: MediaFromDb) {
+  modelValue.value = media.remote_url
+  emit('media-selected', media)
+  open.value = false
+  searchQuery.value = ''
+}
+
+function getBasename(url: string): string {
+  if (!url) return ''
+  try {
+    return decodeURIComponent(url.split('/').pop() || url)
+  } catch {
+    return url.split('/').pop() || url
+  }
+}
+
+defineOptions({
+  name: 'MediaUploadOrSelect',
+})
+
+const open = ref(false)
+
+const uploadLabel = computed(() =>
+  isUploading.value ? t('common.imageUpload.uploading') : t('common.imageUpload.upload'),
+)
+</script>
+
+<template>
+  <div class="space-y-4" :data-testid="mediaUploadTestIds.root">
+    <UAlert
+      v-if="effectiveLimitations"
+      color="neutral"
+      variant="subtle"
+      icon="ph:info"
+      :description="effectiveLimitations"
+      :data-testid="mediaUploadTestIds.limitationsAlert"
+    />
+
+    <!-- Upload Button -->
+    <UFileUpload
+      v-model="mediaFile"
+      :accept="effectiveAccept"
+      :upload-label="uploadLabel"
+      @change="handleFileUpload"
+      :data-testid="mediaUploadTestIds.fileUpload"
+    >
+      <template #file>
+        <USkeleton class="size-full" />
+      </template>
+      <template v-if="$slots.actions" #actions>
+        <slot name="actions" />
+      </template>
+    </UFileUpload>
+
+    <!-- Current Preview -->
+    <div v-if="modelValue && showPreview">
+      <img
+        v-if="mediaType === 'image'"
+        :src="modelValue"
+        alt=""
+        class="h-32 w-full rounded border border-neutral-200 object-contain p-2"
+        :data-testid="mediaUploadTestIds.previewImage"
+      />
+      <div
+        v-else
+        class="flex items-center gap-2 rounded border border-neutral-200 p-2 paragraph-sm text-primary-700"
+        :data-testid="mediaUploadTestIds.previewFile"
+      >
+        <UIcon :name="mediaType === 'video' ? 'ph:video' : 'ph:file'" class="h-5 w-5 shrink-0" />
+        <span class="truncate">{{ getBasename(modelValue) }}</span>
+      </div>
+    </div>
+
+    <!-- Media Selector Modal -->
+    <UModal
+      v-model:open="open"
+      close-icon="ph:x"
+      :close="{ 'data-testid': mediaUploadTestIds.modalCloseButton }"
+      :data-testid="mediaUploadTestIds.modal"
+    >
+      <UButton
+        v-if="hasMediaInLibrary"
+        variant="outline"
+        color="neutral"
+        :icon="
+          mediaType === 'image'
+            ? 'i-heroicons-photo'
+            : mediaType === 'video'
+              ? 'ph:video'
+              : 'ph:file'
+        "
+        block
+        @click="open = true"
+        :data-testid="mediaUploadTestIds.selectLibraryButton"
+      >
+        {{ $t('common.imageUpload.selectFromLibrary') }}
+      </UButton>
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="space-y-3">
+              <h3 class="text-lg font-medium">{{ $t('common.imageUpload.selectFromLibrary') }}</h3>
+              <UInput
+                v-model="searchQuery"
+                icon="i-heroicons-magnifying-glass"
+                :placeholder="$t('common.imageUpload.searchPlaceholder')"
+                :data-testid="mediaUploadTestIds.searchInput"
+              />
+            </div>
+          </template>
+
+          <div
+            v-if="!hasMediaInLibrary"
+            class="py-8 text-center text-neutral-500"
+            :data-testid="mediaUploadTestIds.emptyState"
+          >
+            {{ $t('common.imageUpload.noImages') }}
+          </div>
+
+          <div
+            v-else-if="filteredMedia.length === 0"
+            class="py-8 text-center text-neutral-500"
+            :data-testid="mediaUploadTestIds.noResultsState"
+          >
+            {{ $t('common.imageUpload.noResults') }}
+          </div>
+
+          <!-- Image grid -->
+          <UScrollArea
+            v-else-if="mediaType === 'image'"
+            v-slot="{ item: media, index }"
+            :items="filteredMedia"
+            orientation="vertical"
+            :virtualize="{
+              gap: 16,
+              lanes: 3,
+              estimateSize: 136,
+            }"
+            class="h-96 p-1"
+            :data-testid="mediaUploadTestIds.imageGrid"
+          >
+            <button
+              class="group relative w-full overflow-hidden rounded border-2 transition-all"
+              :class="
+                modelValue === media.remote_url
+                  ? 'border-primary-500'
+                  : 'border-neutral-200 hover:border-primary-500'
+              "
+              @click="selectMedia(media)"
+              :data-testid="`${mediaUploadTestIds.imageItem}-${media.id}`"
+            >
+              <img
+                :src="media.remote_url"
+                :alt="media.file_name"
+                class="h-32 w-full object-contain"
+                :loading="index > 8 ? 'lazy' : 'eager'"
+              />
+
+              <div
+                class="absolute inset-0 flex items-center justify-center bg-white/50 opacity-0 backdrop-blur-xs transition-opacity group-hover:opacity-100"
+              >
+                <p class="truncate text-xs" :title="media.file_name">
+                  {{ media.file_name }}
+                </p>
+              </div>
+            </button>
+          </UScrollArea>
+
+          <!-- Video/Document list -->
+          <UScrollArea
+            v-else
+            v-slot="{ item: media }"
+            :items="filteredMedia"
+            orientation="vertical"
+            :virtualize="{
+              gap: 8,
+              lanes: 1,
+              estimateSize: 48,
+            }"
+            class="h-96 p-1"
+            :data-testid="mediaUploadTestIds.fileList"
+          >
+            <button
+              class="flex w-full items-center gap-3 rounded border-2 p-3 transition-all"
+              :class="
+                modelValue === media.remote_url
+                  ? 'border-primary-500 bg-primary-50'
+                  : 'border-neutral-200 hover:border-primary-500'
+              "
+              @click="selectMedia(media)"
+              :data-testid="`${mediaUploadTestIds.fileItem}-${media.id}`"
+            >
+              <UIcon
+                :name="mediaType === 'video' ? 'ph:video' : 'ph:file'"
+                class="h-5 w-5 shrink-0 text-primary-700"
+              />
+              <span class="truncate text-sm">{{ media.file_name }}</span>
+            </button>
+          </UScrollArea>
+        </UCard>
+      </template>
+    </UModal>
+  </div>
+</template>

package/app/components/Common/MessagePreviewSlideover.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type {
+  PostEntity,
+  MessageFromDb,
+  WhatsappMessage,
+  EmailMessage,
+  Message,
+} from '@dev.smartpricing/message-composer-utils/types'
+import WhatsappPreview from '@/components/Whatsapp/Preview.vue'
+import EmailInlinePreview from '@/components/Email/InlinePreview.vue'
+import { useEmailEditorStore } from '~/stores/emailEditor'
+
+interface Props {
+  message: PostEntity<Message> | MessageFromDb | null | undefined
+  dynamicData?: Record<string, any>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dynamicData: () => ({}),
+})
+
+const emit = defineEmits<{
+  opened: []
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+
+const isOpen = ref(false)
+
+watch(isOpen, (val) => {
+  if (val) emit('opened')
+})
+
+// Determine which preview component to use based on render_type
+const renderType = computed(() => {
+  if (!props.message) return null
+  return props.message.render_type
+})
+
+const isWhatsapp = computed(() => renderType.value === 'whatsapp_v1')
+const isEmail = computed(() => renderType.value === 'email_v1')
+</script>
+
+<template>
+  <USlideover
+    v-model:open="isOpen"
+    :title="$t('translation_action_bar.preview')"
+    close-icon="ph:x"
+    v-if="message"
+    :ui="{
+      content: isWhatsapp ? '' : 'max-w-[90vw]',
+      body: 'p-0 sm:p-0',
+    }"
+    :close="{ 'data-testid': messagePreviewSlideoverTestIds.slideoverCloseButton }"
+    :data-testid="messagePreviewSlideoverTestIds.slideover"
+  >
+    <UButton
+      size="sm"
+      square
+      color="primary"
+      variant="outline"
+      :label="$t('translation_action_bar.preview_button')"
+      icon="ph:eye"
+      :ui="{
+        label: 'hidden xl:block',
+      }"
+      :data-testid="messagePreviewSlideoverTestIds.triggerButton"
+    />
+
+    <template #body>
+      <!-- WhatsApp Preview -->
+      <WhatsappPreview
+        v-if="isWhatsapp"
+        :message="message as WhatsappMessage"
+        :dynamic-data="dynamicData"
+      />
+
+      <!-- Email Inline Preview (client-driven, reflects unsaved changes) -->
+      <EmailInlinePreview
+        v-else-if="isEmail"
+        :message="message as EmailMessage"
+        :brand="emailEditorStore.brand"
+        :dynamic-data="dynamicData"
+      />
+    </template>
+  </USlideover>
+</template>

package/app/components/Common/MonacoEditor.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import * as monaco from 'monaco-editor'
+import { onMounted, onBeforeUnmount, watch, ref } from 'vue'
+
+interface Props {
+  modelValue: string
+  language?: string
+  theme?: 'vs-light' | 'vs-dark'
+  readonly?: boolean
+  lineNumbers?: 'on' | 'off'
+  minimap?: boolean
+  wordWrap?: 'on' | 'off'
+  scrollBeyondLastLine?: boolean
+  automaticLayout?: boolean
+  maxLength?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  language: 'html',
+  theme: 'vs-light',
+  readonly: false,
+  lineNumbers: 'on',
+  minimap: false,
+  wordWrap: 'on',
+  scrollBeyondLastLine: false,
+  automaticLayout: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const editorContainer = ref<HTMLDivElement | null>(null)
+let editor: monaco.editor.IStandaloneCodeEditor | null = null
+
+onMounted(() => {
+  if (!editorContainer.value) return
+
+  editor = monaco.editor.create(editorContainer.value, {
+    value: props.modelValue,
+    language: props.language,
+    theme: props.theme,
+    readOnly: props.readonly,
+    lineNumbers: props.lineNumbers,
+    minimap: { enabled: props.minimap },
+    wordWrap: props.wordWrap,
+    scrollBeyondLastLine: props.scrollBeyondLastLine,
+    automaticLayout: props.automaticLayout,
+    scrollbar: {
+      verticalScrollbarSize: 10,
+      horizontalScrollbarSize: 10,
+    },
+  })
+
+  // Listen for content changes
+  editor.onDidChangeModelContent(() => {
+    if (!editor) return
+    const value = editor.getValue()
+
+    // Apply max length constraint if specified
+    if (props.maxLength && value.length > props.maxLength) {
+      const truncated = value.substring(0, props.maxLength)
+      editor.setValue(truncated)
+      emit('update:modelValue', truncated)
+    } else {
+      emit('update:modelValue', value)
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  editor?.dispose()
+})
+
+// Watch for external changes to modelValue
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (editor && editor.getValue() !== newValue) {
+      editor.setValue(newValue)
+    }
+  },
+)
+
+// Watch for theme changes
+watch(
+  () => props.theme,
+  (newTheme) => {
+    if (editor) {
+      monaco.editor.setTheme(newTheme)
+    }
+  },
+)
+</script>
+
+<template>
+  <div
+    ref="editorContainer"
+    class="monaco-editor-container"
+    :data-testid="monacoEditorTestIds.container"
+  />
+</template>
+
+<style scoped>
+.monaco-editor-container {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+</style>