@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import type { ParagraphBlock } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  TAGS_DEFAULT_FONT_SIZE,
+  TEXT_TAGS,
+  DEFAULT_PARAGRAPH_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: ParagraphBlock
+}>()
+
+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 = TEXT_TAGS.map((tag) => ({
+  value: tag,
+  label: t(`editor.email.blocks.text_types.${tag}`),
+}))
+
+function resetTextStyle() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      fontFamily: DEFAULT_PARAGRAPH_SETTINGS.fontFamily,
+      fontSize: DEFAULT_PARAGRAPH_SETTINGS.fontSize,
+      tag: DEFAULT_PARAGRAPH_SETTINGS.tag,
+    },
+  })
+}
+
+function resetColors() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      textColor: DEFAULT_PARAGRAPH_SETTINGS.textColor,
+      backgroundColor: DEFAULT_PARAGRAPH_SETTINGS.backgroundColor,
+    },
+  })
+}
+
+function updateFontSize(value: (typeof TEXT_TAGS)[number]) {
+  const defaultFontSize = TAGS_DEFAULT_FONT_SIZE[value]
+  if (defaultFontSize) {
+    props.block.settings.fontSize = defaultFontSize
+  }
+}
+
+defineOptions({
+  name: 'ParagraphSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="paragraphSettingsTestIds.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
+        lists
+        horizontal-rule
+        alignment
+        link
+        emoji
+        improve
+        generate
+        generate-widget-type="paragraph"
+        :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
+        v-model="block.settings.tag"
+        :items="typeOptions"
+        :data-testid="paragraphSettingsTestIds.tagSelect"
+        @update:model-value="updateFontSize"
+      />
+
+      <!-- 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="paragraphSettingsTestIds.fontSizeField"
+        >
+          <UFieldGroup class="w-full">
+            <UInputNumber
+              v-model="block.settings.fontSize"
+              :data-testid="paragraphSettingsTestIds.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/SocialsBlock.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import type { SocialsBlock, SocialPlatform } from '@dev.smartpricing/message-composer-utils/types'
+import { SOCIAL_ICONS, SOCIAL_PLATFORMS } from '@dev.smartpricing/message-composer-utils/types'
+
+const emailEditorStore = useEmailEditorStore()
+
+const props = defineProps<{
+  block: SocialsBlock
+}>()
+
+const resolvedSocials = computed(() => {
+  const blockSocials = props.block.settings.socials
+  const brandSocials = emailEditorStore.brand?.default_socials
+  if (!brandSocials) return blockSocials
+
+  const result = { ...blockSocials }
+  for (const platform of SOCIAL_PLATFORMS) {
+    const bs = result[platform]
+    if (!bs?.enabled) continue
+    // Enabled + no block URL → cascade from brand
+    if (!bs.url && brandSocials[platform]) {
+      result[platform] = { ...bs, url: brandSocials[platform]! }
+    }
+  }
+  return result
+})
+
+const enabledSocials = computed(() =>
+  SOCIAL_PLATFORMS.filter((platform) => resolvedSocials.value[platform].enabled),
+)
+
+defineOptions({
+  name: 'SocialsBlock',
+})
+</script>
+
+<template>
+  <div
+    class="rounded p-2 relative"
+    :style="{ backgroundColor: block.settings.backgroundColor }"
+    :data-testid="socialsBlockTestIds.container"
+  >
+    <div v-if="enabledSocials.length > 0" class="flex items-center justify-center gap-3">
+      <a
+        v-for="platform in enabledSocials"
+        :key="platform"
+        :href="resolvedSocials[platform].url || '#'"
+        target="_blank"
+        rel="noopener noreferrer"
+        :data-testid="`${socialsBlockTestIds.link}-${platform}`"
+      >
+        <img :src="SOCIAL_ICONS[platform]" :alt="platform" width="24" height="24" />
+      </a>
+    </div>
+    <div
+      v-else
+      class="w-full flex items-center justify-center text-neutral-400 text-sm py-2"
+      :data-testid="socialsBlockTestIds.placeholder"
+    >
+      {{ $t('editor.email.blocks.socials.placeholder') }}
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { SocialsBlock, SocialPlatform } from '@dev.smartpricing/message-composer-utils/types'
+import { SOCIAL_PLATFORMS } from '@dev.smartpricing/message-composer-utils/types'
+import { applySocialDefaults } from '~/utils/socialDefaults'
+import ColorInput from '~/components/Common/ColorInput.vue'
+import SectionHeader from '~/components/Common/SectionHeader.vue'
+
+const props = defineProps<{
+  block: SocialsBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+const { t } = useI18n()
+
+const brandSocials = computed(() => emailEditorStore.brand?.default_socials ?? null)
+
+function brandUrl(platform: SocialPlatform): string | undefined {
+  return brandSocials.value?.[platform] || undefined
+}
+
+function toggleSocial(platform: SocialPlatform) {
+  const current = props.block.settings.socials[platform]
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      socials: {
+        ...props.block.settings.socials,
+        [platform]: { ...current, enabled: !current.enabled },
+      },
+    },
+  })
+}
+
+function updateSocialUrl(platform: SocialPlatform, url: string) {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      socials: {
+        ...props.block.settings.socials,
+        [platform]: { ...props.block.settings.socials[platform], url },
+      },
+    },
+  })
+}
+
+function resetToDefaults() {
+  const brandSocials = emailEditorStore.brand?.default_socials ?? null
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      socials: applySocialDefaults(brandSocials),
+    },
+  })
+}
+
+function socialLabel(platform: SocialPlatform): string {
+  return t(`editor.email.blocks.socials.platforms.${platform}`)
+}
+
+defineOptions({
+  name: 'SocialsSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="socialsSettingsTestIds.container">
+    <!-- Social Links -->
+    <div class="space-y-3">
+      <SectionHeader :title="$t('editor.email.blocks.socials.settings.links')" />
+
+      <div v-for="platform in SOCIAL_PLATFORMS" :key="platform" class="space-y-2">
+        <div class="flex items-center gap-2">
+          <USwitch
+            :model-value="block.settings.socials[platform].enabled"
+            :data-testid="`${socialsSettingsTestIds.toggleSwitch}-${platform}`"
+            @update:model-value="toggleSocial(platform)"
+          />
+          <span class="paragraph-sm capitalize">{{ socialLabel(platform) }}</span>
+        </div>
+        <template v-if="block.settings.socials[platform].enabled">
+          <UInput
+            :model-value="block.settings.socials[platform].url"
+            :placeholder="brandUrl(platform) ?? 'https://'"
+            :data-testid="`${socialsSettingsTestIds.urlInput}-${platform}`"
+            @update:model-value="updateSocialUrl(platform, $event as string)"
+          />
+          <p
+            v-if="!block.settings.socials[platform].url && brandUrl(platform)"
+            class="text-xs text-neutral-400 pl-1"
+          >
+            {{ $t('editor.email.blocks.socials.settings.from_brand', { url: brandUrl(platform) }) }}
+          </p>
+        </template>
+      </div>
+    </div>
+
+    <!-- Reset to defaults -->
+    <UButton
+      variant="outline"
+      color="neutral"
+      size="sm"
+      icon="ph:arrow-counter-clockwise"
+      :label="$t('common.actions.reset_defaults')"
+      @click="resetToDefaults"
+    />
+
+    <!-- Background Color -->
+    <div class="space-y-3">
+      <SectionHeader :title="$t('editor.email.blocks.heading.settings.color')" />
+
+      <ColorInput
+        v-model="block.settings.backgroundColor"
+        :label="$t('editor.email.blocks.heading.settings.backgroundBlock')"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { SpacerBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { SPACER_SIZE_PRESETS } from '@dev.smartpricing/message-composer-utils/types'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  block: SpacerBlock
+}>()
+
+const height = computed(() => {
+  return props.block.settings.height
+})
+
+defineOptions({
+  name: 'SpacerBlock',
+})
+</script>
+
+<template>
+  <div
+    class="relative"
+    :style="{
+      height: `${height}px`,
+      backgroundColor: block.settings.backgroundColor,
+    }"
+    :data-testid="spacerBlockTestIds.container"
+  >
+    <!-- Visual indicator -->
+    <div
+      class="absolute inset-0 flex items-center justify-center border border-dashed border-neutral-300 bg-opacity-50"
+    >
+      <span class="text-xs text-neutral-400">
+        {{ $t('editor.email.blocks.spacer.label', { height }) }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { SpacerBlock } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  SPACER_SIZE_PRESETS,
+  SPACER_MIN_HEIGHT,
+  SPACER_MAX_HEIGHT,
+  DEFAULT_SPACER_SETTINGS,
+} from '@dev.smartpricing/message-composer-utils/types'
+import ColorInput from '~/components/Common/ColorInput.vue'
+
+const props = defineProps<{
+  block: SpacerBlock
+}>()
+
+const { t } = useI18n()
+const emailEditorStore = useEmailEditorStore()
+
+const sizePresetItems = computed(() =>
+  Object.entries(SPACER_SIZE_PRESETS).map(([key, value]) => ({
+    value,
+    label: `${t(`editor.email.blocks.spacer.settings.sizePresets.${key}`)} (${value}px)`,
+  })),
+)
+
+function resetAll() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: { ...DEFAULT_SPACER_SETTINGS },
+  })
+}
+
+defineOptions({
+  name: 'SpacerSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="spacerSettingsTestIds.container">
+    <!-- Size Preset -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.spacer.settings.size') }}
+      </p>
+      <UFormField :data-testid="spacerSettingsTestIds.sizePresetField">
+        <USelect
+          :items="sizePresetItems"
+          :disabled="block.settings.customSize"
+          v-model="block.settings.height"
+          :data-testid="spacerSettingsTestIds.sizePresetSelect"
+        />
+      </UFormField>
+
+      <!-- Custom Height Toggle -->
+      <USwitch
+        v-model="block.settings.customSize"
+        :label="$t('editor.email.blocks.spacer.settings.customSize')"
+        :data-testid="spacerSettingsTestIds.customSizeSwitch"
+      />
+
+      <!-- Custom Height Input -->
+
+      <UFieldGroup v-if="block.settings.customSize" class="w-full">
+        <UInputNumber
+          v-model="block.settings.height"
+          :min="SPACER_MIN_HEIGHT"
+          :max="SPACER_MAX_HEIGHT"
+          :data-testid="spacerSettingsTestIds.customSizeInput"
+        />
+
+        <UBadge color="neutral" variant="outline">px</UBadge>
+      </UFieldGroup>
+    </div>
+
+    <div>
+      <p class="paragraph-md-bold pb-3">
+        {{ $t('editor.email.blocks.spacer.settings.backgroundColor') }}
+      </p>
+      <ColorInput
+        v-model="block.settings.backgroundColor"
+        :label="$t('editor.email.blocks.spacer.settings.backgroundColor')"
+      />
+    </div>
+
+    <!-- Reset All Button -->
+    <UButton
+      variant="outline"
+      color="neutral"
+      block
+      icon="ph:arrow-counter-clockwise"
+      :data-testid="spacerSettingsTestIds.resetButton"
+      @click="resetAll"
+    >
+      {{ $t('editor.email.common.reset') }}
+    </UButton>
+  </div>
+</template>

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

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import type { TopProductsBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+defineProps<{
+  block: TopProductsBlock
+}>()
+
+defineOptions({
+  name: 'TopProductsBlock',
+})
+</script>
+
+<template>
+  <div class="rounded-lg p-6" :style="{ backgroundColor: block.settings.backgroundColor }">
+    <div
+      v-if="!block.settings.storeId"
+      class="flex items-center justify-center rounded border border-dashed border-neutral-300 bg-white p-8"
+    >
+      <div class="text-center">
+        <div class="mb-2 text-4xl">
+          <UIcon name="ph:storefront" />
+        </div>
+        <div class="text-sm text-neutral-500">
+          {{ $t('editor.email.blocks.top_products.no_store_id') }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Preview placeholder cards -->
+    <div v-else class="space-y-2">
+      <div
+        v-for="i in block.settings.maxProducts"
+        :key="i"
+        class="flex gap-3 rounded-xl border-2 border-neutral-200 bg-white p-1"
+      >
+        <div class="h-16 w-16 shrink-0 rounded bg-neutral-100" />
+        <div class="flex flex-col justify-center gap-1 py-2">
+          <div class="h-3 w-24 rounded bg-neutral-200" />
+          <div class="h-2 w-16 rounded bg-neutral-100" />
+        </div>
+      </div>
+      <div class="pt-1 text-center text-xs text-neutral-400">
+        {{ block.settings.storeId }}
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { TopProductsBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { DEFAULT_TOP_PRODUCTS_SETTINGS } from '@dev.smartpricing/message-composer-utils/types'
+import ColorInput from '~/components/Common/ColorInput.vue'
+import SectionHeader from '~/components/Common/SectionHeader.vue'
+
+const props = defineProps<{
+  block: TopProductsBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+
+const maxProductsOptions = [
+  { value: '1', label: '1' },
+  { value: '2', label: '2' },
+  { value: '3', label: '3' },
+  { value: '4', label: '4' },
+  { value: '5', label: '5' },
+]
+
+const selectedMaxProducts = computed({
+  get: () => String(props.block.settings.maxProducts),
+  set: (value) => updateSettings({ maxProducts: Number(value) }),
+})
+
+function updateSettings(updates: Partial<TopProductsBlock['settings']>) {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: { ...props.block.settings, ...updates },
+  })
+}
+
+function resetSettings() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      maxProducts: DEFAULT_TOP_PRODUCTS_SETTINGS.maxProducts,
+      backgroundColor: DEFAULT_TOP_PRODUCTS_SETTINGS.backgroundColor,
+    },
+  })
+}
+
+defineOptions({
+  name: 'TopProductsSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4">
+    <!-- Link -->
+    <UFormField
+      :label="$t('editor.email.blocks.top_products.settings.store_id')"
+      :help="$t('editor.email.blocks.top_products.settings.store_id_help')"
+    >
+      <UInput
+        :model-value="block.settings.storeId"
+        :placeholder="$t('editor.email.blocks.top_products.settings.store_id_placeholder')"
+        @update:model-value="updateSettings({ storeId: $event as string })"
+      />
+    </UFormField>
+
+    <!-- Style Section -->
+    <div class="space-y-3">
+      <SectionHeader
+        :title="$t('editor.email.blocks.top_products.settings.style')"
+        show-reset
+        @reset="resetSettings"
+      />
+
+      <!-- Max Products -->
+      <UFormField :label="$t('editor.email.blocks.top_products.settings.max_products')">
+        <UTabs
+          v-model="selectedMaxProducts"
+          :items="maxProductsOptions"
+          :content="false"
+          size="sm"
+        />
+      </UFormField>
+
+      <!-- Background Color -->
+      <ColorInput
+        :model-value="block.settings.backgroundColor"
+        :label="$t('editor.email.blocks.top_products.settings.background')"
+        @update:model-value="updateSettings({ backgroundColor: $event })"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { UnsubscribeLinkBlock } 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: UnsubscribeLinkBlock
+}>()
+
+const appContext = useAppContextStore()
+const emailEditorStore = useEmailEditorStore()
+
+const editor = useEditor({
+  content: props.block.settings.content,
+  editable: false,
+  extensions: getTipTapExtensions({
+    preset: 'email',
+    dynamicValues: true,
+  }),
+})
+
+watch(
+  () => props.block.settings.content,
+  (newContent) => {
+    if (editor.value && newContent) {
+      editor.value.commands.setContent(newContent, { emitUpdate: false })
+    }
+  },
+)
+
+defineOptions({
+  name: 'UnsubscribeLinkBlock',
+})
+</script>
+
+<template>
+  <div
+    class="rounded p-2 relative"
+    :style="{ backgroundColor: block.settings.backgroundColor }"
+    :data-testid="unsubscribeLinkBlockTestIds.container"
+  >
+    <div
+      :style="{
+        fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
+        fontSize: `${block.settings.fontSize}px`,
+        color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+        textAlign: block.settings.alignment,
+      }"
+    >
+      <EditorContent :editor="editor" :data-testid="unsubscribeLinkBlockTestIds.editor" />
+      <div
+        v-show="editor?.isEmpty"
+        class="absolute inset-0 w-full h-full flex items-center justify-center text-neutral-400 text-sm"
+        :data-testid="unsubscribeLinkBlockTestIds.placeholder"
+      >
+        {{ $t('editor.placeholder.insert_text') }}
+      </div>
+    </div>
+  </div>
+</template>