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

package/app/api/meta.ts

@@ -11,6 +11,15 @@ export const metaApi = {
       body: {},
     }),
 
+  submitMessage: (messageId: string) =>
+    apiClient<{ success: boolean; templateId?: string }>(
+      `/integrations/meta/submit-message/${messageId}`,
+      {
+        method: 'POST',
+        body: {},
+      },
+    ),
+
   getJobStatus: (jobId: string) =>
     apiClient<SubmissionJob>(`/integrations/meta/submission-jobs/${jobId}`, {
       method: 'GET',

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

@@ -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-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 +185,11 @@ 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/Common/LanguageList.vue

@@ -57,6 +57,14 @@
             name="ph:check-circle-fill"
             class="text-success-500 w-4 h-4"
           />
+          <UBadge
+            v-if="getMessageStatus(lang.id)"
+            :color="statusColor(getMessageStatus(lang.id)!)"
+            variant="subtle"
+            size="sm"
+          >
+            {{ t(`status.${getMessageStatus(lang.id)}`) }}
+          </UBadge>
         </div>
       </div>
       <div class="flex items-center gap-2">
@@ -71,6 +79,16 @@
             }}
           </span>
         </div>
+        <UButton
+          v-if="canRequestReview(lang.id)"
+          size="sm"
+          @click.stop="emit('requestReview', lang.id)"
+          color="primary"
+          variant="ghost"
+          icon="ph:paper-plane-tilt"
+          :title="t('language_list.request_review')"
+          :data-testid="`${languageListTestIds.requestReviewButton}-${lang.id}`"
+        />
         <UButton
           size="sm"
           :disabled="grouped.used.length <= 1 || lang.id === 'en' || lang.id === mainLanguageId"
@@ -134,7 +152,12 @@ const availableLanguages = computed(() => {
   if (!languages.value) return { recommended: [], others: [] }
 
   const used = Object.keys(messages.value)
-  const unused = languages.value.filter((lang) => !used.includes(lang.id))
+  let unused = languages.value.filter((lang) => !used.includes(lang.id))
+
+  // WhatsApp templates only support Meta-mapped languages; hide the rest
+  if (props.renderType === 'whatsapp_v1') {
+    unused = unused.filter((lang) => lang.meta_language_code != null)
+  }
 
   const recommended = unused.filter((lang) => appContext.languages.includes(lang.id))
   const others = unused.filter((lang) => !appContext.languages.includes(lang.id))
@@ -225,8 +248,39 @@ const language = defineModel<string>('language', {
 const emit = defineEmits<{
   addLanguage: [languageId: string]
   removeLanguage: [languageId: string]
+  requestReview: [languageId: string]
 }>()
 
+// ── Per-message Meta review status (WhatsApp only) ────────────────
+// Only surfaced for persisted (saved) WhatsApp messages — unsaved drafts in
+// create mode / newly added languages have no Meta status to show yet.
+function getMessageStatus(languageId: string): string | undefined {
+  const message = messages.value[languageId]
+  if (!message || message.render_type !== 'whatsapp_v1') return undefined
+  if (!('id' in message) || !message.id) return undefined
+  return message.status as string | undefined
+}
+
+// Mirrors the group rule, minus approved (approved is terminal here):
+// a saved WhatsApp language can request review while draft or rejected.
+function canRequestReview(languageId: string): boolean {
+  const status = getMessageStatus(languageId)
+  return status === 'draft' || status === 'rejected'
+}
+
+function statusColor(status: string) {
+  switch (status) {
+    case 'approved':
+      return 'success' as const
+    case 'pending':
+      return 'warning' as const
+    case 'rejected':
+      return 'error' as const
+    default:
+      return 'neutral' as const
+  }
+}
+
 // Helper functions for change tracking
 function hasLanguageChanges(languageId: string): boolean {
   const message = messages.value[languageId]

package/app/components/Common/MessageGroupSelect.vue

@@ -1,17 +1,29 @@
 <script setup lang="ts">
-import type { RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import type { RenderType, MessageStatus } from '@dev.smartpricing/message-composer-utils/types'
 import { useMessageGroupsQuery } from '~/queries/messageGroups'
 
-defineOptions({ name: 'TemplateSelect' })
+defineOptions({ name: 'MessageGroupSelect' })
 
 const props = withDefaults(
   defineProps<{
     renderType?: RenderType
     placeholder?: string
     searchPlaceholder?: string
+    /**
+     * Map of message-group id -> reason text explaining why the group is not
+     * selectable (e.g. already linked to another newsletter by an external
+     * system). Presence of a key disables the group; the value is shown verbatim
+     * as the tooltip, so it must already be localized by the caller.
+     *
+     * NOTE: the caller is responsible for excluding the currently-selected group
+     * when editing, otherwise the current selection will render as disabled.
+     */
+    disabledGroupReasons?: Record<string, string>
+    /** Overrides the "hide inactive" filter label. Defaults to the built-in translation. */
+    hideFilterLabel?: string
   }>(),
   {
-    placeholder: 'Select a template',
+    placeholder: 'Select a message group',
     searchPlaceholder: 'Search...',
   },
 )
@@ -22,16 +34,48 @@ const emit = defineEmits<{
   select: [item: { id: string; name: string }]
 }>()
 
+const { t } = useI18n()
+
 const { data: messageGroups, isLoading } = useMessageGroupsQuery(() => ({
   renderType: props.renderType,
 }))
 
+const hideInactive = ref(false)
+
+function isGroupActive(messages: Array<{ status: MessageStatus }>): boolean {
+  return messages.length > 0 && messages.every((m) => m.status === 'approved')
+}
+
 const items = computed(() => {
   if (!messageGroups.value) return []
-  return messageGroups.value.map((group) => ({
-    label: group.name,
-    value: group.id,
-  }))
+  return messageGroups.value.reduce<
+    Array<{
+      label: string
+      value: string
+      disabled: boolean
+      tooltip?: string
+      chip: { color: 'success' | 'neutral' }
+    }>
+  >((acc, group) => {
+    const externalReason = props.disabledGroupReasons?.[group.id]
+    const externallyUsed = externalReason != null
+    const active = isGroupActive(group.messages)
+    const disabled = !active || externallyUsed
+    if (hideInactive.value && disabled) return acc
+    acc.push({
+      label: group.name,
+      value: group.id,
+      disabled,
+      // External reason wins over the inactive tooltip when both apply.
+      tooltip: externallyUsed
+        ? externalReason
+        : !active
+          ? t('common.messageGroupSelect.inactive_tooltip')
+          : undefined,
+      chip: { color: disabled ? 'neutral' : 'success' },
+    })
+    return acc
+  }, [])
 })
 
 function handleUpdate(value: string) {
@@ -50,7 +94,23 @@ function handleUpdate(value: string) {
     searchable
     :placeholder="placeholder"
     :search-input="{ placeholder: searchPlaceholder }"
-    :data-testid="templateSelectTestIds.root"
+    :data-testid="messageGroupSelectTestIds.root"
     @update:model-value="handleUpdate"
-  />
+  >
+    <template #item-label="{ item }">
+      <UTooltip v-if="item.disabled" :text="item.tooltip">
+        <span class="text-muted">{{ item.label }}</span>
+      </UTooltip>
+      <span v-else>{{ item.label }}</span>
+    </template>
+
+    <template #content-top>
+      <div class="flex items-center gap-2 px-2 py-1.5 border-b border-default">
+        <USwitch v-model="hideInactive" size="xs" />
+        <span class="text-xs text-muted">
+          {{ hideFilterLabel ?? t('common.messageGroupSelect.hide_inactive') }}
+        </span>
+      </div>
+    </template>
+  </USelectMenu>
 </template>

package/app/components/Composer/WhatsappComposer.vue

@@ -9,6 +9,7 @@ import type {
 import { useAppContextStore } from '@/stores/appContext'
 import { useMetaSubmissionStore } from '@/stores/metaSubmission'
 import { useMessageGroupQuery, useLanguagesQuery } from '~/queries'
+import { messagesApi } from '~/api/messages'
 import type { WaHeaderType } from '~/types/tracking'
 
 const props = defineProps<{
@@ -25,7 +26,9 @@ const store = useWhatsappComposerStore()
 const { mainLanguage } = storeToRefs(useAppContextStore())
 const { trackEvent } = useTracking()
 const { goBackOrFallback } = useGoBack()
-const { submitToMeta } = useMetaSubmissionStore()
+const { submitToMeta, submitMessageToMeta } = useMetaSubmissionStore()
+const { confirm } = useConfirm()
+const { t } = useI18n()
 
 // ── Init ──────────────────────────────────────────────────────────
 if (props.mode === 'create') {
@@ -260,6 +263,33 @@ async function requestApproval() {
   }
 }
 
+// ── Per-language review request ───────────────────────────────────
+async function onRequestReview(languageId: string) {
+  const message = store.messages[languageId] as (WhatsappMessage & { id?: string }) | undefined
+  if (!message?.id) return
+
+  const languageName = languages.value?.find((l) => l.id === languageId)?.name ?? languageId
+
+  confirm({
+    title: t('dialogs.request_review.title'),
+    message: t('dialogs.request_review.message', { language: languageName }),
+    confirmProps: { label: t('dialogs.request_review.confirm') },
+    cancelProps: { label: t('common.actions.cancel') },
+    action: async () => {
+      // Decision C: persist only this language's current edits, then submit it.
+      await messagesApi.update(message.id!, message)
+      await submitMessageToMeta(message.id!)
+      // Reflect pending locally instead of refetching the group, so unsaved
+      // edits in other languages are preserved.
+      store.messages[languageId] = { ...message, status: 'pending' }
+      track('request_review_language', {
+        ...getWaBaseProps(),
+        language: languageId,
+      })
+    },
+  })
+}
+
 // ── Public action handlers ────────────────────────────────────────
 async function handleSaveDraft() {
   if (!(await validateDraft())) return
@@ -420,6 +450,7 @@ defineExpose({
       :mode="mode"
       @add-language="onAddLanguage"
       @remove-language="onRemoveLanguage"
+      @request-review="onRequestReview"
       @auto-translate-tracked="onAutoTranslateTracked"
       @preview="onPreview"
       @filters-changed="onFiltersChanged"

package/app/components/Composer/WhatsappTranslations.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   'add-language': [lang: string]
   'remove-language': [lang: string]
+  'request-review': [lang: string]
   'auto-translate-tracked': [lang: string]
   preview: [lang: string]
   'filters-changed': [
@@ -49,6 +50,7 @@ const testIds = computed(() =>
           :main-language-id="store.language"
           @add-language="emit('add-language', $event)"
           @remove-language="emit('remove-language', $event)"
+          @request-review="emit('request-review', $event)"
         />
       </div>
       <div class="overflow-y-auto" v-if="store.currentMessage && store.targetMessage">

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/stores/metaSubmission.ts

@@ -35,6 +35,31 @@ export const useMetaSubmissionStore = () => {
     }
   }
 
+  // Submit a single message (one language) for Meta review. Synchronous:
+  // the endpoint submits inline and flips the message to `pending`, so there
+  // is no job to poll — unlike the group flow.
+  const submitMessageToMeta = async (messageId: string) => {
+    if (!isConfigured.value) {
+      throw new Error('Meta configuration not available')
+    }
+
+    try {
+      const response = await metaApi.submitMessage(messageId)
+      toast.add({
+        color: 'success',
+        title: t('meta_submission.message_success'),
+      })
+      return response
+    } catch (error) {
+      console.error('Failed to submit message to Meta:', error)
+      toast.add({
+        color: 'error',
+        title: t('meta_submission.message_error'),
+      })
+      throw error
+    }
+  }
+
   const startBackgroundPolling = (jobId: string, messageGroupId: string) => {
     // Add job to active jobs
     activeJobs.value.set(jobId, {
@@ -110,6 +135,7 @@ export const useMetaSubmissionStore = () => {
     hasActiveJobs,
     isConfigured,
     submitToMeta,
+    submitMessageToMeta,
     startBackgroundPolling,
     stopPolling,
   }

package/app/types/tracking.ts

@@ -105,6 +105,7 @@ export interface TrackingEventMap {
   // === Whatsapp_edit ===
   'wa_edit.save_as_new': WaDraftProperties
   'wa_edit.request_approval': WaDraftProperties
+  'wa_edit.request_review_language': WaLanguageProperties
   'wa_edit.add_language': WaLanguageProperties
   'wa_edit.remove_language': WaLanguageProperties
   'wa_edit.auto_translate': WaLanguageProperties

package/app/utils/testIds.const.ts

@@ -122,6 +122,7 @@ export const languageListTestIds = {
   commandPalette: 'language-list-command-palette',
   languageItem: 'language-list-item',
   deleteButton: 'language-list-delete-button',
+  requestReviewButton: 'language-list-request-review-button',
 } as const
 
 export const loadingOverlayTestIds = {
@@ -614,6 +615,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 = {
@@ -652,6 +655,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 = {
@@ -690,6 +695,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 = {
@@ -731,6 +738,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 = {
@@ -738,6 +747,9 @@ export const previewByIdTestIds = {
   loading: 'preview-by-id-loading',
 } as const
 
-export const templateSelectTestIds = {
-  root: 'template-select-root',
+export const messageGroupSelectTestIds = {
+  root: 'message-group-select-root',
 } as const
+
+/** @deprecated Use `messageGroupSelectTestIds` instead */
+export const templateSelectTestIds = messageGroupSelectTestIds

package/i18n/locales/de.ts

@@ -54,6 +54,11 @@ export default {
     search: 'Suchen...',
     success: 'Erfolg',
     translation_failed: 'Übersetzung fehlgeschlagen',
+    messageGroupSelect: {
+      inactive_tooltip:
+        'Diese Nachrichtengruppe enthält nicht genehmigte oder fehlende Nachrichten',
+      hide_inactive: 'Inaktive ausblenden',
+    },
     view_less: 'Weniger anzeigen',
     view_more: 'Mehr anzeigen',
   },
@@ -96,6 +101,12 @@ export default {
       success: '„{name}“ wurde veröffentlicht.',
       title: 'Nachricht veröffentlichen',
     },
+    request_review: {
+      confirm: 'Überprüfung anfordern',
+      message:
+        'Die {language}-Übersetzung zur Überprüfung einreichen? Sie können sie nicht bearbeiten, solange sie auf Genehmigung wartet.',
+      title: 'Überprüfung anfordern',
+    },
     unpublish_message_group: {
       message:
         'Veröffentlichung von „{name}“ aufheben? Es ist dann nicht mehr für Kundinnen und Kunden sichtbar.',
@@ -255,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',
@@ -608,6 +621,7 @@ export default {
     change: 'Änderung',
     changes: 'Änderungen',
     changes_count: '{count} Änderungen',
+    request_review: 'Überprüfung anfordern',
     translated_percentage: '{percentage}% übersetzt',
     unsaved_changes: 'Diese Übersetzung hat ungespeicherte Änderungen',
   },
@@ -620,6 +634,8 @@ export default {
   meta_submission: {
     error: 'Meta-Übermittlung mit Fehlern abgeschlossen',
     failed_count: 'Fehlgeschlagene Nachrichten: {count}',
+    message_error: 'Übersetzung konnte nicht zur Überprüfung eingereicht werden',
+    message_success: 'Übersetzung zur Überprüfung eingereicht',
     success: 'Nachrichten an Meta übermittelt',
   },
   modals: {
@@ -679,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

@@ -53,6 +53,10 @@ export default {
     search: 'Search...',
     success: 'Success',
     translation_failed: 'Translation failed',
+    messageGroupSelect: {
+      inactive_tooltip: 'This message group has unapproved or missing messages',
+      hide_inactive: 'Hide inactive',
+    },
     view_less: 'View less',
     view_more: 'View more',
   },
@@ -93,6 +97,12 @@ export default {
       success: '"{name}" has been published.',
       title: 'Publish message',
     },
+    request_review: {
+      confirm: 'Request review',
+      message:
+        "Submit the {language} translation for review? You won't be able to edit it while it's pending approval.",
+      title: 'Request review',
+    },
     unpublish_message_group: {
       message: 'Unpublish "{name}"? It will no longer be visible to clients.',
       success: '"{name}" has been unpublished.',
@@ -250,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',
@@ -599,6 +611,7 @@ export default {
     change: 'change',
     changes: 'changes',
     changes_count: '{count} changes',
+    request_review: 'Request review',
     translated_percentage: '{percentage}% translated',
     unsaved_changes: 'This translation has unsaved changes',
   },
@@ -611,6 +624,8 @@ export default {
   meta_submission: {
     error: 'Meta submission completed with errors',
     failed_count: 'Failed messages: {count}',
+    message_error: 'Failed to submit translation for review',
+    message_success: 'Translation submitted for review',
     success: 'Messages submitted to Meta',
   },
   modals: {
@@ -669,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

@@ -54,6 +54,10 @@ export default {
     search: 'Buscar...',
     success: 'Éxito',
     translation_failed: 'La traducción ha fallado',
+    messageGroupSelect: {
+      inactive_tooltip: 'Este grupo de mensajes tiene mensajes no aprobados o faltantes',
+      hide_inactive: 'Ocultar inactivos',
+    },
     view_less: 'Ver menos',
     view_more: 'Ver más',
   },
@@ -94,6 +98,12 @@ export default {
       success: '"{name}" se ha publicado.',
       title: 'Publicar mensaje',
     },
+    request_review: {
+      confirm: 'Solicitar revisión',
+      message:
+        '¿Enviar la traducción en {language} para revisión? No podrá editarla mientras esté pendiente de aprobación.',
+      title: 'Solicitar revisión',
+    },
     unpublish_message_group: {
       message: '¿Despublicar "{name}"? Ya no será visible para los clientes.',
       success: '"{name}" se ha despublicado.',
@@ -251,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',
@@ -607,6 +619,7 @@ export default {
     change: 'cambio',
     changes: 'cambios',
     changes_count: '{count} cambios',
+    request_review: 'Solicitar revisión',
     translated_percentage: '{percentage}% traducido',
     unsaved_changes: 'Esta traducción tiene cambios sin guardar',
   },
@@ -619,6 +632,8 @@ export default {
   meta_submission: {
     error: 'Envío a Meta completado con errores',
     failed_count: 'Mensajes fallidos: {count}',
+    message_error: 'No se pudo enviar la traducción para revisión',
+    message_success: 'Traducción enviada para revisión',
     success: 'Mensajes enviados a Meta',
   },
   modals: {
@@ -678,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

@@ -54,6 +54,10 @@ export default {
     search: 'Rechercher...',
     success: 'Succès',
     translation_failed: 'Échec de la traduction',
+    messageGroupSelect: {
+      inactive_tooltip: 'Ce groupe de messages contient des messages non approuvés ou manquants',
+      hide_inactive: 'Masquer inactifs',
+    },
     view_less: 'Afficher moins',
     view_more: 'Afficher plus',
   },
@@ -94,6 +98,12 @@ export default {
       success: '« {name} » a été publié.',
       title: 'Publier le message',
     },
+    request_review: {
+      confirm: 'Demander une révision',
+      message:
+        'Envoyer la traduction {language} pour révision ? Vous ne pourrez pas la modifier tant qu’elle est en attente d’approbation.',
+      title: 'Demander une révision',
+    },
     unpublish_message_group: {
       message: 'Dépublier « {name} » ? Il ne sera plus visible aux clients.',
       success: '« {name} » a été dépublié.',
@@ -252,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',
@@ -611,6 +623,7 @@ export default {
     change: 'modification',
     changes: 'modifications',
     changes_count: '{count} modifications',
+    request_review: 'Demander une révision',
     translated_percentage: '{percentage}% traduit',
     unsaved_changes: 'Cette traduction contient des modifications non enregistrées',
   },
@@ -623,6 +636,8 @@ export default {
   meta_submission: {
     error: 'Soumission à Meta terminée avec des erreurs',
     failed_count: 'Messages en échec : {count}',
+    message_error: 'Échec de l’envoi de la traduction pour révision',
+    message_success: 'Traduction envoyée pour révision',
     success: 'Messages soumis à Meta',
   },
   modals: {
@@ -682,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

@@ -53,6 +53,10 @@ export default {
     search: 'Cerca...',
     success: 'Successo',
     translation_failed: 'Traduzione non riuscita',
+    messageGroupSelect: {
+      inactive_tooltip: 'Questo gruppo di messaggi contiene messaggi non approvati o mancanti',
+      hide_inactive: 'Nascondi inattivi',
+    },
     view_less: 'Mostra meno',
     view_more: 'Mostra di più',
   },
@@ -93,6 +97,12 @@ export default {
       success: '"{name}" è stato pubblicato.',
       title: 'Pubblica messaggio',
     },
+    request_review: {
+      confirm: 'Richiedi revisione',
+      message:
+        'Inviare per la revisione la traduzione in {language}? Non potrai modificarla finché è in attesa di approvazione.',
+      title: 'Richiedi revisione',
+    },
     unpublish_message_group: {
       message: 'Annullare la pubblicazione di "{name}"? Non sarà più visibile ai clienti.',
       success: 'La pubblicazione di "{name}" è stata annullata.',
@@ -251,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',
@@ -604,6 +616,7 @@ export default {
     change: 'modifica',
     changes: 'modifiche',
     changes_count: '{count} modifiche',
+    request_review: 'Richiedi revisione',
     translated_percentage: '{percentage}% tradotto',
     unsaved_changes: 'Questa traduzione ha modifiche non salvate',
   },
@@ -616,6 +629,8 @@ export default {
   meta_submission: {
     error: 'Invio a Meta completato con errori',
     failed_count: 'Messaggi non riusciti: {count}',
+    message_error: 'Impossibile inviare la traduzione per la revisione',
+    message_success: 'Traduzione inviata per la revisione',
     success: 'Messaggi inviati a Meta',
   },
   modals: {
@@ -675,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.10",
+  "version": "4.2.11-ux.1",
   "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.10"
+    "@dev.smartpricing/message-composer-utils": "4.2.11-ux.1"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",