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

package/app/components/Automations/Form.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import {
+  AUTOMATION_CHANNELS,
+  type AutomationCatalog,
+  type AutomationChannel,
+  type FiltersReport,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { AutomationsContext } from '~/composables/automationsContext'
+import type {
+  AutomationMessageRequest,
+  OpenAutomationAction,
+} from '~/composables/useAutomationEditorTrip'
+import {
+  AUTOMATION_CONDITIONS_ELEMENT_ID,
+  AUTOMATION_TRIGGER_ELEMENT_ID,
+} from '~/composables/useAutomationUnavailable'
+import { useMessageGroupApprovalsQuery } from '~/queries'
+import { cloneFormData, type AutomationFormState } from '../../utils/automations/form'
+import type { AutomationMetadataForm } from '../../utils/automations/metadata'
+import type {
+  ActionAvailability,
+  AutomationUnavailableItem,
+} from '../../utils/automations/unavailable'
+
+/**
+ * The fields of an Automation: its name, its Trigger, its Conditions and its
+ * Actions. Everything a Trigger offers comes from the Automation Catalog, and
+ * every option list from the Host's context (ADR 0017).
+ */
+const props = defineProps<{
+  catalog: AutomationCatalog
+  context: AutomationsContext
+  /** The form was submitted: what is missing shows on its field. */
+  submitted?: boolean
+  /** The keys of the Actions a refused save pointed at. */
+  invalidActionKeys?: string[]
+  /** The Action whose editor starts open: the one an editor trip left from. */
+  openAction?: OpenAutomationAction
+  /** The values the Automation asks for, when it asks for any. */
+  dataForm?: AutomationMetadataForm
+  /**
+   * A System Automation: only the Active switch of its Actions and the values
+   * it asks for can be changed (ADR 0016).
+   */
+  system?: boolean
+}>()
+
+const emit = defineEmits<{
+  /** The user leaves for the Message editor from an Action. */
+  editMessage: [request: AutomationMessageRequest]
+}>()
+
+const form = defineModel<AutomationFormState>({ required: true })
+
+const { t } = useI18n()
+const { trackEvent } = useTracking()
+const { confirm } = useConfirm()
+
+const trigger = computed(() =>
+  props.catalog.triggers.find(({ type }) => type === form.value.triggerType),
+)
+
+/** A stored Trigger the Automation Catalog no longer lists shows as it is, and cannot be picked. */
+const triggerOptions = computed(() => [
+  ...(trigger.value
+    ? []
+    : [{ value: form.value.triggerType, label: form.value.triggerType, disabled: true }]),
+  ...props.catalog.triggers.map(({ type, label }) => ({ value: type, label })),
+])
+
+/**
+ * A Trigger change starts over from the new Trigger's default Conditions
+ * (ADR 0017), and without Actions: their Date References are the old
+ * Trigger's. The user is asked first when that loses something.
+ */
+async function changeTrigger(type: string) {
+  const next = props.catalog.triggers.find((candidate) => candidate.type === type)
+  const current = trigger.value
+  if (!next || type === form.value.triggerType) return
+
+  const untouched =
+    form.value.actions.length === 0 &&
+    JSON.stringify(form.value.conditions) === JSON.stringify(current?.default_conditions ?? [])
+  if (!untouched) {
+    const confirmed = await confirm({
+      title: t('automations.form.changeTrigger.title'),
+      message: t('automations.form.changeTrigger.message'),
+      confirmProps: { label: t('automations.form.changeTrigger.confirm') },
+      cancelProps: { label: t('common.actions.cancel') },
+    })
+    if (!confirmed) return
+  }
+
+  trackEvent('automation.trigger_changed', { from: form.value.triggerType, to: type })
+  form.value = {
+    ...form.value,
+    triggerType: type,
+    conditions: cloneFormData(next.default_conditions),
+    actions: [],
+  }
+}
+
+const { isChannelAllowed } = useChannels()
+const { status: whatsappStatus } = useWhatsappConfiguration()
+
+/**
+ * The Trigger's Channels the Host offers; WhatsApp only once the
+ * Organization is known to have a WABA (ADR 0015).
+ */
+const channels = computed<AutomationChannel[]>(() =>
+  (trigger.value?.channels ?? [])
+    .map(({ channel }) => channel)
+    .filter(
+      (channel) =>
+        isChannelAllowed(channel) &&
+        (channel !== 'whatsapp' || whatsappStatus.value === 'configured'),
+    ),
+)
+
+/**
+ * The Channels the Organization cannot use: WhatsApp without a WABA. A lookup
+ * still running or failed says nothing, and a Channel the Host does not offer
+ * is not the Organization's doing: neither is called unusable.
+ */
+const unusableChannels = computed<AutomationChannel[]>(() =>
+  AUTOMATION_CHANNELS.filter(
+    (channel) => channel === 'whatsapp' && whatsappStatus.value === 'not_configured',
+  ),
+)
+
+const { data: approvals } = useMessageGroupApprovalsQuery(() =>
+  form.value.actions.map((action) => action.messageGroupId),
+)
+
+const availability = computed<ActionAvailability | undefined>(
+  () =>
+    trigger.value && {
+      trigger: trigger.value,
+      unusableChannels: unusableChannels.value,
+      approvals: approvals.value,
+    },
+)
+
+const unavailable = useAutomationUnavailable()
+
+/** What `FiltersSummary` reports on the form's Conditions. */
+const filtersReport = ref<FiltersReport>()
+const filtersOpen = ref(false)
+
+const unavailableByAction = computed(() => {
+  const current = availability.value
+  return new Map(
+    form.value.actions.map((action) => [
+      action.key,
+      current ? unavailable.actionItems(action, current) : [],
+    ]),
+  )
+})
+
+/**
+ * Everything unavailable in the Automation, top to bottom. Under a Trigger
+ * the catalog no longer lists nothing else can be told, or shown.
+ */
+const unavailableItems = computed<AutomationUnavailableItem[]>(() => {
+  if (!trigger.value) return [unavailable.triggerItem()].map(inSystemAutomation)
+
+  return [
+    ...unavailable.conditionItems(filtersReport.value, trigger.value.condition_fields),
+    ...unavailableByAction.value.values(),
+  ]
+    .flat()
+    .map(inSystemAutomation)
+})
+
+/**
+ * What stops the save of a System Automation: only an Active Action on an
+ * unapproved Message Group, which its user can turn off. The rest is its
+ * Host's, kept as stored by the backend too (ADR 0016).
+ */
+function inSystemAutomation(item: AutomationUnavailableItem): AutomationUnavailableItem {
+  if (!props.system) return item
+  return { ...item, blocks: item.kind === 'message_group_active' }
+}
+
+const blocked = computed(() => unavailableItems.value.some((item) => item.blocks))
+
+const UNAVAILABLE_ELEMENT_ID = 'automation-unavailable'
+
+function scrollTo(id: string) {
+  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+}
+
+function show(item: AutomationUnavailableItem) {
+  if (item.target) scrollTo(item.target)
+  if (item.inFilters) filtersOpen.value = true
+}
+
+defineExpose({
+  /** Something unavailable stops the save: the caller does not send it. */
+  blocked,
+  /** Brings the user back to the alert that says what to fix. */
+  showUnavailable: () => scrollTo(UNAVAILABLE_ELEMENT_ID),
+})
+</script>
+
+<template>
+  <UCard
+    :ui="{
+      root: 'flex flex-col flex-1 min-h-0',
+      body: 'flex-1 w-full max-w-3xl mx-auto px-3 sm:pt-10 overflow-auto space-y-6',
+    }"
+    :data-testid="automationsTestIds.form"
+  >
+    <AutomationsUnavailable :id="UNAVAILABLE_ELEMENT_ID" :items="unavailableItems" @show="show" />
+
+    <h3 class="heading-sm">{{ t('automations.form.title') }}</h3>
+
+    <UFormField
+      :label="t('automations.form.name')"
+      :error="submitted && !form.name.trim() ? t('automations.form.required') : undefined"
+    >
+      <UInput
+        v-model="form.name"
+        :placeholder="t('automations.form.namePlaceholder')"
+        :disabled="system"
+        class="w-full"
+        :data-testid="automationsTestIds.nameInput"
+      />
+    </UFormField>
+
+    <template v-if="dataForm">
+      <USeparator />
+
+      <AutomationsData v-model="form.data" :form="dataForm" />
+    </template>
+
+    <USeparator />
+
+    <UFormField :id="AUTOMATION_TRIGGER_ELEMENT_ID" :label="t('automations.form.trigger')">
+      <template v-if="!trigger" #hint>
+        <AutomationsUnavailableBadge :item="unavailable.triggerItem()" />
+      </template>
+      <USelect
+        :model-value="form.triggerType"
+        :items="triggerOptions"
+        :disabled="system"
+        :data-testid="automationsTestIds.triggerSelect"
+        @update:model-value="changeTrigger"
+      />
+    </UFormField>
+
+    <template v-if="trigger">
+      <USeparator />
+
+      <AutomationsConditions
+        :id="AUTOMATION_CONDITIONS_ELEMENT_ID"
+        v-model="form.conditions"
+        v-model:open="filtersOpen"
+        :trigger="trigger"
+        :option-lists="context.optionLists.value"
+        :currency="context.currency?.value"
+        :read-only="system"
+        @report="filtersReport = $event"
+      />
+
+      <USeparator />
+
+      <AutomationsActions
+        v-model="form.actions"
+        :trigger="trigger"
+        :channels="channels"
+        :unusable-channels="unusableChannels"
+        :unavailable="unavailableByAction"
+        :invalid-keys="invalidActionKeys"
+        :submitted="submitted"
+        :open-action="openAction"
+        :read-only="system"
+        @edit-message="emit('editMessage', $event)"
+      />
+    </template>
+  </UCard>
+</template>

package/app/components/Automations/List.vue

@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import type {
+  Automation,
+  AutomationCatalog,
+  AutomationChannel,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { formatDate } from '@dev.smartpricing/message-composer-utils/utils'
+import type { TableColumn } from '#ui/types'
+import AutomationsDeleteModal from '~/components/Automations/DeleteModal.vue'
+import { useAutomationsQuery, useDeleteAutomationMutation } from '~/queries'
+import { isSystemAutomation } from '../../utils/automations/metadata'
+
+/**
+ * The Automations of the Effective Organization for the Host's Product, with
+ * client-side search, filter and sort: the Automation Engine pages nothing
+ * (ADR 0016). Trigger labels come from the Automation Catalog. System
+ * Automations stay on top, whatever the sort.
+ */
+const props = defineProps<{ catalog: AutomationCatalog }>()
+
+const { t, te } = useI18n()
+const { trackEvent } = useTracking()
+
+const { data: automations, isPending } = useAutomationsQuery()
+
+// A lookup still running or failed is not "no WABA": WhatsApp stays listed.
+const { status: whatsappStatus } = useWhatsappConfiguration()
+const whatsappOff = computed(
+  () => whatsappStatus.value === 'unavailable' || whatsappStatus.value === 'not_configured',
+)
+const { hasEmail } = useChannels()
+/** A Channel the Host does not offer, or the Organization cannot use, is left out. */
+function isShown(channel: string): boolean {
+  if (channel === 'whatsapp') return !whatsappOff.value
+  if (channel === 'email') return hasEmail.value
+  return true
+}
+
+const search = ref('')
+const filterTrigger = ref('all')
+const filterStatus = ref('all')
+const filterChannel = ref('all')
+// Column ids are the ones Smartconnect's list reports in `sort_changed`.
+const sorting = ref([{ id: 'createdAt', desc: false }])
+
+const filterState = computed(() => ({
+  search_term: search.value,
+  trigger_type: filterTrigger.value,
+  status: filterStatus.value,
+  channel: filterChannel.value,
+}))
+const debouncedFilterState = refDebounced(filterState, 1000)
+
+watch(debouncedFilterState, (state) => {
+  trackEvent('automation_list.filter_changed', state)
+})
+
+watch(sorting, ([current]) => {
+  if (!current) return
+  trackEvent('automation_list.sort_changed', {
+    column: current.id,
+    direction: current.desc ? 'desc' : 'asc',
+  })
+})
+
+const triggerOptions = computed(() => [
+  { label: t('automations.list.allTriggers'), value: 'all' },
+  ...props.catalog.triggers.map((trigger) => ({ label: trigger.label, value: trigger.type })),
+])
+
+const statusOptions = computed(() => [
+  { label: t('automations.list.allStatuses'), value: 'all' },
+  { label: t('automations.list.active'), value: 'active' },
+  { label: t('automations.list.inactive'), value: 'inactive' },
+])
+
+const catalogChannels = computed<AutomationChannel[]>(() => [
+  ...new Set(props.catalog.triggers.flatMap((trigger) => trigger.channels.map((c) => c.channel))),
+])
+
+const channelOptions = computed(() => [
+  { label: t('automations.list.allChannels'), value: 'all' },
+  ...catalogChannels.value
+    .filter(isShown)
+    .map((channel) => ({ label: getChannelLabel(channel), value: channel })),
+])
+
+function getChannelLabel(channel: string): string {
+  const key = `automations.channels.${channel}`
+  return te(key) ? t(key) : channel
+}
+
+function getTriggerType(automation: Automation): string {
+  const { type } = automation.settings.trigger
+  return (Array.isArray(type) ? type[0] : type) ?? ''
+}
+
+function getTriggerLabel(automation: Automation): string {
+  const type = getTriggerType(automation)
+  // A Trigger the catalog no longer lists shows as its raw value.
+  return props.catalog.triggers.find((trigger) => trigger.type === type)?.label ?? type
+}
+
+const filteredAutomations = computed(() => {
+  const query = search.value.trim().toLowerCase()
+
+  return (automations.value ?? []).filter((automation) => {
+    const channels = automation.actions.map((action) => action.config.channel)
+    // Nothing of it can be sent while WhatsApp is not set up.
+    if (channels.length > 0 && !channels.some(isShown)) return false
+    if (query && !automation.name.toLowerCase().includes(query)) return false
+    if (filterTrigger.value !== 'all' && getTriggerType(automation) !== filterTrigger.value) {
+      return false
+    }
+    if (filterStatus.value !== 'all' && automation.active !== (filterStatus.value === 'active')) {
+      return false
+    }
+    if (filterChannel.value !== 'all' && !channels.includes(filterChannel.value)) return false
+    return true
+  })
+})
+
+/** System Automations are pinned on top, in the order they were read: the sort is of the rest. */
+const rowPinning = computed(() => ({
+  top: filteredAutomations.value.filter(isSystemAutomation).map(({ id }) => id),
+}))
+
+/** "Email (2), WhatsApp (1)": the Actions of an Automation, by Channel. */
+function getChannels(automation: Automation): string {
+  const counts = new Map<string, number>()
+  for (const { config } of automation.actions) {
+    if (isShown(config.channel)) counts.set(config.channel, (counts.get(config.channel) ?? 0) + 1)
+  }
+  return [...counts]
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([channel, count]) => `${getChannelLabel(channel)} (${count})`)
+    .join(', ')
+}
+
+const columns: TableColumn<Automation>[] = [
+  {
+    accessorKey: 'name',
+    header: (ctx) => getSortableHeader(ctx, t('automations.list.headers.name')),
+  },
+  {
+    id: 'trigger',
+    accessorFn: getTriggerType,
+    header: (ctx) => getSortableHeader(ctx, t('automations.list.headers.trigger')),
+    cell: ({ row }) => getTriggerLabel(row.original),
+  },
+  {
+    id: 'enabled',
+    // Active first when ascending.
+    accessorFn: (automation) => (automation.active ? 0 : 1),
+    header: (ctx) => getSortableHeader(ctx, t('automations.list.headers.status')),
+  },
+  {
+    id: 'channel',
+    accessorFn: (automation) => automation.actions.length,
+    header: (ctx) => getSortableHeader(ctx, t('automations.list.headers.channels')),
+  },
+  {
+    id: 'audience',
+    accessorFn: (automation) => automation.settings.conditions.length,
+    header: (ctx) => getSortableHeader(ctx, t('automations.list.headers.audience')),
+    cell: ({ row }) =>
+      row.original.settings.conditions.length > 0
+        ? t('automations.audienceSpecific')
+        : t('automations.audienceAll'),
+  },
+  {
+    id: 'createdAt',
+    accessorKey: 'created_at',
+    header: (ctx) => getSortableHeader(ctx, t('automations.list.headers.createdAt')),
+    cell: ({ row }) => formatDate(row.original.created_at),
+  },
+  {
+    id: 'actions',
+    enableSorting: false,
+    header: '',
+    meta: {
+      class: {
+        th: 'w-[66px]',
+        td: 'w-[66px]',
+      },
+    },
+  },
+]
+
+const columnPinning = ref({
+  right: ['actions'],
+})
+
+const toast = useToast()
+const deleteModal = useOverlay().create(AutomationsDeleteModal, { destroyOnClose: true })
+const { mutateAsync: deleteAutomation } = useDeleteAutomationMutation()
+
+const listNames = (messageGroups: Array<{ name: string }>) =>
+  messageGroups.map(({ name }) => name).join(', ')
+
+function askDelete(automation: Automation) {
+  deleteModal.open({
+    automation,
+    action: async (messageGroupIds) => {
+      const result = await deleteAutomation({ id: automation.id, messageGroupIds })
+      trackEvent('automation_list.delete', {
+        automation_name: automation.name,
+        automation_id: automation.id,
+      })
+
+      // Nothing is read off the answer without a check: with no selection
+      // it is empty, and in demo mode it is not a delete result at all.
+      const deleted = result?.deleted ?? []
+      const kept = result?.kept ?? []
+      const description = [
+        deleted.length > 0 &&
+          t('automations.toast.deleted_messages', { names: listNames(deleted) }),
+        kept.length > 0 && t('automations.toast.kept_messages', { names: listNames(kept) }),
+      ]
+        .filter(Boolean)
+        .join('\n')
+      toast.add({
+        title: t('automations.toast.deleted'),
+        ...(description && { description }),
+        color: kept.length > 0 ? 'warning' : 'success',
+        ui: { description: 'whitespace-pre-line' },
+      })
+    },
+  })
+}
+
+const { askClone } = useAutomationClone()
+
+/** A System Automation cannot be deleted (ADR 0016): its row does not offer it. */
+function getRowActions(automation: Automation) {
+  return [
+    {
+      label: t('common.actions.edit'),
+      icon: 'ph:pencil-simple',
+      'data-testid': automationsTestIds.editAction,
+      onSelect: () => {
+        trackEvent('automation_list.edit', {
+          automation_name: automation.name,
+          automation_id: automation.id,
+        })
+        return navigateTo({ name: 'automation-edit', params: { id: automation.id } })
+      },
+    },
+    {
+      label: t('common.actions.duplicate'),
+      icon: 'ph:copy',
+      'data-testid': automationsTestIds.duplicateAction,
+      onSelect: () => {
+        trackEvent('automation_list.duplicate', {
+          automation_name: automation.name,
+          automation_id: automation.id,
+        })
+        askClone(automation)
+      },
+    },
+    ...(isSystemAutomation(automation)
+      ? []
+      : [
+          {
+            label: t('common.actions.delete'),
+            icon: 'ph:trash',
+            color: 'error' as const,
+            'data-testid': automationsTestIds.deleteAction,
+            onSelect: () => askDelete(automation),
+          },
+        ]),
+  ]
+}
+</script>
+
+<template>
+  <div class="flex-1 space-y-2.5 relative min-h-0 flex flex-col">
+    <div class="grid grid-cols-4 items-center gap-3 shrink-0">
+      <UInput
+        v-model="search"
+        type="search"
+        leading-icon="ph:magnifying-glass-bold"
+        :placeholder="t('automations.list.search')"
+        :data-testid="automationsTestIds.searchInput"
+      />
+      <USelect
+        v-model="filterTrigger"
+        :items="triggerOptions"
+        :data-testid="automationsTestIds.filterTrigger"
+      />
+      <USelect
+        v-model="filterStatus"
+        :items="statusOptions"
+        :data-testid="automationsTestIds.filterStatus"
+      />
+      <USelect
+        v-model="filterChannel"
+        :items="channelOptions"
+        :data-testid="automationsTestIds.filterChannel"
+      />
+    </div>
+
+    <UCard
+      :ui="{
+        root: 'flex-1 min-h-0 flex flex-col',
+        body: 'overflow-auto relative flex-1 p-0 sm:p-0 relative',
+      }"
+    >
+      <UTable
+        v-model:column-pinning="columnPinning"
+        v-model:sorting="sorting"
+        :row-pinning="rowPinning"
+        :get-row-id="(automation: Automation) => automation.id"
+        :data="filteredAutomations"
+        :columns="columns"
+        :loading="isPending"
+        :empty="t('automations.list.empty')"
+        sticky
+        class="flex-1 bg-white"
+        :data-testid="automationsTestIds.table"
+        :ui="{
+          tr: 'hover:bg-muted',
+          root: 'overflow-visible static',
+        }"
+      >
+        <template #name-cell="{ row }">
+          <div class="flex items-center gap-2">
+            <span>{{ row.original.name }}</span>
+            <UTooltip
+              v-if="isSystemAutomation(row.original)"
+              :text="t('automations.system.tooltip')"
+            >
+              <UBadge
+                :label="t('automations.system.badge')"
+                color="info"
+                variant="subtle"
+                size="sm"
+                :data-testid="automationsTestIds.lockedBadge"
+              />
+            </UTooltip>
+          </div>
+        </template>
+
+        <template #enabled-cell="{ row }">
+          <UBadge
+            :label="
+              row.original.active ? t('automations.list.active') : t('automations.list.inactive')
+            "
+            :color="row.original.active ? 'success' : 'neutral'"
+            variant="soft"
+            :data-testid="automationsTestIds.statusCell"
+          />
+        </template>
+
+        <template #channel-cell="{ row }">
+          <span :data-testid="automationsTestIds.channelsCell">{{
+            getChannels(row.original) || '-'
+          }}</span>
+        </template>
+
+        <template #actions-cell="{ row }">
+          <SMoreActions
+            :actions="getRowActions(row.original)"
+            :button-props="{ 'data-testid': automationsTestIds.rowActionsButton }"
+          />
+        </template>
+      </UTable>
+    </UCard>
+  </div>
+</template>

package/app/components/Automations/PageGate.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { AutomationCatalog } from '@dev.smartpricing/message-composer-utils/types'
+import type { AutomationsContext } from '~/composables/automationsContext'
+import type { AutomationsGate } from '~/composables/useAutomationsGate'
+
+/**
+ * Shows an Automation page's content once its gate is open, and until then
+ * the error alert of the Organization gate and nothing else (ADR 0019).
+ */
+defineProps<{ gate: AutomationsGate }>()
+
+defineSlots<{
+  default(props: { catalog: AutomationCatalog; context: AutomationsContext }): unknown
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <slot v-if="gate.state === 'ready'" :catalog="gate.catalog" :context="gate.context" />
+
+  <div
+    v-else-if="gate.state === 'loading'"
+    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>
+
+  <UAlert
+    v-else
+    color="error"
+    variant="subtle"
+    icon="i-lucide-alert-triangle"
+    :title="gate.title"
+    :description="gate.description"
+    :actions="
+      gate.retry
+        ? [
+            {
+              label: t('common.organization.retry'),
+              color: 'error',
+              variant: 'outline',
+              onClick: gate.retry,
+            },
+          ]
+        : undefined
+    "
+  />
+</template>