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

package/app/components/Brand/BrandDrawer.vue

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

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

@@ -169,7 +169,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-2 gap-3">
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
       <ColorInput
         :brand-colors="colors"
         v-model="defaultEmailSettings.backgroundColor"
@@ -185,11 +185,6 @@ function removeColor(index: number) {
         v-model="defaultEmailSettings.textColor"
         :label="$t('pages.brands.fields.email_text_color')"
       />
-      <ColorInput
-        :brand-colors="colors"
-        v-model="defaultEmailSettings.linkColor"
-        :label="$t('pages.brands.fields.email_link_color')"
-      />
     </div>
   </div>
 

package/app/components/Editor/RichTextEditor.vue

@@ -9,7 +9,6 @@ import type {
   RefineTextResponse,
 } from '@dev.smartpricing/message-composer-utils/types'
 import {
-  buildLinkHTMLAttributes,
   convertToWhatsappMarkdown,
   getTipTapExtensions,
   sanitizeContent,
@@ -40,7 +39,6 @@ const props = withDefaults(
     horizontalRule?: boolean
     alignment?: boolean
     link?: boolean
-    linkColor?: string
     emoji?: boolean
   }>(),
   {
@@ -136,12 +134,9 @@ const starterKitConfig = computed(() => {
     link: props.link
       ? {
           openOnClick: false,
-          // 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' },
+          HTMLAttributes: {
+            class: 'text-primary-600 underline',
+          },
         }
       : false,
     heading: false,
@@ -378,7 +373,7 @@ defineExpose({
 </script>
 
 <template>
-  <div :data-testid="richTextEditorTestIds.root" :style="{ '--link-color': linkColor }">
+  <div :data-testid="richTextEditorTestIds.root">
     <div class="rounded-md border border-accented overflow-hidden">
       <UEditor
         ref="editorRef"

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

@@ -18,7 +18,6 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
-    linkColor: { mode: 'live' },
   }),
 })
 
@@ -48,7 +47,6 @@ 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,19 +23,6 @@ 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: {
@@ -51,7 +38,6 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_FOOTER_SETTINGS.textColor,
-      linkColor: DEFAULT_FOOTER_SETTINGS.linkColor,
       backgroundColor: DEFAULT_FOOTER_SETTINGS.backgroundColor,
     },
   })
@@ -77,7 +63,6 @@ defineOptions({
         underline
         alignment
         link
-        :link-color="resolvedLinkColor"
         emoji
         dynamic-values
       />
@@ -128,25 +113,6 @@ 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,7 +18,6 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
-    linkColor: { mode: 'live' },
   }),
 })
 
@@ -48,7 +47,6 @@ 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,19 +30,6 @@ 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}`),
@@ -64,7 +51,6 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_HEADING_SETTINGS.textColor,
-      linkColor: DEFAULT_HEADING_SETTINGS.linkColor,
       backgroundColor: DEFAULT_HEADING_SETTINGS.backgroundColor,
     },
   })
@@ -97,7 +83,6 @@ defineOptions({
         underline
         alignment
         link
-        :link-color="resolvedLinkColor"
         emoji
         improve
         generate
@@ -161,25 +146,6 @@ 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,7 +18,6 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
-    linkColor: { mode: 'live' },
   }),
 })
 
@@ -48,7 +47,6 @@ 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,19 +30,6 @@ 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}`),
@@ -64,7 +51,6 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_PARAGRAPH_SETTINGS.textColor,
-      linkColor: DEFAULT_PARAGRAPH_SETTINGS.linkColor,
       backgroundColor: DEFAULT_PARAGRAPH_SETTINGS.backgroundColor,
     },
   })
@@ -99,7 +85,6 @@ defineOptions({
         horizontal-rule
         alignment
         link
-        :link-color="resolvedLinkColor"
         emoji
         improve
         generate
@@ -162,25 +147,6 @@ 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,7 +17,6 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
-    linkColor: { mode: 'live' },
   }),
 })
 
@@ -46,7 +45,6 @@ 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,19 +24,6 @@ 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: {
@@ -52,7 +39,6 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.textColor,
-      linkColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.linkColor,
       backgroundColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.backgroundColor,
     },
   })
@@ -77,7 +63,6 @@ defineOptions({
         italic
         underline
         link
-        :link-color="resolvedLinkColor"
         dynamic-values
         :data-testid="unsubscribeLinkSettingsTestIds.contentEditor"
       />
@@ -128,24 +113,6 @@ 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,7 +87,9 @@ const emailEditorStore = useEmailEditorStore()
 const composerContext = useComposerContext()
 const { mutate: sendTest, isLoading: isSending, status } = useSendTestEmailMutation()
 
-const senderEmails = computed(() => composerContext.organizationData?.value?.senderEmails ?? [])
+const defaultSenderEmail = computed(
+  () => composerContext.organizationData?.value?.senderEmail ?? '',
+)
 
 const accommodationName = computed(
   () => composerContext.organizationData?.value?.accommodationName ?? '',
@@ -100,11 +102,10 @@ const state = ref<Schema>({
 })
 
 watch(
-  senderEmails,
-  (emails) => {
-    const [firstEmail] = emails
-    if (!state.value.from && firstEmail) {
-      state.value.from = firstEmail
+  defaultSenderEmail,
+  (email) => {
+    if (!state.value.from) {
+      state.value.from = email
     }
   },
   { immediate: true },
@@ -135,7 +136,9 @@ const schema = z.object({
       { message: t('editor.validation.error.emailInvalid') },
     ),
   sender_name: z.string().optional(),
-  from: z.string().min(1, t('editor.validation.error.emailRequired')),
+  from: z.string().refine((value) => !value || isEmail(value), {
+    message: t('editor.validation.error.emailInvalid'),
+  }),
 })
 
 type Schema = z.output<typeof schema>
@@ -214,16 +217,11 @@ watch(status, (newStatus) => {
             :data-testid="sendTestEmailModalTestIds.toInput"
           />
         </UFormField>
-        <UFormField
-          name="from"
-          :label="$t('pages.email.test_email_from')"
-          :data-testid="sendTestEmailModalTestIds.fromFormField"
-        >
-          <USelectMenu
+        <UFormField name="from" :label="$t('pages.email.test_email_from')">
+          <UInput
             v-model="state.from"
-            :items="senderEmails"
+            type="email"
             :placeholder="$t('pages.email.test_email_from_placeholder')"
-            :data-testid="sendTestEmailModalTestIds.fromSelect"
           />
         </UFormField>
         <UFormField

package/app/composables/composerContext.ts

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

package/app/utils/testIds.const.ts

@@ -331,8 +331,6 @@ 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',
@@ -617,8 +615,6 @@ 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 = {
@@ -657,8 +653,6 @@ 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 = {
@@ -697,8 +691,6 @@ 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 = {
@@ -740,8 +732,6 @@ 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,8 +266,6 @@ export default {
             color: 'Farbe',
             content: 'Inhalt',
             font: 'Schriftart',
-            link: 'Link',
-            match_text_color: 'An Textfarbe anpassen',
             size: 'Größe',
             text: 'Text',
             textStyle: 'Textstil',
@@ -695,7 +693,6 @@ 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,8 +260,6 @@ export default {
             color: 'Color',
             content: 'Content',
             font: 'Font',
-            link: 'Link',
-            match_text_color: 'Match text color',
             size: 'Size',
             text: 'Text',
             textStyle: 'Text style',
@@ -684,7 +682,6 @@ 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,8 +261,6 @@ 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',
@@ -693,7 +691,6 @@ 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,8 +262,6 @@ 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',
@@ -697,7 +695,6 @@ 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,8 +261,6 @@ 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',
@@ -690,7 +688,6 @@ 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-ux.2",
+  "version": "4.2.11",
   "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-ux.2"
+    "@dev.smartpricing/message-composer-utils": "4.2.11"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",