@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import type { HeaderBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { DEFAULT_HEADER_SETTINGS } from '@dev.smartpricing/message-composer-utils/types'
+import MediaUploadOrSelect from '@/components/Common/MediaUploadOrSelect.vue'
+import ColorInput from '~/components/Common/ColorInput.vue'
+import SectionHeader from '~/components/Common/SectionHeader.vue'
+import type { TabsItem } from '#ui/types'
+
+const props = defineProps<{
+  block: HeaderBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+const { t } = useI18n()
+
+const src = computed({
+  get: () => props.block.settings.src || emailEditorStore.brand?.logo_url || undefined,
+  set: (value) => updateSettings({ src: value }),
+})
+
+function updateSettings(updates: Partial<HeaderBlock['settings']>) {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: { ...props.block.settings, ...updates },
+  })
+}
+
+const alignmentOptions: TabsItem[] = [
+  { value: 'left', icon: 'ph:align-left' },
+  { value: 'center', icon: 'ph:align-center-horizontal' },
+  { value: 'right', icon: 'ph:align-right' },
+]
+
+function resetSettings() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...DEFAULT_HEADER_SETTINGS,
+    },
+  })
+}
+
+defineOptions({
+  name: 'HeaderSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="headerSettingsTestIds.container">
+    <!-- Logo Source -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.header.settings.source') }}
+      </p>
+      <MediaUploadOrSelect v-model="src" media-type="image" />
+    </div>
+
+    <!-- Alt Text -->
+    <UFormField
+      :label="$t('editor.email.blocks.header.settings.alt')"
+      :data-testid="headerSettingsTestIds.altField"
+    >
+      <UInput
+        v-model="block.settings.alt"
+        :placeholder="$t('editor.email.blocks.header.settings.alt_placeholder')"
+        :data-testid="headerSettingsTestIds.altInput"
+      />
+    </UFormField>
+
+    <!-- Style Section -->
+    <div class="space-y-3">
+      <SectionHeader :title="$t('editor.email.blocks.header.settings.style')" />
+
+      <!-- Logo Width -->
+      <UFormField
+        :label="$t('editor.email.blocks.header.settings.width')"
+        :data-testid="headerSettingsTestIds.widthField"
+      >
+        <USlider
+          v-model="block.settings.width"
+          :min="100"
+          :max="300"
+          :step="10"
+          :data-testid="headerSettingsTestIds.widthSlider"
+        />
+      </UFormField>
+
+      <!-- Alignment -->
+      <UTabs
+        v-model="block.settings.alignment"
+        :items="alignmentOptions"
+        :content="false"
+        size="sm"
+        :data-testid="headerSettingsTestIds.alignmentTabs"
+      />
+
+      <!-- Background Color -->
+      <ColorInput
+        v-model="block.settings.backgroundColor"
+        :label="$t('editor.email.blocks.header.settings.background')"
+      />
+    </div>
+
+    <!-- Reset button -->
+    <UButton
+      variant="outline"
+      color="neutral"
+      icon="ph:arrow-counter-clockwise"
+      block
+      @click="resetSettings"
+    >
+      {{ $t('editor.email.blocks.header.settings.reset') }}
+    </UButton>
+  </div>
+</template>

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

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { HeadingBlock } 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: HeadingBlock
+}>()
+
+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: 'HeadingBlock',
+})
+</script>
+
+<template>
+  <div
+    class="rounded p-2 relative"
+    :style="{ backgroundColor: block.settings.backgroundColor }"
+    :data-testid="headingBlockTestIds.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/HeadingSettings.vue

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { HeadingBlock } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  HEADING_TAGS,
+  TAGS_DEFAULT_FONT_SIZE,
+  DEFAULT_HEADING_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: HeadingBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+const appContext = useAppContextStore()
+const { context: generateContext } = useEmailBlockContext(props.block.id)
+const { t } = useI18n()
+
+const content = computed({
+  get: () => props.block.settings.content,
+  set: (value) => {
+    emailEditorStore.updateBlock(props.block.id, {
+      settings: { ...props.block.settings, content: value },
+    })
+  },
+})
+
+const typeOptions = HEADING_TAGS.slice(0, 3).map((heading) => ({
+  value: heading,
+  label: t(`editor.email.blocks.text_types.${heading}`),
+}))
+
+function resetTextStyle() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      fontFamily: DEFAULT_HEADING_SETTINGS.fontFamily,
+      fontSize: DEFAULT_HEADING_SETTINGS.fontSize,
+      tag: DEFAULT_HEADING_SETTINGS.tag,
+    },
+  })
+}
+
+function resetColors() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      textColor: DEFAULT_HEADING_SETTINGS.textColor,
+      backgroundColor: DEFAULT_HEADING_SETTINGS.backgroundColor,
+    },
+  })
+}
+
+function updateFontSize(value: (typeof HEADING_TAGS)[number]) {
+  const defaultFontSize = TAGS_DEFAULT_FONT_SIZE[value]
+  if (defaultFontSize) {
+    props.block.settings.fontSize = defaultFontSize
+  }
+}
+
+defineOptions({
+  name: 'HeadingSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="headingSettingsTestIds.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
+        improve
+        generate
+        generate-widget-type="heading"
+        :generate-context="generateContext"
+        dynamic-values
+      />
+    </div>
+
+    <!-- Text Style Section -->
+    <div class="space-y-3">
+      <SectionHeader
+        :title="$t('editor.email.blocks.heading.settings.textStyle')"
+        show-reset
+        @reset="resetTextStyle"
+      />
+
+      <!-- Type -->
+
+      <USelect
+        @update:model-value="updateFontSize"
+        v-model="block.settings.tag"
+        :items="typeOptions"
+        :data-testid="headingSettingsTestIds.tagSelect"
+      />
+
+      <!-- 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="headingSettingsTestIds.fontSizeField"
+        >
+          <UFieldGroup class="w-full">
+            <UInputNumber
+              v-model="block.settings.fontSize"
+              :data-testid="headingSettingsTestIds.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/ImageBlock.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { ImageBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+const props = defineProps<{
+  block: ImageBlock
+}>()
+
+defineOptions({
+  name: 'ImageBlock',
+})
+</script>
+
+<template>
+  <div class="text-center" :data-testid="imageBlockTestIds.container">
+    <div
+      v-if="!block.settings.src"
+      class="flex items-center justify-center rounded border border-dashed border-neutral-300 p-8"
+      :data-testid="imageBlockTestIds.placeholder"
+    >
+      <div class="text-center">
+        <div class="mb-2 text-4xl">🖼️</div>
+        <div class="text-sm text-neutral-500">
+          {{ $t('editor.email.blocks.image.no_image') }}
+        </div>
+      </div>
+    </div>
+    <a
+      v-else-if="block.settings.href"
+      :href="block.settings.href"
+      target="_blank"
+      rel="noopener"
+      :data-testid="imageBlockTestIds.link"
+    >
+      <img
+        :src="block.settings.src"
+        alt=""
+        class="mx-auto max-w-full"
+        :data-testid="imageBlockTestIds.image"
+      />
+    </a>
+    <img
+      v-else
+      :src="block.settings.src"
+      alt=""
+      class="mx-auto max-w-full"
+      :data-testid="imageBlockTestIds.image"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { ImageBlock } from '@dev.smartpricing/message-composer-utils/types'
+import MediaUploadOrSelect from '@/components/Common/MediaUploadOrSelect.vue'
+
+const props = defineProps<{
+  block: ImageBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+
+const imageSrc = computed({
+  get: () => props.block.settings.src,
+  set: (value) => updateSettings({ src: value }),
+})
+
+function updateSettings(updates: Partial<ImageBlock['settings']>) {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: { ...props.block.settings, ...updates },
+  })
+}
+
+defineOptions({
+  name: 'ImageSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="imageSettingsTestIds.container">
+    <!-- Image Source Section -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.image.settings.source') }}
+      </p>
+
+      <MediaUploadOrSelect v-model="imageSrc" media-type="image" />
+    </div>
+
+    <!-- Link Section -->
+
+    <UFormField
+      :label="$t('editor.email.blocks.image.settings.link')"
+      :help="$t('editor.email.blocks.image.href_help')"
+      :data-testid="imageSettingsTestIds.linkField"
+    >
+      <UInput
+        v-model="block.settings.href"
+        type="url"
+        :placeholder="$t('editor.email.blocks.image.settings.href_placeholder')"
+        :data-testid="imageSettingsTestIds.linkInput"
+      />
+    </UFormField>
+  </div>
+</template>

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

@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import type { EmailBlock } from '@dev.smartpricing/message-composer-utils/types'
+import SpacerBlock from './SpacerBlock.vue'
+import DividerBlock from './DividerBlock.vue'
+import ParagraphBlock from './ParagraphBlock.vue'
+import HeadingBlock from './HeadingBlock.vue'
+import HTMLBlock from './HTMLBlock.vue'
+import ImageBlock from './ImageBlock.vue'
+import ButtonBlock from './ButtonBlock.vue'
+import DiscountCodeBlock from './DiscountCodeBlock.vue'
+import GridBlock from './GridBlock.vue'
+import FooterBlock from './FooterBlock.vue'
+import UnsubscribeLinkBlock from './UnsubscribeLinkBlock.vue'
+import SocialsBlock from './SocialsBlock.vue'
+import HeaderBlock from './HeaderBlock.vue'
+import TopProductsBlock from './TopProductsBlock.vue'
+
+interface Props {
+  block: EmailBlock
+  isSelected: boolean
+  showDragHandle?: boolean
+  showDuplicate?: boolean
+  showDelete?: boolean
+  showLabel?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showDragHandle: true,
+  showDuplicate: true,
+  showDelete: true,
+  showLabel: true,
+})
+
+const emit = defineEmits<{
+  click: [blockId: string]
+  duplicate: [blockId: string, event: Event]
+  delete: [blockId: string, event: Event]
+}>()
+
+const { t } = useI18n()
+
+// Block component registry
+const blockComponents: Partial<Record<EmailBlock['type'], any>> = {
+  spacer: SpacerBlock,
+  divider: DividerBlock,
+  paragraph: ParagraphBlock,
+  heading: HeadingBlock,
+  raw_html: HTMLBlock,
+  image: ImageBlock,
+  button: ButtonBlock,
+  discount: DiscountCodeBlock,
+  grid: GridBlock,
+  footer: FooterBlock,
+  unsubscribe_link: UnsubscribeLinkBlock,
+  socials: SocialsBlock,
+  header: HeaderBlock,
+  top_products: TopProductsBlock,
+}
+
+function getBlockName(type: EmailBlock['type']): string {
+  return t(`editor.email.blocks.${type}.name`) || type
+}
+
+function handleClick() {
+  emit('click', props.block.id)
+}
+
+function handleDuplicate(event: Event) {
+  event.stopPropagation()
+  emit('duplicate', props.block.id, event)
+}
+
+function handleDelete(event: Event) {
+  event.stopPropagation()
+  emit('delete', props.block.id, event)
+}
+
+defineOptions({
+  name: 'EmailEditorIndexBlock',
+})
+</script>
+
+<template>
+  <UPopover
+    mode="hover"
+    :content="{ side: 'top', align: 'start', sideOffset: 2 }"
+    :ui="{ content: 'bg-neutral-800 text-white text-xs rounded px-2 py-1' }"
+  >
+    <template #content>
+      <div>
+        {{ getBlockName(block.type) }}
+      </div>
+    </template>
+
+    <div
+      :data-block-id="block.id"
+      :data-block-type="block.type"
+      :data-testid="`${indexBlockTestIds.container}-${block.id}`"
+      class="group relative rounded border-2 transition-colors"
+      :class="{
+        'border-primary-500': isSelected,
+        'border-transparent hover:border-neutral-300': !isSelected,
+        'cursor-move': showDragHandle,
+      }"
+      @click.stop="handleClick"
+    >
+      <UPopover mode="hover" :content="{ side: 'right' }">
+        <!-- Block render component -->
+        <div class="">
+          <component
+            :is="blockComponents[block.type]"
+            v-if="blockComponents[block.type]"
+            :block="block"
+          />
+          <div
+            v-else
+            class="rounded border border-dashed border-neutral-300 p-4 text-center text-sm text-neutral-500"
+          >
+            {{ $t('editor.email.canvas.blockNotImplemented', { type: block.type }) }}
+          </div>
+        </div>
+
+        <template #content>
+          <div
+            class="bg-white rounded shadow-sm border border-neutral-200 overflow-hidden flex flex-col"
+          >
+            <!-- <div class="p-1 flex items-center justify-center" v-if="showDragHandle">
+            <UIcon size="sm" name="ph:dots-six-vertical-light" />
+          </div> -->
+            <UButton
+              v-if="showDuplicate"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              icon="ph:copy"
+              square
+              :data-testid="`${indexBlockTestIds.duplicateButton}-${block.id}`"
+              @click="handleDuplicate"
+            />
+            <UButton
+              v-if="showDelete"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              icon="ph:trash"
+              square
+              :data-testid="`${indexBlockTestIds.deleteButton}-${block.id}`"
+              @click="handleDelete"
+            />
+          </div>
+        </template>
+      </UPopover>
+    </div>
+  </UPopover>
+</template>

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

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { ParagraphBlock } 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: ParagraphBlock
+}>()
+
+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: 'ParagraphBlock',
+})
+</script>
+
+<template>
+  <div
+    class="rounded p-2 relative"
+    :style="{ backgroundColor: block.settings.backgroundColor }"
+    :data-testid="paragraphBlockTestIds.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>