@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { ButtonBlock } 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 appContext = useAppContextStore()
+const emailEditorStore = useEmailEditorStore()
+
+const props = defineProps<{
+  block: ButtonBlock
+}>()
+
+const { t } = useI18n()
+
+const editor = useEditor({
+  content: props.block.settings.content,
+  extensions: getTipTapExtensions({
+    preset: 'email',
+    dynamicValues: true,
+  }),
+  editable: false,
+})
+
+// Watch for changes in block content
+watch(
+  () => props.block.settings.content,
+  (newContent) => {
+    if (editor.value && JSON.stringify(editor.value.getJSON()) !== JSON.stringify(newContent)) {
+      editor.value.commands.setContent(newContent || '')
+    }
+  },
+)
+
+const buttonStyles = computed(() => {
+  const resolved = emailEditorStore.resolvedSettings
+  const fontFamily = props.block.settings.fontFamily ?? resolved.fontFamily
+  const styles: Record<string, string> = {
+    fontFamily: `${fontFamily}, sans-serif`,
+    fontSize: `${props.block.settings.fontSize}px`,
+    color: props.block.settings.textColor ?? resolved.button.textColor,
+    backgroundColor: props.block.settings.backgroundColor ?? resolved.button.backgroundColor,
+    textAlign: 'center',
+    borderRadius:
+      props.block.settings.shape === 'square'
+        ? '0px'
+        : props.block.settings.shape === 'rounded'
+          ? '8px'
+          : '50px',
+    padding: '12px 24px',
+    border: 'none',
+    cursor: 'pointer',
+    display: 'inline-block',
+    textDecoration: 'none',
+  }
+
+  if (props.block.settings.width === 'full_width') {
+    styles.width = '100%'
+  }
+
+  return styles
+})
+
+const containerStyles = computed(() => ({
+  backgroundColor: props.block.settings.backgroundBlock,
+  display: 'flex',
+  justifyContent:
+    props.block.settings.alignment === 'left'
+      ? 'flex-start'
+      : props.block.settings.alignment === 'center'
+        ? 'center'
+        : 'flex-end',
+  padding: '16px',
+}))
+
+defineOptions({
+  name: 'ButtonBlock',
+})
+</script>
+
+<template>
+  <div :style="containerStyles" :data-testid="buttonBlockTestIds.container">
+    <div
+      v-if="!block.settings.content"
+      class="inline-block rounded border border-dashed border-neutral-300 px-6 py-3"
+      :data-testid="buttonBlockTestIds.placeholder"
+    >
+      <span class="text-sm text-neutral-500">{{
+        $t('editor.email.blocks.button.placeholder')
+      }}</span>
+    </div>
+    <div v-else :style="buttonStyles" class="button-block" :data-testid="buttonBlockTestIds.button">
+      <EditorContent :editor="editor" class="button-content" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.button-content :deep(.ProseMirror) {
+  padding: 0 !important;
+}
+
+.button-content :deep(.tiptap) {
+  outline: none;
+}
+
+.button-content :deep(p) {
+  margin: 0;
+}
+
+.button-block {
+  transition: opacity 0.2s;
+}
+
+.button-block:hover {
+  opacity: 0.9;
+}
+</style>

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

@@ -0,0 +1,228 @@
+<script lang="ts" setup>
+import type { ButtonBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { DEFAULT_BUTTON_SETTINGS } from '@dev.smartpricing/message-composer-utils/types'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+import PhoneInput from '@/components/Common/PhoneInput.vue'
+import ColorInput from '~/components/Common/ColorInput.vue'
+import FontFamilySelect from '~/components/Common/FontFamilySelect.vue'
+import SectionHeader from '~/components/Common/SectionHeader.vue'
+import type { TabsItem } from '#ui/types'
+
+const props = defineProps<{
+  block: ButtonBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+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 linkTypeOptions = [
+  { value: 'web', label: t('editor.email.blocks.button.link_types.web') },
+  { value: 'email', label: t('editor.email.blocks.button.link_types.email') },
+  { value: 'phone', label: t('editor.email.blocks.button.link_types.phone') },
+]
+
+const shapeOptions = [
+  { value: 'square', label: t('editor.email.blocks.button.shapes.square') },
+  { value: 'rounded', label: t('editor.email.blocks.button.shapes.rounded') },
+  { value: 'pill', label: t('editor.email.blocks.button.shapes.pill') },
+]
+
+const widthOptions = [
+  { value: 'fit_to_text', label: t('editor.email.blocks.button.widths.fit_to_text') },
+  { value: 'full_width', label: t('editor.email.blocks.button.widths.full_width') },
+]
+
+const alignmentOptions: TabsItem[] = [
+  { value: 'left', icon: 'ph:align-left' },
+  { value: 'center', icon: 'ph:align-center-horizontal' },
+  { value: 'right', icon: 'ph:align-right' },
+]
+
+function resetTextStyle() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      fontFamily: DEFAULT_BUTTON_SETTINGS.fontFamily,
+      fontSize: DEFAULT_BUTTON_SETTINGS.fontSize,
+    },
+  })
+}
+
+function resetColors() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      textColor: DEFAULT_BUTTON_SETTINGS.textColor,
+      backgroundColor: DEFAULT_BUTTON_SETTINGS.backgroundColor,
+      backgroundBlock: DEFAULT_BUTTON_SETTINGS.backgroundBlock,
+    },
+  })
+}
+
+defineOptions({
+  name: 'ButtonSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="buttonSettingsTestIds.container">
+    <!-- Content Editor -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.button.settings.content') }}
+      </p>
+      <RichTextEditor
+        v-model:text="content"
+        preset="email"
+        bold
+        italic
+        underline
+        lists
+        horizontal-rule
+        alignment
+        link
+        emoji
+      />
+    </div>
+
+    <!-- Link Type Section -->
+    <div class="space-y-3">
+      <UFormField
+        :label="$t('editor.email.blocks.button.settings.link_type')"
+        :data-testid="buttonSettingsTestIds.linkTypeField"
+      >
+        <USelect
+          v-model="block.settings.linkType"
+          :items="linkTypeOptions"
+          :data-testid="buttonSettingsTestIds.linkTypeSelect"
+        />
+      </UFormField>
+      <PhoneInput
+        v-if="block.settings.linkType === 'phone'"
+        v-model="block.settings.url"
+        default-prefix="+39"
+        :data-testid="buttonSettingsTestIds.phoneInput"
+      />
+      <UInput
+        v-else
+        v-model="block.settings.url"
+        type="text"
+        :placeholder="
+          block.settings.linkType === 'web' ? 'https://www.example.com' : 'email@example.com'
+        "
+        :data-testid="buttonSettingsTestIds.urlInput"
+      />
+    </div>
+
+    <!-- Text Type Section -->
+    <div class="space-y-3">
+      <SectionHeader
+        :title="$t('editor.email.blocks.button.settings.text_type')"
+        show-reset
+        @reset="resetTextStyle"
+      />
+
+      <!-- Font and Size -->
+      <div class="grid grid-cols-2 gap-3">
+        <FontFamilySelect
+          v-model="block.settings.fontFamily"
+          :label="$t('editor.email.blocks.button.settings.font')"
+          :default-value="emailEditorStore.resolvedSettings.fontFamily"
+        />
+        <UFormField
+          :label="$t('editor.email.blocks.button.settings.size')"
+          :data-testid="buttonSettingsTestIds.fontSizeField"
+        >
+          <UFieldGroup class="w-full">
+            <UInputNumber
+              v-model="block.settings.fontSize"
+              :data-testid="buttonSettingsTestIds.fontSizeInput"
+            />
+            <UBadge color="neutral" variant="outline">px</UBadge>
+          </UFieldGroup>
+        </UFormField>
+      </div>
+    </div>
+
+    <!-- Style Section -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.button.settings.style') }}
+      </p>
+
+      <!-- Shape -->
+      <div>
+        <UTabs
+          v-model="block.settings.shape"
+          :items="shapeOptions"
+          :content="false"
+          size="sm"
+          :data-testid="buttonSettingsTestIds.shapeTabs"
+        />
+      </div>
+
+      <!-- Width -->
+      <div>
+        <UTabs
+          v-model="block.settings.width"
+          :items="widthOptions"
+          :content="false"
+          size="sm"
+          :data-testid="buttonSettingsTestIds.widthTabs"
+        />
+      </div>
+
+      <!-- Alignment -->
+      <div :class="{ 'opacity-50 cursor-not-allowed': block.settings.width === 'full_width' }">
+        <div :class="{ 'pointer-events-none': block.settings.width === 'full_width' }">
+          <UTabs
+            v-model="block.settings.alignment"
+            :items="alignmentOptions"
+            :content="false"
+            size="sm"
+            :data-testid="buttonSettingsTestIds.alignmentTabs"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Colors Section -->
+    <div class="space-y-3">
+      <SectionHeader
+        :title="$t('editor.email.blocks.button.settings.colors')"
+        show-reset
+        @reset="resetColors"
+      />
+
+      <!-- Text Color -->
+
+      <ColorInput
+        v-model="block.settings.textColor"
+        :label="$t('editor.email.blocks.button.settings.text')"
+        :default-value="emailEditorStore.resolvedSettings.button.textColor"
+      />
+
+      <!-- Background Color -->
+      <ColorInput
+        v-model="block.settings.backgroundColor"
+        :label="$t('editor.email.blocks.button.settings.background')"
+        :default-value="emailEditorStore.resolvedSettings.button.backgroundColor"
+      />
+
+      <!-- Background Block -->
+      <ColorInput
+        v-model="block.settings.backgroundBlock"
+        :label="$t('editor.email.blocks.button.settings.background_block')"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import type { DiscountBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+
+const props = defineProps<{
+  block: DiscountBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+
+const editor = useEditor({
+  content: props.block.settings.content,
+  extensions: getTipTapExtensions({ preset: 'email' }),
+  editable: false,
+})
+
+watch(
+  () => props.block.settings.content,
+  (newContent) => {
+    if (editor.value && newContent !== editor.value.getJSON()) {
+      editor.value.commands.setContent(newContent || '')
+    }
+  },
+)
+
+const discountCodeStyles = computed(() => {
+  const fontFamily = props.block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily
+  const styles: Record<string, string> = {
+    fontFamily: `${fontFamily}, sans-serif`,
+    fontSize: `${props.block.settings.fontSize}px`,
+    color: props.block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+    backgroundColor: props.block.settings.backgroundComponent,
+    borderRadius:
+      props.block.settings.style === 'square'
+        ? '0px'
+        : props.block.settings.style === 'rounded'
+          ? '8px'
+          : '50px',
+    padding: '16px 24px',
+    textAlign: 'center',
+    display: 'inline-block',
+  }
+
+  if (props.block.settings.width === 'full_width') {
+    styles.width = '100%'
+  }
+
+  return styles
+})
+
+const containerStyles = computed(() => {
+  return {
+    backgroundColor: props.block.settings.backgroundBlock,
+    padding: '16px',
+    textAlign: 'center' as const,
+  }
+})
+
+defineOptions({
+  name: 'DiscountCodeBlock',
+})
+</script>
+
+<template>
+  <div :style="containerStyles" :data-testid="discountCodeBlockTestIds.container">
+    <div :style="discountCodeStyles" :data-testid="discountCodeBlockTestIds.code">
+      <EditorContent v-if="editor" :editor="editor" />
+      <span v-else class="text-neutral-400">
+        {{ $t('editor.email.blocks.discount.placeholder') }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { DiscountBlock } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  TAGS_DEFAULT_FONT_SIZE,
+  DEFAULT_DISCOUNT_SETTINGS,
+} from '@dev.smartpricing/message-composer-utils/types'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+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: DiscountBlock
+}>()
+
+const emailEditorStore = useEmailEditorStore()
+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 styleOptions = [
+  { value: 'square', label: t('editor.email.blocks.discount.styles.square') },
+  { value: 'rounded', label: t('editor.email.blocks.discount.styles.rounded') },
+  { value: 'pill', label: t('editor.email.blocks.discount.styles.pill') },
+]
+
+const widthOptions = [
+  { value: 'fit_to_text', label: t('editor.email.blocks.button.widths.fit_to_text') },
+  { value: 'full_width', label: t('editor.email.blocks.button.widths.full_width') },
+]
+
+function resetTextStyle() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      fontFamily: DEFAULT_DISCOUNT_SETTINGS.fontFamily,
+      fontSize: DEFAULT_DISCOUNT_SETTINGS.fontSize,
+      tag: DEFAULT_DISCOUNT_SETTINGS.tag,
+    },
+  })
+}
+
+function resetColors() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      textColor: DEFAULT_DISCOUNT_SETTINGS.textColor,
+      backgroundComponent: DEFAULT_DISCOUNT_SETTINGS.backgroundComponent,
+      backgroundBlock: DEFAULT_DISCOUNT_SETTINGS.backgroundBlock,
+    },
+  })
+}
+
+defineOptions({
+  name: 'DiscountCodeSettings',
+})
+</script>
+
+<template>
+  <div class="space-y-6 p-4" :data-testid="discountCodeSettingsTestIds.container">
+    <!-- Content Editor -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.discount.settings.discount_code') }}
+      </p>
+      <RichTextEditor v-model:text="content" preset="email" bold alignment />
+    </div>
+
+    <!-- Text Type Section -->
+    <div class="space-y-3">
+      <SectionHeader
+        :title="$t('editor.email.blocks.discount.settings.text_type')"
+        show-reset
+        @reset="resetTextStyle"
+      />
+
+      <!-- Font and Size -->
+      <div class="grid grid-cols-2 gap-3">
+        <FontFamilySelect
+          v-model="block.settings.fontFamily"
+          :label="$t('editor.email.blocks.discount.settings.font')"
+          :default-value="emailEditorStore.resolvedSettings.fontFamily"
+        />
+        <UFormField
+          :label="$t('editor.email.blocks.discount.settings.size')"
+          :data-testid="discountCodeSettingsTestIds.fontSizeField"
+        >
+          <UFieldGroup class="w-full">
+            <UInputNumber
+              v-model="block.settings.fontSize"
+              :data-testid="discountCodeSettingsTestIds.fontSizeInput"
+            />
+            <UBadge color="neutral" variant="outline">px</UBadge>
+          </UFieldGroup>
+        </UFormField>
+      </div>
+    </div>
+
+    <!-- Style Section -->
+    <div class="space-y-3">
+      <p class="paragraph-md-bold">
+        {{ $t('editor.email.blocks.discount.settings.style') }}
+      </p>
+
+      <!-- Shape -->
+      <div>
+        <UTabs
+          v-model="block.settings.style"
+          :items="styleOptions"
+          :content="false"
+          size="sm"
+          :data-testid="discountCodeSettingsTestIds.styleTabs"
+        />
+      </div>
+      <div>
+        <UTabs
+          v-model="block.settings.width"
+          :items="widthOptions"
+          :content="false"
+          size="sm"
+          :data-testid="discountCodeSettingsTestIds.widthTabs"
+        />
+      </div>
+    </div>
+
+    <!-- Colors Section -->
+    <div class="space-y-3">
+      <SectionHeader
+        :title="$t('editor.email.blocks.discount.settings.colors')"
+        show-reset
+        @reset="resetColors"
+      />
+
+      <!-- Text Color -->
+
+      <ColorInput
+        v-model="block.settings.textColor"
+        :label="$t('editor.email.blocks.discount.settings.text')"
+        :default-value="emailEditorStore.resolvedSettings.textColor"
+      />
+
+      <!-- Background Component -->
+      <ColorInput
+        v-model="block.settings.backgroundComponent"
+        :label="$t('editor.email.blocks.discount.settings.background_component')"
+      />
+
+      <!-- Background Block -->
+      <ColorInput
+        v-model="block.settings.backgroundBlock"
+        :label="$t('editor.email.blocks.discount.settings.background_block')"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { DividerBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+const props = defineProps<{
+  block: DividerBlock
+}>()
+
+defineOptions({
+  name: 'DividerBlock',
+})
+</script>
+
+<template>
+  <div
+    class="py-4"
+    :style="{ backgroundColor: block.settings.backgroundColor }"
+    :data-testid="dividerBlockTestIds.container"
+  >
+    <hr
+      :style="{
+        borderStyle: block.settings.style,
+        borderWidth: `${block.settings.thickness}px`,
+        borderColor: block.settings.color,
+        borderTop: 'none',
+        width: `${block.settings.width}%`,
+        margin: '0 auto',
+      }"
+      :data-testid="dividerBlockTestIds.rule"
+    />
+  </div>
+</template>