@dev.smartpricing/message-composer-layer 1.0.1

package/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app/api/ai.ts

@@ -0,0 +1,28 @@
+import type {
+  RefineTextResponse,
+  TranslateTextRequest,
+  TranslationResponse,
+  GenerateTextRequest,
+  GenerateTextResponse,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { apiClient } from './client'
+
+export const aiApi = {
+  refineText: (text: string) =>
+    apiClient<RefineTextResponse>('/ai-integration/refine-text', {
+      method: 'POST',
+      body: { text },
+    }),
+
+  translate: (params: TranslateTextRequest) =>
+    apiClient<TranslationResponse>('/ai-integration/translate', {
+      method: 'POST',
+      body: params,
+    }),
+
+  generateText: (params: GenerateTextRequest) =>
+    apiClient<GenerateTextResponse>('/ai-integration/generate-text', {
+      method: 'POST',
+      body: params,
+    }),
+}

package/app/api/brands.ts

@@ -0,0 +1,54 @@
+import type {
+  BrandFromDb,
+  BrandProperty,
+  BrandCreateBody,
+  BrandUpdateBody,
+  Property,
+  PostEntity,
+  EmailMessage,
+  CompileEmailResponse,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { BrandCascadeData } from '@dev.smartpricing/message-composer-utils/utils'
+import { apiClient } from './client'
+
+export type BrandWithProperties = BrandFromDb & { properties: BrandProperty[] }
+
+export const brandsApi = {
+  getAll: (options?: { sort_by?: 'created_at' | 'name'; direction?: 'asc' | 'desc' }) => {
+    const params = new URLSearchParams()
+    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}`)
+  },
+
+  getById: (id: string) => apiClient<BrandWithProperties>(`/brands/${id}`),
+
+  create: (data: BrandCreateBody) =>
+    apiClient<BrandFromDb>('/brands', {
+      method: 'POST',
+      body: data,
+    }),
+
+  update: (id: string, data: BrandUpdateBody) =>
+    apiClient<BrandFromDb>(`/brands/${id}`, {
+      method: 'PUT',
+      body: data,
+    }),
+
+  delete: (id: string) => apiClient(`/brands/${id}`, { method: 'DELETE' }),
+
+  preview: (data: {
+    message: PostEntity<EmailMessage>
+    parameters?: Record<string, unknown>
+    brand?: BrandCascadeData | null
+  }) =>
+    apiClient<CompileEmailResponse>('/message-groups/preview', {
+      method: 'POST',
+      body: data,
+    }),
+}
+
+export const propertiesApi = {
+  getAll: () => apiClient<Property[]>('/properties'),
+}

package/app/api/client.ts

@@ -0,0 +1,56 @@
+import { ofetch } from 'ofetch'
+import type { AppError } from '@dev.smartpricing/message-composer-utils/types'
+import { useAppContextStore } from '@/stores/appContext'
+
+function assertAppError(data: unknown): data is AppError {
+  if (typeof data !== 'object' || data === null) {
+    return false
+  }
+  if ('code' in data && 'error' in data && 'statusCode' in data) {
+    return true
+  }
+  return false
+}
+
+export const apiClient = ofetch.create({
+  baseURL: useRuntimeConfig().public.COMPOSER_API_URL,
+  onRequest({ options }) {
+    const store = useAppContextStore()
+
+    if (store.authenticationToken) {
+      options.headers.set('Authorization', `Bearer ${store.authenticationToken}`)
+    }
+    if (store.owner_id) {
+      options.headers.set('sm-owner', store.owner_id)
+    }
+    if (store.metaWabaId) {
+      options.headers.set('x-meta-waba-id', store.metaWabaId)
+    }
+    if (store.product) {
+      options.headers.set('sm-product', store.product)
+    }
+    if (store.default_tags && store.default_tags.length > 0) {
+      options.headers.set('sm-default-tags', store.default_tags.join(','))
+    }
+  },
+  async onResponseError({ response }) {
+    if (response.status === 401) {
+      await useNuxtApp().callHook('composer:auth-error', { statusCode: 401 })
+    }
+
+    const error = response._data
+    if (assertAppError(error)) {
+      useToast().add({
+        color: 'error',
+        title: error.code,
+        description: error.message,
+      })
+    } else {
+      useToast().add({
+        color: 'error',
+        title: 'Error',
+        description: 'An error occurred',
+      })
+    }
+  },
+})

package/app/api/compilation.ts

@@ -0,0 +1,34 @@
+import type {
+  TestEmailRequest,
+  CompileAndSendResponse,
+  GetMessageParametersResponse,
+  CompileMessageRequest,
+  CompileEmailResponse,
+  PreviewMessageRequest,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { apiClient } from './client'
+
+export const compilationApi = {
+  sendTestEmail: (data: TestEmailRequest) =>
+    apiClient<CompileAndSendResponse>('/message-groups/test-email', {
+      method: 'POST',
+      body: data,
+    }),
+
+  getParameters: (messageGroupId: string, language: string) =>
+    apiClient<GetMessageParametersResponse>(
+      `/message-groups/${messageGroupId}/parameters?language=${language}`,
+    ),
+
+  compileEmail: (messageGroupId: string, data: CompileMessageRequest) =>
+    apiClient<CompileEmailResponse>(`/message-groups/${messageGroupId}/compile`, {
+      method: 'POST',
+      body: data,
+    }),
+
+  previewEmail: (data: PreviewMessageRequest) =>
+    apiClient<CompileEmailResponse>('/message-groups/preview', {
+      method: 'POST',
+      body: data,
+    }),
+}

package/app/api/dynamicValues.ts

@@ -0,0 +1,11 @@
+import type { DynamicValuesResponse } from '@dev.smartpricing/message-composer-utils/types'
+import { apiClient } from './client'
+
+export const dynamicValuesApi = {
+  get: (product: string, language: string) => {
+    const params = new URLSearchParams()
+    params.set('product', product)
+    params.set('language', language)
+    return apiClient<DynamicValuesResponse>(`/dynamic-values?${params.toString()}`)
+  },
+}

package/app/api/index.ts

@@ -0,0 +1,11 @@
+export * from './client'
+export * from './languages'
+export * from './messageGroups'
+export * from './messages'
+export * from './media'
+export * from './ai'
+export * from './meta'
+export * from './compilation'
+export * from './tracking'
+export * from './dynamicValues'
+export * from './brands'

package/app/api/languages.ts

@@ -0,0 +1,6 @@
+import type { LanguageFromDb } from '@dev.smartpricing/message-composer-utils/types'
+import { apiClient } from './client'
+
+export const languagesApi = {
+  getAll: () => apiClient<LanguageFromDb[]>('/languages'),
+}

package/app/api/media.ts

@@ -0,0 +1,26 @@
+import type { MediaFromDb } from '@dev.smartpricing/message-composer-utils/types'
+import { apiClient } from './client'
+
+export const mediaApi = {
+  list: () => apiClient<MediaFromDb[]>('/media'),
+
+  upload: (file: File) => {
+    const formData = new FormData()
+    formData.append('file', file)
+    formData.append('fileName', file.name)
+    return apiClient<MediaFromDb>('/media/upload', {
+      method: 'POST',
+      body: formData,
+    })
+  },
+
+  uploadToSmartchat: (id: string) =>
+    apiClient<MediaFromDb>(`/media/${id}/upload-to-smartchat`, {
+      method: 'POST',
+    }),
+
+  delete: (id: string) =>
+    apiClient(`/media/${id}`, {
+      method: 'DELETE',
+    }),
+}

package/app/api/messageGroups.ts

@@ -0,0 +1,49 @@
+import type {
+  MessageGroupFromDb,
+  MessageGroupWithMessages,
+  MessageGroupWithMessageSummary,
+  MessageGroupValidationResponse,
+  PostEntity,
+  MessageGroup,
+  RenderType,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { apiClient } from './client'
+
+export const messageGroupsApi = {
+  getAll: (options?: { renderType?: RenderType; tags?: string[]; tagsMode?: 'and' | 'or' }) => {
+    const params = new URLSearchParams()
+    if (options?.renderType) params.set('render_type', options.renderType)
+    if (options?.tags && options.tags.length > 0) {
+      options.tags.forEach((tag) => params.append('tags', tag))
+    }
+    if (options?.tagsMode) params.set('tags_mode', options.tagsMode)
+
+    const query = params.size ? `?${params.toString()}` : ''
+    return apiClient<MessageGroupWithMessageSummary[]>(`/message-groups${query}`)
+  },
+
+  getById: (id: string) => apiClient<MessageGroupWithMessages>(`/message-groups/${id}`),
+
+  create: (data: PostEntity<MessageGroup>) =>
+    apiClient<MessageGroupFromDb>('/message-groups', {
+      method: 'POST',
+      body: data,
+    }),
+
+  update: (id: string, data: Partial<PostEntity<MessageGroup>>) =>
+    apiClient<MessageGroupFromDb>(`/message-groups/${id}`, {
+      method: 'PUT',
+      body: data,
+    }),
+
+  delete: (id: string) => apiClient(`/message-groups/${id}`, { method: 'DELETE' }),
+
+  publish: (id: string) =>
+    apiClient<MessageGroupFromDb>(`/message-groups/${id}/publish`, { method: 'PUT' }),
+
+  unpublish: (id: string) =>
+    apiClient<MessageGroupFromDb>(`/message-groups/${id}/unpublish`, { method: 'PUT' }),
+
+  validate: (id: string) =>
+    apiClient<MessageGroupValidationResponse>(`/message-groups/${id}/validate`),
+}

package/app/api/messages.ts

@@ -0,0 +1,22 @@
+import type {
+  Message,
+  MessageFromDb,
+  PostEntity,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { apiClient } from './client'
+
+export const messagesApi = {
+  create: (data: PostEntity<Message>) =>
+    apiClient<MessageFromDb>('/messages', {
+      method: 'POST',
+      body: data,
+    }),
+
+  update: (id: string, data: Partial<PostEntity<Message>>) =>
+    apiClient<MessageFromDb>(`/messages/${id}`, {
+      method: 'PUT',
+      body: data,
+    }),
+
+  delete: (id: string) => apiClient(`/messages/${id}`, { method: 'DELETE' }),
+}

package/app/api/meta.ts

@@ -0,0 +1,18 @@
+import type {
+  SubmissionJob,
+  SubmissionJobResponse,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { apiClient } from './client'
+
+export const metaApi = {
+  submitGroup: (messageGroupId: string) =>
+    apiClient<SubmissionJobResponse>(`/integrations/meta/submit-group/${messageGroupId}`, {
+      method: 'POST',
+      body: {},
+    }),
+
+  getJobStatus: (jobId: string) =>
+    apiClient<SubmissionJob>(`/integrations/meta/submission-jobs/${jobId}`, {
+      method: 'GET',
+    }),
+}

package/app/api/tracking.ts

@@ -0,0 +1,9 @@
+import { apiClient } from './client'
+
+export const trackingApi = {
+  event: (eventName: string, properties?: Record<string, unknown>) =>
+    apiClient<{ success: boolean }>('/tracking/event', {
+      method: 'POST',
+      body: { eventName, properties },
+    }),
+}

package/app/components/Brand/BrandDrawer.vue

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '#ui/types'
+import type {
+  BrandFromDb,
+  BrandDefaultEmailSettings,
+  BrandDefaultButtonSettings,
+  BrandCreateBody,
+  BrandSocials,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { isValidUrl } 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 BrandStepSocials from '~/components/Brand/Steps/BrandStepSocials.vue'
+import { useBrandQuery, useCreateBrandMutation, useUpdateBrandMutation } from '~/queries'
+
+defineOptions({ name: 'BrandDrawer' })
+
+const isOpen = defineModel<boolean>({ required: true })
+
+const props = defineProps<{
+  brandId?: string
+}>()
+
+const emit = defineEmits<{
+  saved: [brand: BrandFromDb]
+}>()
+
+const { t } = useI18n()
+
+const isEditMode = computed(() => !!props.brandId)
+
+// Queries
+const { data: existingBrand, isPending: isBrandLoading } = useBrandQuery(
+  computed(() => props.brandId ?? ''),
+)
+
+// Mutations
+const { mutateAsync: createBrand, isLoading: isCreating } = useCreateBrandMutation()
+const { mutateAsync: updateBrand, isLoading: isUpdating } = useUpdateBrandMutation()
+
+const isSaving = computed(() => isCreating.value || isUpdating.value)
+
+// ============================================================================
+// NAVIGATION
+// ============================================================================
+type Step = 'general' | 'visual' | 'socials'
+const activeStep = ref<Step>('general')
+
+const navItems = computed<NavigationMenuItem[]>(() => [
+  {
+    label: t('pages.brands.steps.general'),
+    icon: 'ph:info',
+    active: activeStep.value === 'general',
+    onSelect: () => {
+      activeStep.value = 'general'
+    },
+  },
+  {
+    label: t('pages.brands.steps.visual_style'),
+    icon: 'ph:paint-brush',
+    active: activeStep.value === 'visual',
+    onSelect: () => {
+      activeStep.value = 'visual'
+    },
+  },
+  {
+    label: t('pages.brands.steps.socials'),
+    icon: 'ph:share-network',
+    active: activeStep.value === 'socials',
+    onSelect: () => {
+      activeStep.value = 'socials'
+    },
+  },
+])
+
+// ============================================================================
+// FORM STATE
+// ============================================================================
+const name = ref('')
+const selectedPropertyIds = ref<string[]>([])
+const logoMediaId = ref<string | null>(null)
+const logoUrl = ref<string>('')
+const colors = ref<string[]>([])
+
+const defaultEmailSettings = ref<BrandDefaultEmailSettings>({
+  backgroundColor: undefined,
+  contentBackgroundColor: undefined,
+  textColor: undefined,
+  fontFamily: undefined,
+})
+
+const defaultButtonSettings = ref<BrandDefaultButtonSettings>({
+  textColor: '#FFFFFF',
+  backgroundColor: '#000000',
+})
+
+const socials = ref<BrandSocials>({})
+
+// ============================================================================
+// POPULATE / RESET
+// ============================================================================
+watch(
+  [() => props.brandId, existingBrand],
+  ([id, brand]) => {
+    if (!id || !brand) {
+      resetForm()
+      return
+    }
+    populateForm(brand)
+  },
+  { immediate: true },
+)
+
+function populateForm(brand: BrandWithProperties) {
+  name.value = brand.name
+  selectedPropertyIds.value = brand.properties?.map((bp) => bp.property_id) ?? []
+  logoMediaId.value = brand.logo_media_id ?? null
+  logoUrl.value = brand.logo_url ?? ''
+  colors.value = [...brand.colors]
+  defaultEmailSettings.value = { ...brand.default_email_settings }
+  defaultButtonSettings.value = { ...brand.default_button_settings }
+  socials.value = brand.default_socials ? { ...brand.default_socials } : {}
+}
+
+function resetForm() {
+  name.value = ''
+  selectedPropertyIds.value = []
+  logoMediaId.value = null
+  logoUrl.value = ''
+  colors.value = []
+  defaultEmailSettings.value = {
+    backgroundColor: '#F3F4F6',
+    contentBackgroundColor: '#FFFFFF',
+    textColor: '#000000',
+    fontFamily: 'Arial',
+  }
+  defaultButtonSettings.value = {
+    textColor: '#FFFFFF',
+    backgroundColor: '#000000',
+  }
+  socials.value = {}
+  activeStep.value = 'general'
+}
+
+watch(isOpen, (val) => {
+  if (!val) resetForm()
+})
+
+// ============================================================================
+// PREVIEW DATA
+// ============================================================================
+const brandCascadeData = computed<BrandCascadeData>(() => ({
+  default_email_settings: defaultEmailSettings.value,
+  default_button_settings: defaultButtonSettings.value,
+  default_socials: socials.value,
+  logo_url: logoUrl.value || null,
+}))
+
+// ============================================================================
+// SAVE / DELETE
+// ============================================================================
+function hasInvalidSocialUrls(): boolean {
+  return Object.values(socials.value).some((url) => !!url && !isValidUrl(url))
+}
+
+async function handleSave() {
+  if (!name.value.trim()) {
+    useToast().add({
+      color: 'error',
+      title: t('pages.brands.validation.name_required'),
+    })
+    activeStep.value = 'general'
+    return
+  }
+
+  if (hasInvalidSocialUrls()) {
+    useToast().add({
+      color: 'error',
+      title: t('pages.brands.validation.invalid_social_url'),
+    })
+    activeStep.value = 'socials'
+    return
+  }
+
+  const payload: BrandCreateBody = {
+    name: name.value.trim(),
+    logo_media_id: logoMediaId.value,
+    colors: colors.value,
+    default_email_settings: defaultEmailSettings.value,
+    default_button_settings: defaultButtonSettings.value,
+    default_socials: socials.value,
+    property_ids: selectedPropertyIds.value,
+  }
+
+  try {
+    let result: BrandFromDb
+    if (isEditMode.value && props.brandId) {
+      result = await updateBrand({ id: props.brandId, data: payload })
+    } else {
+      result = await createBrand(payload)
+    }
+
+    useToast().add({
+      color: 'success',
+      title: t('common.success'),
+      description: isEditMode.value
+        ? t('pages.brands.brand_updated')
+        : t('pages.brands.brand_created'),
+    })
+    emit('saved', result)
+  } catch {
+    useToast().add({
+      color: 'error',
+      title: t('common.error'),
+      description: t('pages.brands.save_error'),
+    })
+  }
+}
+</script>
+
+<template>
+  <USlideover
+    v-model:open="isOpen"
+    :title="isEditMode ? t('pages.brands.edit_brand') : t('pages.brands.new_brand')"
+    close-icon="ph:x"
+    side="right"
+    :ui="{ content: 'max-w-7xl', body: 'sm:p-0 p-0', footer: 'justify-end' }"
+  >
+    <template #body>
+      <!-- Loading state -->
+      <div v-if="isEditMode && isBrandLoading" class="flex items-center justify-center h-full p-8">
+        <UIcon name="ph:spinner" class="animate-spin h-8 w-8 text-neutral-400" />
+      </div>
+
+      <div v-else class="grid grid-cols-[200px_1fr_400px] divide-x divide-muted min-h-full">
+        <!-- Left: Navigation -->
+        <div class="p-4">
+          <UNavigationMenu color="secondary" orientation="vertical" :items="navItems" />
+        </div>
+
+        <!-- Center: Form content -->
+        <div class="overflow-y-auto p-6 space-y-6">
+          <BrandStepGeneral
+            v-if="activeStep === 'general'"
+            v-model:name="name"
+            v-model:selected-property-ids="selectedPropertyIds"
+          />
+
+          <BrandStepVisual
+            v-if="activeStep === 'visual'"
+            v-model:logo-media-id="logoMediaId"
+            v-model:logo-url="logoUrl"
+            v-model:colors="colors"
+            v-model:default-email-settings="defaultEmailSettings"
+            v-model:default-button-settings="defaultButtonSettings"
+          />
+
+          <BrandStepSocials v-if="activeStep === 'socials'" v-model="socials" />
+        </div>
+
+        <!-- Right: Live preview -->
+        <div class="bg-neutral-50 overflow-y-auto">
+          <BrandPreview :brand="brandCascadeData" />
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <UButton
+        color="neutral"
+        variant="outline"
+        :label="t('common.actions.cancel')"
+        @click="isOpen = false"
+      />
+      <UButton :label="t('common.actions.save')" :loading="isSaving" @click="handleSave" />
+    </template>
+  </USlideover>
+</template>