@dev.smartpricing/message-composer-layer 4.2.11 → 4.2.13-ux.0

package/app/components/Brand/BrandDrawer.vue

@@ -149,6 +149,7 @@ function resetForm() {
     backgroundColor: '#F3F4F6',
     contentBackgroundColor: '#FFFFFF',
     textColor: '#000000',
+    linkColor: undefined,
     fontFamily: 'Arial',
   }
   defaultButtonSettings.value = {

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

@@ -3,6 +3,7 @@ import type {
   BrandDefaultEmailSettings,
   BrandDefaultButtonSettings,
 } from '@dev.smartpricing/message-composer-utils/types'
+import { DEFAULT_EMAIL_GLOBAL_SETTINGS } from '@dev.smartpricing/message-composer-utils/types'
 import { getPaletteSync } from 'colorthief'
 
 import FontFamilySelect from '~/components/Common/FontFamilySelect.vue'
@@ -169,7 +170,7 @@ function removeColor(index: number) {
   <!-- Default email colors -->
   <div class="space-y-2">
     <p class="text-sm font-medium">{{ $t('pages.brands.fields.default_email_colors') }}</p>
-    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
       <ColorInput
         :brand-colors="colors"
         v-model="defaultEmailSettings.backgroundColor"
@@ -185,6 +186,12 @@ function removeColor(index: number) {
         v-model="defaultEmailSettings.textColor"
         :label="$t('pages.brands.fields.email_text_color')"
       />
+      <ColorInput
+        :brand-colors="colors"
+        v-model="defaultEmailSettings.linkColor"
+        :default-value="defaultEmailSettings.textColor ?? DEFAULT_EMAIL_GLOBAL_SETTINGS.textColor"
+        :label="$t('pages.brands.fields.email_link_color')"
+      />
     </div>
   </div>
 

package/app/components/Editor/RichTextEditor.vue

@@ -9,6 +9,7 @@ import type {
   RefineTextResponse,
 } from '@dev.smartpricing/message-composer-utils/types'
 import {
+  buildLinkHTMLAttributes,
   convertToWhatsappMarkdown,
   getTipTapExtensions,
   sanitizeContent,
@@ -39,6 +40,7 @@ const props = withDefaults(
     horizontalRule?: boolean
     alignment?: boolean
     link?: boolean
+    linkColor?: string
     emoji?: boolean
   }>(),
   {
@@ -134,9 +136,12 @@ const starterKitConfig = computed(() => {
     link: props.link
       ? {
           openOnClick: false,
-          HTMLAttributes: {
-            class: 'text-primary-600 underline',
-          },
+          // Callers that don't opt in with `linkColor` (e.g. ButtonSettings, whose
+          // links aren't part of the block-level linkColor feature) keep the old
+          // fixed styling instead of an unset `--link-color` custom property.
+          HTMLAttributes: props.linkColor
+            ? { class: 'underline', ...buildLinkHTMLAttributes({ mode: 'live' }) }
+            : { class: 'text-primary-600 underline' },
         }
       : false,
     heading: false,
@@ -373,7 +378,7 @@ defineExpose({
 </script>
 
 <template>
-  <div :data-testid="richTextEditorTestIds.root">
+  <div :data-testid="richTextEditorTestIds.root" :style="{ '--link-color': linkColor }">
     <div class="rounded-md border border-accented overflow-hidden">
       <UEditor
         ref="editorRef"

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

@@ -18,6 +18,7 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
+    linkColor: { mode: 'live' },
   }),
 })
 
@@ -47,6 +48,7 @@ defineOptions({
         fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
         fontSize: `${block.settings.fontSize}px`,
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+        '--link-color': block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
       }"
     >
       <EditorContent :editor="editor" class="pointer-events-none" />

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

@@ -23,6 +23,19 @@ const content = computed({
   },
 })
 
+const resolvedLinkColor = computed(
+  () => props.block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
+)
+
+function matchTextColor() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      linkColor: props.block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+    },
+  })
+}
+
 function resetTextStyle() {
   emailEditorStore.updateBlock(props.block.id, {
     settings: {
@@ -38,6 +51,7 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_FOOTER_SETTINGS.textColor,
+      linkColor: DEFAULT_FOOTER_SETTINGS.linkColor,
       backgroundColor: DEFAULT_FOOTER_SETTINGS.backgroundColor,
     },
   })
@@ -63,6 +77,7 @@ defineOptions({
         underline
         alignment
         link
+        :link-color="resolvedLinkColor"
         emoji
         dynamic-values
       />
@@ -113,6 +128,25 @@ defineOptions({
         :default-value="emailEditorStore.resolvedSettings.textColor"
       />
 
+      <!-- Link Color -->
+      <ColorInput
+        v-model="block.settings.linkColor"
+        :label="$t('editor.email.blocks.heading.settings.link')"
+        :default-value="emailEditorStore.resolvedSettings.linkColor"
+        :data-testid="footerSettingsTestIds.linkColorInput"
+      >
+        <template #trailing>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            :label="$t('editor.email.blocks.heading.settings.match_text_color')"
+            :data-testid="footerSettingsTestIds.matchTextColorButton"
+            @click.stop="matchTextColor"
+          />
+        </template>
+      </ColorInput>
+
       <!-- Background Color -->
       <ColorInput
         v-model="block.settings.backgroundColor"

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

@@ -18,6 +18,7 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
+    linkColor: { mode: 'live' },
   }),
 })
 
@@ -47,6 +48,7 @@ defineOptions({
         fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
         fontSize: `${block.settings.fontSize}px`,
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+        '--link-color': block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
       }"
     >
       <EditorContent :editor="editor" class="pointer-events-none" />

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

@@ -30,6 +30,19 @@ const content = computed({
   },
 })
 
+const resolvedLinkColor = computed(
+  () => props.block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
+)
+
+function matchTextColor() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      linkColor: props.block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+    },
+  })
+}
+
 const typeOptions = HEADING_TAGS.slice(0, 3).map((heading) => ({
   value: heading,
   label: t(`editor.email.blocks.text_types.${heading}`),
@@ -51,6 +64,7 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_HEADING_SETTINGS.textColor,
+      linkColor: DEFAULT_HEADING_SETTINGS.linkColor,
       backgroundColor: DEFAULT_HEADING_SETTINGS.backgroundColor,
     },
   })
@@ -83,6 +97,7 @@ defineOptions({
         underline
         alignment
         link
+        :link-color="resolvedLinkColor"
         emoji
         improve
         generate
@@ -146,6 +161,25 @@ defineOptions({
         :default-value="emailEditorStore.resolvedSettings.textColor"
       />
 
+      <!-- Link Color -->
+      <ColorInput
+        v-model="block.settings.linkColor"
+        :label="$t('editor.email.blocks.heading.settings.link')"
+        :default-value="emailEditorStore.resolvedSettings.linkColor"
+        :data-testid="headingSettingsTestIds.linkColorInput"
+      >
+        <template #trailing>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            :label="$t('editor.email.blocks.heading.settings.match_text_color')"
+            :data-testid="headingSettingsTestIds.matchTextColorButton"
+            @click.stop="matchTextColor"
+          />
+        </template>
+      </ColorInput>
+
       <!-- Background Color -->
       <ColorInput
         v-model="block.settings.backgroundColor"

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

@@ -18,6 +18,7 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
+    linkColor: { mode: 'live' },
   }),
 })
 
@@ -47,6 +48,7 @@ defineOptions({
         fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
         fontSize: `${block.settings.fontSize}px`,
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+        '--link-color': block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
       }"
     >
       <EditorContent :editor="editor" class="pointer-events-none" />

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

@@ -30,6 +30,19 @@ const content = computed({
   },
 })
 
+const resolvedLinkColor = computed(
+  () => props.block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
+)
+
+function matchTextColor() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      linkColor: props.block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+    },
+  })
+}
+
 const typeOptions = TEXT_TAGS.map((tag) => ({
   value: tag,
   label: t(`editor.email.blocks.text_types.${tag}`),
@@ -51,6 +64,7 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_PARAGRAPH_SETTINGS.textColor,
+      linkColor: DEFAULT_PARAGRAPH_SETTINGS.linkColor,
       backgroundColor: DEFAULT_PARAGRAPH_SETTINGS.backgroundColor,
     },
   })
@@ -85,6 +99,7 @@ defineOptions({
         horizontal-rule
         alignment
         link
+        :link-color="resolvedLinkColor"
         emoji
         improve
         generate
@@ -147,6 +162,25 @@ defineOptions({
         :default-value="emailEditorStore.resolvedSettings.textColor"
       />
 
+      <!-- Link Color -->
+      <ColorInput
+        v-model="block.settings.linkColor"
+        :label="$t('editor.email.blocks.heading.settings.link')"
+        :default-value="emailEditorStore.resolvedSettings.linkColor"
+        :data-testid="paragraphSettingsTestIds.linkColorInput"
+      >
+        <template #trailing>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            :label="$t('editor.email.blocks.heading.settings.match_text_color')"
+            :data-testid="paragraphSettingsTestIds.matchTextColorButton"
+            @click.stop="matchTextColor"
+          />
+        </template>
+      </ColorInput>
+
       <!-- Background Color -->
       <ColorInput
         v-model="block.settings.backgroundColor"

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

@@ -17,6 +17,7 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
+    linkColor: { mode: 'live' },
   }),
 })
 
@@ -45,6 +46,7 @@ defineOptions({
         fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
         fontSize: `${block.settings.fontSize}px`,
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+        '--link-color': block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
         textAlign: block.settings.alignment,
       }"
     >

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

@@ -24,6 +24,19 @@ const content = computed({
   },
 })
 
+const resolvedLinkColor = computed(
+  () => props.block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
+)
+
+function matchTextColor() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      linkColor: props.block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+    },
+  })
+}
+
 function resetTextStyle() {
   emailEditorStore.updateBlock(props.block.id, {
     settings: {
@@ -39,6 +52,7 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.textColor,
+      linkColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.linkColor,
       backgroundColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.backgroundColor,
     },
   })
@@ -63,6 +77,7 @@ defineOptions({
         italic
         underline
         link
+        :link-color="resolvedLinkColor"
         dynamic-values
         :data-testid="unsubscribeLinkSettingsTestIds.contentEditor"
       />
@@ -113,6 +128,24 @@ defineOptions({
         :data-testid="unsubscribeLinkSettingsTestIds.textColorInput"
       />
 
+      <ColorInput
+        v-model="block.settings.linkColor"
+        :label="$t('editor.email.blocks.heading.settings.link')"
+        :default-value="emailEditorStore.resolvedSettings.linkColor"
+        :data-testid="unsubscribeLinkSettingsTestIds.linkColorInput"
+      >
+        <template #trailing>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            :label="$t('editor.email.blocks.heading.settings.match_text_color')"
+            :data-testid="unsubscribeLinkSettingsTestIds.matchTextColorButton"
+            @click.stop="matchTextColor"
+          />
+        </template>
+      </ColorInput>
+
       <ColorInput
         v-model="block.settings.backgroundColor"
         :label="$t('editor.email.blocks.heading.settings.backgroundBlock')"

package/app/components/Email/SendTestEmailModal.vue

@@ -87,9 +87,7 @@ const emailEditorStore = useEmailEditorStore()
 const composerContext = useComposerContext()
 const { mutate: sendTest, isLoading: isSending, status } = useSendTestEmailMutation()
 
-const defaultSenderEmail = computed(
-  () => composerContext.organizationData?.value?.senderEmail ?? '',
-)
+const senderEmails = computed(() => composerContext.organizationData?.value?.senderEmails ?? [])
 
 const accommodationName = computed(
   () => composerContext.organizationData?.value?.accommodationName ?? '',
@@ -102,10 +100,11 @@ const state = ref<Schema>({
 })
 
 watch(
-  defaultSenderEmail,
-  (email) => {
-    if (!state.value.from) {
-      state.value.from = email
+  senderEmails,
+  (emails) => {
+    const [firstEmail] = emails
+    if (!state.value.from && firstEmail) {
+      state.value.from = firstEmail
     }
   },
   { immediate: true },
@@ -136,9 +135,7 @@ const schema = z.object({
       { message: t('editor.validation.error.emailInvalid') },
     ),
   sender_name: z.string().optional(),
-  from: z.string().refine((value) => !value || isEmail(value), {
-    message: t('editor.validation.error.emailInvalid'),
-  }),
+  from: z.string().min(1, t('editor.validation.error.emailRequired')),
 })
 
 type Schema = z.output<typeof schema>
@@ -217,11 +214,16 @@ watch(status, (newStatus) => {
             :data-testid="sendTestEmailModalTestIds.toInput"
           />
         </UFormField>
-        <UFormField name="from" :label="$t('pages.email.test_email_from')">
-          <UInput
+        <UFormField
+          name="from"
+          :label="$t('pages.email.test_email_from')"
+          :data-testid="sendTestEmailModalTestIds.fromFormField"
+        >
+          <USelectMenu
             v-model="state.from"
-            type="email"
+            :items="senderEmails"
             :placeholder="$t('pages.email.test_email_from_placeholder')"
+            :data-testid="sendTestEmailModalTestIds.fromSelect"
           />
         </UFormField>
         <UFormField

package/app/composables/composerContext.ts

@@ -2,7 +2,8 @@ import type { InjectionKey, Ref } from 'vue'
 import type { AppContextConfig } from '@dev.smartpricing/message-composer-utils/types'
 
 export interface OrganizationData {
-  senderEmail: string
+  /** Verified sender addresses available for the test-email "from" field, default first. */
+  senderEmails: string[]
   /** Tenant accommodation/property name — defaults the test-email sender name */
   accommodationName?: string
 }

package/app/utils/testIds.const.ts

@@ -331,6 +331,8 @@ export const sendTestEmailModalTestIds = {
   triggerButton: 'send-test-email-modal-trigger-button',
   toFormField: 'send-test-email-modal-to-form-field',
   toInput: 'send-test-email-modal-to-input',
+  fromFormField: 'send-test-email-modal-from-form-field',
+  fromSelect: 'send-test-email-modal-from-select',
   senderNameFormField: 'send-test-email-modal-sender-name-form-field',
   senderNameInput: 'send-test-email-modal-sender-name-input',
   cancelButton: 'send-test-email-modal-cancel-button',
@@ -615,6 +617,8 @@ export const footerSettingsTestIds = {
   container: 'footer-settings-container',
   fontSizeField: 'footer-settings-font-size-field',
   fontSizeInput: 'footer-settings-font-size-input',
+  linkColorInput: 'footer-settings-link-color-input',
+  matchTextColorButton: 'footer-settings-match-text-color-button',
 } as const
 
 export const gridBlockTestIds = {
@@ -653,6 +657,8 @@ export const headingSettingsTestIds = {
   tagSelect: 'heading-settings-tag-select',
   fontSizeField: 'heading-settings-font-size-field',
   fontSizeInput: 'heading-settings-font-size-input',
+  linkColorInput: 'heading-settings-link-color-input',
+  matchTextColorButton: 'heading-settings-match-text-color-button',
 } as const
 
 export const htmlBlockTestIds = {
@@ -691,6 +697,8 @@ export const paragraphSettingsTestIds = {
   tagSelect: 'paragraph-settings-tag-select',
   fontSizeField: 'paragraph-settings-font-size-field',
   fontSizeInput: 'paragraph-settings-font-size-input',
+  linkColorInput: 'paragraph-settings-link-color-input',
+  matchTextColorButton: 'paragraph-settings-match-text-color-button',
 } as const
 
 export const socialsBlockTestIds = {
@@ -732,6 +740,8 @@ export const unsubscribeLinkSettingsTestIds = {
   fontSizeInput: 'unsubscribe-link-settings-font-size-input',
   textColorInput: 'unsubscribe-link-settings-text-color-input',
   backgroundColorInput: 'unsubscribe-link-settings-background-color-input',
+  linkColorInput: 'unsubscribe-link-settings-link-color-input',
+  matchTextColorButton: 'unsubscribe-link-settings-match-text-color-button',
 } as const
 
 export const previewByIdTestIds = {

package/i18n/locales/de.ts

@@ -266,6 +266,8 @@ export default {
             color: 'Farbe',
             content: 'Inhalt',
             font: 'Schriftart',
+            link: 'Link',
+            match_text_color: 'An Textfarbe anpassen',
             size: 'Größe',
             text: 'Text',
             textStyle: 'Textstil',
@@ -693,6 +695,7 @@ export default {
         default_font: 'Standardschriftart',
         email_bg_color: 'Hintergrund',
         email_content_bg_color: 'Inhalt-Hintergrund',
+        email_link_color: 'Link-Farbe',
         email_text_color: 'Text',
         extracting_colors: 'Farben werden aus dem Logo extrahiert...',
         logo: 'Logo',

package/i18n/locales/en.ts

@@ -260,6 +260,8 @@ export default {
             color: 'Color',
             content: 'Content',
             font: 'Font',
+            link: 'Link',
+            match_text_color: 'Match text color',
             size: 'Size',
             text: 'Text',
             textStyle: 'Text style',
@@ -682,6 +684,7 @@ export default {
         default_font: 'Default font',
         email_bg_color: 'Background',
         email_content_bg_color: 'Content background',
+        email_link_color: 'Link color',
         email_text_color: 'Text',
         extracting_colors: 'Extracting colors from logo...',
         logo: 'Logo',

package/i18n/locales/es.ts

@@ -261,6 +261,8 @@ export default {
             color: 'Color',
             content: 'Contenido',
             font: 'Fuente',
+            link: 'Enlace',
+            match_text_color: 'Igualar al color del texto',
             size: 'Tamaño',
             text: 'Texto',
             textStyle: 'Estilo del texto',
@@ -691,6 +693,7 @@ export default {
         default_font: 'Fuente predeterminada',
         email_bg_color: 'Fondo',
         email_content_bg_color: 'Fondo contenido',
+        email_link_color: 'Color de enlace',
         email_text_color: 'Texto',
         extracting_colors: 'Extrayendo colores del logo...',
         logo: 'Logo',

package/i18n/locales/fr.ts

@@ -262,6 +262,8 @@ export default {
             color: 'Couleur',
             content: 'Contenu',
             font: 'Police',
+            link: 'Lien',
+            match_text_color: 'Assortir à la couleur du texte',
             size: 'Taille',
             text: 'Texte',
             textStyle: 'Style de texte',
@@ -695,6 +697,7 @@ export default {
         default_font: 'Police par défaut',
         email_bg_color: 'Fond',
         email_content_bg_color: 'Fond contenu',
+        email_link_color: 'Couleur du lien',
         email_text_color: 'Texte',
         extracting_colors: 'Extraction des couleurs du logo...',
         logo: 'Logo',

package/i18n/locales/it.ts

@@ -261,6 +261,8 @@ export default {
             color: 'Colore',
             content: 'Contenuto',
             font: 'Font',
+            link: 'Link',
+            match_text_color: 'Abbina al colore del testo',
             size: 'Dimensione',
             text: 'Testo',
             textStyle: 'Stile testo',
@@ -688,6 +690,7 @@ export default {
         default_font: 'Font predefinito',
         email_bg_color: 'Sfondo',
         email_content_bg_color: 'Sfondo contenuto',
+        email_link_color: 'Colore link',
         email_text_color: 'Testo',
         extracting_colors: 'Estrazione dei colori dal logo...',
         logo: 'Logo',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.2.11",
+  "version": "4.2.13-ux.0",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -36,7 +36,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "4.2.11"
+    "@dev.smartpricing/message-composer-utils": "4.2.13-ux.0"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",