@dev.smartpricing/message-composer-layer 4.2.3-validations.0 → 4.2.4-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>