@dev.smartpricing/message-composer-layer 4.5.1-next.3 → 4.5.1-next.4

package/app/pages/template/whatsapp/[id].vue

@@ -8,6 +8,9 @@ definePageMeta({
 const route = useRoute()
 const composerRef = useTemplateRef('composerRef')
 const store = useWhatsappComposerStore()
+const tripBack = useEditorTripBack(
+  () => composerRef.value?.saving || composerRef.value?.isTranslating,
+)
 </script>
 
 <template>
@@ -19,6 +22,8 @@ const store = useWhatsappComposerStore()
     ]"
     :active-tab="store.activeTab"
     :test-id="templateWhatsappEditTestIds.navbar"
+    :back="tripBack"
+    @back="composerRef?.handleCancel()"
     @tab-change="store.activeTab = $event as 'content' | 'translations'"
   >
     <template #actions>

package/app/pages/template/whatsapp/create.vue

@@ -7,6 +7,9 @@ definePageMeta({
 
 const composerRef = useTemplateRef('composerRef')
 const store = useWhatsappComposerStore()
+const tripBack = useEditorTripBack(
+  () => composerRef.value?.saving || composerRef.value?.isTranslating,
+)
 </script>
 
 <template>
@@ -18,6 +21,8 @@ const store = useWhatsappComposerStore()
     ]"
     :active-tab="store.activeTab"
     :test-id="templateWhatsappCreateTestIds.navbar"
+    :back="tripBack"
+    @back="composerRef?.handleCancel()"
     @tab-change="store.activeTab = $event as 'content' | 'translations'"
   >
     <template #actions>

package/app/queries/automations.ts

@@ -0,0 +1,206 @@
+import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
+import {
+  AUTOMATION_CATALOG_LANGUAGES,
+  type Automation,
+  type AutomationCatalogLanguage,
+  type CreateAutomationBody,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+import { automationsApi, messageGroupsApi } from '~/api'
+import type { AutomationChanges } from '~/utils/automations/form'
+
+function isCatalogLanguage(language: string): language is AutomationCatalogLanguage {
+  return (AUTOMATION_CATALOG_LANGUAGES as readonly string[]).includes(language)
+}
+
+/** The Automations of the Effective Organization for the Host's Product. */
+export function useAutomationsQuery() {
+  const { product } = storeToRefs(useAppContextStore())
+  const organization = useEffectiveOrganizationStore()
+
+  return useQuery({
+    key: () => ['automations', product.value ?? '', organization.organizationId],
+    query: () =>
+      automationsApi.getAll({
+        organization_id: organization.requireOrganizationId(),
+        product: product.value!,
+      }),
+    enabled: () => Boolean(product.value && organization.organizationId),
+    staleTime: 2 * 60 * 1000,
+  })
+}
+
+/**
+ * One Automation of the Host's Product, read once for the page that edits it:
+ * nothing is kept for the next visit, and no refetch replaces what the user
+ * is editing. Its key is not under the list's, so a save does not refetch it.
+ */
+export function useAutomationQuery(id: MaybeRefOrGetter<string>) {
+  const { product } = storeToRefs(useAppContextStore())
+  const organization = useEffectiveOrganizationStore()
+
+  return useQuery({
+    key: () => ['automation', product.value ?? '', organization.organizationId, toValue(id)],
+    query: () => automationsApi.getById(toValue(id), { product: product.value! }),
+    enabled: () => Boolean(product.value && organization.organizationId),
+    staleTime: 0,
+    gcTime: 0,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+}
+
+/**
+ * The Automation Catalog of the Host's Product, with its labels in the
+ * language of the interface (ADR 0017).
+ */
+export function useAutomationCatalogQuery() {
+  const { product } = storeToRefs(useAppContextStore())
+  const organization = useEffectiveOrganizationStore()
+  const { locale } = useI18n()
+  const language = computed(() => (isCatalogLanguage(locale.value) ? locale.value : 'en'))
+
+  return useQuery({
+    key: () => [
+      'automation-catalog',
+      product.value ?? '',
+      language.value,
+      organization.organizationId,
+    ],
+    query: () =>
+      automationsApi.getCatalog({
+        organization_id: organization.requireOrganizationId(),
+        product: product.value!,
+        language: language.value,
+      }),
+    enabled: () => Boolean(product.value && organization.organizationId),
+    staleTime: 30 * 60 * 1000,
+  })
+}
+
+/** A new Automation names its Organization and its Product (ADR 0014, ADR 0019). */
+export function useCreateAutomationMutation() {
+  const queryCache = useQueryCache()
+  const { product } = storeToRefs(useAppContextStore())
+  const organization = useEffectiveOrganizationStore()
+
+  return useMutation({
+    mutation: (automation: Omit<CreateAutomationBody, 'organization_id' | 'product'>) =>
+      automationsApi.create({
+        ...automation,
+        organization_id: organization.requireOrganizationId(),
+        product: product.value!,
+      }),
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['automations'] })
+    },
+  })
+}
+
+/** An update names its Product; the Organization is the stored one (ADR 0016). */
+export function useUpdateAutomationMutation() {
+  const queryCache = useQueryCache()
+  const { product } = storeToRefs(useAppContextStore())
+
+  return useMutation({
+    mutation: ({ id, ...changes }: AutomationChanges & { id: string }) =>
+      automationsApi.update(id, { ...changes, product: product.value! }),
+    // After a failure too: an update can be saved in part.
+    onSettled: () => {
+      queryCache.invalidateQueries({ key: ['automations'] })
+    },
+  })
+}
+
+/** A clone names its Product; the copy stays in the source's Organization (ADR 0016). */
+export function useCloneAutomationMutation() {
+  const queryCache = useQueryCache()
+  const { product } = storeToRefs(useAppContextStore())
+
+  return useMutation({
+    mutation: ({ id, name }: { id: string; name: string }) =>
+      automationsApi.clone(id, { name, product: product.value! }),
+    // The copy comes with Message Groups of its own. After a failure too: it
+    // can be made when the answer is lost.
+    onSettled: () => {
+      queryCache.invalidateQueries({ key: ['automations'] })
+      queryCache.invalidateQueries({ key: ['message-groups'] })
+    },
+  })
+}
+
+/**
+ * The Message Groups the Actions of an Automation use, each once, by their
+ * current name. One that cannot be read (deleted, or of an Organization the
+ * user cannot reach) is left out: it could not be deleted either.
+ */
+export function useAutomationMessageGroupsQuery(automation: MaybeRefOrGetter<Automation>) {
+  const ids = computed(() => [
+    ...new Set(toValue(automation).actions.map((action) => action.config.template.toLowerCase())),
+  ])
+
+  return useQuery({
+    key: () => ['automation-message-groups', toValue(automation).id, ...ids.value],
+    query: async () => {
+      const results = await Promise.allSettled(
+        ids.value.map((id) => messageGroupsApi.getById(id, { skipErrorToast: true })),
+      )
+      return results.flatMap((result) =>
+        result.status === 'fulfilled' ? [{ id: result.value.id, name: result.value.name }] : [],
+      )
+    },
+    staleTime: 0,
+    gcTime: 0,
+  })
+}
+
+/**
+ * Whether each of these Message Groups is approved in every language, by its
+ * id in lower case. One that cannot be read is left out: it is not known to
+ * be unapproved. Under `message-groups`, so a change to any of them asks again.
+ */
+export function useMessageGroupApprovalsQuery(messageGroupIds: MaybeRefOrGetter<string[]>) {
+  const ids = computed(() =>
+    [...new Set(toValue(messageGroupIds).map((id) => id.toLowerCase()))].filter(Boolean).sort(),
+  )
+
+  return useQuery({
+    key: () => ['message-groups', 'approvals', ...ids.value],
+    query: async () => {
+      const requested = ids.value
+      const results = await Promise.allSettled(
+        requested.map((id) => messageGroupsApi.getById(id, { skipErrorToast: true })),
+      )
+      return new Map(
+        results.flatMap((result, index) => {
+          if (result.status !== 'fulfilled') return []
+          const { messages } = result.value
+          const approved =
+            messages.length > 0 && messages.every((message) => message.status === 'approved')
+          return [[requested[index]!, approved] as const]
+        }),
+      )
+    },
+    enabled: () => ids.value.length > 0,
+    // The set changes with every Action added or re-pointed: what was known stays while it loads.
+    placeholderData: (previous) => previous,
+    staleTime: 2 * 60 * 1000,
+  })
+}
+
+/** A delete names its Product, and the Message Groups that go with the Automation (ADR 0016). */
+export function useDeleteAutomationMutation() {
+  const queryCache = useQueryCache()
+  const { product } = storeToRefs(useAppContextStore())
+
+  return useMutation({
+    mutation: ({ id, messageGroupIds }: { id: string; messageGroupIds: string[] }) =>
+      automationsApi.delete(id, { product: product.value!, message_group_ids: messageGroupIds }),
+    // After a failure too: the Automation can be gone when the answer is lost.
+    onSettled: (_result, _error, { messageGroupIds }) => {
+      queryCache.invalidateQueries({ key: ['automations'] })
+      if (messageGroupIds.length > 0) queryCache.invalidateQueries({ key: ['message-groups'] })
+    },
+  })
+}

package/app/queries/index.ts

@@ -7,3 +7,4 @@ export * from './meta'
 export * from './compilation'
 export * from './dynamicValues'
 export * from './brands'
+export * from './automations'

package/app/queries/messageGroups.ts

@@ -56,9 +56,7 @@ export function useMessageGroupListQuery(
     // Never across Organizations: a switch must not show the previous one's rows.
     placeholderData: (previousData, previousEntry) =>
       previousEntry?.key.at(-1) === listOrganizationId() ? previousData : undefined,
-    // Until an Organization is resolved the list waits (pending, so callers
-    // show it as loading) instead of failing into an empty table.
-    enabled: () => toValue(queryOptions.enabled ?? true) && !!listOrganizationId(),
+    ...enabledOption(queryOptions.enabled),
   })
 }
 

package/app/stores/appContext.ts

@@ -23,7 +23,7 @@ export const useAppContextStore = defineStore('appContext', () => {
   const mainLanguage = computed(() => ctx.mainLanguage?.value ?? 'en')
   const default_tags = computed<string[]>(() => ctx.default_tags?.value ?? [])
   const isAdmin = computed(() => ctx.isAdmin?.value ?? false)
-  // The WABA the Host works on: the target of a new Message Group (ADR 0015).
+  // The Host's preselection among the Organization's WABAs (ADR 0015).
   const metaWabaId = computed(() => ctx.metaWabaId?.value || undefined)
 
   // Sync i18n locale when mainLanguage changes

package/app/stores/editorTrip.ts

@@ -0,0 +1,67 @@
+/** The Message Group an editor saved. */
+export interface EditorTripResult {
+  id: string
+  name: string
+}
+
+export interface EditorTrip<Kept = unknown> {
+  /** Where the trip started: the route it returns to, and the back button's label, already translated. */
+  origin: { routeName: string; backLabel: string }
+  /** What the opener wants back on its return. The editor never reads it. */
+  kept: Kept
+  /** The last Message Group saved during the trip; none until a save. */
+  result?: EditorTripResult
+}
+
+/** The pages a trip goes through, by Channel. */
+export const EDITOR_ROUTES = {
+  email: { create: 'email-message-create', edit: 'email-message-edit' },
+  whatsapp: { create: 'whatsapp-message-create', edit: 'whatsapp-message-edit' },
+} as const
+
+const EDITOR_ROUTE_NAMES: ReadonlySet<string> = new Set(
+  Object.values(EDITOR_ROUTES).flatMap((routes) => Object.values(routes)),
+)
+
+/**
+ * A round trip from a page to the Message editor and back. Layer-internal and
+ * in memory only: not Host contract, and a reload loses it.
+ *
+ * The opener starts it and takes it back on its return. The editor knows a
+ * trip, not who opened it: it shows the trip's back button and records what
+ * it saves.
+ */
+export const useEditorTripStore = defineStore('editorTrip', () => {
+  const trip = shallowRef<EditorTrip>()
+
+  // A trip ends where the user leaves its path: an editor opened later, from
+  // the library, is not part of it.
+  useRouter().afterEach((to, _from, failure) => {
+    if (failure || !trip.value) return
+    const name = String(to.name)
+    if (name === trip.value.origin.routeName || EDITOR_ROUTE_NAMES.has(name)) return
+    trip.value = undefined
+  })
+
+  function start<Kept>(origin: EditorTrip['origin'], kept: Kept) {
+    trip.value = { origin, kept }
+  }
+
+  /** The last Message Group saved wins, also if the user then cancels. */
+  function recordSaved(saved: EditorTripResult) {
+    if (trip.value) trip.value = { ...trip.value, result: saved }
+  }
+
+  /** The trip that started on this route, handed over once. */
+  function consume<Kept>(routeName: string): EditorTrip<Kept> | undefined {
+    const current = trip.value
+    if (current?.origin.routeName !== routeName) return undefined
+    trip.value = undefined
+    return current as EditorTrip<Kept>
+  }
+
+  /** The label of the editor's back button; none without a trip. */
+  const backLabel = computed(() => trip.value?.origin.backLabel)
+
+  return { start, recordSaved, consume, backLabel }
+})

package/app/types/app-config.d.ts

@@ -2,11 +2,14 @@ declare module 'nuxt/schema' {
   interface AppConfigInput {
     composer?: {
       tracking?: boolean
+      /** Turns the Automation pages on (ADR 0019). Off, their routes answer 404. */
+      automations?: boolean
     }
   }
   interface AppConfig {
     composer: {
       tracking: boolean
+      automations: boolean
     }
   }
 }

package/app/types/tracking.ts

@@ -76,6 +76,39 @@ export interface TrackingEventMap {
   // === Global ===
   'Page View': { page_name: string }
 
+  // === Automation_list ===
+  'automation_list.delete': { automation_name: string; automation_id: string }
+  'automation_list.duplicate': { automation_name: string; automation_id: string }
+  'automation_list.edit': { automation_name: string; automation_id: string }
+  'automation_list.filter_changed': {
+    search_term: string
+    /** A Trigger type, a status, a Channel; `all` when not narrowed. */
+    trigger_type: string
+    status: string
+    channel: string
+  }
+  'automation_list.sort_changed': { column: string; direction: 'asc' | 'desc' }
+
+  // === Automation create / edit ===
+  'Automation setup': {
+    automation_sender: string
+    automation_name: string
+    automation_trigger: string
+    automation_type: string
+    automation_rules_audience: 'all' | 'segmented'
+    automation_subject: string
+    automation_moment: string
+    automation_channel: string
+    automation_status: string
+    automation_days: number
+    created_by: 'user'
+  }
+  'automation.clone': { automation_name: string; source_id: string }
+  'automation.trigger_changed': { from: string; to: string }
+  'automation.action_added': { channel: string }
+  'automation.action_deleted': { channel: string }
+  'automation.action_toggled': { channel: string; new_status: string }
+
   // === Brand ===
   brand_create: BrandBaseProperties & { has_logo: boolean }
   brand_update: BrandBaseProperties & { changed_fields: string[] }