@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { DividerBlock } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  DIVIDER_MIN_THICKNESS,
+  DIVIDER_MAX_THICKNESS,
+  DIVIDER_MIN_WIDTH,
+  DIVIDER_MAX_WIDTH,
+  DEFAULT_DIVIDER_SETTINGS,
+} from '@dev.smartpricing/message-composer-utils/types'
+import ColorInput from '~/components/Common/ColorInput.vue'
+
+const props = defineProps<{
+  block: DividerBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+
+const styleOptions = [
+  { value: 'solid', label: 'Solid' },
+  { value: 'dashed', label: 'Dashed' },
+  { value: 'dotted', label: 'Dotted' },
+]
+
+function resetAll() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: { ...DEFAULT_DIVIDER_SETTINGS },
+  })
+}
+
+defineOptions({
+  name: 'DividerSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="dividerSettingsTestIds.container">
+    <!-- Style -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.divider.settings.style') }}
+      </p>
+      <UTabs
+        v-model="block.settings.style"
+        :items="styleOptions"
+        :data-testid="dividerSettingsTestIds.styleTabs"
+      />
+
+      <!-- Thickness -->
+      <UFormField
+        :label="$t('editor.email.blocks.divider.settings.thickness')"
+        :data-testid="dividerSettingsTestIds.thicknessField"
+      >
+        <USlider
+          v-model="block.settings.thickness"
+          :min="DIVIDER_MIN_THICKNESS"
+          :max="DIVIDER_MAX_THICKNESS"
+          :data-testid="dividerSettingsTestIds.thicknessSlider"
+        />
+      </UFormField>
+
+      <!-- Width -->
+      <UFormField
+        :label="$t('editor.email.blocks.divider.settings.width')"
+        :hint="$t('editor.email.blocks.divider.settings.widthHint')"
+        :data-testid="dividerSettingsTestIds.widthField"
+      >
+        <UFieldGroup class="w-full">
+          <UInputNumber
+            v-model="block.settings.width"
+            :min="DIVIDER_MIN_WIDTH"
+            :max="DIVIDER_MAX_WIDTH"
+            :data-testid="dividerSettingsTestIds.widthInput"
+          />
+          <UBadge color="neutral" variant="outline">%</UBadge>
+        </UFieldGroup>
+      </UFormField>
+    </div>
+
+    <!-- Color -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.divider.settings.color') }}
+      </p>
+      <ColorInput
+        v-model="block.settings.color"
+        :label="$t('editor.email.blocks.divider.settings.color')"
+      />
+
+      <!-- Background Color -->
+      <ColorInput
+        v-model="block.settings.backgroundColor"
+        :label="$t('editor.email.blocks.divider.settings.backgroundColor')"
+      />
+    </div>
+
+    <!-- Reset All Button -->
+    <UButton
+      variant="outline"
+      color="neutral"
+      block
+      icon="ph:arrow-counter-clockwise"
+      :data-testid="dividerSettingsTestIds.resetButton"
+      @click="resetAll"
+    >
+      {{ $t('editor.email.common.reset') }}
+    </UButton>
+  </div>
+</template>

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

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { FooterBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+import { useAppContextStore } from '@/stores/appContext'
+
+const props = defineProps<{
+  block: FooterBlock
+}>()
+
+const appContext = useAppContextStore()
+const emailEditorStore = useEmailEditorStore()
+
+// Read-only editor for preview
+const editor = useEditor({
+  content: props.block.settings.content,
+  editable: false,
+  extensions: getTipTapExtensions({
+    preset: 'email',
+    dynamicValues: true,
+  }),
+})
+
+// Update preview when content changes
+watch(
+  () => props.block.settings.content,
+  (newContent) => {
+    if (editor.value && newContent) {
+      editor.value.commands.setContent(newContent, { emitUpdate: false })
+    }
+  },
+)
+
+defineOptions({
+  name: 'FooterBlock',
+})
+</script>
+
+<template>
+  <div
+    class="rounded p-2 relative"
+    :style="{ backgroundColor: block.settings.backgroundColor }"
+    :data-testid="footerBlockTestIds.container"
+  >
+    <div
+      :style="{
+        fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
+        fontSize: `${block.settings.fontSize}px`,
+        color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+      }"
+    >
+      <EditorContent :editor="editor" />
+      <div
+        v-show="editor?.isEmpty"
+        class="absolute inset-0 w-full h-full flex items-center justify-center text-neutral-400 text-sm"
+      >
+        {{ $t('editor.placeholder.insert_text') }}
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import type { FooterBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { DEFAULT_FOOTER_SETTINGS } from '@dev.smartpricing/message-composer-utils/types'
+import RichTextEditor from '@/components/Editor/RichTextEditor.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: FooterBlock
+}>()
+
+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_FOOTER_SETTINGS.fontFamily,
+      fontSize: DEFAULT_FOOTER_SETTINGS.fontSize,
+    },
+  })
+}
+
+function resetColors() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      textColor: DEFAULT_FOOTER_SETTINGS.textColor,
+      backgroundColor: DEFAULT_FOOTER_SETTINGS.backgroundColor,
+    },
+  })
+}
+
+defineOptions({
+  name: 'FooterSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="footerSettingsTestIds.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
+        alignment
+        link
+        emoji
+        dynamic-values
+      />
+    </div>
+
+    <!-- Text Style Section -->
+    <div class="space-y-3">
+      <SectionHeader
+        :title="$t('editor.email.blocks.heading.settings.textStyle')"
+        show-reset
+        @reset="resetTextStyle"
+      />
+
+      <!-- Font Family & Size Row -->
+      <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"
+        />
+        <UFormField
+          :label="$t('editor.email.blocks.heading.settings.size')"
+          :data-testid="footerSettingsTestIds.fontSizeField"
+        >
+          <UFieldGroup class="w-full">
+            <UInputNumber
+              v-model="block.settings.fontSize"
+              :data-testid="footerSettingsTestIds.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"
+      />
+
+      <!-- Text Color -->
+      <ColorInput
+        v-model="block.settings.textColor"
+        :label="$t('editor.email.blocks.heading.settings.text')"
+        :default-value="emailEditorStore.resolvedSettings.textColor"
+      />
+
+      <!-- Background Color -->
+      <ColorInput
+        v-model="block.settings.backgroundColor"
+        :label="$t('editor.email.blocks.heading.settings.backgroundBlock')"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { GridAllowedBlock, GridBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { emptyEmailBlock } from '@dev.smartpricing/message-composer-utils/types'
+import IndexBlock from './IndexBlock.vue'
+
+const props = defineProps<{
+  block: GridBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+
+// Available block types for grid columns (no grid, header, footer, html, discount)
+const allowedBlockTypes = [
+  'heading',
+  'paragraph',
+  'image',
+  'button',
+  'discount',
+] satisfies GridAllowedBlock['type'][]
+
+const { t } = useI18n()
+
+function getDropdownItems(columnId: string) {
+  return [
+    allowedBlockTypes.map((blockType) => ({
+      label: t(`editor.email.blocks.${blockType}.name`),
+      onSelect: () => addBlockToColumn(columnId, blockType),
+    })),
+  ]
+}
+
+// Initialize columnData if empty
+if (!props.block.settings.columnData || props.block.settings.columnData.length === 0) {
+  const columns = Array.from({ length: props.block.settings.columns }, () => ({
+    id: crypto.randomUUID(),
+    blocks: [],
+  }))
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: { ...props.block.settings, columnData: columns },
+  })
+}
+
+function addBlockToColumn(columnId: string, blockType: GridAllowedBlock['type']) {
+  const newBlock = emptyEmailBlock(blockType) as GridAllowedBlock
+  const updatedColumns = props.block.settings.columnData.map((col) =>
+    col.id === columnId ? { ...col, blocks: [...col.blocks, newBlock] } : col,
+  )
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: { ...props.block.settings, columnData: updatedColumns },
+  })
+}
+
+function handleBlockClick(blockId: string) {
+  emailEditorStore.selectBlock(blockId)
+}
+
+function handleDeleteBlock(blockId: string) {
+  // Find and remove block from its column
+  const updatedColumns = props.block.settings.columnData.map((col) => ({
+    ...col,
+    blocks: col.blocks.filter((b) => b.id !== blockId),
+  }))
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: { ...props.block.settings, columnData: updatedColumns },
+  })
+}
+
+defineOptions({
+  name: 'GridBlock',
+})
+</script>
+
+<template>
+  <div
+    class="rounded p-4"
+    :style="{ backgroundColor: block.settings.backgroundColor }"
+    :data-testid="gridBlockTestIds.container"
+  >
+    <div
+      class="grid gap-4"
+      :class="{
+        'grid-cols-1': block.settings.columns === 1,
+        'grid-cols-2': block.settings.columns === 2,
+        'grid-cols-3': block.settings.columns === 3,
+      }"
+    >
+      <div
+        v-for="(column, index) in block.settings.columnData"
+        :key="column.id"
+        class="min-h-32 space-y-2 rounded border border-dashed border-neutral-300 p-2 overflow-hidden"
+        :data-testid="`${gridBlockTestIds.column}-${column.id}`"
+      >
+        <!-- Column blocks -->
+        <IndexBlock
+          v-for="columnBlock in column.blocks"
+          :key="columnBlock.id"
+          :block="columnBlock"
+          :is-selected="emailEditorStore.selectedBlockId === columnBlock.id"
+          :show-drag-handle="false"
+          :show-duplicate="false"
+          :show-label="false"
+          @click="handleBlockClick"
+          @delete="handleDeleteBlock"
+        />
+
+        <!-- Empty column placeholder -->
+        <div
+          v-if="column.blocks.length === 0"
+          class="flex h-full min-h-32 items-center justify-center"
+        >
+          <UDropdownMenu
+            :items="getDropdownItems(column.id)"
+            :data-testid="`${gridBlockTestIds.addElementDropdown}-${column.id}`"
+          >
+            <UButton
+              variant="ghost"
+              color="neutral"
+              icon="i-heroicons-plus"
+              :data-testid="`${gridBlockTestIds.addElementButton}-${column.id}`"
+            >
+              {{ $t('editor.email.blocks.grid.add_element') }}
+            </UButton>
+          </UDropdownMenu>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { GridBlock } from '@dev.smartpricing/message-composer-utils/types'
+import ColorInput from '~/components/Common/ColorInput.vue'
+
+const props = defineProps<{
+  block: GridBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+const { t } = useI18n()
+const { confirm } = useConfirm()
+
+const columnOptions = [
+  { value: '1', label: '1' },
+  { value: '2', label: '2' },
+  { value: '3', label: '3' },
+]
+
+const selectedColumn = computed({
+  get: () => String(props.block.settings.columns),
+  set: (value) => {
+    updateColumns(Number(value) as 1 | 2 | 3)
+  },
+})
+
+function updateColumns(newColumns: 1 | 2 | 3) {
+  const currentColumns = props.block.settings.columnData.length
+
+  // If reducing columns, warn about data loss
+  if (newColumns < currentColumns) {
+    const hasContentInRemovedColumns = props.block.settings.columnData
+      .slice(newColumns)
+      .some((col) => col.blocks.length > 0)
+
+    if (hasContentInRemovedColumns) {
+      confirm({
+        title: t('dialogs.grid_reduce_columns.title'),
+        message: t('dialogs.grid_reduce_columns.message'),
+        confirmLabel: t('dialogs.grid_reduce_columns.confirm'),
+        cancelLabel: t('common.actions.cancel'),
+        action: () => applyColumnChange(newColumns),
+      })
+      return
+    }
+  }
+
+  applyColumnChange(newColumns)
+}
+
+function applyColumnChange(newColumns: 1 | 2 | 3) {
+  const currentColumns = props.block.settings.columnData.length
+
+  // Create new column data
+  const columnData = Array.from({ length: newColumns }, (_, i) => {
+    // Keep existing columns if available
+    if (i < currentColumns) {
+      return props.block.settings.columnData[i]
+    }
+    // Create new empty column
+    return {
+      id: crypto.randomUUID(),
+      blocks: [],
+    }
+  }) as GridBlock['settings']['columnData']
+
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      columns: newColumns,
+      columnData,
+    },
+  })
+}
+
+defineOptions({
+  name: 'GridSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="gridSettingsTestIds.container">
+    <!-- Columns Section -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.grid.settings.columns') }}
+      </p>
+      <UTabs
+        v-model="selectedColumn"
+        :items="columnOptions"
+        :content="false"
+        size="sm"
+        :data-testid="gridSettingsTestIds.columnsTabs"
+      />
+    </div>
+
+    <!-- Color Section -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.grid.settings.color') }}
+      </p>
+
+      <!-- Background Color -->
+      <ColorInput
+        v-model="block.settings.backgroundColor"
+        :label="$t('editor.email.blocks.grid.settings.background_block')"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { RawHtmlBlock } from '@dev.smartpricing/message-composer-utils/types'
+import HtmlPreviewIframe from '@/components/Common/HtmlPreviewIframe.vue'
+
+defineProps<{
+  block: RawHtmlBlock
+}>()
+
+defineOptions({
+  name: 'HTMLBlock',
+})
+</script>
+
+<template>
+  <div class="relative" :data-testid="htmlBlockTestIds.container">
+    <HtmlPreviewIframe
+      :html="block.settings.html"
+      title="HTML block preview"
+      class="w-full block pointer-events-none"
+      :data-testid="htmlBlockTestIds.content"
+      v-if="block.settings.html?.trim()"
+    />
+    <div
+      v-else
+      class="flex items-center justify-center text-neutral-400 text-sm p-8"
+      :data-testid="htmlBlockTestIds.placeholder"
+    >
+      {{ $t('editor.email.blocks.raw_html.placeholder') }}
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { RawHtmlBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { HTML_MAX_LENGTH } from '@dev.smartpricing/message-composer-utils/types'
+import MonacoEditor from '@/components/Common/MonacoEditor.vue'
+import { computed } from 'vue'
+import { slideover } from '#build/ui'
+
+const props = defineProps<{
+  block: RawHtmlBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+
+const htmlContent = computed({
+  get: () => props.block.settings.html,
+  set: (value: string) => {
+    emailEditorStore.updateBlock(props.block.id, {
+      settings: { ...props.block.settings, html: value },
+    })
+  },
+})
+
+const characterCount = computed(() => htmlContent.value.length)
+const isNearLimit = computed(() => characterCount.value > HTML_MAX_LENGTH * 0.9)
+const isAtLimit = computed(() => characterCount.value >= HTML_MAX_LENGTH)
+
+defineOptions({
+  name: 'HTMLSettings',
+})
+</script>
+
+<template>
+  <div class="flex h-full flex-col p-4" :data-testid="htmlSettingsTestIds.container">
+    <!-- Monaco Editor - takes most of the space -->
+
+    <MonacoEditor
+      v-model="htmlContent"
+      language="html"
+      :line-numbers="'on'"
+      :minimap="false"
+      :word-wrap="'on'"
+    />
+
+    <div class="flex justify-end border-t pt-2 border-neutral-200">
+      <USlideover
+        close-icon="ph:x"
+        :close="{ 'data-testid': htmlSettingsTestIds.slideoverCloseButton }"
+        :title="$t('editor.email.blocks.raw_html.name')"
+        :ui="{
+          content: 'max-w-[90vw]',
+        }"
+        :data-testid="htmlSettingsTestIds.slideover"
+      >
+        <UButton
+          icon="ph:arrows-out-simple"
+          color="secondary"
+          :data-testid="htmlSettingsTestIds.expandButton"
+        />
+        <template #body>
+          <MonacoEditor
+            v-model="htmlContent"
+            language="html"
+            :line-numbers="'on'"
+            :minimap="false"
+            :word-wrap="'on'"
+          />
+        </template>
+      </USlideover>
+    </div>
+
+    <!-- Bottom Section -->
+    <div class="flex-shrink-0 space-y-4 p-4">
+      <!-- Warning Notice -->
+      <UAlert
+        color="neutral"
+        variant="subtle"
+        icon="i-heroicons-information-circle"
+        :title="$t('editor.email.blocks.raw_html.warning.title')"
+        :description="$t('editor.email.blocks.raw_html.warning.message')"
+        :data-testid="htmlSettingsTestIds.warningAlert"
+      >
+      </UAlert>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { HeaderBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+const emailEditorStore = useEmailEditorStore()
+
+const props = defineProps<{
+  block: HeaderBlock
+}>()
+
+const resolvedSrc = computed(
+  () => props.block.settings.src || emailEditorStore.brand?.logo_url || null,
+)
+
+defineOptions({
+  name: 'HeaderBlock',
+})
+
+const alignmentClass: Record<string, string> = {
+  left: 'justify-start',
+  center: 'justify-center',
+  right: 'justify-end',
+}
+</script>
+
+<template>
+  <div
+    class="flex"
+    :class="alignmentClass[block.settings.alignment]"
+    :style="{ backgroundColor: block.settings.backgroundColor }"
+    :data-testid="headerBlockTestIds.container"
+  >
+    <div
+      v-if="!resolvedSrc"
+      class="flex w-full items-center justify-center rounded border border-dashed border-neutral-300 p-8"
+      :data-testid="headerBlockTestIds.placeholder"
+    >
+      <div class="text-center">
+        <div class="mb-2 text-4xl">🏷️</div>
+        <div class="text-sm text-neutral-500">
+          {{ $t('editor.email.blocks.header.no_logo') }}
+        </div>
+      </div>
+    </div>
+    <img
+      v-else
+      :src="resolvedSrc"
+      :alt="block.settings.alt"
+      class="max-w-full"
+      :style="{ width: `${block.settings.width}px` }"
+      :data-testid="headerBlockTestIds.logo"
+    />
+  </div>
+</template>