@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Brand/BrandPreview.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import {
+  createTipTapContent,
+  generateHtml,
+  type BrandCascadeData,
+} from '@dev.smartpricing/message-composer-utils/utils'
+import type {
+  ButtonBlock,
+  EmailMessage,
+  PostEntity,
+} from '@dev.smartpricing/message-composer-utils/types'
+import {
+  DEFAULT_PARAGRAPH_SETTINGS,
+  DEFAULT_BUTTON_SETTINGS,
+  DEFAULT_HEADING_SETTINGS,
+  emptyEmailBlock,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { useDebounceFn } from '@vueuse/core'
+import HtmlPreviewIframe from '~/components/Common/HtmlPreviewIframe.vue'
+import { useBrandPreviewMutation } from '~/queries'
+
+defineOptions({ name: 'BrandPreview' })
+
+const props = defineProps<{
+  brand: BrandCascadeData
+}>()
+
+const { t } = useI18n()
+
+const { mutate: compilePreview, data: compiled, isLoading: isCompiling } = useBrandPreviewMutation()
+
+// Sample email message used for preview — settings are empty to exercise brand cascade
+const sampleMessage: PostEntity<EmailMessage> = {
+  render_type: 'email_v1',
+  language_id: 'en',
+  message_group_id: 'brand-preview',
+  status: 'draft',
+  user_id: 'preview',
+  body: {
+    subject: 'Brand Preview',
+    blocks: [
+      emptyEmailBlock('header'),
+      {
+        ...emptyEmailBlock('heading'),
+        settings: {
+          ...DEFAULT_HEADING_SETTINGS,
+          content: createTipTapContent('<p>Lorem ipsum
dolor</p>', { preset: 'email' }),
+        },
+      },
+      {
+        ...emptyEmailBlock('paragraph'),
+        settings: {
+          ...DEFAULT_PARAGRAPH_SETTINGS,
+          content: createTipTapContent(
+            '<p>Lorem ipsum dolor sit amet consectetur. Nibh vel at egestas dictumst vel justo felis justo. Magna facilisi convallis non nulla. Lobortis nunc amet eget amet vitae. Scelerisque elit pretium netus praesent id eget eget interdum. </p>',
+            { preset: 'email' },
+          ),
+        },
+      },
+      {
+        ...emptyEmailBlock('button'),
+        settings: {
+          ...DEFAULT_BUTTON_SETTINGS,
+          content: createTipTapContent('BUTTON', { preset: 'email' }),
+        },
+      },
+      emptyEmailBlock('socials'),
+      emptyEmailBlock('footer'),
+      emptyEmailBlock('divider'),
+      emptyEmailBlock('unsubscribe_link'),
+    ],
+    settings: {},
+  },
+  metadata: {},
+}
+
+const iframeContent = ref('')
+
+const debouncedCompile = useDebounceFn(() => {
+  compilePreview({
+    message: sampleMessage,
+    brand: props.brand,
+  })
+}, 500)
+
+// Watch brand data for changes and recompile
+watch(
+  () => props.brand,
+  () => {
+    debouncedCompile()
+  },
+  { deep: true, immediate: true },
+)
+
+// Update iframe when compilation succeeds
+watch(compiled, (result) => {
+  if (result?.render_type === 'email_v1') {
+    iframeContent.value = result.html
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div class="flex-1 flex items-start justify-center p-4 overflow-auto">
+      <!-- Loading skeleton -->
+      <div v-if="isCompiling && !iframeContent" class="w-full space-y-2">
+        <USkeleton class="h-6 w-1/3 bg-white" />
+        <USkeleton class="h-4 bg-white" />
+        <USkeleton class="h-4 w-5/8 bg-white" />
+        <USkeleton class="h-32 bg-white" />
+        <USkeleton class="h-12 bg-white" />
+      </div>
+
+      <!-- Preview iframe -->
+      <div v-else-if="iframeContent" class="w-full relative">
+        <div
+          v-if="isCompiling"
+          class="absolute inset-0 bg-white/50 flex items-center justify-center z-10"
+        >
+          <UIcon name="i-heroicons-arrow-path" class="animate-spin h-5 w-5 text-neutral-400" />
+        </div>
+        <HtmlPreviewIframe
+          :html="iframeContent"
+          title="Brand preview"
+          :min-height="400"
+          class="border-0 bg-white w-full"
+        />
+      </div>
+
+      <!-- Empty state -->
+      <div v-else class="flex items-center justify-center text-neutral-400 text-sm py-12">
+        {{ t('pages.brands.preview.empty') }}
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Brand/Steps/BrandStepGeneral.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Property } from '@dev.smartpricing/message-composer-utils/types'
+import { usePropertiesQuery } from '~/queries'
+
+const name = defineModel<string>('name', { required: true })
+const selectedPropertyIds = defineModel<string[]>('selectedPropertyIds', { required: true })
+
+const { data: properties } = usePropertiesQuery()
+
+const propertyItems = computed(() =>
+  (properties.value ?? []).map((p: Property) => ({
+    label: p.name,
+    value: p.id,
+  })),
+)
+</script>
+
+<template>
+  <UFormField :label="$t('pages.brands.fields.name')" required>
+    <UInput
+      v-model="name"
+      :placeholder="$t('pages.brands.fields.name_placeholder')"
+      class="w-full"
+    />
+  </UFormField>
+
+  <UFormField :label="$t('pages.brands.fields.properties')">
+    <USelectMenu
+      v-model="selectedPropertyIds"
+      :items="propertyItems"
+      multiple
+      value-key="value"
+      :placeholder="$t('pages.brands.fields.properties_placeholder')"
+      class="w-full"
+    />
+  </UFormField>
+</template>

package/app/components/Brand/Steps/BrandStepSocials.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { BrandSocials, SocialPlatform } from '@dev.smartpricing/message-composer-utils/types'
+import { SOCIAL_PLATFORMS } from '@dev.smartpricing/message-composer-utils/types'
+import { isValidUrl } from '@dev.smartpricing/message-composer-utils/utils'
+
+const socials = defineModel<BrandSocials>({ required: true })
+
+function socialLabel(platform: SocialPlatform): string {
+  return platform.charAt(0).toUpperCase() + platform.slice(1)
+}
+
+function updateUrl(platform: SocialPlatform, value: string) {
+  const trimmed = value.trim()
+  const updated = { ...socials.value }
+  if (trimmed) {
+    updated[platform] = trimmed
+  } else {
+    delete updated[platform]
+  }
+  socials.value = updated
+}
+
+function hasError(value: string | undefined): boolean {
+  return !!value && !isValidUrl(value)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div
+      v-for="platform in SOCIAL_PLATFORMS"
+      :key="platform"
+      class="flex items-center gap-3 p-3 rounded-lg border border-neutral-200"
+    >
+      <span class="text-sm font-medium w-24 shrink-0">
+        {{ socialLabel(platform) }}
+      </span>
+      <UInput
+        :model-value="socials?.[platform] ?? ''"
+        :placeholder="`https://${platform}.com/...`"
+        :color="hasError(socials?.[platform]) ? 'error' : undefined"
+        class="flex-1"
+        size="sm"
+        @update:model-value="updateUrl(platform, $event as string)"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Brand/Steps/BrandStepVisual.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import type {
+  BrandDefaultEmailSettings,
+  BrandDefaultButtonSettings,
+} from '@dev.smartpricing/message-composer-utils/types'
+import ColorThief from 'colorthief'
+
+import FontFamilySelect from '~/components/Common/FontFamilySelect.vue'
+import ColorInput from '~/components/Common/ColorInput.vue'
+import { useUploadMediaMutation } from '~/queries'
+const logoMediaId = defineModel<string | null>('logoMediaId', { required: true })
+const logoUrl = defineModel<string>('logoUrl', { required: true })
+const colors = defineModel<string[]>('colors', { required: true })
+const defaultEmailSettings = defineModel<BrandDefaultEmailSettings>('defaultEmailSettings', {
+  required: true,
+})
+const defaultButtonSettings = defineModel<BrandDefaultButtonSettings>('defaultButtonSettings', {
+  required: true,
+})
+
+// ---- Logo upload ----
+const logoFileInput = ref<HTMLInputElement | null>(null)
+const { mutateAsync: uploadMedia } = useUploadMediaMutation()
+const isUploadingLogo = ref(false)
+const isExtractingColors = ref(false)
+
+function triggerLogoUpload() {
+  logoFileInput.value?.click()
+}
+
+async function extractColorsFromImage(file: File) {
+  isExtractingColors.value = true
+  const objectUrl = URL.createObjectURL(file)
+  try {
+    const img = new Image()
+    img.src = objectUrl
+    await new Promise<void>((resolve, reject) => {
+      img.onload = () => resolve()
+      img.onerror = reject
+    })
+    const colorThief = new ColorThief()
+    const palette = colorThief.getPalette(img, 4)
+    const extracted = new Set(['#FFFFFF', '#000000'])
+    for (const [r, g, b] of palette) {
+      const hex =
+        `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase()
+      extracted.add(hex)
+    }
+    colors.value = [...extracted]
+  } catch (err) {
+    console.error('Failed to extract colors from logo:', err)
+  } finally {
+    URL.revokeObjectURL(objectUrl)
+    isExtractingColors.value = false
+  }
+}
+
+async function handleLogoFile(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+
+  isUploadingLogo.value = true
+  try {
+    const result = await uploadMedia(file)
+    if (result) {
+      logoMediaId.value = result.id
+      logoUrl.value = result.remote_url
+      await extractColorsFromImage(file)
+    }
+  } finally {
+    isUploadingLogo.value = false
+    input.value = ''
+  }
+}
+
+function removeLogo() {
+  logoMediaId.value = null
+  logoUrl.value = ''
+}
+
+// ---- Color swatches ----
+const newColor = ref('#3B82F6')
+
+function addColor() {
+  const c = newColor.value.toUpperCase()
+  if (c && !colors.value.includes(c)) {
+    colors.value.push(c)
+  }
+}
+
+function removeColor(index: number) {
+  colors.value.splice(index, 1)
+}
+</script>
+
+<template>
+  <!-- Logo -->
+  <UFormField :label="$t('pages.brands.fields.logo')">
+    <div class="space-y-2">
+      <div v-if="logoUrl" class="flex items-center gap-3">
+        <img
+          :src="logoUrl"
+          alt="Brand logo"
+          class="h-16 w-16 rounded border border-neutral-200 object-contain"
+        />
+        <UButton
+          icon="i-heroicons-trash"
+          size="xs"
+          variant="ghost"
+          color="error"
+          :label="$t('common.actions.remove')"
+          @click="removeLogo"
+        />
+      </div>
+      <UButton
+        icon="i-heroicons-arrow-up-tray"
+        variant="outline"
+        color="neutral"
+        :loading="isUploadingLogo"
+        :label="
+          logoUrl ? $t('pages.brands.fields.change_logo') : $t('pages.brands.fields.upload_logo')
+        "
+        @click="triggerLogoUpload"
+      />
+      <input
+        ref="logoFileInput"
+        type="file"
+        accept="image/*"
+        class="hidden"
+        @change="handleLogoFile"
+      />
+    </div>
+  </UFormField>
+
+  <!-- Colors -->
+  <UFormField :label="$t('pages.brands.fields.colors')">
+    <div class="space-y-3">
+      <div v-if="isExtractingColors" class="flex items-center gap-2 text-sm text-neutral-500">
+        <UIcon name="i-heroicons-arrow-path" class="animate-spin" />
+        {{ $t('pages.brands.fields.extracting_colors') }}
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <div v-for="(color, idx) in colors" class="w-[200px]" :key="color">
+          <ColorInput :label="color" v-model="colors[idx]">
+            <template #trailing>
+              <UButton
+                @click.stop="removeColor(idx)"
+                icon="ph:trash-bold"
+                class="ml-auto"
+                square
+                variant="ghost"
+                color="error"
+              >
+              </UButton>
+            </template>
+          </ColorInput>
+        </div>
+      </div>
+      <div class="w-[200px]">
+        <ColorInput :label="$t('pages.brands.fields.add_color')" v-model="newColor">
+          <template #actions>
+            <UButton @click="addColor" :label="$t('pages.brands.fields.add_color')" size="xs" />
+          </template>
+        </ColorInput>
+      </div>
+    </div>
+  </UFormField>
+
+  <!-- Default email colors -->
+  <div class="space-y-2">
+    <p class="text-sm font-medium">{{ $t('pages.brands.fields.default_email_colors') }}</p>
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+      <ColorInput
+        :brand-colors="colors"
+        v-model="defaultEmailSettings.backgroundColor"
+        :label="$t('pages.brands.fields.email_bg_color')"
+      />
+      <ColorInput
+        :brand-colors="colors"
+        v-model="defaultEmailSettings.contentBackgroundColor"
+        :label="$t('pages.brands.fields.email_content_bg_color')"
+      />
+      <ColorInput
+        :brand-colors="colors"
+        v-model="defaultEmailSettings.textColor"
+        :label="$t('pages.brands.fields.email_text_color')"
+      />
+    </div>
+  </div>
+
+  <!-- Default button colors -->
+  <div class="space-y-2">
+    <p class="text-sm font-medium">{{ $t('pages.brands.fields.default_button_colors') }}</p>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <ColorInput
+        :brand-colors="colors"
+        v-model="defaultButtonSettings.textColor"
+        :label="$t('pages.brands.fields.button_text_color')"
+      />
+      <ColorInput
+        :brand-colors="colors"
+        v-model="defaultButtonSettings.backgroundColor"
+        :label="$t('pages.brands.fields.button_bg_color')"
+      />
+    </div>
+  </div>
+
+  <!-- Default font -->
+  <FontFamilySelect
+    v-model="defaultEmailSettings.fontFamily"
+    :label="$t('pages.brands.fields.default_font')"
+  />
+</template>

package/app/components/Common/BrandColorSwatches.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps<{
+  colors: string[]
+}>()
+
+const emit = defineEmits<{
+  select: [color: string]
+}>()
+
+const selectedColor = defineModel<string | undefined>()
+
+function selectColor(color: string) {
+  selectedColor.value = color
+  emit('select', color)
+}
+</script>
+
+<template>
+  <div v-if="colors.length > 0" class="space-y-1">
+    <p class="text-xs text-neutral-500">{{ $t('editor.email.generalStyle.fromColorList') }}</p>
+    <div class="flex flex-wrap gap-1.5">
+      <button
+        v-for="color in colors"
+        :key="color"
+        class="h-7 w-7 rounded-full border-2 transition-all hover:scale-110"
+        :class="
+          selectedColor === color
+            ? 'border-primary-400 ring-2 ring-primary-200'
+            : 'border-neutral-200'
+        "
+        :style="{ backgroundColor: color }"
+        :title="color"
+        @click="selectColor(color)"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Common/ColorInput.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+const color = defineModel<string | undefined>()
+
+const props = defineProps<{
+  label?: string
+  defaultValue?: string // Global default color (e.g., from globalSettings)
+  brandColors?: string[] // Brand color swatches
+}>()
+
+// Computed color to display (fallback to default if undefined)
+const displayColor = computed(() => {
+  if (color.value === 'transparent') return '#FFFFFF00'
+  return color.value ?? props.defaultValue ?? '#000000'
+})
+
+// Computed chip color
+const chip = computed(() => ({ backgroundColor: displayColor.value }))
+
+// Track if using default (for visual indication)
+const isUsingDefault = computed(() => color.value === undefined && props.defaultValue !== undefined)
+
+// Internal color for picker (always has a value)
+const pickerColor = ref(displayColor.value)
+
+// Hex text input (without #)
+const hexInput = ref(stripHash(displayColor.value))
+
+// Watch display color to update picker when defaultValue changes externally
+watch(
+  displayColor,
+  (newValue) => {
+    pickerColor.value = newValue
+    hexInput.value = stripHash(newValue)
+  },
+  { immediate: true },
+)
+
+// When picker changes, update model and sync hex input
+watch(pickerColor, (newValue) => {
+  hexInput.value = stripHash(newValue)
+  if (newValue === props.defaultValue && isUsingDefault.value) {
+    return
+  }
+  color.value = newValue
+})
+
+// Live-update model when hex input is valid
+watch(hexInput, (raw) => {
+  const expanded = expandHex(raw)
+  if (expanded) {
+    const fullHex = `#${expanded}`
+    pickerColor.value = fullHex
+    if (fullHex === props.defaultValue && isUsingDefault.value) return
+    color.value = fullHex
+  }
+})
+
+function stripHash(val: string): string {
+  return val.replace(/^#/, '').toUpperCase()
+}
+
+function expandHex(raw: string): string | null {
+  const cleaned = raw.replace(/^#/, '').toUpperCase()
+  if (!/^[0-9A-F]+$/i.test(cleaned)) return null
+  if (cleaned.length === 3) {
+    return cleaned
+      .split('')
+      .map((c) => c + c)
+      .join('')
+  }
+  if (cleaned.length === 4) {
+    return cleaned
+      .split('')
+      .map((c) => c + c)
+      .join('')
+  }
+  if (cleaned.length === 6 || cleaned.length === 8) {
+    return cleaned
+  }
+  return null
+}
+
+function onHexBlur() {
+  // Revert to current valid color if input is invalid
+  const expanded = expandHex(hexInput.value)
+  if (!expanded) {
+    hexInput.value = stripHash(displayColor.value)
+  }
+}
+
+// Convert transparent to alpha hex on init
+if (color.value === 'transparent') {
+  color.value = '#FFFFFF00'
+}
+</script>
+
+<template>
+  <UPopover :data-testid="colorInputTestIds.popover">
+    <UButton
+      :label="label"
+      color="neutral"
+      variant="outline"
+      class="w-full"
+      :data-testid="colorInputTestIds.triggerButton"
+    >
+      <template #leading>
+        <span
+          :style="chip"
+          class="size-8 rounded-full border"
+          :class="isUsingDefault ? 'border-primary-400 border-2' : 'border-neutral-300'"
+        />
+      </template>
+      <template #trailing>
+        <slot name="trailing"></slot>
+      </template>
+    </UButton>
+
+    <template #content>
+      <div class="p-2 space-y-2">
+        <CommonBrandColorSwatches
+          v-if="brandColors && brandColors.length > 0"
+          v-model="color"
+          :colors="brandColors"
+        />
+        <UColorPicker v-model="pickerColor" :data-testid="colorInputTestIds.picker" />
+        <UInput
+          v-model="hexInput"
+          placeholder="FF0000"
+          maxlength="9"
+          size="sm"
+          @blur="onHexBlur"
+          :data-testid="colorInputTestIds.hexInput"
+        >
+          <template #leading>
+            <span class="text-neutral-400 text-sm">#</span>
+          </template>
+        </UInput>
+        <div class="flex items-center justify-end gap-2" v-if="$slots['actions']">
+          <slot name="actions" />
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/app/components/Common/EmojiPickerButton.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import EmojiPicker, { type EmojiExt } from 'vue3-emoji-picker'
+import 'vue3-emoji-picker/css'
+
+defineProps<{}>()
+
+const emit = defineEmits<{
+  select: [emoji: EmojiExt]
+}>()
+
+const showEmojiPicker = ref(false)
+
+function onSelectEmoji(emoji: EmojiExt) {
+  emit('select', emoji)
+  showEmojiPicker.value = false
+}
+</script>
+
+<template>
+  <UPopover v-model:open="showEmojiPicker" :data-testid="emojiPickerTestIds.popover">
+    <UButton
+      icon="ph-smiley-thin"
+      color="primary"
+      variant="ghost"
+      :data-testid="emojiPickerTestIds.triggerButton"
+    />
+
+    <template #content>
+      <div :data-testid="emojiPickerTestIds.picker">
+        <EmojiPicker disable-skin-tones :native="true" @select="onSelectEmoji" />
+      </div>
+    </template>
+  </UPopover>
+</template>

package/app/components/Common/FontFamilySelect.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {
+  EMAIL_SAFE_FONT_ITEMS,
+  type SafeFonts,
+} from '@dev.smartpricing/message-composer-utils/types'
+
+const fontFamily = defineModel<SafeFonts | undefined>({ required: true })
+
+const props = defineProps<{
+  label: string
+  defaultValue?: SafeFonts
+}>()
+
+const displayValue = computed({
+  get: () => fontFamily.value ?? props.defaultValue ?? 'Arial',
+  set: (value: SafeFonts) => {
+    fontFamily.value = value
+  },
+})
+
+const isUsingDefault = computed(
+  () => fontFamily.value === undefined && props.defaultValue !== undefined,
+)
+
+defineOptions({
+  name: 'CommonFontFamilySelect',
+})
+</script>
+
+<template>
+  <UFormField :label="label" :data-testid="fontFamilySelectTestIds.formField">
+    <USelect
+      v-model="displayValue"
+      :items="EMAIL_SAFE_FONT_ITEMS"
+      :class="isUsingDefault ? 'ring-2 ring-primary-400' : ''"
+      :data-testid="fontFamilySelectTestIds.select"
+    />
+  </UFormField>
+</template>