@dev.smartpricing/message-composer-layer 1.0.20 → 1.0.21

package/app/api/brands.ts

@@ -41,7 +41,7 @@ export const brandsApi = {
   preview: (data: {
     message: PostEntity<EmailMessage>
     parameters?: Record<string, unknown>
-    brand?: BrandCascadeData | null
+    brand?: BrandCascadeData | undefined
   }) =>
     apiClient<CompileEmailResponse>('/message-groups/preview', {
       method: 'POST',

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

@@ -5,6 +5,10 @@ import { isValidUrl } from '@dev.smartpricing/message-composer-utils/utils'
 
 const socials = defineModel<BrandSocials>({ required: true })
 
+const { t } = useI18n()
+
+const touched = ref<Partial<Record<SocialPlatform, boolean>>>({})
+
 function socialLabel(platform: SocialPlatform): string {
   return platform.charAt(0).toUpperCase() + platform.slice(1)
 }
@@ -16,33 +20,48 @@ function updateUrl(platform: SocialPlatform, value: string) {
     updated[platform] = trimmed
   } else {
     delete updated[platform]
+    touched.value = { ...touched.value, [platform]: false }
   }
   socials.value = updated
 }
 
-function hasError(value: string | undefined): boolean {
-  return !!value && !isValidUrl(value)
+function onBlur(platform: SocialPlatform) {
+  if (socials.value?.[platform]) {
+    touched.value = { ...touched.value, [platform]: true }
+  }
+}
+
+function fieldError(platform: SocialPlatform): string | undefined {
+  const value = socials.value?.[platform]
+  if (!value || !touched.value[platform]) return undefined
+  return isValidUrl(value) ? undefined : t('pages.brands.validation.invalid_url_format')
 }
 </script>
 
 <template>
   <div class="space-y-4">
-    <div
+    <UFormField
       v-for="platform in SOCIAL_PLATFORMS"
       :key="platform"
-      class="flex items-center gap-3 p-3 rounded-lg border border-neutral-200"
+      :error="fieldError(platform)"
+      class="w-full"
     >
-      <span class="text-sm font-medium w-24 shrink-0">
-        {{ socialLabel(platform) }}
-      </span>
-      <UInput
-        :model-value="socials?.[platform] ?? ''"
-        :placeholder="`https://${platform}.com/...`"
-        :color="hasError(socials?.[platform]) ? 'error' : undefined"
-        class="flex-1"
-        size="sm"
-        @update:model-value="updateUrl(platform, $event as string)"
-      />
-    </div>
+      <UFieldGroup class="w-full">
+        <UBadge
+          class="w-34"
+          variant="outline"
+          color="neutral"
+          size="lg"
+          :label="socialLabel(platform)"
+        />
+        <UInput
+          :model-value="socials?.[platform] ?? ''"
+          :placeholder="`https://${platform}.com/...`"
+          :color="fieldError(platform) ? 'error' : undefined"
+          @update:model-value="updateUrl(platform, $event as string)"
+          @blur="onBlur(platform)"
+        />
+      </UFieldGroup>
+    </UFormField>
   </div>
 </template>

package/app/components/Common/ColorInput.vue

@@ -97,7 +97,6 @@ if (color.value === 'transparent') {
 <template>
   <UPopover :data-testid="colorInputTestIds.popover">
     <UButton
-      :label="label"
       color="neutral"
       variant="outline"
       class="w-full"
@@ -106,9 +105,10 @@ if (color.value === 'transparent') {
       <template #leading>
         <span
           :style="chip"
-          class="size-8 rounded-full border"
+          class="size-8 rounded-full border shrink-0"
           :class="isUsingDefault ? 'border-primary-400 border-2' : 'border-neutral-300'"
         />
+        <STruncatedText v-if="label" :text="label" />
       </template>
       <template #trailing>
         <slot name="trailing"></slot>

package/app/components/Composer/BrandList.vue

@@ -114,6 +114,7 @@ function askDelete(brand: BrandFromDb) {
       label: t('common.actions.cancel'),
     },
     action: async () => {
+      editingBrandId.value = undefined
       await deleteBrand(brand.id)
       emit('deleted', brand)
       useToast().add({

package/i18n/locales/de.ts

@@ -292,12 +292,12 @@ Diese Nachrichten müssen funktional sein, nicht werblich.
         add_color: 'Farbe hinzufügen',
         extracting_colors: 'Farben werden aus dem Logo extrahiert...',
         default_email_colors: 'Standard-E-Mail-Farben',
-        email_bg_color: 'E-Mail-Hintergrundfarbe',
-        email_content_bg_color: 'E-Mail-Inhalt-Hintergrundfarbe',
-        email_text_color: 'E-Mail-Textfarbe',
+        email_bg_color: 'Hintergrund',
+        email_content_bg_color: 'Inhalt-Hintergrund',
+        email_text_color: 'Text',
         default_button_colors: 'Standard-Schaltflächen-Farben',
-        button_text_color: 'Schaltflächen-Textfarbe',
-        button_bg_color: 'Schaltflächen-Hintergrundfarbe',
+        button_text_color: 'Text',
+        button_bg_color: 'Hintergrund',
         default_font: 'Standardschriftart',
       },
       actions: {
@@ -308,6 +308,7 @@ Diese Nachrichten müssen funktional sein, nicht werblich.
       validation: {
         name_required: 'Name ist erforderlich',
         invalid_social_url: 'Eine oder mehrere Social-URLs sind ungültig',
+        invalid_url_format: 'Ungültiges URL-Format',
       },
       preview: {
         title: 'Vorschau',
@@ -741,6 +742,7 @@ Diese Nachrichten müssen funktional sein, nicht werblich.
             width: 'Logobreite',
             alignment: 'Ausrichtung',
             background: 'Hintergrundfarbe',
+            reset: 'Auf Standard zurücksetzen',
           },
         },
         footer: {

package/i18n/locales/en.ts

@@ -304,6 +304,7 @@ These messages must be functional, not promotional.
       validation: {
         name_required: 'Brand name is required',
         invalid_social_url: 'One or more social URLs are invalid',
+        invalid_url_format: 'Invalid URL format',
       },
       preview: {
         title: 'Preview',

package/i18n/locales/es.ts

@@ -289,12 +289,12 @@ Estos mensajes deben ser funcionales, no promocionales.
         add_color: 'Añadir color',
         extracting_colors: 'Extrayendo colores del logo...',
         default_email_colors: 'Colores de correo predeterminados',
-        email_bg_color: 'Color de fondo del correo',
-        email_content_bg_color: 'Color de fondo del contenido del correo',
-        email_text_color: 'Color del texto del correo',
+        email_bg_color: 'Fondo',
+        email_content_bg_color: 'Fondo contenido',
+        email_text_color: 'Texto',
         default_button_colors: 'Colores de botón predeterminados',
-        button_text_color: 'Color del texto del botón',
-        button_bg_color: 'Color de fondo del botón',
+        button_text_color: 'Texto',
+        button_bg_color: 'Fondo',
         default_font: 'Fuente predeterminada',
       },
       actions: {
@@ -305,6 +305,7 @@ Estos mensajes deben ser funcionales, no promocionales.
       validation: {
         name_required: 'El nombre es obligatorio',
         invalid_social_url: 'Una o más URLs sociales no son válidas',
+        invalid_url_format: 'Formato de URL no válido',
       },
       preview: {
         title: 'Vista previa',
@@ -740,6 +741,7 @@ Estos mensajes deben ser funcionales, no promocionales.
             width: 'Ancho del logo',
             alignment: 'Alineación',
             background: 'Color de fondo',
+            reset: 'Restablecer valores predeterminados',
           },
         },
         footer: {

package/i18n/locales/fr.ts

@@ -289,12 +289,12 @@ Ces messages doivent être fonctionnels, et non promotionnels.
         add_color: 'Ajouter une couleur',
         extracting_colors: 'Extraction des couleurs du logo...',
         default_email_colors: "Couleurs d'e-mail par défaut",
-        email_bg_color: "Couleur de fond de l'e-mail",
-        email_content_bg_color: "Couleur de fond du contenu de l'e-mail",
-        email_text_color: "Couleur du texte de l'e-mail",
+        email_bg_color: 'Fond',
+        email_content_bg_color: 'Fond contenu',
+        email_text_color: 'Texte',
         default_button_colors: 'Couleurs de bouton par défaut',
-        button_text_color: 'Couleur du texte du bouton',
-        button_bg_color: 'Couleur de fond du bouton',
+        button_text_color: 'Texte',
+        button_bg_color: 'Fond',
         default_font: 'Police par défaut',
       },
       actions: {
@@ -305,6 +305,7 @@ Ces messages doivent être fonctionnels, et non promotionnels.
       validation: {
         name_required: 'Le nom est requis',
         invalid_social_url: 'Une ou plusieurs URL de réseaux sociaux sont invalides',
+        invalid_url_format: "Format d'URL invalide",
       },
       preview: {
         title: 'Aperçu',
@@ -744,6 +745,7 @@ Ces messages doivent être fonctionnels, et non promotionnels.
             width: 'Largeur du logo',
             alignment: 'Alignement',
             background: 'Couleur d’arrière-plan',
+            reset: 'Réinitialiser par défaut',
           },
         },
         footer: {

package/i18n/locales/it.ts

@@ -289,12 +289,12 @@ Questi messaggi devono essere funzionali, non promozionali.
         add_color: 'Aggiungi colore',
         extracting_colors: 'Estrazione dei colori dal logo...',
         default_email_colors: 'Colori email predefiniti',
-        email_bg_color: 'Colore sfondo email',
-        email_content_bg_color: 'Colore sfondo contenuto email',
-        email_text_color: 'Colore testo email',
+        email_bg_color: 'Sfondo',
+        email_content_bg_color: 'Sfondo contenuto',
+        email_text_color: 'Testo',
         default_button_colors: 'Colori pulsante predefiniti',
-        button_text_color: 'Colore testo pulsante',
-        button_bg_color: 'Colore sfondo pulsante',
+        button_text_color: 'Testo',
+        button_bg_color: 'Sfondo',
         default_font: 'Font predefinito',
       },
       actions: {
@@ -305,6 +305,7 @@ Questi messaggi devono essere funzionali, non promozionali.
       validation: {
         name_required: 'Il nome è obbligatorio',
         invalid_social_url: 'Uno o più URL social non sono validi',
+        invalid_url_format: 'Formato URL non valido',
       },
       preview: {
         title: 'Anteprima',
@@ -738,6 +739,7 @@ Questi messaggi devono essere funzionali, non promozionali.
             width: 'Larghezza logo',
             alignment: 'Allineamento',
             background: 'Colore sfondo',
+            reset: 'Ripristina predefiniti',
           },
         },
         footer: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -39,7 +39,7 @@
     "vue-router": "^5.0.6",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.1",
-    "@dev.smartpricing/message-composer-utils": "3.1.20"
+    "@dev.smartpricing/message-composer-utils": "3.1.21"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",