@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Email/Editor/Blocks/UnsubscribeLinkSettings.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import type { UnsubscribeLinkBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { DEFAULT_UNSUBSCRIBE_LINK_SETTINGS } from '@dev.smartpricing/message-composer-utils/types'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+import { computed } from 'vue'
+import { useAppContextStore } from '@/stores/appContext'
+import ColorInput from '~/components/Common/ColorInput.vue'
+import FontFamilySelect from '~/components/Common/FontFamilySelect.vue'
+import SectionHeader from '~/components/Common/SectionHeader.vue'
+
+const props = defineProps<{
+  block: UnsubscribeLinkBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+const appContext = useAppContextStore()
+
+const content = computed({
+  get: () => props.block.settings.content,
+  set: (value) => {
+    emailEditorStore.updateBlock(props.block.id, {
+      settings: { ...props.block.settings, content: value },
+    })
+  },
+})
+
+function resetTextStyle() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      fontFamily: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.fontFamily,
+      fontSize: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.fontSize,
+    },
+  })
+}
+
+function resetColors() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      textColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.textColor,
+      backgroundColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.backgroundColor,
+    },
+  })
+}
+
+defineOptions({
+  name: 'UnsubscribeLinkSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="unsubscribeLinkSettingsTestIds.container">
+    <!-- Content Editor -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.heading.settings.content') }}
+      </p>
+      <RichTextEditor
+        v-model:text="content"
+        preset="email"
+        bold
+        italic
+        underline
+        link
+        dynamic-values
+        :data-testid="unsubscribeLinkSettingsTestIds.contentEditor"
+      />
+    </div>
+
+    <!-- Text Style Section -->
+    <div class="space-y-3">
+      <SectionHeader
+        :title="$t('editor.email.blocks.heading.settings.textStyle')"
+        show-reset
+        @reset="resetTextStyle"
+      />
+
+      <div class="grid grid-cols-2 gap-3">
+        <FontFamilySelect
+          v-model="block.settings.fontFamily"
+          :label="$t('editor.email.blocks.heading.settings.font')"
+          :default-value="emailEditorStore.resolvedSettings.fontFamily"
+          :data-testid="unsubscribeLinkSettingsTestIds.fontFamilySelect"
+        />
+        <UFormField
+          :label="$t('editor.email.blocks.heading.settings.size')"
+          :data-testid="unsubscribeLinkSettingsTestIds.fontSizeField"
+        >
+          <UFieldGroup class="w-full">
+            <UInputNumber
+              v-model="block.settings.fontSize"
+              :data-testid="unsubscribeLinkSettingsTestIds.fontSizeInput"
+            />
+            <UBadge color="neutral" variant="outline">px</UBadge>
+          </UFieldGroup>
+        </UFormField>
+      </div>
+    </div>
+
+    <!-- Color Section -->
+    <div class="space-y-3">
+      <SectionHeader
+        :title="$t('editor.email.blocks.heading.settings.color')"
+        show-reset
+        @reset="resetColors"
+      />
+
+      <ColorInput
+        v-model="block.settings.textColor"
+        :label="$t('editor.email.blocks.heading.settings.text')"
+        :default-value="emailEditorStore.resolvedSettings.textColor"
+        :data-testid="unsubscribeLinkSettingsTestIds.textColorInput"
+      />
+
+      <ColorInput
+        v-model="block.settings.backgroundColor"
+        :label="$t('editor.email.blocks.heading.settings.backgroundBlock')"
+        :data-testid="unsubscribeLinkSettingsTestIds.backgroundColorInput"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Email/Editor/Canvas.vue

@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import { watch, ref, nextTick } from 'vue'
+import { useDragAndDrop } from '@formkit/drag-and-drop/vue'
+import IndexBlock from './Blocks/IndexBlock.vue'
+import type { EmailBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+const emailEditorStore = useEmailEditorStore()
+
+const props = defineProps<{
+  version: 'mobile' | 'desktop'
+}>()
+
+const emit = defineEmits<{
+  'block-added': [payload: { type: string; adding_mode: string }]
+  'block-deleted': [payload: { type: string }]
+  'block-duplicated': [payload: { type: string }]
+  'block-sorted': [payload: { type: string; before_sort_position: number; new_position: number }]
+}>()
+
+// Flag to prevent circular updates
+const isSyncing = ref(false)
+
+function handleBlockClick(blockId: string) {
+  emailEditorStore.selectBlock(blockId)
+}
+
+function handleDuplicate(blockId: string) {
+  const block = emailEditorStore.blocks.find((b) => b.id === blockId)
+  const blockType = block?.type ?? 'unknown'
+  emailEditorStore.duplicateBlock(blockId)
+  emit('block-duplicated', { type: blockType })
+}
+
+function handleDelete(blockId: string) {
+  const block = emailEditorStore.blocks.find((b) => b.id === blockId)
+  const blockType = block?.type ?? 'unknown'
+  emailEditorStore.removeBlock(blockId)
+  emit('block-deleted', { type: blockType })
+}
+
+// Setup drag-and-drop for canvas
+const [canvasRef, canvasValues] = useDragAndDrop(emailEditorStore.blocks, {
+  group: 'mail-builder',
+  dragEffectAllowed: 'move',
+  dragDropEffect: 'move',
+  sortable: true,
+  onSort(data) {
+    const draggedBlock = data.draggedNodes[0]?.data?.value as EmailBlock | undefined
+    if (draggedBlock) {
+      emit('block-sorted', {
+        type: draggedBlock.type,
+        before_sort_position: data.previousPosition,
+        new_position: data.position,
+      })
+    }
+  },
+  onTransfer(data) {
+    const transferredBlock = data.draggedNodes[0]?.data?.value as EmailBlock | undefined
+    if (transferredBlock) {
+      emit('block-added', { type: transferredBlock.type, adding_mode: 'Drag' })
+    }
+  },
+})
+
+// Sync canvasValues back to store when drag-and-drop changes them
+watch(
+  canvasValues,
+  (newBlocks) => {
+    if (isSyncing.value) return
+    isSyncing.value = true
+    emailEditorStore.setBlocks(newBlocks)
+    nextTick(() => {
+      isSyncing.value = false
+    })
+  },
+  { deep: true },
+)
+
+// Sync store blocks to canvas when store changes externally
+watch(
+  () => emailEditorStore.blocks,
+  (newBlocks) => {
+    if (isSyncing.value) return
+    isSyncing.value = true
+    canvasValues.value = [...newBlocks]
+    nextTick(() => {
+      isSyncing.value = false
+    })
+  },
+  { deep: true },
+)
+
+defineOptions({
+  name: 'EmailEditorCanvas',
+})
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-col" :data-testid="canvasTestIds.container">
+    <!-- Canvas Content -->
+    <div class="flex-1 overflow-y-auto bg-muted" :data-testid="canvasTestIds.scrollArea">
+      <!-- Outer container with page background -->
+      <div
+        class="mx-auto"
+        :class="{
+          'border border-t-0 border-muted': version === 'mobile',
+          'border-b border-muted': version === 'desktop',
+        }"
+        @click="emailEditorStore.clearSelection()"
+        :style="{ backgroundColor: emailEditorStore.resolvedSettings.backgroundColor }"
+        :data-testid="canvasTestIds.pageBackground"
+      >
+        <!-- Email content container with body background -->
+        <div
+          class="min-h-[400px] flex flex-col mx-auto"
+          :style="{
+            backgroundColor: emailEditorStore.resolvedSettings.contentBackgroundColor,
+            maxWidth: `${emailEditorStore.resolvedSettings.contentWidth}px`,
+            gap: `${emailEditorStore.resolvedSettings.verticalSpacing}px`,
+            paddingLeft: `${emailEditorStore.resolvedSettings.horizontalSpacing}px`,
+            paddingRight: `${emailEditorStore.resolvedSettings.horizontalSpacing}px`,
+          }"
+          ref="canvasRef"
+          @click.stop
+          :data-testid="canvasTestIds.contentArea"
+        >
+          <IndexBlock
+            v-for="block in canvasValues"
+            :key="block.id"
+            :block="block"
+            :is-selected="emailEditorStore.selectedBlockId === block.id"
+            :show-delete="true"
+            :show-duplicate="block.type !== 'unsubscribe_link'"
+            :data-testid="`${canvasTestIds.blockItem}-${block.id}`"
+            @click="handleBlockClick"
+            @duplicate="handleDuplicate"
+            @delete="handleDelete"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Email/Editor/GeneralStyleSettings.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import ColorInput from '~/components/Common/ColorInput.vue'
+import FontFamilySelect from '~/components/Common/FontFamilySelect.vue'
+import type { SafeFonts } from '@dev.smartpricing/message-composer-utils/types'
+
+const emailEditorStore = useEmailEditorStore()
+
+const { brand, brands, globalSettings, brandColors } = storeToRefs(emailEditorStore)
+
+defineOptions({
+  name: 'EmailEditorGeneralStyleSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-8" :data-testid="generalStyleSettingsTestIds.container">
+    <!-- Brand selector -->
+    <div class="space-y-3">
+      <h3 class="paragraph-md-bold">
+        {{ $t('editor.email.generalStyle.brandSection') }}
+      </h3>
+      <USelectMenu
+        v-model="brand"
+        :items="brands"
+        label-key="name"
+        :placeholder="$t('editor.email.generalStyle.selectBrand')"
+        class="w-full"
+      />
+    </div>
+
+    <!-- Typography section -->
+    <div class="space-y-3">
+      <h3 class="paragraph-md-bold">
+        {{ $t('editor.email.generalStyle.typographySection') }}
+      </h3>
+
+      <!-- Font Family -->
+      <FontFamilySelect
+        v-model="globalSettings.fontFamily"
+        :label="$t('editor.email.generalStyle.font')"
+        :data-testid="generalStyleSettingsTestIds.fontFamilySelect"
+        :default-value="brand?.default_email_settings.fontFamily as SafeFonts"
+      />
+    </div>
+
+    <!-- Colors section -->
+    <div class="space-y-3">
+      <h3 class="paragraph-md-bold">
+        {{ $t('editor.email.generalStyle.colorsSection') }}
+      </h3>
+
+      <!-- Text Color -->
+      <ColorInput
+        v-model="globalSettings.textColor"
+        :label="$t('editor.email.generalStyle.textColor')"
+        :brand-colors="brandColors"
+        :data-testid="generalStyleSettingsTestIds.textColorInput"
+        :default-value="brand?.default_email_settings.textColor"
+      />
+
+      <!-- Background Color (page) -->
+      <ColorInput
+        v-model="globalSettings.backgroundColor"
+        :label="$t('editor.email.generalStyle.backgroundColor')"
+        :brand-colors="brandColors"
+        :data-testid="generalStyleSettingsTestIds.backgroundColorInput"
+        :default-value="brand?.default_email_settings.backgroundColor"
+      />
+
+      <!-- Body Color (content area) -->
+      <ColorInput
+        v-model="globalSettings.contentBackgroundColor"
+        :label="$t('editor.email.generalStyle.bodyColor')"
+        :brand-colors="brandColors"
+        :data-testid="generalStyleSettingsTestIds.bodyColorInput"
+        :default-value="brand?.default_email_settings.contentBackgroundColor"
+      />
+    </div>
+
+    <!-- Spacing section -->
+    <div class="space-y-3">
+      <h3 class="paragraph-md-bold">
+        {{ $t('editor.email.generalStyle.spacingSection') }}
+      </h3>
+
+      <!-- Vertical Spacing -->
+      <UFormField
+        :label="$t('editor.email.generalStyle.verticalSpacing')"
+        :data-testid="generalStyleSettingsTestIds.verticalSpacingField"
+      >
+        <SSlider
+          v-model="globalSettings.verticalSpacing"
+          :min="0"
+          :max="50"
+          :data-testid="generalStyleSettingsTestIds.verticalSpacingSlider"
+        />
+      </UFormField>
+
+      <!-- Horizontal Spacing -->
+      <UFormField
+        :label="$t('editor.email.generalStyle.horizontalSpacing')"
+        :data-testid="generalStyleSettingsTestIds.horizontalSpacingField"
+      >
+        <SSlider
+          v-model="globalSettings.horizontalSpacing"
+          :min="0"
+          :max="50"
+          :data-testid="generalStyleSettingsTestIds.horizontalSpacingSlider"
+        />
+      </UFormField>
+    </div>
+
+    <!-- Reset button -->
+    <UButton
+      variant="outline"
+      color="neutral"
+      icon="ph:arrow-counter-clockwise"
+      block
+      :data-testid="generalStyleSettingsTestIds.resetButton"
+      @click="emailEditorStore.resetGlobalSettings()"
+    >
+      {{ $t('editor.email.generalStyle.reset') }}
+    </UButton>
+  </div>
+</template>

package/app/components/Email/Editor/Index.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import EmailEditorLeftSidebar from './LeftSidebar.vue'
+import EmailEditorCanvas from './Canvas.vue'
+import SendTestEmailModal from '../SendTestEmailModal.vue'
+import type { EmailMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import type { TabsItem } from '#ui/types'
+
+defineOptions({
+  name: 'EmailEditorIndex',
+})
+
+defineProps<{
+  message: PostEntity<EmailMessage>
+}>()
+
+const emit = defineEmits<{
+  'block-added': [payload: { type: string; adding_mode: string }]
+  'block-deleted': [payload: { type: string }]
+  'block-duplicated': [payload: { type: string }]
+  'block-sorted': [payload: { type: string; before_sort_position: number; new_position: number }]
+  'widget-tab-changed': [tab: string]
+  'test-sent': [payload: { to_recipients: number }]
+}>()
+
+const { t } = useI18n()
+const tabs: TabsItem[] = [
+  { label: t('common.desktop'), value: 'desktop' },
+  { label: t('common.mobile'), value: 'mobile' },
+] as const
+
+const currentView = ref<(typeof tabs)[number]['value']>('desktop')
+
+const width = computed(() => {
+  return currentView.value === 'mobile' ? '400px' : '100%'
+})
+</script>
+
+<template>
+  <div class="flex h-full" :data-testid="emailEditorIndexTestIds.container">
+    <!-- Left Sidebar: Block Library + Settings -->
+    <EmailEditorLeftSidebar
+      class="w-md flex-shrink-0"
+      @block-added="emit('block-added', $event)"
+      @widget-tab-changed="emit('widget-tab-changed', $event)"
+    />
+
+    <!-- Main Canvas -->
+    <div class="flex-1 min-h-0 flex flex-col">
+      <div class="grid grid-cols-3 gap-2 border-b border-neutral-200 py-1 px-4">
+        <div></div>
+        <div class="flex justify-center items-center">
+          <UTabs
+            size="xs"
+            variant="pill"
+            :items="tabs"
+            v-model="currentView"
+            :ui="{ root: 'gap-0 w-full' }"
+            :data-testid="emailEditorIndexTestIds.viewTabs"
+          />
+        </div>
+        <div class="flex justify-end items-center">
+          <SendTestEmailModal :message="message" @test-sent="emit('test-sent', $event)" />
+          <CommonMessagePreviewSlideover v-if="message" :message="message" />
+        </div>
+      </div>
+      <EmailEditorCanvas
+        :version="currentView"
+        :style="{ width }"
+        class="mx-auto flex-1"
+        @block-added="emit('block-added', $event)"
+        @block-deleted="emit('block-deleted', $event)"
+        @block-duplicated="emit('block-duplicated', $event)"
+        @block-sorted="emit('block-sorted', $event)"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Email/Editor/LeftSidebar.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { watch } from 'vue'
+import EmailEditorBlockLibrary from './BlockLibrary.vue'
+import EmailEditorGeneralStyleSettings from './GeneralStyleSettings.vue'
+import EmailEditorBlockSettings from './BlockSettings.vue'
+
+const emailEditorStore = useEmailEditorStore()
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  'widget-tab-changed': [tab: string]
+  'block-added': [payload: { type: string; adding_mode: string }]
+}>()
+
+// Tab state (only when no block selected)
+const currentTab = ref<'elements' | 'general'>('elements')
+
+watch(currentTab, (tab) => {
+  emit('widget-tab-changed', tab)
+})
+
+// Toggle between library+general vs block settings
+const showLibrary = computed(() => !emailEditorStore.selectedBlockId)
+
+const tabItems = computed(() => [
+  {
+    label: t('editor.email.sidebar.elementsTab'),
+    value: 'elements',
+  },
+  {
+    label: t('editor.email.sidebar.generalStyleTab'),
+    value: 'general',
+  },
+])
+
+defineOptions({
+  name: 'EmailEditorLeftSidebar',
+})
+</script>
+
+<template>
+  <div
+    class="flex h-full flex-col border-r border-neutral-200 bg-white"
+    :data-testid="leftSidebarTestIds.container"
+  >
+    <!-- No block selected: Show tabs with Elements/General Style -->
+    <div v-if="showLibrary" class="flex h-full flex-col">
+      <!-- Tab navigation -->
+      <UTabs
+        v-model="currentTab"
+        :items="tabItems"
+        size="md"
+        variant="link"
+        color="secondary"
+        :data-testid="leftSidebarTestIds.tabs"
+      />
+
+      <!-- Tab content -->
+      <div class="flex-1 overflow-y-auto p-4">
+        <EmailEditorBlockLibrary
+          v-if="currentTab === 'elements'"
+          @block-added="emit('block-added', $event)"
+        />
+        <EmailEditorGeneralStyleSettings v-else-if="currentTab === 'general'" />
+      </div>
+    </div>
+
+    <!-- Block selected: Show settings (unchanged) -->
+    <div v-else-if="emailEditorStore.selectedBlock" class="flex h-full flex-col">
+      <!-- Header with back button -->
+      <div class="grid grid-cols-3 border-b border-neutral-200 px-4 py-3">
+        <div>
+          <UButton
+            variant="ghost"
+            color="neutral"
+            icon="i-heroicons-arrow-left"
+            size="sm"
+            square
+            :data-testid="leftSidebarTestIds.backButton"
+            @click="emailEditorStore.clearSelection()"
+          />
+        </div>
+        <h2 class="flex-1 text-center text-base font-medium italic">
+          {{ $t(`editor.email.blocks.${emailEditorStore.selectedBlock.type}.name`) }}
+        </h2>
+        <div></div>
+      </div>
+
+      <!-- Settings panel -->
+      <div class="flex-1 overflow-y-auto">
+        <EmailEditorBlockSettings :block="emailEditorStore.selectedBlock" />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Email/InlinePreview.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import type {
+  EmailMessage,
+  PostEntity,
+  BrandFromDb,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { extractEmailParameters } from '@dev.smartpricing/message-composer-utils/utils'
+import { ref, computed, watch } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import HtmlPreviewIframe from '@/components/Common/HtmlPreviewIframe.vue'
+import { usePreviewEmailMutation } from '~/queries/compilation'
+
+defineOptions({ name: 'EmailInlinePreview' })
+
+const props = withDefaults(
+  defineProps<{
+    message: PostEntity<EmailMessage> | EmailMessage
+    brand?: BrandFromDb | null
+    dynamicData?: Record<string, string>
+    view?: 'desktop' | 'mobile'
+    showSubject?: boolean
+  }>(),
+  { view: 'desktop', showSubject: false, brand: null },
+)
+
+const iframeWidth = computed(() => {
+  return props.view === 'mobile' ? '400px' : '600px'
+})
+
+// Extract parameters client-side
+const parameters = computed(() => extractEmailParameters(props.message))
+
+const parameterValues = ref<Record<string, string>>({})
+const { mutate: preview, data: previewed, isLoading: isPreviewing } = usePreviewEmailMutation()
+
+const previewEmail = useDebounceFn(() => {
+  preview({
+    message: props.message,
+    parameters: parameterValues.value,
+    brand: props.brand
+      ? {
+          default_email_settings: props.brand.default_email_settings,
+          default_button_settings: props.brand.default_button_settings,
+          default_socials: normalizeBrandSocials(props.brand.default_socials),
+          logo_url: props.brand.logo_url,
+        }
+      : null,
+  })
+}, 0)
+
+watch(
+  parameters,
+  (params) => {
+    const defaults = props.dynamicData || {}
+    parameterValues.value = params.reduce(
+      (acc, param) => {
+        acc[param] = defaults[param] || `Sample ${param}`
+        return acc
+      },
+      {} as Record<string, string>,
+    )
+
+    previewEmail()
+  },
+  { immediate: true },
+)
+
+const iframeContent = ref<string>('')
+
+watch(
+  () => previewed.value,
+  (result) => {
+    if (result?.render_type === 'email_v1') {
+      iframeContent.value = result.html
+    }
+  },
+)
+</script>
+
+<template>
+  <div
+    class="flex-1 bg-neutral-50 flex items-start justify-center overflow-auto"
+    :data-testid="emailPreviewTestIds.root"
+  >
+    <div
+      v-if="isPreviewing"
+      class="space-y-2"
+      :style="{ width: iframeWidth }"
+      :data-testid="emailPreviewTestIds.loadingSkeleton"
+    >
+      <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>
+
+    <div v-else-if="iframeContent" :style="{ width: iframeWidth }" class="relative overflow-auto">
+      <p
+        v-if="showSubject"
+        class="pb-4 bg-white mb-px sticky top-0"
+        :data-testid="emailPreviewTestIds.subject"
+      >
+        <span class="paragraph-sm-bold">{{ $t('email_preview.subject') }}:</span>
+        <span class="paragraph-sm">{{ message.body.subject }}</span>
+      </p>
+      <HtmlPreviewIframe
+        :html="iframeContent"
+        title="Email preview"
+        :min-height="600"
+        class="border-0 bg-white w-full"
+        :data-testid="emailPreviewTestIds.iframe"
+      />
+    </div>
+
+    <div
+      v-else
+      class="flex items-center justify-center text-gray-500"
+      :data-testid="emailPreviewTestIds.emptyState"
+    >
+      <p>{{ $t('email_preview.no_preview') }}</p>
+    </div>
+  </div>
+</template>