@dev.smartpricing/message-composer-layer 4.2.5 → 4.2.6-brands.0

package/app/api/brands.ts

@@ -21,7 +21,7 @@ export const brandsApi = {
     if (options?.sort_by) params.set('sort_by', options.sort_by)
     if (options?.direction) params.set('direction', options.direction)
     const query = params.size ? `?${params.toString()}` : ''
-    return apiClient<BrandFromDb[]>(`/brands${query}`)
+    return apiClient<BrandWithProperties[]>(`/brands${query}`)
   },
 
   getById: (id: string) => apiClient<BrandWithProperties>(`/brands/${id}`),

package/app/components/Brand/BrandDrawer.vue

@@ -6,13 +6,15 @@ import type {
   BrandDefaultButtonSettings,
   BrandCreateBody,
   BrandSocials,
+  BrandData,
 } from '@dev.smartpricing/message-composer-utils/types'
-import { isValidUrl } from '@dev.smartpricing/message-composer-utils/utils'
+import { isValidUrl, isEmail } from '@dev.smartpricing/message-composer-utils/utils'
 import type { BrandCascadeData } from '@dev.smartpricing/message-composer-utils/utils'
 import type { BrandWithProperties } from '~/api/brands'
 import BrandPreview from '~/components/Brand/BrandPreview.vue'
 import BrandStepGeneral from '~/components/Brand/Steps/BrandStepGeneral.vue'
 import BrandStepVisual from '~/components/Brand/Steps/BrandStepVisual.vue'
+import BrandStepContactInfo from '~/components/Brand/Steps/BrandStepContactInfo.vue'
 import BrandStepSocials from '~/components/Brand/Steps/BrandStepSocials.vue'
 import { useBrandQuery, useCreateBrandMutation, useUpdateBrandMutation } from '~/queries'
 import type { BrandCreateResponse } from '~/api/brands'
@@ -48,7 +50,7 @@ const isSaving = computed(() => isCreating.value || isUpdating.value)
 // ============================================================================
 // NAVIGATION
 // ============================================================================
-type Step = 'general' | 'visual' | 'socials'
+type Step = 'general' | 'visual' | 'contact_info' | 'socials'
 const activeStep = ref<Step>('general')
 
 const navItems = computed<NavigationMenuItem[]>(() => [
@@ -68,6 +70,14 @@ const navItems = computed<NavigationMenuItem[]>(() => [
       activeStep.value = 'visual'
     },
   },
+  {
+    label: t('pages.brands.steps.contact_info'),
+    icon: 'ph:address-book',
+    active: activeStep.value === 'contact_info',
+    onSelect: () => {
+      activeStep.value = 'contact_info'
+    },
+  },
   {
     label: t('pages.brands.steps.socials'),
     icon: 'ph:share-network',
@@ -99,6 +109,7 @@ const defaultButtonSettings = ref<BrandDefaultButtonSettings>({
   backgroundColor: '#000000',
 })
 
+const data = ref<BrandData>({})
 const socials = ref<BrandSocials>({})
 
 // ============================================================================
@@ -124,6 +135,7 @@ function populateForm(brand: BrandWithProperties) {
   colors.value = [...brand.colors]
   defaultEmailSettings.value = { ...brand.default_email_settings }
   defaultButtonSettings.value = { ...brand.default_button_settings }
+  data.value = brand.data ? { ...brand.data } : {}
   socials.value = brand.default_socials ? { ...brand.default_socials } : {}
 }
 
@@ -143,6 +155,7 @@ function resetForm() {
     textColor: '#FFFFFF',
     backgroundColor: '#000000',
   }
+  data.value = {}
   socials.value = {}
   activeStep.value = 'general'
 }
@@ -151,6 +164,13 @@ watch(isOpen, (val) => {
   if (!val) resetForm()
 })
 
+// Pre-fill data.name with brand display name on create only
+watch(activeStep, (step) => {
+  if (step === 'contact_info' && !isEditMode.value && !data.value.name && name.value.trim()) {
+    data.value = { ...data.value, name: name.value.trim() }
+  }
+})
+
 // ============================================================================
 // PREVIEW DATA
 // ============================================================================
@@ -159,6 +179,7 @@ const brandCascadeData = computed<BrandCascadeData>(() => ({
   default_button_settings: defaultButtonSettings.value,
   default_socials: socials.value,
   logo_url: logoUrl.value || null,
+  data: data.value,
 }))
 
 // ============================================================================
@@ -168,6 +189,13 @@ function hasInvalidSocialUrls(): boolean {
   return Object.values(socials.value).some((url) => !!url && !isValidUrl(url))
 }
 
+function hasInvalidContactInfo(): boolean {
+  const d = data.value
+  if (d.website && !isValidUrl(d.website)) return true
+  if (d.email && !isEmail(d.email)) return true
+  return false
+}
+
 async function handleSave() {
   if (!name.value.trim()) {
     useToast().add({
@@ -178,6 +206,15 @@ async function handleSave() {
     return
   }
 
+  if (hasInvalidContactInfo()) {
+    useToast().add({
+      color: 'error',
+      title: t('pages.brands.validation.invalid_contact_info'),
+    })
+    activeStep.value = 'contact_info'
+    return
+  }
+
   if (hasInvalidSocialUrls()) {
     useToast().add({
       color: 'error',
@@ -194,6 +231,7 @@ async function handleSave() {
     default_email_settings: defaultEmailSettings.value,
     default_button_settings: defaultButtonSettings.value,
     default_socials: socials.value,
+    data: data.value,
     property_ids: selectedPropertyIds.value,
   }
 
@@ -221,6 +259,7 @@ async function handleSave() {
           changedFields.push('button_settings')
         if (JSON.stringify(payload.default_socials) !== JSON.stringify(brand.default_socials))
           changedFields.push('socials')
+        if (JSON.stringify(payload.data) !== JSON.stringify(brand.data)) changedFields.push('data')
         if (
           JSON.stringify(payload.property_ids) !==
           JSON.stringify(brand.properties?.map((bp) => bp.property_id))
@@ -291,6 +330,7 @@ async function handleSave() {
             v-if="activeStep === 'general'"
             v-model:name="name"
             v-model:selected-property-ids="selectedPropertyIds"
+            :brand-id="brandId"
           />
 
           <BrandStepVisual
@@ -302,6 +342,8 @@ async function handleSave() {
             v-model:default-button-settings="defaultButtonSettings"
           />
 
+          <BrandStepContactInfo v-if="activeStep === 'contact_info'" v-model="data" />
+
           <BrandStepSocials v-if="activeStep === 'socials'" v-model="socials" />
         </div>
 

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { BrandData } from '@dev.smartpricing/message-composer-utils/types'
+import { isValidUrl, isEmail } from '@dev.smartpricing/message-composer-utils/utils'
+
+const data = defineModel<BrandData>({ required: true })
+
+const { t, locale } = useI18n()
+
+const touched = ref<Partial<Record<string, boolean>>>({})
+
+function update(field: keyof BrandData, value: string) {
+  const trimmed = value.trim()
+  data.value = {
+    ...data.value,
+    [field]: trimmed || undefined,
+  }
+}
+
+function onBlur(field: string) {
+  const value = data.value[field as keyof BrandData]
+  if (value) {
+    touched.value = { ...touched.value, [field]: true }
+  }
+}
+
+function fieldError(field: string): string | undefined {
+  const value = data.value[field as keyof BrandData]
+  if (!value || !touched.value[field]) return undefined
+
+  if (field === 'website') {
+    return isValidUrl(value) ? undefined : t('pages.brands.validation.invalid_url_format')
+  }
+  if (field === 'email') {
+    return isEmail(value) ? undefined : t('pages.brands.validation.invalid_email_format')
+  }
+  return undefined
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UFormField :label="t('pages.brands.fields.contact_name')">
+      <UInput
+        :model-value="data.name ?? ''"
+        :placeholder="t('pages.brands.fields.contact_name_placeholder')"
+        @update:model-value="update('name', $event as string)"
+      />
+    </UFormField>
+
+    <UFormField :label="t('pages.brands.fields.contact_address')">
+      <UInput
+        :model-value="data.address ?? ''"
+        :placeholder="t('pages.brands.fields.contact_address_placeholder')"
+        @update:model-value="update('address', $event as string)"
+      />
+    </UFormField>
+
+    <UFormField :label="t('pages.brands.fields.contact_telephone')">
+      <SPhoneInput
+        class="w-full"
+        :model-value="data.telephone ?? ''"
+        :locale="locale"
+        @update:model-value="update('telephone', $event as string)"
+      />
+    </UFormField>
+
+    <UFormField :label="t('pages.brands.fields.contact_email')" :error="fieldError('email')">
+      <UInput
+        :model-value="data.email ?? ''"
+        :placeholder="t('pages.brands.fields.contact_email_placeholder')"
+        :color="fieldError('email') ? 'error' : undefined"
+        @update:model-value="update('email', $event as string)"
+        @blur="onBlur('email')"
+      />
+    </UFormField>
+
+    <UFormField :label="t('pages.brands.fields.contact_website')" :error="fieldError('website')">
+      <UInput
+        :model-value="data.website ?? ''"
+        :placeholder="t('pages.brands.fields.contact_website_placeholder')"
+        :color="fieldError('website') ? 'error' : undefined"
+        @update:model-value="update('website', $event as string)"
+        @blur="onBlur('website')"
+      />
+    </UFormField>
+  </div>
+</template>

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

@@ -1,16 +1,37 @@
 <script setup lang="ts">
 import type { Property } from '@dev.smartpricing/message-composer-utils/types'
-import { usePropertiesQuery } from '~/queries'
+import { useBrandsQuery, usePropertiesQuery } from '~/queries'
+
+const props = defineProps<{
+  brandId?: string
+}>()
 
 const name = defineModel<string>('name', { required: true })
 const selectedPropertyIds = defineModel<string[]>('selectedPropertyIds', { required: true })
 
+const { t } = useI18n()
+
 const { data: properties } = usePropertiesQuery()
+const { data: brands } = useBrandsQuery()
+
+/** Map of property_id → brand name, excluding the brand currently being edited */
+const takenPropertyMap = computed(() => {
+  const map = new Map<string, string>()
+  for (const brand of brands.value ?? []) {
+    if (brand.id === props.brandId) continue
+    for (const bp of brand.properties ?? []) {
+      map.set(bp.property_id, brand.name)
+    }
+  }
+  return map
+})
 
 const propertyItems = computed(() =>
   (properties.value ?? []).map((p: Property) => ({
     label: p.name,
     value: p.id,
+    disabled: takenPropertyMap.value.has(p.id),
+    takenByBrand: takenPropertyMap.value.get(p.id),
   })),
 )
 </script>
@@ -24,7 +45,7 @@ const propertyItems = computed(() =>
     />
   </UFormField>
 
-  <!-- <UFormField :label="$t('pages.brands.fields.properties')">
+  <UFormField :label="$t('pages.brands.fields.properties')">
     <USelectMenu
       v-model="selectedPropertyIds"
       :items="propertyItems"
@@ -32,6 +53,18 @@ const propertyItems = computed(() =>
       value-key="value"
       :placeholder="$t('pages.brands.fields.properties_placeholder')"
       class="w-full"
-    />
-  </UFormField> -->
+    >
+      <template #item-label="{ item }">
+        <UTooltip
+          v-if="item.disabled"
+          :text="t('pages.brands.fields.property_taken_tooltip', { brand: item.takenByBrand })"
+        >
+          <span class="text-muted">
+            {{ item.label }}
+          </span>
+        </UTooltip>
+        <span v-else>{{ item.label }}</span>
+      </template>
+    </USelectMenu>
+  </UFormField>
 </template>

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

@@ -44,7 +44,7 @@ const buttonStyles = computed(() => {
       props.block.settings.shape === 'square'
         ? '0px'
         : props.block.settings.shape === 'rounded'
-          ? '8px'
+          ? '4px'
           : '50px',
     padding: '12px 24px',
     border: 'none',
@@ -69,7 +69,7 @@ const containerStyles = computed(() => ({
       : props.block.settings.alignment === 'center'
         ? 'center'
         : 'flex-end',
-  padding: '16px',
+  padding: '0',
 }))
 
 defineOptions({

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

@@ -35,15 +35,16 @@ const discountCodeStyles = computed(() => {
       props.block.settings.style === 'square'
         ? '0px'
         : props.block.settings.style === 'rounded'
-          ? '8px'
+          ? '4px'
           : '50px',
-    padding: '16px 24px',
+    padding: '12px 8px',
     textAlign: 'center',
-    display: 'inline-block',
   }
 
   if (props.block.settings.width === 'full_width') {
     styles.width = '100%'
+  } else {
+    styles.display = 'inline-block'
   }
 
   return styles
@@ -52,7 +53,7 @@ const discountCodeStyles = computed(() => {
 const containerStyles = computed(() => {
   return {
     backgroundColor: props.block.settings.backgroundBlock,
-    padding: '16px',
+    padding: '0',
     textAlign: 'center' as const,
   }
 })

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

@@ -12,7 +12,6 @@ defineOptions({
 
 <template>
   <div
-    class="py-4"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="dividerBlockTestIds.container"
   >

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

@@ -38,7 +38,7 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-2 relative"
+    class="relative px-[25px]"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="footerBlockTestIds.container"
   >

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

@@ -72,22 +72,18 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-4"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="gridBlockTestIds.container"
   >
-    <div
-      class="grid gap-4"
-      :class="{
-        'grid-cols-1': block.settings.columns === 1,
-        'grid-cols-2': block.settings.columns === 2,
-        'grid-cols-3': block.settings.columns === 3,
-      }"
-    >
+    <div class="flex items-center">
       <div
         v-for="(column, index) in block.settings.columnData"
         :key="column.id"
-        class="min-h-32 space-y-2 rounded border border-dashed border-neutral-300 p-2 overflow-hidden"
+        class="overflow-hidden [&_img]:w-full self-stretch flex flex-col justify-center"
+        :class="
+          column.blocks.length === 0 ? 'min-h-32 border border-dashed border-neutral-300/50' : ''
+        "
+        :style="{ width: `${100 / block.settings.columns}%` }"
         :data-testid="`${gridBlockTestIds.column}-${column.id}`"
       >
         <!-- Column blocks -->

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

@@ -38,7 +38,7 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-2 relative"
+    class="relative px-[25px]"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="headingBlockTestIds.container"
   >

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

@@ -96,10 +96,10 @@ defineOptions({
       :data-block-id="block.id"
       :data-block-type="block.type"
       :data-testid="`${indexBlockTestIds.container}-${block.id}`"
-      class="group relative rounded border-2 transition-colors"
+      class="group relative transition-colors"
       :class="{
-        'border-primary-500': isSelected,
-        'border-transparent hover:border-neutral-300': !isSelected,
+        'outline-2 outline-primary-500 outline': isSelected,
+        'outline-transparent hover:outline-2 hover:outline-neutral-300 hover:outline': !isSelected,
         'cursor-move': showDragHandle,
       }"
       @click.stop="handleClick"
@@ -153,3 +153,14 @@ defineOptions({
     </div>
   </UPopover>
 </template>
+
+<style scoped>
+:deep(.ProseMirror ul) {
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+:deep(.ProseMirror ol) {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+}
+</style>

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

@@ -38,7 +38,7 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-2 relative"
+    class="relative px-[25px]"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="paragraphBlockTestIds.container"
   >

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

@@ -36,7 +36,7 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-2 relative"
+    class="relative px-[25px]"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="unsubscribeLinkBlockTestIds.container"
   >

package/app/components/Email/SendTestEmailModal.vue

@@ -97,7 +97,7 @@ const accommodationName = computed(
 
 const state = ref<Schema>({
   to: '',
-  sender_name: accommodationName.value,
+  sender_name: '',
   from: '',
 })
 
@@ -111,6 +111,16 @@ watch(
   { immediate: true },
 )
 
+watch(
+  accommodationName,
+  (name) => {
+    if (!state.value.sender_name) {
+      state.value.sender_name = name
+    }
+  },
+  { immediate: true },
+)
+
 const schema = z.object({
   to: z
     .string()