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

package/app/composables/useAutomationEditorTrip.ts

@@ -0,0 +1,77 @@
+import type { Automation } from '@dev.smartpricing/message-composer-utils/types'
+import { EDITOR_ROUTES } from '~/stores/editorTrip'
+import {
+  cloneFormData,
+  type AutomationFormAction,
+  type AutomationFormState,
+} from '~/utils/automations/form'
+
+/** The Action in the Action editor. */
+export interface OpenAutomationAction {
+  action: AutomationFormAction
+  /** Whether the form does not hold it yet. */
+  isNew: boolean
+}
+
+/** A request to leave for the Message editor: a new Message Group, or the Action's own. */
+export interface AutomationMessageRequest extends OpenAutomationAction {
+  target: 'create' | 'edit'
+}
+
+/** What an Automation page wants back from an editor trip. */
+interface AutomationTripKept {
+  /** The unsaved Automation. */
+  form: AutomationFormState
+  /** The Automation as the Automation Engine holds it; none on the create page. */
+  stored?: Automation
+  openAction: OpenAutomationAction
+}
+
+/**
+ * The Automation side of an editor trip: leaving for the Message editor with
+ * the unsaved Automation kept, and getting it back on return with the Action
+ * reopened and the Message Group just saved selected in it.
+ *
+ * Called once, in the setup of the component that holds the form: a trip that
+ * started on `origin` is consumed there.
+ */
+export function useAutomationEditorTrip(
+  origin: 'automation-create' | 'automation-edit',
+  automationId?: string,
+) {
+  const { t } = useI18n()
+  const toast = useToast()
+  const editorTrip = useEditorTripStore()
+
+  const trip = editorTrip.consume<AutomationTripKept>(origin)
+  // The edit page of another Automation is not where the trip started.
+  const returned = trip && trip.kept.stored?.id === automationId ? trip : undefined
+
+  let restored: AutomationTripKept | undefined
+  if (returned) {
+    const { kept, result } = returned
+    // Only the Message Group changes: an Action's status is the user's to set.
+    const action = result
+      ? { ...kept.openAction.action, messageGroupId: result.id, messageGroupName: result.name }
+      : kept.openAction.action
+    restored = { ...kept, openAction: { ...kept.openAction, action } }
+    toast.add({ title: t('automations.trip.kept'), color: 'info' })
+  }
+
+  /** Leaves for the Message editor, keeping the unsaved Automation and the open Action. */
+  function leave(
+    unsaved: { form: AutomationFormState; stored?: Automation },
+    { action, isNew, target }: AutomationMessageRequest,
+  ) {
+    editorTrip.start<AutomationTripKept>(
+      { routeName: origin, backLabel: t('automations.trip.back') },
+      { ...cloneFormData(unsaved), openAction: { action: cloneFormData(action), isNew } },
+    )
+    const name = EDITOR_ROUTES[action.channel][target]
+    return navigateTo(
+      target === 'edit' ? { name, params: { id: action.messageGroupId } } : { name },
+    )
+  }
+
+  return { restored, leave }
+}

package/app/composables/useAutomationSaveProblems.ts

@@ -0,0 +1,82 @@
+import type {
+  AutomationCatalog,
+  AutomationSaveProblem,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { MaybeRefOrGetter } from 'vue'
+import type { AutomationFormState } from '~/utils/automations/form'
+
+/** One line of the alert: what is wrong and, when it has one, the place to jump to. */
+export interface AutomationProblemLine {
+  text: string
+  /** The id of the element the line is about. */
+  target?: string
+  actionKey?: string
+}
+
+/**
+ * What a refused save (422 `AUTOMATION_ACTIONS_INVALID`) says at the top of
+ * the Automation form, on the create page and on the edit page alike.
+ * `AutomationsSaveProblems` renders the lines.
+ */
+export function useAutomationSaveProblems(catalog: MaybeRefOrGetter<AutomationCatalog>) {
+  const { t, te } = useI18n()
+
+  const lines = ref<AutomationProblemLine[]>([])
+  const invalidActionKeys = computed(() =>
+    lines.value.flatMap(({ actionKey }) => (actionKey ? [actionKey] : [])),
+  )
+
+  /**
+   * The line of one problem. A problem points at an Action by its position
+   * in what was submitted; `undefined` for a problem this version does not
+   * know.
+   */
+  function toLine(
+    problem: AutomationSaveProblem,
+    sent: AutomationFormState,
+  ): AutomationProblemLine | undefined {
+    if (problem.target === 'trigger') {
+      return {
+        text: t('automations.problems.trigger_not_in_catalog'),
+        target: 'automation-trigger',
+      }
+    }
+
+    if (problem.target === 'condition') {
+      const key = `automations.problems.condition_${problem.reason}`
+      const label =
+        toValue(catalog)
+          .triggers.find(({ type }) => type === sent.triggerType)
+          ?.condition_fields.find((field) => field.key === problem.field)?.label ?? problem.field
+      return te(key)
+        ? { text: t(key, { field: label }), target: 'automation-conditions' }
+        : undefined
+    }
+
+    if (problem.target === 'action') {
+      const key = `automations.problems.action_${problem.reason}`
+      const action = sent.actions[problem.position]
+      if (!action || !te(key)) return undefined
+      return {
+        text: t(key, { name: action.messageGroupName }),
+        target: `automation-action-${action.key}`,
+        actionKey: action.key,
+      }
+    }
+
+    return undefined
+  }
+
+  /** `sent` is the form as it was submitted: the problems point into it. */
+  function show(problems: AutomationSaveProblem[], sent: AutomationFormState) {
+    const known = problems.flatMap((problem) => toLine(problem, sent) ?? [])
+    // Refused for reasons this version cannot name: still say it was refused.
+    lines.value = known.length > 0 ? known : [{ text: t('automations.problems.unknown') }]
+  }
+
+  function clear() {
+    lines.value = []
+  }
+
+  return { lines, invalidActionKeys, show, clear }
+}

package/app/composables/useAutomationUnavailable.ts

@@ -0,0 +1,98 @@
+import type { FilterField, FiltersReport } from '@dev.smartpricing/message-composer-utils/types'
+import type { AutomationFormAction } from '~/utils/automations/form'
+import {
+  actionUnavailableKinds,
+  unavailableBlocks,
+  type ActionAvailability,
+  type AutomationUnavailableItem,
+  type AutomationUnavailableKind,
+} from '~/utils/automations/unavailable'
+
+export const AUTOMATION_TRIGGER_ELEMENT_ID = 'automation-trigger'
+export const AUTOMATION_CONDITIONS_ELEMENT_ID = 'automation-conditions'
+
+export function automationActionElementId(actionKey: string): string {
+  return `automation-action-${actionKey}`
+}
+
+/**
+ * The unavailable things of an Automation as the form says them: one item
+ * each, with where it is, its sentence and whether it blocks the save.
+ * `AutomationsUnavailable` lists them, `AutomationsUnavailableBadge` marks
+ * one in place.
+ */
+export function useAutomationUnavailable() {
+  const { t } = useI18n()
+
+  function item(
+    kind: AutomationUnavailableKind,
+    rest: Omit<AutomationUnavailableItem, 'kind' | 'blocks' | 'text'>,
+    params: Record<string, string> = {},
+  ): AutomationUnavailableItem {
+    return {
+      kind,
+      blocks: unavailableBlocks(kind),
+      text: t(`automations.unavailable.${kind}`, params),
+      ...rest,
+    }
+  }
+
+  /** A Trigger the Automation Catalog no longer lists. */
+  function triggerItem(): AutomationUnavailableItem {
+    return item('trigger', {
+      key: 'trigger',
+      where: t('automations.form.trigger'),
+      target: AUTOMATION_TRIGGER_ELEMENT_ID,
+    })
+  }
+
+  /** What the filter components report on a list of Conditions (ADR 0018). */
+  function conditionItems(
+    report: FiltersReport | undefined,
+    fields: readonly FilterField[],
+  ): AutomationUnavailableItem[] {
+    if (!report) return []
+
+    const where = (field: string) =>
+      t('automations.unavailable.where.filter', {
+        field: fields.find(({ key }) => key === field)?.label ?? field,
+      })
+    const place = { target: AUTOMATION_CONDITIONS_ELEMENT_ID, inFilters: true }
+
+    return [
+      ...report.unavailable.map(({ condition, reason }, index) =>
+        item(reason === 'unknown_field' ? 'condition_unknown_field' : 'condition_not_editable', {
+          key: `condition-${index}`,
+          where: where(condition.field),
+          ...place,
+        }),
+      ),
+      ...report.unavailableOptions.map(({ field }, index) =>
+        item('option', { key: `option-${index}`, where: where(field), ...place }),
+      ),
+    ]
+  }
+
+  function actionItems(
+    action: AutomationFormAction,
+    availability: ActionAvailability,
+  ): AutomationUnavailableItem[] {
+    const channel = t(`automations.channels.${action.channel}`)
+
+    return actionUnavailableKinds(action, availability).map((kind) =>
+      item(
+        kind,
+        {
+          key: `${action.key}-${kind}`,
+          where: t('automations.unavailable.where.message', {
+            name: action.messageGroupName || channel,
+          }),
+          target: automationActionElementId(action.key),
+        },
+        { channel },
+      ),
+    )
+  }
+
+  return { triggerItem, conditionItems, actionItems }
+}

package/app/composables/useAutomationsGate.ts

@@ -0,0 +1,68 @@
+import type { AutomationCatalog } from '@dev.smartpricing/message-composer-utils/types'
+import type { AutomationsContext } from './automationsContext'
+
+export type AutomationsGate =
+  | { state: 'ready'; catalog: AutomationCatalog; context: AutomationsContext }
+  | { state: 'loading' }
+  | { state: 'error'; title: string; description: string; retry?: () => void }
+
+/**
+ * What an Automation page needs before it can show anything: the Host's
+ * Automations context, an Organization and an Automation Catalog for the
+ * Host's Product. Checked by the page, not by the layout, so a Host that
+ * replaces the layout keeps it (ADR 0019). `AutomationsPageGate` renders it.
+ */
+export function useAutomationsGate() {
+  const { t } = useI18n()
+  const context = useAutomationsContext()
+  const organization = useEffectiveOrganizationStore()
+  const catalogQuery = useAutomationCatalogQuery()
+  const { product } = storeToRefs(useAppContextStore())
+
+  return computed<AutomationsGate>(() => {
+    if (!context) {
+      return {
+        state: 'error',
+        title: t('automations.gate.no_context_title'),
+        description: t('automations.gate.no_context_description'),
+      }
+    }
+
+    if (organization.status === 'resolving') return { state: 'loading' }
+    if (organization.status === 'failed') {
+      return {
+        state: 'error',
+        title: t('common.organization.lookup_failed_title'),
+        description: t('common.organization.lookup_failed_description'),
+        retry: () => void organization.retry(),
+      }
+    }
+    if (organization.status === 'none') {
+      return {
+        state: 'error',
+        title: t('automations.gate.no_organization_title'),
+        description: t('automations.gate.no_organization_description'),
+      }
+    }
+
+    const response = catalogQuery.data.value
+    if (response?.catalog) return { state: 'ready', catalog: response.catalog, context }
+    // Answered with no catalog, or nothing to ask for: no Product, no request.
+    if (response || !product.value) {
+      return {
+        state: 'error',
+        title: t('automations.gate.no_catalog_title'),
+        description: t('automations.gate.no_catalog_description'),
+      }
+    }
+    if (catalogQuery.status.value === 'error') {
+      return {
+        state: 'error',
+        title: t('automations.gate.catalog_failed_title'),
+        description: t('automations.gate.catalog_failed_description'),
+        retry: () => void catalogQuery.refetch(),
+      }
+    }
+    return { state: 'loading' }
+  })
+}

package/app/composables/useBuiltInOptionLists.ts

@@ -0,0 +1,44 @@
+import type { FilterOption } from '@dev.smartpricing/message-composer-utils/types'
+import countries from '../utils/filters/data/countries.json'
+import languages from '../utils/filters/data/languages.json'
+
+/** The name of a code in a language, or the English one where `Intl` has none. */
+function toOptions(
+  entries: { code: string; name: string }[],
+  type: 'region' | 'language',
+  locale: string,
+): FilterOption[] {
+  let names: Intl.DisplayNames | undefined
+  try {
+    names = new Intl.DisplayNames([locale], { type, fallback: 'none' })
+  } catch {
+    // A locale `Intl` does not know: the English names.
+  }
+
+  const options = entries.map(({ code, name }) => {
+    let label: string | undefined
+    try {
+      label = names?.of(type === 'region' ? code.toUpperCase() : code)
+    } catch {
+      // A code `Intl` rejects keeps its English name.
+    }
+    return { value: code, label: label ?? name }
+  })
+
+  return options.sort((a, b) => a.label.localeCompare(b.label, locale))
+}
+
+/**
+ * Public (ADR 0018): the sets built into the layer, as option lists in the
+ * current language, sorted by label. The values are lowercase ISO codes
+ * (`it`, `de`), the ones Smartconnect stores. For any caller of the filter
+ * components, and for a Host to pass on in `defineAutomationsContext`.
+ */
+export function useBuiltInOptionLists() {
+  const { locale } = useI18n()
+
+  const countryOptions = computed(() => toOptions(countries, 'region', locale.value))
+  const languageOptions = computed(() => toOptions(languages, 'language', locale.value))
+
+  return { countries: countryOptions, languages: languageOptions }
+}

package/app/composables/useEditorTripBack.ts

@@ -0,0 +1,15 @@
+import type { ButtonProps } from '#ui/types'
+
+/**
+ * The back button of an editor page while an editor trip exists; none
+ * otherwise. It does what Cancel does, so it is busy whenever Cancel is.
+ */
+export function useEditorTripBack(busy: MaybeRefOrGetter<boolean | undefined>) {
+  const editorTrip = useEditorTripStore()
+
+  return computed<ButtonProps | undefined>(() =>
+    editorTrip.backLabel === undefined
+      ? undefined
+      : { label: editorTrip.backLabel, loading: Boolean(toValue(busy)) },
+  )
+}

package/app/composables/useMessageGroupWaba.ts

@@ -43,10 +43,9 @@ export function useMessageGroupWaba(storedWabaId: MaybeRefOrGetter<string | null
   )
 
   /**
-   * The WABA to name in a submission. At the first submission of a Message
-   * Group whose Organization has several WABAs, it is the Host's when the
-   * Host passed one of them, otherwise the user is asked. In every other
-   * case none is named and the backend resolves it. A lookup that has not
+   * The WABA to name in a submission. Asks the user only at the first
+   * submission of a Message Group whose Organization has several WABAs;
+   * otherwise names none and the backend resolves it. A lookup that has not
    * answered yet is waited for; one that failed leaves it to the backend.
    * Returns null when the user gives up.
    */
@@ -56,12 +55,10 @@ export function useMessageGroupWaba(storedWabaId: MaybeRefOrGetter<string | null
     const candidates = wabas.value
     if (!candidates || candidates.length < 2) return {}
 
-    const hostWabaId = metaWabaId.value
-    if (hostWabaId && candidates.some((candidate) => candidate.id === hostWabaId)) {
-      return { wabaId: hostWabaId }
-    }
-
-    const chosen = await modal.open({ wabas: candidates }).result
+    const preselected = candidates.some((candidate) => candidate.id === metaWabaId.value)
+      ? metaWabaId.value
+      : undefined
+    const chosen = await modal.open({ wabas: candidates, preselected }).result
 
     return chosen ? { wabaId: chosen } : null
   }

package/app/composables/useTemplateOperations.ts

@@ -21,7 +21,8 @@ interface TemplateData<T = Message | PostEntity<Message>> {
 }
 
 interface UseTemplateOperationsOptions {
-  onSuccess?: () => void
+  /** Called with the Message Group that was saved, before anything navigates. */
+  onSuccess?: (saved?: { id: string; name: string }) => void
   onError?: (error: Error) => void
 }
 
@@ -67,7 +68,11 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
       }
 
       saved.value = true
-      options.onSuccess?.()
+      options.onSuccess?.(
+        createdMessageGroup?.id
+          ? { id: String(createdMessageGroup.id), name: createdMessageGroup.name }
+          : undefined,
+      )
       return createdMessageGroup
     } catch (error) {
       options.onError?.(error as Error)
@@ -101,7 +106,7 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
       }
 
       saved.value = true
-      options.onSuccess?.()
+      options.onSuccess?.({ id, name: data.messageGroup.name })
     } catch (error) {
       options.onError?.(error as Error)
       throw error

package/app/middleware/automations-enabled.ts

@@ -0,0 +1,12 @@
+/**
+ * The Automation pages are off until a Host sets `composer.automations`
+ * (ADR 0019): their routes always exist, and answer 404 while it is off.
+ */
+export default defineNuxtRouteMiddleware(() => {
+  if (useAppConfig().composer?.automations) return
+
+  // Fatal, or a navigation inside the app would be cancelled without a word.
+  return abortNavigation(
+    createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true }),
+  )
+})

package/app/pages/automations/[id].vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'automation-edit',
+  middleware: 'automations-enabled',
+})
+
+const { t } = useI18n()
+const route = useRoute()
+const gate = useAutomationsGate()
+const { goBackOrFallback } = useGoBack()
+
+const {
+  data: automation,
+  error,
+  status,
+  refetch,
+} = useAutomationQuery(() => String(route.params.id))
+const notFound = computed(() => (error.value as { status?: number } | null)?.status === 404)
+
+const edit = useTemplateRef('edit')
+</script>
+
+<template>
+  <LayoutBasePage :title="t('automations.editTitle')" :test-id="automationsTestIds.editPage">
+    <template #actions>
+      <UButton
+        variant="ghost"
+        size="lg"
+        :label="t('common.actions.cancel')"
+        :data-testid="automationsTestIds.editPageCancelButton"
+        @click="goBackOrFallback({ name: 'automations-list' })"
+      />
+      <UButton
+        v-if="edit"
+        size="lg"
+        :loading="edit.saving"
+        :label="t('common.actions.save')"
+        :data-testid="automationsTestIds.editPageCreateButton"
+        @click="edit.submit()"
+      />
+    </template>
+
+    <AutomationsPageGate v-slot="{ catalog, context }" :gate="gate">
+      <AutomationsEdit
+        v-if="automation"
+        ref="edit"
+        :key="automation.id"
+        :catalog="catalog"
+        :automation="automation"
+        :context="context"
+      />
+      <UAlert
+        v-else-if="status === 'error'"
+        color="error"
+        variant="subtle"
+        icon="i-lucide-alert-triangle"
+        :title="
+          notFound ? t('automations.gate.not_found_title') : t('automations.gate.load_failed_title')
+        "
+        :description="
+          notFound
+            ? t('automations.gate.not_found_description')
+            : t('automations.gate.load_failed_description')
+        "
+        :actions="
+          notFound
+            ? undefined
+            : [
+                {
+                  label: t('common.organization.retry'),
+                  color: 'error',
+                  variant: 'outline',
+                  onClick: () => void refetch(),
+                },
+              ]
+        "
+      />
+      <div
+        v-else
+        class="flex flex-1 flex-col items-center justify-center gap-3 py-12 text-muted"
+        role="status"
+      >
+        <UIcon name="i-heroicons-arrow-path" class="animate-spin h-8 w-8" />
+      </div>
+    </AutomationsPageGate>
+  </LayoutBasePage>
+</template>

package/app/pages/automations/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'automations-list',
+  middleware: 'automations-enabled',
+})
+
+const { t } = useI18n()
+const gate = useAutomationsGate()
+</script>
+
+<template>
+  <LayoutBasePage :title="t('automations.title')" :test-id="automationsTestIds.page">
+    <template #actions>
+      <CommonOrganizationSelect />
+      <UButton
+        v-if="gate.state === 'ready'"
+        icon="ph:plus-bold"
+        :label="t('automations.new')"
+        :to="{ name: 'automation-create' }"
+        :data-testid="automationsTestIds.newButton"
+      />
+    </template>
+
+    <AutomationsPageGate v-slot="{ catalog }" :gate="gate">
+      <AutomationsList :catalog="catalog" />
+    </AutomationsPageGate>
+  </LayoutBasePage>
+</template>

package/app/pages/automations/new.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'automation-create',
+  middleware: 'automations-enabled',
+})
+
+const { t } = useI18n()
+const gate = useAutomationsGate()
+const { goBackOrFallback } = useGoBack()
+
+const create = useTemplateRef('create')
+</script>
+
+<template>
+  <LayoutBasePage :title="t('automations.newTitle')" :test-id="automationsTestIds.newPage">
+    <template #actions>
+      <UButton
+        variant="ghost"
+        size="lg"
+        :label="t('common.actions.cancel')"
+        :data-testid="automationsTestIds.newPageCancelButton"
+        @click="goBackOrFallback({ name: 'automations-list' })"
+      />
+      <UButton
+        v-if="create"
+        size="lg"
+        :loading="create.saving"
+        :label="t('automations.form.create')"
+        :data-testid="automationsTestIds.newPageCreateButton"
+        @click="create.submit()"
+      />
+    </template>
+
+    <AutomationsPageGate v-slot="{ catalog, context }" :gate="gate">
+      <AutomationsCreate
+        v-if="catalog.triggers[0]"
+        ref="create"
+        :catalog="catalog"
+        :initial-trigger="catalog.triggers[0]"
+        :context="context"
+      />
+      <!-- A catalog with no Trigger has nothing to build an Automation from. -->
+      <UAlert
+        v-else
+        color="error"
+        variant="subtle"
+        icon="i-lucide-alert-triangle"
+        :title="t('automations.gate.no_catalog_title')"
+        :description="t('automations.gate.no_catalog_description')"
+      />
+    </AutomationsPageGate>
+  </LayoutBasePage>
+</template>

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

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

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

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