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

package/app/utils/filters/rows.ts

@@ -0,0 +1,367 @@
+import { CONDITION_OPERATORS_BY_FIELD_TYPE } from '@dev.smartpricing/message-composer-utils/types'
+import type {
+  Condition,
+  ConditionFieldType,
+  ConditionOperator,
+  FilterField,
+  FilterOptionValue,
+  FilterUnavailableReason,
+  FiltersReport,
+} from '@dev.smartpricing/message-composer-utils/types'
+
+/**
+ * The filter components' own model (ADR 0018): a list of Conditions seen as
+ * rows, one per field. Internal: "between" as one row, prices in units and
+ * the rows themselves never leave the components.
+ */
+
+/**
+ * The operators of a row: the engine's, plus "between", a pair of Conditions.
+ * There is no "not between": the engine holds all the Conditions of a list
+ * together, and no pair of them says "outside this range".
+ */
+export type FilterRowOperator = ConditionOperator | 'between'
+
+/** Select: one option. Multiselect: a list. Number, price: a number. Date: `YYYY-MM-DD`. Text: a string. */
+export type FilterRowValue = FilterOptionValue | FilterOptionValue[] | undefined
+
+/** A row with no field picked yet. Never emitted, and not half-filled either. */
+export interface FilterBlankRow {
+  kind: 'blank'
+  id: number
+}
+
+export interface FilterEditableRow {
+  kind: 'editable'
+  id: number
+  field: string
+  type: ConditionFieldType
+  operator: FilterRowOperator
+  /** The value, or the lower bound of "between". A price is in units, not cents. */
+  value: FilterRowValue
+  /** The upper bound of "between". */
+  to: FilterRowValue
+  /**
+   * The Conditions the row was read from, until the user edits it: an
+   * untouched row is emitted exactly as it came in.
+   */
+  original?: Condition[]
+}
+
+/** A Condition the editor cannot edit: shown locked, emitted as it is. */
+export interface FilterUnavailableRow {
+  kind: 'unavailable'
+  id: number
+  reason: FilterUnavailableReason
+  condition: Condition
+}
+
+export type FilterRow = FilterBlankRow | FilterEditableRow | FilterUnavailableRow
+
+const ORDERED_TYPES: readonly ConditionFieldType[] = ['number', 'price', 'date']
+
+function isOrdered(type: ConditionFieldType): boolean {
+  return ORDERED_TYPES.includes(type)
+}
+
+/** The operators a row on a field of this type offers, in display order. */
+export function filterRowOperators(type: ConditionFieldType): FilterRowOperator[] {
+  const operators: FilterRowOperator[] = [...CONDITION_OPERATORS_BY_FIELD_TYPE[type]]
+  if (!isOrdered(type)) return operators
+  // "Is set" stays last.
+  operators.splice(operators.indexOf('exists'), 0, 'between')
+  return operators
+}
+
+export function isFilterRange(operator: FilterRowOperator): boolean {
+  return operator === 'between'
+}
+
+function isOptionValue(value: unknown): value is FilterOptionValue {
+  return typeof value === 'string' || (typeof value === 'number' && Number.isFinite(value))
+}
+
+function isIsoDate(value: unknown): value is string {
+  if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return false
+  const date = new Date(`${value}T00:00:00Z`)
+  // "2026-02-31" parses, as the 3rd of March.
+  return !Number.isNaN(date.getTime()) && date.toISOString().startsWith(value)
+}
+
+/** The row value of a stored one, or `undefined` when it does not fit the type. */
+function readValue(type: ConditionFieldType, value: unknown): FilterRowValue {
+  switch (type) {
+    case 'select':
+      return isOptionValue(value) ? value : undefined
+    case 'multiselect':
+      return Array.isArray(value) && value.every(isOptionValue) ? [...value] : undefined
+    case 'number':
+      return typeof value === 'number' && Number.isFinite(value) ? value : undefined
+    case 'price':
+      return typeof value === 'number' && Number.isFinite(value) ? value / 100 : undefined
+    case 'date':
+      return isIsoDate(value) ? value : undefined
+    case 'text':
+      return typeof value === 'string' ? value : undefined
+  }
+}
+
+function writeValue(type: ConditionFieldType, value: FilterRowValue): unknown {
+  return type === 'price' ? Math.round((value as number) * 100) : value
+}
+
+function isComplete(type: ConditionFieldType, value: FilterRowValue): boolean {
+  switch (type) {
+    case 'select':
+      return isOptionValue(value) && value !== ''
+    case 'multiselect':
+      return Array.isArray(value) && value.length > 0
+    case 'number':
+    case 'price':
+      return typeof value === 'number' && Number.isFinite(value)
+    case 'date':
+      return isIsoDate(value)
+    case 'text':
+      return typeof value === 'string' && value !== ''
+  }
+}
+
+/** Numbers compare as numbers, ISO dates as strings. */
+function isAtMost(a: FilterRowValue, b: FilterRowValue): boolean {
+  return (a as number) <= (b as number)
+}
+
+type RowContent = Pick<FilterEditableRow, 'operator' | 'value' | 'to'>
+
+function readSingle(field: FilterField, condition: Condition): RowContent | undefined {
+  const operators: readonly ConditionOperator[] = CONDITION_OPERATORS_BY_FIELD_TYPE[field.type]
+  if (!operators.includes(condition.operator)) return undefined
+  if (condition.operator === 'exists') {
+    return { operator: 'exists', value: undefined, to: undefined }
+  }
+
+  const value = readValue(field.type, condition.value)
+  if (value === undefined) return undefined
+  return { operator: condition.operator, value, to: undefined }
+}
+
+/**
+ * "Between" is `gte` the lower bound and `lte` the upper one. A `gte` above
+ * its `lte` is no range: the two are read one by one.
+ */
+function readPair(
+  field: FilterField,
+  first: Condition | undefined,
+  second: Condition | undefined,
+): RowContent | undefined {
+  if (!first || !second || !isOrdered(field.type)) return undefined
+
+  const gte = [first, second].find((condition) => condition.operator === 'gte')
+  const lte = [first, second].find((condition) => condition.operator === 'lte')
+  if (!gte || !lte) return undefined
+
+  const from = readValue(field.type, gte.value)
+  const until = readValue(field.type, lte.value)
+  if (from === undefined || until === undefined) return undefined
+
+  return isAtMost(from, until) ? { operator: 'between', value: from, to: until } : undefined
+}
+
+/**
+ * The rows of a list of Conditions, in the order the Conditions are in. No
+ * Condition is left out: one the editor cannot edit is an unavailable row.
+ * A field gets one editable row, from its first two Conditions when they are
+ * a "between", else from the first one that can be edited.
+ */
+export function conditionsToFilterRows(
+  conditions: readonly Condition[],
+  fields: readonly FilterField[],
+  nextId: () => number,
+): FilterRow[] {
+  const fieldsByKey = new Map(fields.map((field) => [field.key, field]))
+
+  const indexesByField = new Map<string, number[]>()
+  conditions.forEach((condition, index) => {
+    const indexes = indexesByField.get(condition.field) ?? []
+    indexes.push(index)
+    indexesByField.set(condition.field, indexes)
+  })
+
+  // By the index of the Condition a row starts at; `null` for the second of a pair.
+  const editable = new Map<number, (RowContent & { original: Condition[] }) | null>()
+  for (const [key, indexes] of indexesByField) {
+    const field = fieldsByKey.get(key)
+    if (!field) continue
+
+    const [first, second] = indexes as [number, number | undefined]
+    const pair = readPair(
+      field,
+      conditions[first],
+      second === undefined ? undefined : conditions[second],
+    )
+    if (pair && second !== undefined) {
+      editable.set(first, { ...pair, original: [conditions[first]!, conditions[second]!] })
+      editable.set(second, null)
+      continue
+    }
+
+    for (const index of indexes) {
+      const single = readSingle(field, conditions[index]!)
+      if (!single) continue
+      editable.set(index, { ...single, original: [conditions[index]!] })
+      break
+    }
+  }
+
+  const rows: FilterRow[] = []
+  conditions.forEach((condition, index) => {
+    const content = editable.get(index)
+    if (content === null) return
+
+    const field = fieldsByKey.get(condition.field)
+    if (content && field) {
+      rows.push({ kind: 'editable', id: nextId(), field: field.key, type: field.type, ...content })
+      return
+    }
+    rows.push({
+      kind: 'unavailable',
+      id: nextId(),
+      reason: field ? 'not_editable' : 'unknown_field',
+      condition,
+    })
+  })
+  return rows
+}
+
+/** The Conditions of an editable row; `null` while it is half-filled. */
+export function filterRowToConditions(row: FilterEditableRow): Condition[] | null {
+  if (row.original) return row.original
+
+  const { field, type, operator } = row
+  if (operator === 'exists') return [{ field, operator }]
+
+  if (!isFilterRange(operator)) {
+    if (!isComplete(type, row.value)) return null
+    return [{ field, operator: operator as ConditionOperator, value: writeValue(type, row.value) }]
+  }
+
+  if (!isComplete(type, row.value) || !isComplete(type, row.to)) return null
+  // Whichever way round the user typed them.
+  const [lower, upper] = isAtMost(row.value, row.to) ? [row.value, row.to] : [row.to, row.value]
+  return [
+    { field, operator: 'gte', value: writeValue(type, lower) },
+    { field, operator: 'lte', value: writeValue(type, upper) },
+  ]
+}
+
+/** What the rows are worth as Conditions. Blank and half-filled rows are left out. */
+export function filterRowsToConditions(rows: readonly FilterRow[]): Condition[] {
+  return rows.flatMap((row) => {
+    if (row.kind === 'unavailable') return [row.condition]
+    if (row.kind === 'editable') return filterRowToConditions(row) ?? []
+    return []
+  })
+}
+
+/** The option values a row holds that its field's `options` do not list. */
+export function missingFilterOptions(
+  row: FilterEditableRow,
+  field: FilterField | undefined,
+): FilterOptionValue[] {
+  if (row.operator === 'exists') return []
+  if (row.type !== 'select' && row.type !== 'multiselect') return []
+
+  const known = new Set((field?.options ?? []).map((option) => option.value))
+  const selected = Array.isArray(row.value) ? row.value : [row.value]
+  return selected.filter(
+    (value): value is FilterOptionValue => value !== undefined && value !== '' && !known.has(value),
+  )
+}
+
+export function reportFilterRows(
+  rows: readonly FilterRow[],
+  fields: readonly FilterField[],
+): FiltersReport {
+  const fieldsByKey = new Map(fields.map((field) => [field.key, field]))
+  const report: FiltersReport = {
+    unknownFields: [],
+    unavailable: [],
+    unavailableOptions: [],
+    halfFilled: 0,
+  }
+
+  for (const row of rows) {
+    if (row.kind === 'unavailable') {
+      report.unavailable.push({ condition: row.condition, reason: row.reason })
+      const { field } = row.condition
+      if (row.reason === 'unknown_field' && !report.unknownFields.includes(field)) {
+        report.unknownFields.push(field)
+      }
+    } else if (row.kind === 'editable') {
+      if (filterRowToConditions(row) === null) report.halfFilled += 1
+      for (const value of missingFilterOptions(row, fieldsByKey.get(row.field))) {
+        report.unavailableOptions.push({ field: row.field, value })
+      }
+    }
+  }
+  return report
+}
+
+/** A row on a field the user just picked: its first operator, no value. */
+export function newFilterRow(id: number, field: FilterField): FilterEditableRow {
+  return {
+    kind: 'editable',
+    id,
+    field: field.key,
+    type: field.type,
+    operator: filterRowOperators(field.type)[0]!,
+    value: field.type === 'multiselect' ? [] : undefined,
+    to: undefined,
+  }
+}
+
+/** The row under another operator: a value is kept wherever it still means something. */
+export function withFilterOperator(
+  row: FilterEditableRow,
+  operator: FilterRowOperator,
+): FilterEditableRow {
+  return {
+    ...row,
+    operator,
+    to: isFilterRange(operator) ? row.to : undefined,
+    original: undefined,
+  }
+}
+
+/** The locale key of an operator's label, under `filters.operators`. */
+export const FILTER_OPERATOR_LABEL_KEYS: Record<FilterRowOperator, string> = {
+  eq: 'is',
+  neq: 'is_not',
+  gt: 'is_more',
+  gte: 'is_at_least',
+  lt: 'is_less',
+  lte: 'is_at_most',
+  between: 'is_between',
+  in: 'in',
+  not_in: 'not_in',
+  contains: 'contains',
+  exclude: 'does_not_contain',
+  exists: 'is_set',
+}
+
+/** A stored value the components cannot label, as it is. */
+export function rawConditionValue(value: unknown): string {
+  if (value === undefined) return ''
+  return typeof value === 'string' ? value : JSON.stringify(value)
+}
+
+/** The currency to show prices in: the caller's, or EUR when `Intl` does not take it. */
+export function filterCurrency(currency: string | undefined): string {
+  if (!currency) return 'EUR'
+  try {
+    new Intl.NumberFormat('en', { style: 'currency', currency })
+    return currency
+  } catch {
+    return 'EUR'
+  }
+}

package/app/utils/testIds.const.ts

@@ -519,7 +519,6 @@ export const templateListTableTestIds = {
   paginationSummary: 'template-list-table-pagination-summary',
   card: 'template-list-table-card',
   table: 'template-list-table-table',
-  loading: 'template-list-table-loading',
   rowName: 'template-list-table-row-name',
   rowInternalBadge: 'template-list-table-row-internal-badge',
   rowCategoryBadge: 'template-list-table-row-category-badge',
@@ -785,3 +784,110 @@ export const messageSendFlowTestIds = {
   cancel: 'message-send-flow-cancel',
   confirm: 'message-send-flow-confirm',
 } as const
+
+/**
+ * The Automation pages. The values are the ones Smartconnect's own pages used
+ * (`automationsTestIds` in its `testIds.const.ts`): host e2e suites target them.
+ */
+export const automationsTestIds = {
+  // List page
+  page: 'automations-page',
+  newButton: 'automations-new-button',
+
+  // List
+  searchInput: 'automations-search-input',
+  filterTrigger: 'automations-filter-trigger',
+  filterStatus: 'automations-filter-status',
+  filterChannel: 'automations-filter-channel',
+  table: 'automations-table',
+  rowActionsButton: 'automations-row-actions-button',
+  editAction: 'automations-edit-action',
+  duplicateAction: 'automations-duplicate-action',
+  deleteAction: 'automations-delete-action',
+  channelsCell: 'automations-channels-cell',
+  statusCell: 'automations-status-cell',
+
+  // Delete modal
+  deleteModal: 'automations-delete-modal',
+  deleteModalCloseButton: 'automations-delete-modal-close-button',
+  deleteModalCancel: 'automations-delete-modal-cancel',
+  deleteModalConfirm: 'automations-delete-modal-confirm',
+  deleteModalMessages: 'automations-delete-modal-messages',
+
+  // New page
+  newPage: 'automations-new-page',
+  newPageCancelButton: 'automations-new-page-cancel-button',
+  newPageCreateButton: 'automations-new-page-create-button',
+
+  // Edit page
+  editPage: 'automations-edit-page',
+  editPageCancelButton: 'automations-edit-page-cancel-button',
+  editPageCreateButton: 'automations-edit-page-create-button',
+
+  // Form
+  form: 'automations-form',
+  errorAlert: 'automations-error-alert',
+  nameInput: 'automations-name-input',
+  triggerSelect: 'automations-trigger-select',
+
+  // Send to (audience). The rows of the slideover are `audience-filter-*`.
+  sendToSummary: 'automations-send-to-summary',
+  addFiltersButton: 'automations-add-filters-button',
+  editFiltersButton: 'automations-edit-filters-button',
+  filtersSlideover: 'automations-filters-slideover',
+  filtersSlideoverCloseButton: 'automations-filters-slideover-close-button',
+  filtersSlideoverCancel: 'automations-filters-slideover-cancel',
+  filtersSlideoverSave: 'automations-filters-slideover-save',
+
+  // Actions list
+  actionsEmpty: 'automations-actions-empty',
+  addChannelButton: 'automations-add-channel-button',
+
+  // Action card (suffixed with `-${action.key}`, which is also on `data-testvalue`)
+  actionCard: 'automations-action-card',
+  actionEnabledSwitch: 'automations-action-enabled-switch',
+  actionDeleteButton: 'automations-action-delete-button',
+  actionPreviewButton: 'automations-action-preview-button',
+  actionEditButton: 'automations-action-edit-button',
+
+  // Message slideover. The message picker is `messageGroupSelectTestIds.root`.
+  channelSlideover: 'automations-channel-slideover',
+  channelSlideoverCloseButton: 'automations-channel-slideover-close-button',
+  channelTypeSelect: 'automations-channel-type-select',
+  channelDaysInput: 'automations-channel-days-input',
+  channelDateRefSelect: 'automations-channel-date-ref-select',
+  channelSendingTimeSelect: 'automations-channel-sending-time-select',
+  channelCreateNewButton: 'automations-channel-create-new-button',
+  channelEditTemplateButton: 'automations-channel-edit-template-button',
+  channelPreview: 'automations-channel-preview',
+  channelAdvancedCollapse: 'automations-channel-advanced-collapse',
+  channelAdvancedCollapseButton: 'automations-channel-advanced-collapse-button',
+  channelRecurrenceSelect: 'automations-channel-recurrence-select',
+  channelStrictDelaySwitch: 'automations-channel-strict-delay-switch',
+  channelPreventDuplicatesSwitch: 'automations-channel-prevent-duplicates-switch',
+  channelSlideoverCancel: 'automations-channel-slideover-cancel',
+  channelSlideoverSave: 'automations-channel-slideover-save',
+
+  // Preview slideover (action card)
+  previewSlideover: 'automations-preview-slideover',
+  previewSlideoverCloseButton: 'automations-preview-slideover-close-button',
+
+  // System Automation
+  lockedBadge: 'automations-locked-badge',
+  lockedAlert: 'automations-locked-alert',
+  lockedDuplicateButton: 'automations-locked-duplicate-button',
+
+  // Clone modal
+  cloneModal: 'automations-clone-modal',
+  cloneModalNameInput: 'automations-clone-modal-name-input',
+  cloneModalConfirm: 'automations-clone-modal-confirm',
+  cloneModalCancel: 'automations-clone-modal-cancel',
+} as const
+
+/**
+ * The `content` of a UModal or a USlideover that puts a test id on the dialog:
+ * the two render no attribute of their own, and `content` types no `data-*`.
+ */
+export function dialogTestId(testId: string): object {
+  return { 'data-testid': testId }
+}