@dev.smartpricing/message-composer-layer 4.5.1-next.3 → 5.0.0-automations.0

package/app/components/Automations/SaveProblems.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { AutomationProblemLine } from '~/composables/useAutomationSaveProblems'
+
+/** The alert at the top of the Automation form: why the last save went nowhere. */
+defineProps<{
+  /** What a refused save said, each line with the place it is about. */
+  lines: AutomationProblemLine[]
+  /** The form was submitted with something required missing. */
+  incomplete?: boolean
+}>()
+
+const { t } = useI18n()
+
+function scrollTo(line: AutomationProblemLine) {
+  if (!line.target) return
+  document.getElementById(line.target)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+}
+</script>
+
+<template>
+  <UAlert
+    v-if="lines.length > 0"
+    color="error"
+    variant="soft"
+    icon="ph:warning-circle-bold"
+    :title="t('automations.problems.title')"
+  >
+    <template #description>
+      <ul class="space-y-1">
+        <li v-for="(line, index) in lines" :key="index" class="flex items-baseline gap-2">
+          <span>{{ line.text }}</span>
+          <UButton
+            v-if="line.target"
+            variant="link"
+            color="error"
+            size="sm"
+            class="p-0 underline"
+            :label="t('automations.problems.show')"
+            @click="scrollTo(line)"
+          />
+        </li>
+      </ul>
+    </template>
+  </UAlert>
+  <UAlert
+    v-else-if="incomplete"
+    color="error"
+    variant="soft"
+    icon="ph:warning-circle-bold"
+    :title="t('automations.form.error_banner')"
+  />
+</template>

package/app/components/Automations/Unavailable.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { AutomationUnavailableItem } from '../../utils/automations/unavailable'
+
+/**
+ * The summary of what an Automation holds that is no longer available: what
+ * must be fixed before saving, and what is only kept. An error while
+ * something blocks the save, a warning otherwise, nothing when the list is
+ * empty. The Automation form shows it at its top, the filter editor and the
+ * Action editor at theirs.
+ */
+const props = defineProps<{
+  items: AutomationUnavailableItem[]
+  /** Shown where the things are: no "Show" link. */
+  inPlace?: boolean
+}>()
+
+const emit = defineEmits<{ show: [item: AutomationUnavailableItem] }>()
+
+const { t } = useI18n()
+
+const groups = computed(() =>
+  [
+    {
+      title: t('automations.unavailable.to_fix'),
+      items: props.items.filter((item) => item.blocks),
+    },
+    {
+      title: t('automations.unavailable.kept'),
+      items: props.items.filter((item) => !item.blocks),
+    },
+  ].filter((group) => group.items.length > 0),
+)
+
+const blocked = computed(() => props.items.some((item) => item.blocks))
+</script>
+
+<template>
+  <UAlert
+    v-if="items.length > 0"
+    :color="blocked ? 'error' : 'warning'"
+    variant="soft"
+    :icon="blocked ? 'ph:warning-circle-bold' : 'ph:warning-bold'"
+    :title="
+      blocked ? t('automations.unavailable.title_blocked') : t('automations.unavailable.title_kept')
+    "
+    data-testid="automation-unavailable"
+  >
+    <template #description>
+      <div class="space-y-3">
+        <div v-for="group in groups" :key="group.title">
+          <p class="label-sm">{{ group.title }}</p>
+          <ul class="mt-1 space-y-1">
+            <li v-for="item in group.items" :key="item.key">
+              <span class="font-semibold">{{ item.where }}:</span>
+              {{ item.text }}
+              <UButton
+                v-if="!inPlace && item.target"
+                variant="link"
+                :color="blocked ? 'error' : 'warning'"
+                size="sm"
+                class="p-0 underline"
+                :label="t('automations.problems.show')"
+                @click="emit('show', item)"
+              />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+  </UAlert>
+</template>

package/app/components/Automations/UnavailableBadge.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { AutomationUnavailableItem } from '../../utils/automations/unavailable'
+
+/** An unavailable thing marked where it is: a small badge, its sentence in a tooltip. */
+defineProps<{
+  item: AutomationUnavailableItem
+}>()
+
+const { t } = useI18n()
+
+const LABEL_KEYS: Record<AutomationUnavailableItem['kind'], string> = {
+  trigger: 'unavailable',
+  date_reference: 'unavailable',
+  condition_unknown_field: 'unavailable',
+  condition_not_editable: 'unavailable',
+  option: 'unavailable',
+  channel: 'not_set_up',
+  message_group_inactive: 'not_approved',
+  message_group_active: 'not_approved',
+}
+</script>
+
+<template>
+  <UTooltip :text="item.text">
+    <UBadge
+      :color="item.blocks ? 'error' : 'warning'"
+      variant="subtle"
+      size="sm"
+      class="shrink-0"
+      :data-testid="`automation-unavailable-badge-${item.kind}`"
+    >
+      {{ t(`automations.unavailable.badges.${LABEL_KEYS[item.kind]}`) }}
+    </UBadge>
+  </UTooltip>
+</template>

package/app/components/Common/MessageGroupSelect.vue

@@ -35,6 +35,8 @@ const ELIGIBILITY_RULES: Record<
  * menu's search input; pages of 100 load on demand through "Load more".
  * The selected group stays in the menu even when the loaded pages no longer
  * contain it (search cleared, paging reset, or preselected beyond page one).
+ * A selected group that cannot be picked is still shown, with its status and
+ * whatever the hide filter says: it was selected elsewhere, not offered here.
  */
 const props = withDefaults(
   defineProps<{
@@ -186,7 +188,7 @@ const items = computed(() => {
     const externalReason = props.disabledGroupReasons?.[group.id]
     const eligible = rule.value.isEligible(group.messages)
     const disabled = !eligible || externalReason != null
-    if (hideIneligible.value && disabled) return acc
+    if (hideIneligible.value && disabled && group.id !== modelValue.value) return acc
     // External reason wins over the mode's own tooltip when both apply.
     let tooltip: string | undefined
     if (externalReason != null) tooltip = externalReason
@@ -202,6 +204,21 @@ const items = computed(() => {
   }, [])
 })
 
+// What keeps a group from being eligible, worst first.
+const BLOCKING_STATUSES = ['rejected', 'pending', 'draft'] as const
+const STATUS_COLORS = { rejected: 'error', pending: 'warning', draft: 'neutral' } as const
+
+/** The selected group when it fails the mode's rule, with the status that says why. */
+const selectedIneligible = computed(() => {
+  const group = messageGroups.value.find((g) => g.id === modelValue.value)
+  if (!group || rule.value.isEligible(group.messages)) return undefined
+  // A group with no Message has nothing past a draft.
+  const status =
+    BLOCKING_STATUSES.find((candidate) => group.messages.some((m) => m.status === candidate)) ??
+    'draft'
+  return { name: group.name, status, color: STATUS_COLORS[status] }
+})
+
 function handleUpdate(value: string) {
   modelValue.value = value
   const group = messageGroups.value.find((g) => g.id === value)
@@ -224,6 +241,18 @@ function handleUpdate(value: string) {
     :data-testid="messageGroupSelectTestIds.root"
     @update:model-value="handleUpdate"
   >
+    <template v-if="selectedIneligible" #default>
+      <span class="truncate">{{ selectedIneligible.name }}</span>
+      <UBadge
+        leading-icon="ph:circle-fill"
+        :label="t(`status.${selectedIneligible.status}`)"
+        size="sm"
+        :color="selectedIneligible.color"
+        variant="outline"
+        class="shrink-0"
+      />
+    </template>
+
     <template #item-label="{ item }">
       <UTooltip v-if="item.disabled" :text="item.tooltip">
         <span class="text-muted">{{ item.label }}</span>

package/app/components/Composer/EmailComposer.vue

@@ -165,8 +165,12 @@ const { formState, draftSchema, validationErrors, validateDraft, validateFull, c
 // ── Template operations ───────────────────────────────────────────
 const successFlag = ref(false)
 
+const editorTrip = useEditorTripStore()
+
 const { saving, createTemplate, updateTemplate } = useTemplateOperations({
-  onSuccess: () => {
+  onSuccess: (saved) => {
+    // Recorded before the editor navigates: whoever opened it reads it on landing.
+    if (saved) editorTrip.recordSaved(saved)
     successFlag.value = true
     goBackOrFallback()
   },

package/app/components/Composer/WabaSelectModal.vue

@@ -8,11 +8,13 @@ import type { OrganizationWaba } from '@dev.smartpricing/message-composer-utils/
  */
 const props = defineProps<{
   wabas: OrganizationWaba[]
+  /** The Host's WABA, already checked to be one of `wabas`. */
+  preselected?: string
 }>()
 
 const emit = defineEmits<{ close: [wabaId?: string] }>()
 
-const selected = ref<string>()
+const selected = ref<string | undefined>(props.preselected)
 
 const items = computed(() =>
   props.wabas.map((waba) => ({

package/app/components/Composer/WhatsappComposer.vue

@@ -134,8 +134,12 @@ const { formState, draftSchema, validationErrors, validateDraft, validateFull, c
 // ── Template operations ───────────────────────────────────────────
 const successFlag = ref(false)
 
+const editorTrip = useEditorTripStore()
+
 const { saving, createTemplate, updateTemplate } = useTemplateOperations({
-  onSuccess: () => {
+  onSuccess: (saved) => {
+    // Recorded before the editor navigates: whoever opened it reads it on landing.
+    if (saved) editorTrip.recordSaved(saved)
     successFlag.value = true
     changeTracking.clearAllChanges()
     if (props.mode === 'create') {

package/app/components/Filters/DateInput.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { parseDate } from '@internationalized/date'
+
+/** Internal to the filter components: one date, as `YYYY-MM-DD`. */
+const props = defineProps<{
+  modelValue: string | undefined
+  testId: string
+}>()
+
+const emit = defineEmits<{ 'update:modelValue': [value: string | undefined] }>()
+
+const date = computed(() => (props.modelValue ? parseDate(props.modelValue) : undefined))
+
+// The inputs also speak ranges and lists; here they only ever hold one date.
+function onUpdate(value: unknown) {
+  const isDate = typeof value === 'object' && value !== null && 'year' in value && 'day' in value
+  // A date with a time or a zone would still print its date first.
+  emit('update:modelValue', isDate ? String(value).slice(0, 10) : undefined)
+}
+
+const { t } = useI18n()
+
+const inputDate = useTemplateRef('inputDate')
+</script>
+
+<template>
+  <UInputDate
+    ref="inputDate"
+    :model-value="date"
+    class="w-full"
+    :data-testid="`${testId}-date`"
+    @update:model-value="onUpdate"
+  >
+    <template #trailing>
+      <UPopover :reference="inputDate?.inputsRef[0]?.$el">
+        <UButton
+          color="neutral"
+          variant="link"
+          size="sm"
+          icon="ph:calendar-bold"
+          :aria-label="t('filters.actions.open_calendar')"
+          class="px-0"
+          :data-testid="`${testId}-calendar-button`"
+        />
+
+        <template #content>
+          <UCalendar
+            :model-value="date"
+            class="p-2"
+            :data-testid="`${testId}-calendar`"
+            @update:model-value="onUpdate"
+          />
+        </template>
+      </UPopover>
+    </template>
+  </UInputDate>
+</template>

package/app/components/Filters/Editor.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type {
+  Condition,
+  FilterField,
+  FiltersReport,
+} from '@dev.smartpricing/message-composer-utils/types'
+import {
+  conditionsToFilterRows,
+  filterCurrency,
+  filterRowsToConditions,
+  newFilterRow,
+  reportFilterRows,
+  type FilterEditableRow,
+  type FilterRow,
+} from '../../utils/filters/rows'
+
+/**
+ * Public (ADR 0018): the rows of a list of Conditions, and "add". Props-only:
+ * it reads neither the Automation Catalog nor the Host's context. A Condition
+ * it cannot edit is an unavailable row, kept as it is until the user removes
+ * it; a half-filled row is reported and never emitted.
+ */
+const props = withDefaults(
+  defineProps<{
+    /** The fields a Condition can be on, in display order. */
+    fields: FilterField[]
+    /** ISO code of the currency `price` fields show; EUR when absent. */
+    currency?: string
+    title?: string
+    subtitle?: string
+    testIdPrefix?: string
+  }>(),
+  { currency: undefined, title: undefined, subtitle: undefined, testIdPrefix: undefined },
+)
+
+const model = defineModel<Condition[]>({ required: true })
+
+const emit = defineEmits<{ report: [report: FiltersReport] }>()
+
+const { t } = useI18n()
+
+let lastId = 0
+const nextId = () => ++lastId
+
+const rows = ref<FilterRow[]>([])
+/** What the rows were last worth, to tell the caller's changes from our own. */
+let emitted: string | undefined
+
+function readModel() {
+  rows.value = conditionsToFilterRows(model.value, props.fields, nextId)
+  emitted = JSON.stringify(model.value)
+}
+
+// Rows the user has not completed live only here: the rows are read again
+// only when the Conditions change from outside, or the fields do.
+watch(
+  model,
+  (conditions) => {
+    if (JSON.stringify(conditions) !== emitted) readModel()
+  },
+  { deep: true, immediate: true },
+)
+watch(() => props.fields.map((field) => `${field.key}:${field.type}`).join('|'), readModel)
+
+function commit(next: FilterRow[]) {
+  const before = JSON.stringify(filterRowsToConditions(rows.value))
+  rows.value = next
+  const conditions = filterRowsToConditions(next)
+  const serialized = JSON.stringify(conditions)
+  // A row in progress changes no Condition: nothing to tell the caller.
+  if (serialized === before) return
+  emitted = serialized
+  model.value = conditions
+}
+
+const report = computed(() => reportFilterRows(rows.value, props.fields))
+watch(report, (value) => emit('report', value), { immediate: true })
+
+const shownCurrency = computed(() => filterCurrency(props.currency))
+
+const fieldsByKey = computed(() => new Map(props.fields.map((field) => [field.key, field])))
+
+function fieldOf(row: FilterRow): FilterField | undefined {
+  if (row.kind === 'blank') return undefined
+  return fieldsByKey.value.get(row.kind === 'editable' ? row.field : row.condition.field)
+}
+
+/** A field can be picked once: a field any row is on is taken. */
+const freeFields = computed(() => {
+  const taken = new Set(rows.value.map((row) => fieldOf(row)?.key))
+  return props.fields.filter((field) => !taken.has(field.key))
+})
+
+function pickableFields(row: FilterRow): FilterField[] {
+  const own = fieldOf(row)
+  return props.fields.filter((field) => field === own || freeFields.value.includes(field))
+}
+
+const hasBlankRow = computed(() => rows.value.some((row) => row.kind === 'blank'))
+
+function addRow() {
+  commit([...rows.value, { kind: 'blank', id: nextId() }])
+}
+
+function replaceRow(id: number, row: FilterEditableRow) {
+  commit(rows.value.map((current) => (current.id === id ? row : current)))
+}
+
+function pickField(id: number, fieldKey: string) {
+  const field = fieldsByKey.value.get(fieldKey)
+  if (field) replaceRow(id, newFilterRow(id, field))
+}
+
+function removeRow(id: number) {
+  commit(rows.value.filter((row) => row.id !== id))
+}
+
+const prefix = computed(() => (props.testIdPrefix ? `${props.testIdPrefix}-` : ''))
+
+function rowTestId(row: FilterRow, index: number): string {
+  if (row.kind === 'editable') return `${prefix.value}filter-${row.field}`
+  return `${prefix.value}filter-${row.kind === 'blank' ? 'new' : `unavailable-${index}`}`
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3" :data-testid="`${prefix}filters`">
+    <p v-if="title" class="label-md">{{ title }}</p>
+    <p v-if="subtitle" class="label-sm">{{ subtitle }}</p>
+
+    <template v-for="(row, index) in rows" :key="row.id">
+      <FiltersUnavailableRow
+        v-if="row.kind === 'unavailable'"
+        :row="row"
+        :field="fieldOf(row)"
+        :test-id="rowTestId(row, index)"
+        @remove="removeRow(row.id)"
+      />
+      <FiltersRow
+        v-else
+        :row="row"
+        :field="fieldOf(row)"
+        :pickable-fields="pickableFields(row)"
+        :currency="shownCurrency"
+        :test-id="rowTestId(row, index)"
+        @pick="pickField(row.id, $event)"
+        @update="replaceRow(row.id, $event)"
+        @remove="removeRow(row.id)"
+      />
+    </template>
+
+    <div>
+      <UButton
+        :disabled="freeFields.length === 0 || hasBlankRow"
+        color="secondary"
+        variant="outline"
+        :label="t('filters.actions.add_filter')"
+        :data-testid="`${prefix}filters-add-button`"
+        @click="addRow"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Filters/Row.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { FilterField } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  FILTER_OPERATOR_LABEL_KEYS,
+  filterRowOperators,
+  missingFilterOptions,
+  withFilterOperator,
+  type FilterBlankRow,
+  type FilterEditableRow,
+  type FilterRowOperator,
+} from '../../utils/filters/rows'
+
+/** Internal to the filter components: one row the user can edit. */
+const props = defineProps<{
+  row: FilterBlankRow | FilterEditableRow
+  /** The row's own field, when it has one. */
+  field: FilterField | undefined
+  /** The fields the row can be on: its own and the ones no other row is on. */
+  pickableFields: FilterField[]
+  currency: string
+  testId: string
+}>()
+
+const emit = defineEmits<{
+  /** The user picked a field: the row starts over on it. */
+  pick: [fieldKey: string]
+  update: [row: FilterEditableRow]
+  remove: []
+}>()
+
+const { t } = useI18n()
+
+const fieldItems = computed(() =>
+  props.pickableFields.map((field) => ({ label: field.label, value: field.key })),
+)
+
+const operatorItems = computed(() =>
+  props.row.kind === 'editable'
+    ? filterRowOperators(props.row.type).map((operator) => ({
+        label: t(`filters.operators.${FILTER_OPERATOR_LABEL_KEYS[operator]}`),
+        value: operator,
+      }))
+    : [],
+)
+
+const hasMissingOption = computed(
+  () => props.row.kind === 'editable' && missingFilterOptions(props.row, props.field).length > 0,
+)
+
+function onField(fieldKey: string) {
+  if (props.row.kind === 'editable' && props.row.field === fieldKey) return
+  emit('pick', fieldKey)
+}
+
+function onOperator(operator: FilterRowOperator) {
+  if (props.row.kind !== 'editable') return
+  emit('update', withFilterOperator(props.row, operator))
+}
+
+function onValue(patch: Partial<Pick<FilterEditableRow, 'value' | 'to'>>) {
+  if (props.row.kind !== 'editable') return
+  emit('update', { ...props.row, ...patch, original: undefined })
+}
+</script>
+
+<template>
+  <div class="flex gap-2" :data-testid="testId">
+    <div class="flex-1 grid grid-cols-5 items-start gap-2">
+      <USelectMenu
+        class="w-full col-span-2"
+        :items="fieldItems"
+        value-key="value"
+        :model-value="row.kind === 'editable' ? row.field : undefined"
+        :placeholder="t('filters.field_placeholder')"
+        :search-input="{ placeholder: t('common.search') }"
+        :data-testid="`${testId}-field-select`"
+        @update:model-value="onField"
+      />
+      <USelect
+        :model-value="row.kind === 'editable' ? row.operator : undefined"
+        :disabled="row.kind === 'blank'"
+        class="w-full"
+        :items="operatorItems"
+        :ui="{ content: 'min-w-fit' }"
+        :data-testid="`${testId}-operator-select`"
+        @update:model-value="onOperator($event as FilterRowOperator)"
+      />
+
+      <div class="col-span-2 flex items-start gap-2">
+        <FiltersValueInput
+          v-if="row.kind === 'editable' && field"
+          class="flex-1 min-w-0"
+          :row="row"
+          :field="field"
+          :currency="currency"
+          :test-id="`${testId}-value`"
+          @update:value="onValue({ value: $event })"
+          @update:to="onValue({ to: $event })"
+        />
+        <UTooltip v-if="hasMissingOption" :text="t('filters.unavailable.option_description')">
+          <UIcon
+            name="ph:warning-bold"
+            class="size-4 mt-2 shrink-0 text-warning"
+            :data-testid="`${testId}-unavailable-option-badge`"
+          />
+        </UTooltip>
+      </div>
+    </div>
+    <UButton
+      color="error"
+      variant="ghost"
+      icon="ph:trash"
+      class="shrink-0 self-start"
+      :aria-label="t('filters.actions.remove_filter')"
+      :data-testid="`${testId}-delete-button`"
+      @click="emit('remove')"
+    />
+  </div>
+</template>