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

package/app/components/Filters/Summary.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import type {
+  Condition,
+  FilterField,
+  FilterOptionValue,
+  FiltersReport,
+} from '@dev.smartpricing/message-composer-utils/types'
+import {
+  conditionsToFilterRows,
+  FILTER_OPERATOR_LABEL_KEYS,
+  filterCurrency,
+  isFilterRange,
+  missingFilterOptions,
+  rawConditionValue,
+  reportFilterRows,
+  type FilterEditableRow,
+  type FilterRow,
+  type FilterRowValue,
+} from '../../utils/filters/rows'
+
+/**
+ * Public (ADR 0018): a list of Conditions, read-only, one line each.
+ * Props-only, as `FiltersEditor`, and it leaves no Condition out: one the
+ * editor cannot edit shows as unavailable.
+ */
+const props = withDefaults(
+  defineProps<{
+    modelValue: Condition[]
+    /** The fields a Condition can be on. */
+    fields: FilterField[]
+    /** ISO code of the currency `price` fields show; EUR when absent. */
+    currency?: string
+    /** How many lines show before "View more". */
+    preview?: number
+    testIdPrefix?: string
+  }>(),
+  { currency: undefined, preview: 3, testIdPrefix: undefined },
+)
+
+const emit = defineEmits<{ report: [report: FiltersReport] }>()
+
+const { t, locale } = useI18n()
+
+interface Line {
+  id: number
+  /** "Total price is at least:". */
+  heading: string
+  value: string
+  /** Shown in place of `value`, which then goes in a tooltip. */
+  count?: string
+  /** Option values the field does not list, struck through. */
+  missing: string[]
+  /** Why the line is an unavailable one, as a sentence. */
+  unavailable?: string
+  /** A stored value, shown as it is. */
+  raw: boolean
+  /** A field the caller did not declare: the whole line shows as stored. */
+  unknown: boolean
+}
+
+const fieldsByKey = computed(() => new Map(props.fields.map((field) => [field.key, field])))
+
+const rows = computed(() => {
+  let id = 0
+  return conditionsToFilterRows(props.modelValue, props.fields, () => ++id)
+})
+
+const report = computed(() => reportFilterRows(rows.value, props.fields))
+watch(report, (value) => emit('report', value), { immediate: true })
+
+function formatValue(row: FilterEditableRow, value: FilterRowValue): string {
+  if (value === undefined || Array.isArray(value)) return ''
+  switch (row.type) {
+    case 'price':
+      return new Intl.NumberFormat(locale.value, {
+        style: 'currency',
+        currency: filterCurrency(props.currency),
+      }).format(value as number)
+    case 'number':
+      return new Intl.NumberFormat(locale.value).format(value as number)
+    case 'date':
+      return new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium', timeZone: 'UTC' }).format(
+        new Date(`${value}T00:00:00Z`),
+      )
+    default:
+      return String(value)
+  }
+}
+
+function editableLine(row: FilterEditableRow): Line {
+  const field = fieldsByKey.value.get(row.field)
+  const operator = t(`filters.operators.${FILTER_OPERATOR_LABEL_KEYS[row.operator]}`)
+  const line: Line = {
+    id: row.id,
+    heading: `${field?.label ?? row.field} ${operator}`,
+    value: '',
+    missing: [],
+    raw: false,
+    unknown: false,
+  }
+  if (row.operator === 'exists') return line
+  line.heading += ':'
+
+  if (row.type === 'select' || row.type === 'multiselect') {
+    const missing = missingFilterOptions(row, field)
+    const selected: FilterOptionValue[] = Array.isArray(row.value)
+      ? row.value
+      : row.value === undefined
+        ? []
+        : [row.value]
+    const labels = (field?.options ?? [])
+      .filter((option) => selected.includes(option.value))
+      .map((option) => option.label)
+
+    line.value = labels.join(', ')
+    line.missing = missing.map(String)
+    if (labels.length > 1) line.count = t('filters.selected', { count: labels.length })
+    return line
+  }
+
+  line.value = isFilterRange(row.operator)
+    ? `${formatValue(row, row.value)} - ${formatValue(row, row.to)}`
+    : formatValue(row, row.value)
+  return line
+}
+
+function toLine(row: FilterRow): Line | undefined {
+  if (row.kind === 'blank') return undefined
+  if (row.kind === 'editable') return editableLine(row)
+
+  const { field: fieldKey, operator, value } = row.condition
+  const field = fieldsByKey.value.get(fieldKey)
+  const operatorKey = FILTER_OPERATOR_LABEL_KEYS[operator]
+  return {
+    id: row.id,
+    heading:
+      field && operatorKey
+        ? `${field.label} ${t(`filters.operators.${operatorKey}`)}`
+        : `${fieldKey} ${operator}`,
+    value: rawConditionValue(value),
+    missing: [],
+    unavailable: t(`filters.unavailable.${row.reason}`),
+    raw: true,
+    unknown: !field,
+  }
+}
+
+const lines = computed(() => rows.value.flatMap((row) => toLine(row) ?? []))
+
+const expanded = ref(false)
+const shown = computed(() => (expanded.value ? lines.value : lines.value.slice(0, props.preview)))
+
+const prefix = computed(() => (props.testIdPrefix ? `${props.testIdPrefix}-` : ''))
+</script>
+
+<template>
+  <div v-if="lines.length" class="space-y-1" :data-testid="`${prefix}filters-summary`">
+    <div
+      v-for="line in shown"
+      :key="line.id"
+      class="flex flex-wrap items-baseline gap-1"
+      :data-testid="`${prefix}filters-summary-item`"
+    >
+      <span class="label-sm text-muted" :class="{ 'font-mono': line.unknown }">
+        {{ line.heading }}
+      </span>
+      <UTooltip v-if="line.count" :text="line.value">
+        <span class="paragraph-sm text-highlighted">{{ line.count }}</span>
+      </UTooltip>
+      <span
+        v-else-if="line.value"
+        class="paragraph-sm text-highlighted"
+        :class="{ 'font-mono': line.raw }"
+      >
+        {{ line.value }}
+      </span>
+      <UTooltip
+        v-for="value in line.missing"
+        :key="value"
+        :text="t('filters.unavailable.option_description')"
+      >
+        <span
+          class="paragraph-sm text-muted line-through"
+          :data-testid="`${prefix}filters-summary-unavailable-option`"
+        >
+          {{ value }}
+        </span>
+      </UTooltip>
+      <UTooltip v-if="line.unavailable" :text="line.unavailable">
+        <UBadge
+          color="warning"
+          variant="subtle"
+          size="sm"
+          :data-testid="`${prefix}filters-summary-unavailable-badge`"
+        >
+          {{ t('filters.unavailable.badge') }}
+        </UBadge>
+      </UTooltip>
+    </div>
+    <UButton
+      v-if="lines.length > preview"
+      variant="link"
+      color="neutral"
+      size="xs"
+      class="px-0"
+      :label="t(expanded ? 'common.view_less' : 'common.view_more')"
+      :trailing-icon="expanded ? 'ph:caret-up-bold' : 'ph:caret-down-bold'"
+      :data-testid="`${prefix}filters-summary-toggle`"
+      @click="expanded = !expanded"
+    />
+  </div>
+  <div v-else :data-testid="`${prefix}filters-summary`">
+    <span class="paragraph-sm text-muted">-</span>
+  </div>
+</template>

package/app/components/Filters/UnavailableRow.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { FilterField } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  FILTER_OPERATOR_LABEL_KEYS,
+  rawConditionValue,
+  type FilterUnavailableRow,
+} from '../../utils/filters/rows'
+
+/**
+ * Internal to the filter components: a Condition the editor cannot edit,
+ * locked and removable. On a field the caller did not declare it shows raw.
+ */
+const props = defineProps<{
+  row: FilterUnavailableRow
+  field: FilterField | undefined
+  testId: string
+}>()
+
+const emit = defineEmits<{ remove: [] }>()
+
+const { t } = useI18n()
+
+const isUnknownField = computed(() => props.row.reason === 'unknown_field')
+
+const operatorLabel = computed(() => {
+  const { operator } = props.row.condition
+  const key = FILTER_OPERATOR_LABEL_KEYS[operator]
+  // A stored operator the engine's vocabulary does not have shows as it is.
+  return isUnknownField.value || !key ? operator : t(`filters.operators.${key}`)
+})
+
+const rawValue = computed(() => rawConditionValue(props.row.condition.value))
+</script>
+
+<template>
+  <div class="flex gap-2" :data-testid="testId">
+    <div
+      class="flex-1 grid grid-cols-5 gap-2 items-center rounded-md border border-dashed border-muted bg-elevated/50 px-2.5 py-1.5 min-h-8"
+    >
+      <p
+        class="col-span-2 paragraph-sm truncate"
+        :class="{ 'font-mono': isUnknownField }"
+        :data-testid="`${testId}-field`"
+      >
+        {{ field?.label ?? row.condition.field }}
+      </p>
+      <p class="paragraph-sm truncate" :class="{ 'font-mono': isUnknownField }">
+        {{ operatorLabel }}
+      </p>
+      <div class="col-span-2 flex items-center justify-between gap-2 min-w-0">
+        <p class="paragraph-sm font-mono truncate">{{ rawValue }}</p>
+        <UTooltip :text="t(`filters.unavailable.${row.reason}`)">
+          <UBadge
+            :color="isUnknownField ? 'error' : 'warning'"
+            variant="subtle"
+            class="shrink-0"
+            :data-testid="`${testId}-badge`"
+          >
+            {{ t('filters.unavailable.badge') }}
+          </UBadge>
+        </UTooltip>
+      </div>
+    </div>
+    <UButton
+      color="error"
+      variant="ghost"
+      icon="ph:trash"
+      class="shrink-0"
+      :aria-label="t('filters.actions.remove_filter')"
+      :data-testid="`${testId}-delete-button`"
+      @click="emit('remove')"
+    />
+  </div>
+</template>

package/app/components/Filters/ValueInput.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import type { FilterField, FilterOptionValue } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  isFilterRange,
+  missingFilterOptions,
+  type FilterEditableRow,
+  type FilterRowValue,
+} from '../../utils/filters/rows'
+
+/**
+ * Internal to the filter components: the value of one row, by field type.
+ * An option value the field does not list is shown as unavailable and kept
+ * until the user removes it (ADR 0017).
+ */
+const props = defineProps<{
+  row: FilterEditableRow
+  field: FilterField
+  currency: string
+  testId: string
+}>()
+
+const emit = defineEmits<{
+  'update:value': [value: FilterRowValue]
+  'update:to': [value: FilterRowValue]
+}>()
+
+const { t } = useI18n()
+
+const isRange = computed(() => isFilterRange(props.row.operator))
+const options = computed(() => props.field.options ?? [])
+const missing = computed(() => missingFilterOptions(props.row, props.field))
+
+// Select: the missing value stays the selected item, so it shows and is not lost.
+const selectItems = computed(() => [
+  ...options.value,
+  ...missing.value.map((value) => ({
+    value,
+    label: t('filters.unavailable.option'),
+    disabled: true,
+  })),
+])
+
+const selected = computed<FilterOptionValue[]>(() =>
+  Array.isArray(props.row.value) ? props.row.value : [],
+)
+const selectedKnown = computed(() =>
+  selected.value.filter((value) => !missing.value.includes(value)),
+)
+const selectedLabels = computed(() =>
+  options.value
+    .filter((option) => selectedKnown.value.includes(option.value))
+    .map((option) => option.label),
+)
+const selectionLabel = computed(() =>
+  selectedLabels.value.length === 1
+    ? selectedLabels.value[0]
+    : t('filters.selected', { count: selectedLabels.value.length }),
+)
+
+function onMultiselect(values: FilterOptionValue[]) {
+  emit('update:value', [...values, ...missing.value])
+}
+
+function removeMissing(value: FilterOptionValue) {
+  emit(
+    'update:value',
+    selected.value.filter((item) => item !== value),
+  )
+}
+
+const numberFormat = computed<Intl.NumberFormatOptions | undefined>(() =>
+  props.field.type === 'price'
+    ? { style: 'currency', currency: props.currency, currencyDisplay: 'narrowSymbol' }
+    : undefined,
+)
+
+function asNumber(value: FilterRowValue): number | undefined {
+  return typeof value === 'number' ? value : undefined
+}
+
+function asString(value: FilterRowValue): string | undefined {
+  return typeof value === 'string' ? value : undefined
+}
+</script>
+
+<template>
+  <div v-if="row.operator === 'exists'" />
+
+  <USelectMenu
+    v-else-if="field.type === 'select'"
+    :model-value="row.value as FilterOptionValue | undefined"
+    :items="selectItems"
+    value-key="value"
+    placeholder="&nbsp;"
+    class="w-full"
+    :ui="{ content: 'min-w-fit' }"
+    :search-input="{ placeholder: t('common.search') }"
+    :data-testid="`${testId}-select`"
+    @update:model-value="emit('update:value', $event)"
+  >
+    <UBadge
+      v-if="missing.length"
+      color="warning"
+      variant="outline"
+      class="border border-dashed ring-0 truncate"
+      :data-testid="`${testId}-unavailable-option`"
+    >
+      {{ t('filters.unavailable.option') }}
+    </UBadge>
+  </USelectMenu>
+
+  <div v-else-if="field.type === 'multiselect'" class="flex flex-col gap-1">
+    <USelectMenu
+      :model-value="selectedKnown"
+      multiple
+      :items="options"
+      value-key="value"
+      placeholder="&nbsp;"
+      class="w-full"
+      virtualize
+      :reset-search-term-on-select="false"
+      :ui="{ content: 'min-w-fit' }"
+      :search-input="{
+        placeholder: t('common.search'),
+        'data-testid': `${testId}-multiselect-search`,
+      }"
+      :data-testid="`${testId}-multiselect`"
+      @update:model-value="onMultiselect"
+    >
+      <UTooltip v-if="selectedLabels.length" :text="selectedLabels.join(', ')">
+        <UBadge color="secondary" class="truncate">
+          {{ selectionLabel }}
+        </UBadge>
+      </UTooltip>
+    </USelectMenu>
+
+    <div v-if="missing.length" class="flex flex-wrap gap-1">
+      <UTooltip
+        v-for="value in missing"
+        :key="value"
+        :text="t('filters.unavailable.option_description')"
+      >
+        <UBadge
+          color="warning"
+          variant="outline"
+          class="border border-dashed ring-0 gap-1"
+          :data-testid="`${testId}-unavailable-option`"
+        >
+          {{ t('filters.unavailable.option') }}
+          <UButton
+            color="warning"
+            variant="link"
+            size="xs"
+            icon="ph:x-bold"
+            class="p-0"
+            :aria-label="t('filters.actions.remove_option')"
+            :data-testid="`${testId}-unavailable-option-remove`"
+            @click="removeMissing(value)"
+          />
+        </UBadge>
+      </UTooltip>
+    </div>
+  </div>
+
+  <div
+    v-else-if="field.type === 'number' || field.type === 'price'"
+    class="flex items-center gap-2"
+  >
+    <UInputNumber
+      :model-value="asNumber(row.value)"
+      class="w-full"
+      :format-options="numberFormat"
+      :increment="!isRange"
+      :decrement="!isRange"
+      :data-testid="isRange ? `${testId}-from-input` : `${testId}-input`"
+      @update:model-value="emit('update:value', $event ?? undefined)"
+    />
+    <template v-if="isRange">
+      <p class="label-xs">{{ t('filters.and') }}</p>
+      <UInputNumber
+        :model-value="asNumber(row.to)"
+        class="w-full"
+        :format-options="numberFormat"
+        :increment="false"
+        :decrement="false"
+        :data-testid="`${testId}-to-input`"
+        @update:model-value="emit('update:to', $event ?? undefined)"
+      />
+    </template>
+  </div>
+
+  <div v-else-if="field.type === 'date'" class="flex items-center gap-2">
+    <FiltersDateInput
+      :model-value="asString(row.value)"
+      :test-id="isRange ? `${testId}-from` : testId"
+      @update:model-value="emit('update:value', $event)"
+    />
+    <template v-if="isRange">
+      <p class="label-xs">{{ t('filters.and') }}</p>
+      <FiltersDateInput
+        :model-value="asString(row.to)"
+        :test-id="`${testId}-to`"
+        @update:model-value="emit('update:to', $event)"
+      />
+    </template>
+  </div>
+
+  <UInput
+    v-else
+    :model-value="asString(row.value)"
+    class="w-full"
+    :data-testid="`${testId}-text`"
+    @update:model-value="emit('update:value', $event === '' ? undefined : String($event))"
+  />
+</template>

package/app/components/Layout/BasePage.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   tabChange: [value: string | number]
+  back: []
 }>()
 
 watchEffect(() => {
@@ -28,6 +29,7 @@ watchEffect(() => {
       :data-testid="testId"
       class="bg-white sticky top-0 z-10"
       @tab-change="emit('tabChange', $event)"
+      @back="emit('back')"
     >
       <template #actions>
         <div class="flex items-center gap-1.5">

package/app/components/TemplateList/BaseTable.vue

@@ -322,17 +322,6 @@ const paginationSummary = computed(() => {
         v-model:sorting="sorting"
         :data-testid="templateListTableTestIds.table"
       >
-        <!-- Shown instead of the "no data" row while a list with no rows is loading. -->
-        <template #loading>
-          <div
-            class="flex items-center justify-center gap-2 text-muted"
-            :data-testid="templateListTableTestIds.loading"
-          >
-            <UIcon name="ph:circle-notch-bold" class="size-4 animate-spin" />
-            <span>{{ t('pages.message_library.loading') }}</span>
-          </div>
-        </template>
-
         <template #name-cell="{ row }">
           <div
             class="flex items-center gap-2"

package/app/composables/apiErrorMessages.ts

@@ -1,6 +1,7 @@
 const CODE_TO_KEY: Record<string, string> = {
   'session.missing': 'common.errors.session_expired',
   'session.expired': 'common.errors.session_expired',
+  AUTOMATION_ENGINE_REJECTED: 'automations.toast.engine_rejected',
 }
 
 function descriptionKeyByStatus(status: number): string {

package/app/composables/automationsContext.ts

@@ -0,0 +1,42 @@
+import type { InjectionKey, Ref } from 'vue'
+
+/** A value is what a Condition stores: a number where the Product's data holds one. */
+export interface AutomationOption {
+  value: string | number
+  label: string
+}
+
+/**
+ * What a Host supplies to the Automation pages (ADR 0017), apart from
+ * `ComposerContext`. The Host fetches the lists and keeps them current.
+ */
+export interface AutomationsContext {
+  /**
+   * The option lists, by the name the Automation Catalog gives them
+   * (`option_list` of a Condition Field). A list that is not there shows as
+   * empty.
+   */
+  optionLists: Ref<Record<string, AutomationOption[]>>
+  /** ISO code of the currency `price` fields show; EUR when absent. */
+  currency?: Ref<string | undefined>
+}
+
+export const AUTOMATIONS_CONTEXT_KEY: InjectionKey<AutomationsContext> = Symbol.for(
+  'composer-automations-context',
+)
+
+/** Must be called in parent's app.vue or plugin before an Automation page renders. */
+export function defineAutomationsContext(context: AutomationsContext): void {
+  // App-level provide, as `defineComposerContext`.
+  useNuxtApp().vueApp.provide(AUTOMATIONS_CONTEXT_KEY, context)
+}
+
+/**
+ * `undefined` when the Host provided none: an Automation page shows that as
+ * an error of its own (ADR 0019), so this does not throw.
+ */
+export function useAutomationsContext(): AutomationsContext | undefined {
+  if (import.meta.server) return undefined
+
+  return useNuxtApp().vueApp.runWithContext(() => inject(AUTOMATIONS_CONTEXT_KEY, undefined))
+}

package/app/composables/composerContext.ts

@@ -22,12 +22,6 @@ export interface ComposerContext {
    * the Organization's (ADR 0015).
    */
   metaWabaId?: Ref<string>
-  /**
-   * The Host works on `metaWabaId` only (Smartconnect): a new Message Group
-   * is submitted to it and the user is not asked. Applies while `metaWabaId`
-   * is one of the Organization's WABAs; otherwise the choice stays the user's.
-   */
-  metaWabaLocked?: Ref<boolean>
   isAdmin?: Ref<boolean>
   organizationData?: Ref<OrganizationData>
 }

package/app/composables/useAutomationClone.ts

@@ -0,0 +1,33 @@
+import type { Automation } from '@dev.smartpricing/message-composer-utils/types'
+import AutomationsCloneModal from '~/components/Automations/CloneModal.vue'
+import { useCloneAutomationMutation } from '~/queries'
+
+/**
+ * Duplicating an Automation, from wherever it is offered: the modal that asks
+ * the name of the copy, the clone, and the copy opened on its edit page.
+ * Called once, in the setup of the component that offers it.
+ */
+export function useAutomationClone() {
+  const { t } = useI18n()
+  const toast = useToast()
+  const { trackEvent } = useTracking()
+  const cloneModal = useOverlay().create(AutomationsCloneModal, { destroyOnClose: true })
+  const { mutateAsync: cloneAutomation } = useCloneAutomationMutation()
+
+  /** Asks the name of the copy, then makes it from the Automation as stored. */
+  function askClone(automation: Pick<Automation, 'id' | 'name'>) {
+    cloneModal.open({
+      defaultName: t('common.copy_of', { name: automation.name }),
+      action: async (name) => {
+        const copy = await cloneAutomation({ id: automation.id, name })
+        trackEvent('automation.clone', { automation_name: name, source_id: automation.id })
+        toast.add({ title: t('automations.toast.cloned'), color: 'success' })
+
+        // In demo mode the answer is not an Automation: there is no copy to open.
+        if (copy?.id) await navigateTo({ name: 'automation-edit', params: { id: copy.id } })
+      },
+    })
+  }
+
+  return { askClone }
+}