transactional subject override + MJML defaults + notif center language

Author: pierre-b

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [27.4] - 2026-03-01
+
+- **Notification Center**: Fixed browser language auto-save overwriting contact's manually chosen language. Now only auto-detects when contact has no language set.
+- **Email Builder**: Fixed missing MJML component defaults (border-radius, borders, background, direction, textAlign) causing styles not to render in the WYSIWYG editor
+- **Transactional Emails**: Added `subject` override to `email_options`, allowing dynamic email subject lines per API call with Liquid templating support (#281)
+
 ## [27.3] - 2026-02-28
 
 - **Segments**: Added template filter to email activity conditions, allowing segments like "opened template X at least 3 times"

config/config.go

@@ -14,7 +14,7 @@ import (
 	"github.com/spf13/viper"
 )
 
-const VERSION = "27.3"
+const VERSION = "27.4"
 
 type Config struct {
 	Server              ServerConfig

console/package-lock.json

@@ -373,13 +373,15 @@ export class MjSectionBlock extends BaseEmailBlock {
           }),
       margin: '0px auto',
       borderRadius: attrs.borderRadius !== '0px' ? attrs.borderRadius : undefined,
+      overflow: attrs.borderRadius !== '0px' ? 'hidden' : undefined,
       ...selectionStyle
     }
 
     // MJML table style - duplicates background for email client compatibility
     const tableStyle: React.CSSProperties = {
       backgroundColor: attrs.backgroundColor,
       width: '100%',
+      borderRadius: attrs.borderRadius !== '0px' ? attrs.borderRadius : undefined,
       borderTop: attrs.borderTop !== 'none' ? attrs.borderTop : undefined,
       borderRight: attrs.borderRight !== 'none' ? attrs.borderRight : undefined,
       borderBottom: attrs.borderBottom !== 'none' ? attrs.borderBottom : undefined,

console/src/components/email_builder/blocks/MjSectionBlock.tsx

@@ -15,10 +15,23 @@ export const MJ_BODY_DEFAULTS = {
 export const MJ_WRAPPER_DEFAULTS = {
   backgroundColor: 'transparent',
   fullWidthBackgroundColor: 'transparent',
+  backgroundUrl: '',
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: 'auto',
+  backgroundPosition: 'top center',
+  border: 'none',
+  borderTop: 'none',
+  borderRight: 'none',
+  borderBottom: 'none',
+  borderLeft: 'none',
+  borderRadius: '0px',
+  direction: 'ltr' as const,
+  fullWidth: '' as const,
   paddingTop: '0px',
   paddingRight: '0px',
   paddingBottom: '0px',
   paddingLeft: '0px',
+  textAlign: 'center' as const,
   cssClass: ''
 }
 
@@ -52,6 +65,7 @@ export const MJ_SECTION_DEFAULTS = {
 export const MJ_COLUMN_DEFAULTS = {
   width: '100%',
   verticalAlign: 'top' as const,
+  direction: 'ltr' as const,
   backgroundColor: 'transparent',
   innerBackgroundColor: 'transparent',
   border: 'none',
@@ -77,6 +91,7 @@ export const MJ_COLUMN_DEFAULTS = {
 export const MJ_TEXT_DEFAULTS = {
   align: 'left' as const,
   color: '#000000',
+  containerBackgroundColor: 'transparent',
   fontFamily: 'Arial, sans-serif',
   fontSize: '13px',
   fontStyle: 'normal' as const,
@@ -88,7 +103,8 @@ export const MJ_TEXT_DEFAULTS = {
   paddingRight: '25px',
   paddingBottom: '10px',
   paddingLeft: '25px',
-  backgroundColor: 'transparent'
+  backgroundColor: 'transparent',
+  cssClass: ''
 }
 
 // mj-button defaults
@@ -98,6 +114,7 @@ export const MJ_BUTTON_DEFAULTS = {
   borderRadius: '3px',
   border: 'none',
   color: '#ffffff',
+  containerBackgroundColor: 'transparent',
   fontFamily: 'Arial, sans-serif',
   fontSize: '13px',
   fontStyle: 'normal' as const,
@@ -114,7 +131,8 @@ export const MJ_BUTTON_DEFAULTS = {
   textDecoration: 'none',
   textTransform: 'none' as const,
   verticalAlign: 'middle' as const,
-  rel: 'noopener noreferrer'
+  rel: 'noopener noreferrer',
+  cssClass: ''
 }
 
 // mj-image defaults
@@ -126,6 +144,7 @@ export const MJ_IMAGE_DEFAULTS = {
   border: 'none',
   borderRadius: '0px',
   containerBackgroundColor: 'transparent',
+  cssClass: '',
   fluidOnMobile: 'false' as const,
   height: 'auto',
   href: '',
@@ -199,6 +218,7 @@ export const MJ_DIVIDER_DEFAULTS = {
   borderStyle: 'solid' as const,
   borderWidth: '4px',
   containerBackgroundColor: 'transparent',
+  cssClass: '',
   paddingTop: '10px',
   paddingRight: '25px',
   paddingBottom: '10px',
@@ -210,6 +230,7 @@ export const MJ_DIVIDER_DEFAULTS = {
 export const MJ_SPACER_DEFAULTS = {
   height: '20px',
   containerBackgroundColor: 'transparent',
+  cssClass: '',
   paddingTop: '0px',
   paddingRight: '0px',
   paddingBottom: '0px',
@@ -221,6 +242,7 @@ export const MJ_SOCIAL_DEFAULTS = {
   align: 'center' as const,
   borderRadius: '3px',
   containerBackgroundColor: 'transparent',
+  cssClass: '',
   iconHeight: '20px',
   iconSize: '20px',
   innerPadding: '4px',

console/src/components/email_builder/mjml-defaults.ts

@@ -131,6 +131,7 @@ export const ApiCommandModal: React.FC<ApiCommandModalProps> = ({
 }
 
 interface EmailOptions {
+  subject?: string;
   reply_to?: string;
   cc?: string[];
   bcc?: string[];

console/src/components/transactional/ApiCommandModal.tsx

@@ -746,7 +746,7 @@ const BroadcastCard: React.FC<BroadcastCardProps> = ({
                               return (
                                 <Tooltip title={t`0 opens out of 0 recipients`}>
                                   <>
-                                    <FontAwesomeIcon icon={faEye} style={{ opacity: 0.7 }} />
+                                    <FontAwesomeIcon icon={faEye} style={{ opacity: 0.7 }} className="text-purple-500" />
                                     <span className="cursor-help ml-1">{t`N/A`}</span>
                                   </>
                                 </Tooltip>
@@ -758,7 +758,7 @@ const BroadcastCard: React.FC<BroadcastCardProps> = ({
                             return (
                               <Tooltip title={t`${opens} opens out of ${recipients} recipients`}>
                                 <>
-                                  <FontAwesomeIcon icon={faEye} style={{ opacity: 0.7 }} />{' '}
+                                  <FontAwesomeIcon icon={faEye} style={{ opacity: 0.7 }} className="text-purple-500" />{' '}
                                   <span className="cursor-help ml-1">
                                     {(openRate * 100).toFixed(1)}%
                                   </span>
@@ -780,6 +780,7 @@ const BroadcastCard: React.FC<BroadcastCardProps> = ({
                                     <FontAwesomeIcon
                                       icon={faArrowPointer}
                                       style={{ opacity: 0.7 }}
+                                      className="text-cyan-500"
                                     />{' '}
                                     <span className="cursor-help ml-1">{t`N/A`}</span>
                                   </>
@@ -792,7 +793,7 @@ const BroadcastCard: React.FC<BroadcastCardProps> = ({
                             return (
                               <Tooltip title={t`${clicks} clicks out of ${recipients} recipients`}>
                                 <>
-                                  <FontAwesomeIcon icon={faArrowPointer} style={{ opacity: 0.7 }} />{' '}
+                                  <FontAwesomeIcon icon={faArrowPointer} style={{ opacity: 0.7 }} className="text-cyan-500" />{' '}
                                   <span className="cursor-help ml-1">
                                     {(clickRate * 100).toFixed(1)}%
                                   </span>

console/src/pages/BroadcastsPage.tsx

@@ -36,6 +36,7 @@ export interface Attachment {
 
 export interface EmailOptions {
   from_name?: string
+  subject?: string
   reply_to?: string
   cc?: string[]
   bcc?: string[]

console/src/services/api/transactional_notifications.ts

@@ -311,6 +311,7 @@ func (e *EmailProvider) DecryptSecretKeys(passphrase string) error {
 
 type EmailOptions struct {
 	FromName           *string      `json:"from_name,omitempty"` // Override default sender from name
+	Subject            *string      `json:"subject,omitempty"`   // Override template subject
 	CC                 []string     `json:"cc,omitempty"`
 	BCC                []string     `json:"bcc,omitempty"`
 	ReplyTo            string       `json:"reply_to,omitempty"`
@@ -321,6 +322,7 @@ type EmailOptions struct {
 // IsEmpty returns true if no email options are set
 func (eo EmailOptions) IsEmpty() bool {
 	return eo.FromName == nil &&
+		eo.Subject == nil &&
 		len(eo.CC) == 0 &&
 		len(eo.BCC) == 0 &&
 		eo.ReplyTo == ""
@@ -335,6 +337,7 @@ func (eo EmailOptions) ToChannelOptions() *ChannelOptions {
 
 	return &ChannelOptions{
 		FromName: eo.FromName,
+		Subject:  eo.Subject,
 		CC:       eo.CC,
 		BCC:      eo.BCC,
 		ReplyTo:  eo.ReplyTo,