@dev.smartpricing/message-composer-layer 1.0.25 → 1.0.26

package/app/components/Brand/BrandSwitcher.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import type { BrandFromDb } from '@dev.smartpricing/message-composer-utils/types'
+
+const emailEditorStore = useEmailEditorStore()
+const { brand, brands } = storeToRefs(emailEditorStore)
+
+const { t } = useI18n()
+const { confirm } = useConfirm()
+
+// Local selection tracks USelectMenu value; reverted on cancel
+const selectedBrand = shallowRef<BrandFromDb | undefined>(brand.value)
+
+function handleBrandChange(newBrand: BrandFromDb) {
+  if (!newBrand || newBrand.id === brand.value?.id) return
+
+  confirm({
+    title: t('dialogs.email_change_brand.title'),
+    message: t('dialogs.email_change_brand.message'),
+    confirmProps: {
+      label: t('dialogs.email_change_brand.confirm', [newBrand.name]),
+    },
+    cancelProps: {
+      label: t('dialogs.email_change_brand.cancel'),
+    },
+    action: () => {
+      emailEditorStore.resetToBrand(newBrand)
+    },
+  }).then((confirmed) => {
+    if (!confirmed) {
+      selectedBrand.value = brand.value
+    }
+  })
+}
+</script>
+
+<template>
+  <USelectMenu
+    v-model="selectedBrand"
+    :items="brands"
+    label-key="name"
+    :placeholder="$t('editor.email.generalStyle.selectBrand')"
+    class="w-full"
+    :data-testid="brandSwitcherTestIds.select"
+    @update:model-value="handleBrandChange"
+  />
+</template>

package/app/components/Brand/Steps/BrandStepVisual.vue

@@ -3,7 +3,7 @@ import type {
   BrandDefaultEmailSettings,
   BrandDefaultButtonSettings,
 } from '@dev.smartpricing/message-composer-utils/types'
-import ColorThief from 'colorthief'
+import { getPaletteSync } from 'colorthief'
 
 import FontFamilySelect from '~/components/Common/FontFamilySelect.vue'
 import ColorInput from '~/components/Common/ColorInput.vue'
@@ -38,14 +38,12 @@ async function extractColorsFromImage(file: File) {
       img.onload = () => resolve()
       img.onerror = reject
     })
-    // @ts-expect-error colorthief types lack construct signature
-    const colorThief = new ColorThief()
-    const palette = colorThief.getPalette(img, 4)
+    const palette = getPaletteSync(img, { colorCount: 4 })
     const extracted = new Set(['#FFFFFF', '#000000'])
-    for (const [r, g, b] of palette) {
-      const hex =
-        `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase()
-      extracted.add(hex)
+    if (palette) {
+      for (const color of palette) {
+        extracted.add(color.hex().toUpperCase())
+      }
     }
     colors.value = [...extracted]
   } catch (err) {

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

@@ -89,7 +89,7 @@ defineOptions({
       }}</span>
     </div>
     <div v-else :style="buttonStyles" class="button-block" :data-testid="buttonBlockTestIds.button">
-      <EditorContent :editor="editor" class="button-content" />
+      <EditorContent :editor="editor" class="button-content pointer-events-none" />
     </div>
   </div>
 </template>

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

@@ -65,7 +65,7 @@ defineOptions({
 <template>
   <div :style="containerStyles" :data-testid="discountCodeBlockTestIds.container">
     <div :style="discountCodeStyles" :data-testid="discountCodeBlockTestIds.code">
-      <EditorContent v-if="editor" :editor="editor" />
+      <EditorContent v-if="editor" :editor="editor" class="pointer-events-none" />
       <span v-else class="text-neutral-400">
         {{ $t('editor.email.blocks.discount.placeholder') }}
       </span>

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

@@ -49,7 +49,7 @@ defineOptions({
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
       }"
     >
-      <EditorContent :editor="editor" />
+      <EditorContent :editor="editor" class="pointer-events-none" />
       <div
         v-show="editor?.isEmpty"
         class="absolute inset-0 w-full h-full flex items-center justify-center text-neutral-400 text-sm"

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

@@ -49,7 +49,7 @@ defineOptions({
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
       }"
     >
-      <EditorContent :editor="editor" />
+      <EditorContent :editor="editor" class="pointer-events-none" />
       <div
         v-show="editor?.isEmpty"
         class="absolute inset-0 w-full h-full flex items-center justify-center text-neutral-400 text-sm"

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

@@ -49,7 +49,7 @@ defineOptions({
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
       }"
     >
-      <EditorContent :editor="editor" />
+      <EditorContent :editor="editor" class="pointer-events-none" />
       <div
         v-show="editor?.isEmpty"
         class="absolute inset-0 w-full h-full flex items-center justify-center text-neutral-400 text-sm"

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

@@ -48,7 +48,11 @@ defineOptions({
         textAlign: block.settings.alignment,
       }"
     >
-      <EditorContent :editor="editor" :data-testid="unsubscribeLinkBlockTestIds.editor" />
+      <EditorContent
+        :editor="editor"
+        :data-testid="unsubscribeLinkBlockTestIds.editor"
+        class="pointer-events-none"
+      />
       <div
         v-show="editor?.isEmpty"
         class="absolute inset-0 w-full h-full flex items-center justify-center text-neutral-400 text-sm"

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

@@ -5,7 +5,7 @@ import type { SafeFonts } from '@dev.smartpricing/message-composer-utils/types'
 
 const emailEditorStore = useEmailEditorStore()
 
-const { brand, brands, globalSettings, brandColors } = storeToRefs(emailEditorStore)
+const { brand, globalSettings, brandColors } = storeToRefs(emailEditorStore)
 
 defineOptions({
   name: 'EmailEditorGeneralStyleSettings',
@@ -19,13 +19,7 @@ defineOptions({
       <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"
-      />
+      <BrandSwitcher />
     </div>
 
     <!-- Typography section -->
@@ -119,7 +113,7 @@ defineOptions({
       :data-testid="generalStyleSettingsTestIds.resetButton"
       @click="emailEditorStore.resetGlobalSettings()"
     >
-      {{ $t('editor.email.generalStyle.reset') }}
+      {{ $t('editor.email.common.reset') }}
     </UButton>
   </div>
 </template>

package/app/composables/composerContext.ts

@@ -15,7 +15,7 @@ export interface ComposerContext {
   metaAccessToken?: Ref<string>
 }
 
-export const COMPOSER_CONTEXT_KEY: InjectionKey<ComposerContext> = Symbol('composer-context')
+export const COMPOSER_CONTEXT_KEY: InjectionKey<ComposerContext> = Symbol.for('composer-context')
 
 /** Must be called in parent's app.vue or plugin before layer components render. */
 export function defineComposerContext(context: ComposerContext): void {

package/app/stores/emailEditor.ts

@@ -5,6 +5,7 @@ import {
   type PostEntity,
   type EmailMessage,
   type BrandFromDb,
+  type SocialPlatform,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { resolveEmailSettings } from '@dev.smartpricing/message-composer-utils/utils'
 import { applySocialDefaults } from '~/utils/socialDefaults'
@@ -130,6 +131,59 @@ export const useEmailEditorStore = defineStore('emailEditor', () => {
     globalSettings.value = {}
   }
 
+  /**
+   * Clears all brand-cascadable overrides so the new brand's values take effect.
+   * Resets globalSettings and walks blocks clearing:
+   * - header: src (logo)
+   * - button: textColor, backgroundColor
+   * - heading/paragraph/footer/unsubscribe_link/discount: fontFamily
+   * - socials: URLs only for platforms where new brand provides a URL
+   * - grid: recurses into columns
+   */
+  function resetBlocksToBrand(blockList: EmailBlock[], newBrand: BrandFromDb): void {
+    for (const block of blockList) {
+      switch (block.type) {
+        case 'header':
+          block.settings.src = ''
+          break
+        case 'button':
+          block.settings.textColor = undefined
+          block.settings.backgroundColor = undefined
+          block.settings.fontFamily = undefined
+          break
+        case 'heading':
+        case 'paragraph':
+        case 'footer':
+        case 'unsubscribe_link':
+        case 'discount':
+          block.settings.fontFamily = undefined
+          break
+        case 'socials': {
+          const brandSocials = newBrand.default_socials
+          if (!brandSocials) break
+          for (const platform of Object.keys(block.settings.socials) as SocialPlatform[]) {
+            const social = block.settings.socials[platform]
+            if (social && brandSocials[platform]) {
+              social.url = ''
+            }
+          }
+          break
+        }
+        case 'grid':
+          for (const col of block.settings.columnData) {
+            resetBlocksToBrand(col.blocks, newBrand)
+          }
+          break
+      }
+    }
+  }
+
+  function resetToBrand(newBrand: BrandFromDb) {
+    resetGlobalSettings()
+    resetBlocksToBrand(blocks.value, newBrand)
+    brand.value = newBrand
+  }
+
   function resetEditor() {
     blocks.value = []
     selectedBlockId.value = null
@@ -204,6 +258,7 @@ export const useEmailEditorStore = defineStore('emailEditor', () => {
     // Actions - Settings
     updateGlobalSettings,
     resetGlobalSettings,
+    resetToBrand,
     setBrand,
     fetchBrands,
     initBrand,

package/app/utils/testIds.const.ts

@@ -223,6 +223,10 @@ export const generalStyleSettingsTestIds = {
   resetButton: 'general-style-settings-reset-button',
 } as const
 
+export const brandSwitcherTestIds = {
+  select: 'brand-switcher-select',
+} as const
+
 export const leftSidebarTestIds = {
   container: 'left-sidebar-container',
   tabs: 'left-sidebar-tabs',

package/i18n/locales/de.ts

@@ -156,6 +156,13 @@ Diese Nachrichten müssen funktional sein, nicht werblich.
       cancel: 'Abbrechen',
       change_to: 'Zu {0} ändern',
     },
+    email_change_brand: {
+      title: 'Marke ändern',
+      message:
+        'Beim Ändern der Marke werden E-Mail-Farben, Schriftarten, Header-Logo und Button-Stile auf die Standardwerte der neuen Marke zurückgesetzt. Benutzerdefinierte Anpassungen gehen verloren.',
+      confirm: 'Zu {0} ändern',
+      cancel: 'Abbrechen',
+    },
     grid_reduce_columns: {
       title: 'Anzahl der Spalten bearbeiten',
       message: 'Einige Elemente können verloren gehen und nicht wiederhergestellt werden.',

package/i18n/locales/en.ts

@@ -153,6 +153,13 @@ These messages must be functional, not promotional.
       cancel: 'Cancel',
       change_to: 'Change to {0}',
     },
+    email_change_brand: {
+      title: 'Change brand',
+      message:
+        "Changing brand will reset email colors, fonts, header logo and button styles to the new brand's defaults. Custom overrides will be lost.",
+      confirm: 'Change to {0}',
+      cancel: 'Cancel',
+    },
     grid_reduce_columns: {
       title: 'Edit number of columns',
       message: 'Some elements may be lost and cannot be recovered.',

package/i18n/locales/es.ts

@@ -153,6 +153,13 @@ Estos mensajes deben ser funcionales, no promocionales.
       cancel: 'Cancelar',
       change_to: 'Cambiar a {0}',
     },
+    email_change_brand: {
+      title: 'Cambiar marca',
+      message:
+        'Al cambiar la marca, los colores del correo, las fuentes, el logo del encabezado y los estilos de los botones se restablecerán a los valores predeterminados de la nueva marca. Las personalizaciones se perderán.',
+      confirm: 'Cambiar a {0}',
+      cancel: 'Cancelar',
+    },
     grid_reduce_columns: {
       title: 'Editar número de columnas',
       message: 'Algunos elementos pueden perderse y no se podrán recuperar.',

package/i18n/locales/fr.ts

@@ -153,6 +153,13 @@ Ces messages doivent être fonctionnels, et non promotionnels.
       cancel: 'Annuler',
       change_to: 'Changer en {0}',
     },
+    email_change_brand: {
+      title: 'Changer de marque',
+      message:
+        "Le changement de marque réinitialisera les couleurs de l'e-mail, les polices, le logo de l'en-tête et les styles des boutons aux valeurs par défaut de la nouvelle marque. Les personnalisations seront perdues.",
+      confirm: 'Changer en {0}',
+      cancel: 'Annuler',
+    },
     grid_reduce_columns: {
       title: 'Modifier le nombre de colonnes',
       message: 'Certains éléments peuvent être perdus et ne pourront pas être récupérés.',

package/i18n/locales/it.ts

@@ -153,6 +153,13 @@ Questi messaggi devono essere funzionali, non promozionali.
       cancel: 'Annulla',
       change_to: 'Cambia in {0}',
     },
+    email_change_brand: {
+      title: 'Cambia brand',
+      message:
+        "Cambiando brand, i colori dell'email, i font, il logo dell'header e gli stili dei pulsanti verranno ripristinati ai valori predefiniti del nuovo brand. Le personalizzazioni verranno perse.",
+      confirm: 'Cambia in {0}',
+      cancel: 'Annulla',
+    },
     grid_reduce_columns: {
       title: 'Modifica numero di colonne',
       message: 'Alcuni elementi potrebbero andare persi e non possono essere recuperati.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -14,40 +14,40 @@
   "dependencies": {
     "@formkit/drag-and-drop": "^0.5.3",
     "@nuxtjs/i18n": "^10.3.0",
-    "@pinia/colada": "^1.2.1",
-    "@pinia/colada-nuxt": "^1.0.0",
+    "@pinia/colada": "^1.3.0",
+    "@pinia/colada-nuxt": "^1.0.1",
     "@pinia/nuxt": "^0.11.3",
-    "@tiptap/extension-character-count": "^3.22.5",
-    "@tiptap/extension-emoji": "^3.22.5",
-    "@tiptap/extension-link": "^3.22.5",
-    "@tiptap/extension-mention": "^3.22.5",
-    "@tiptap/extension-text-align": "^3.22.5",
-    "@tiptap/extension-underline": "^3.22.5",
-    "@tiptap/extensions": "^3.22.5",
-    "@tiptap/pm": "^3.22.5",
-    "@tiptap/starter-kit": "^3.22.5",
-    "@tiptap/vue-3": "^3.22.5",
-    "@vueuse/core": "^14.2.1",
-    "@vueuse/nuxt": "^14.2.1",
-    "colorthief": "^2.4.0",
+    "@tiptap/extension-character-count": "^3.23.4",
+    "@tiptap/extension-emoji": "^3.23.4",
+    "@tiptap/extension-link": "^3.23.4",
+    "@tiptap/extension-mention": "^3.23.4",
+    "@tiptap/extension-text-align": "^3.23.4",
+    "@tiptap/extension-underline": "^3.23.4",
+    "@tiptap/extensions": "^3.23.4",
+    "@tiptap/pm": "^3.23.4",
+    "@tiptap/starter-kit": "^3.23.4",
+    "@tiptap/vue-3": "^3.23.4",
+    "@vueuse/core": "^14.3.0",
+    "@vueuse/nuxt": "^14.3.0",
+    "colorthief": "^3.3.1",
     "jwt-decode": "^4.0.0",
     "monaco-editor": "^0.55.1",
-    "nuxt": "^4.4.2",
+    "nuxt": "^4.4.5",
     "ofetch": "^1.5.1",
     "typescript": "^6.0.3",
-    "vue": "^3.5.33",
-    "vue-router": "^5.0.6",
+    "vue": "^3.5.34",
+    "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
-    "zod": "^4.4.1",
-    "@dev.smartpricing/message-composer-utils": "3.1.25"
+    "zod": "^4.4.3",
+    "@dev.smartpricing/message-composer-utils": "3.1.26"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/test-utils": "^4.0.3",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.60.0",
     "dotenv": "^17.4.2",
     "nuxt-ui-layer": "git+ssh://git@github.com:smartpricing/smartness-nuxt-ui#v1.6.6",
-    "vue-tsc": "^3.2.8"
+    "vue-tsc": "^3.2.9"
   },
   "peerDependencies": {
     "nuxt-ui-layer": ">=1.3.0"