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

package/app/components/Automations/Conditions.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type {
+  AutomationTrigger,
+  Condition,
+  FilterField,
+  FiltersReport,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { AutomationOption } from '~/composables/automationsContext'
+import { cloneFormData } from '../../utils/automations/form'
+
+/**
+ * The Conditions of an Automation: shown with `FiltersSummary`, edited with
+ * `FiltersEditor` in a slideover that changes nothing until its Save
+ * (ADR 0018). The fields are the Trigger's Condition Fields, each with the
+ * option list the Host supplies under the name the field declares (ADR 0017).
+ */
+const props = defineProps<{
+  trigger: AutomationTrigger
+  /** The Host's option lists, by name. One that is not there shows as empty. */
+  optionLists: Record<string, AutomationOption[]>
+  /** ISO code of the currency `price` fields show; EUR when absent. */
+  currency?: string
+  /** The Conditions are only shown: there is no way into the filter editor. */
+  readOnly?: boolean
+}>()
+
+const conditions = defineModel<Condition[]>({ required: true })
+/** Whether the filter editor is open. */
+const open = defineModel<boolean>('open', { default: false })
+
+const emit = defineEmits<{
+  /** What is wrong with the Conditions as they stand; `undefined` when there is none. */
+  report: [report: FiltersReport | undefined]
+}>()
+
+const { t } = useI18n()
+const unavailable = useAutomationUnavailable()
+
+const fields = computed<FilterField[]>(() =>
+  props.trigger.condition_fields.map(({ key, label, type, option_list }) => ({
+    key,
+    label,
+    type,
+    options: option_list ? (props.optionLists[option_list] ?? []) : undefined,
+  })),
+)
+
+// On screen a Condition is a "filter", and a "between" is one of them.
+const filterCount = computed(() => new Set(conditions.value.map(({ field }) => field)).size)
+
+// `FiltersSummary` is not there without Conditions, and then reports nothing.
+watch(
+  () => conditions.value.length,
+  (count) => {
+    if (count === 0) emit('report', undefined)
+  },
+)
+
+/** What the slideover edits: the Conditions change only on its Save. */
+const edited = ref<Condition[]>([])
+const report = ref<FiltersReport>()
+
+/** The alert of the slideover: what is unavailable in the Conditions being edited. */
+const editedUnavailable = computed(() => unavailable.conditionItems(report.value, fields.value))
+
+watch(open, (isOpen) => {
+  if (isOpen) edited.value = cloneFormData(conditions.value)
+})
+
+function save() {
+  conditions.value = edited.value
+  open.value = false
+}
+</script>
+
+<template>
+  <UFormField
+    :label="t('automations.form.sendTotitle')"
+    :description="t('automations.form.sendToHint')"
+  >
+    <div class="flex items-center gap-1">
+      <p class="paragraph-sm text-primary-800">
+        {{
+          filterCount > 0
+            ? t('filters.applied', { count: filterCount })
+            : t('automations.form.sendTo_all')
+        }}
+      </p>
+
+      <USlideover
+        v-if="!readOnly"
+        v-model:open="open"
+        close-icon="ph:x"
+        :title="t('automations.form.create_specific_audience')"
+        :description="t('automations.form.create_specific_audience_hint')"
+        :ui="{ content: 'max-w-4xl', footer: 'justify-end' }"
+      >
+        <UButton
+          color="secondary"
+          variant="ghost"
+          size="sm"
+          :icon="filterCount > 0 ? 'ph:pencil-simple-line-bold' : 'ph:plus-bold'"
+          :label="filterCount > 0 ? t('common.actions.edit') : t('automations.form.addFilters')"
+        />
+
+        <template #body>
+          <AutomationsUnavailable :items="editedUnavailable" in-place class="mb-4" />
+          <FiltersEditor
+            v-model="edited"
+            :fields="fields"
+            :currency="currency"
+            :title="t('automations.form.includeIf')"
+            test-id-prefix="automation"
+            @report="report = $event"
+          />
+        </template>
+
+        <template #footer>
+          <UButton
+            color="primary"
+            variant="outline"
+            :label="t('common.actions.cancel')"
+            @click="open = false"
+          />
+          <!-- A half-filled row is in no Condition: saving would drop it without a word. -->
+          <UButton
+            color="primary"
+            :label="t('common.actions.save')"
+            :disabled="Boolean(report?.halfFilled)"
+            @click="save"
+          />
+        </template>
+      </USlideover>
+    </div>
+
+    <FiltersSummary
+      v-if="conditions.length > 0"
+      :model-value="conditions"
+      :fields="fields"
+      :currency="currency"
+      test-id-prefix="automation"
+      class="mt-3"
+      @report="emit('report', $event)"
+    />
+  </UFormField>
+</template>

package/app/components/Automations/Create.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type {
+  AutomationCatalog,
+  AutomationTrigger,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { resolveErrorToast } from '~/composables/apiErrorMessages'
+import type { AutomationsContext } from '~/composables/automationsContext'
+import { useCreateAutomationMutation } from '~/queries'
+import {
+  automationSaveProblems,
+  automationSetupProperties,
+  cloneFormData,
+  newAutomationForm,
+  toCreateAutomationBody,
+  type AutomationFormState,
+} from '../../utils/automations/form'
+
+/**
+ * A new Automation: the form, its save, and what a refused save says. The
+ * page around it holds the header and calls `submit`.
+ */
+const props = defineProps<{
+  catalog: AutomationCatalog
+  /** The Trigger a new Automation starts on. */
+  initialTrigger: AutomationTrigger
+  context: AutomationsContext
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { trackEvent } = useTracking()
+
+const trip = useAutomationEditorTrip('automation-create')
+
+const form = ref<AutomationFormState>(
+  trip.restored?.form ?? newAutomationForm(props.initialTrigger),
+)
+const submitted = ref(false)
+const formElement = useTemplateRef('formElement')
+
+const incomplete = computed(() => !form.value.name.trim() || form.value.actions.length === 0)
+
+const problems = useAutomationSaveProblems(() => props.catalog)
+
+const { mutateAsync: createAutomation, isLoading: saving } = useCreateAutomationMutation()
+
+async function submit() {
+  submitted.value = true
+  problems.clear()
+  // Something unavailable stops the save: nothing is sent, the alert says what to fix.
+  if (formElement.value?.blocked) {
+    formElement.value.showUnavailable()
+    return
+  }
+  if (incomplete.value || saving.value) return
+
+  const sent = cloneFormData(form.value)
+  let created
+  try {
+    created = await createAutomation(toCreateAutomationBody(sent))
+  } catch (error) {
+    const refused = automationSaveProblems(error)
+    if (refused) {
+      problems.show(refused, sent)
+    } else {
+      // The request carries no error toast of its own, so a 422 gets none.
+      const { data, status = 0 } = error as { data?: { code?: string }; status?: number }
+      toast.add({ ...resolveErrorToast({ status, code: data?.code }, t), color: 'error' })
+    }
+    return
+  }
+
+  trackEvent(
+    'Automation setup',
+    automationSetupProperties(
+      sent,
+      props.catalog.triggers.find(({ type }) => type === sent.triggerType),
+    ),
+  )
+  toast.add({ title: t('automations.toast.created'), color: 'success' })
+  // A body that is not an Automation (ADR 0016) has no Automation to open.
+  await navigateTo(
+    created?.id
+      ? { name: 'automation-edit', params: { id: created.id } }
+      : { name: 'automations-list' },
+    { replace: true },
+  )
+}
+
+defineExpose({ submit, saving })
+</script>
+
+<template>
+  <AutomationsSaveProblems :lines="problems.lines.value" :incomplete="submitted && incomplete" />
+
+  <AutomationsForm
+    ref="formElement"
+    v-model="form"
+    :catalog="catalog"
+    :context="context"
+    :submitted="submitted"
+    :invalid-action-keys="problems.invalidActionKeys.value"
+    :open-action="trip.restored?.openAction"
+    @edit-message="trip.leave({ form }, $event)"
+  />
+</template>

package/app/components/Automations/Data.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { AutomationMetadataForm } from '../../utils/automations/metadata'
+
+/**
+ * The values an Automation asks its user for: one text field per field of
+ * its stored `metadata.form`, whatever the Automation. Description and labels
+ * are its Host's words, not the layer's: one that is a key of the Host's own
+ * translations is shown translated, any other as stored.
+ */
+defineProps<{ form: AutomationMetadataForm }>()
+
+/** The values, by the key of their field. */
+const data = defineModel<Record<string, string>>({ required: true })
+
+const { t, te } = useI18n()
+
+/** Smartconnect seeds its labels as keys of its own locale files. */
+function hostText(stored: string): string {
+  return te(stored) ? t(stored) : stored
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center gap-2">
+      <h3 class="heading-sm">{{ t('automations.form.data.title') }}</h3>
+      <UBadge
+        v-if="form.fields.some((field) => field.required)"
+        :label="t('automations.form.data.requiredBadge')"
+        color="info"
+        variant="subtle"
+      />
+    </div>
+
+    <p v-if="form.description" class="paragraph-sm text-muted">{{ hostText(form.description) }}</p>
+
+    <UFormField
+      v-for="field in form.fields"
+      :key="field.key"
+      :label="hostText(field.label)"
+      :required="field.required"
+    >
+      <UInput v-model="data[field.key]" class="w-full" />
+    </UFormField>
+  </div>
+</template>

package/app/components/Automations/DeleteModal.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { Automation } from '@dev.smartpricing/message-composer-utils/types'
+import { useAutomationMessageGroupsQuery } from '~/queries'
+
+/**
+ * Asks before an Automation is deleted, and which of its Message Groups go
+ * with it: none unless the user checks it (ADR 0016). Opened through
+ * `useOverlay`; `action` does the delete while the modal shows it running.
+ */
+const props = defineProps<{
+  automation: Automation
+  action: (messageGroupIds: string[]) => Promise<void>
+}>()
+
+const { t } = useI18n()
+
+const { data: messageGroups, isPending } = useAutomationMessageGroupsQuery(() => props.automation)
+
+const items = computed(() =>
+  (messageGroups.value ?? []).map(({ id, name }) => ({ value: id, label: name })),
+)
+const selected = ref<string[]>([])
+const deleting = ref(false)
+
+async function confirmDelete() {
+  deleting.value = true
+  try {
+    await props.action(selected.value)
+  } catch {
+    // Already said by the request's own error toast; the modal closes.
+  } finally {
+    deleting.value = false
+  }
+}
+</script>
+
+<template>
+  <SConfirmModal
+    :modal-props="{ title: t('automations.delete.title') }"
+    :confirm-props="{ label: t('common.actions.delete'), disabled: isPending }"
+    :cancel-props="{ label: t('common.actions.cancel') }"
+    :loading="deleting"
+    :action="confirmDelete"
+    destructive
+  >
+    <template #body>
+      <div class="space-y-4">
+        <p class="my-0 text-muted">{{ t('automations.delete.confirm') }}</p>
+
+        <!-- No delete before the choice is on screen: it would skip it. -->
+        <USkeleton v-if="isPending" class="h-12 w-full" />
+
+        <template v-else-if="items.length > 0">
+          <UCheckboxGroup
+            v-model="selected"
+            :items="items"
+            :legend="t('automations.delete.messages')"
+            :disabled="deleting"
+          />
+          <p class="my-0 flex items-start gap-1.5 paragraph-sm text-warning">
+            <UIcon name="ph:warning" class="mt-0.5 shrink-0" />
+            {{ t('automations.delete.warning') }}
+          </p>
+        </template>
+      </div>
+    </template>
+  </SConfirmModal>
+</template>

package/app/components/Automations/Edit.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { Automation, AutomationCatalog } from '@dev.smartpricing/message-composer-utils/types'
+import { resolveErrorToast } from '~/composables/apiErrorMessages'
+import type { AutomationsContext } from '~/composables/automationsContext'
+import { useUpdateAutomationMutation } from '~/queries'
+import {
+  automationPartlySaved,
+  automationSaveProblems,
+  automationSetupProperties,
+  cloneFormData,
+  toAutomationForm,
+  toUpdateAutomationBody,
+  withPartlySavedActions,
+  type AutomationFormState,
+} from '../../utils/automations/form'
+import { automationMetadataForm, isSystemAutomation } from '../../utils/automations/metadata'
+
+/**
+ * An existing Automation: the form, its save, and what a refused or a
+ * half-saved save says. The page around it holds the header and calls
+ * `submit`.
+ */
+const props = defineProps<{
+  catalog: AutomationCatalog
+  /** The Automation as it was read. The form starts from it and does not follow it. */
+  automation: Automation
+  context: AutomationsContext
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { trackEvent } = useTracking()
+
+const trip = useAutomationEditorTrip('automation-edit', props.automation.id)
+
+/** The Automation as the Automation Engine holds it: what a save is an update of. */
+const stored = shallowRef(trip.restored?.stored ?? props.automation)
+const form = ref<AutomationFormState>(trip.restored?.form ?? toAutomationForm(props.automation))
+const submitted = ref(false)
+const formElement = useTemplateRef('formElement')
+
+/** A System Automation: the form lets through only what its user may change. */
+const system = computed(() => isSystemAutomation(stored.value))
+const dataForm = computed(() => automationMetadataForm(stored.value.metadata))
+const { askClone } = useAutomationClone()
+
+const incomplete = computed(() => !form.value.name.trim() || form.value.actions.length === 0)
+
+const problems = useAutomationSaveProblems(() => props.catalog)
+
+const { mutateAsync: updateAutomation, isLoading: saving } = useUpdateAutomationMutation()
+
+async function submit() {
+  submitted.value = true
+  problems.clear()
+  // Something unavailable stops the save: nothing is sent, the alert says what to fix.
+  if (formElement.value?.blocked) {
+    formElement.value.showUnavailable()
+    return
+  }
+  if (incomplete.value || saving.value) return
+
+  const sent = cloneFormData(form.value)
+  try {
+    await updateAutomation({ id: stored.value.id, ...toUpdateAutomationBody(sent, stored.value) })
+  } catch (error) {
+    const refused = automationSaveProblems(error)
+    const partlySaved = automationPartlySaved(error)
+    if (refused) {
+      problems.show(refused, sent)
+    } else if (partlySaved) {
+      // Nothing was rolled back (ADR 0016): the next save is an update of
+      // what the Automation Engine now holds; the form stays as the user left it.
+      stored.value = partlySaved.automation
+      form.value.actions = withPartlySavedActions(form.value.actions, sent.actions, partlySaved)
+      toast.add({
+        title: t('automations.toast.partly_saved'),
+        description: t('automations.toast.partly_saved_description'),
+        color: 'error',
+      })
+    } else {
+      // The request carries no error toast of its own, so a 422 gets none.
+      const { data, status = 0 } = error as { data?: { code?: string }; status?: number }
+      toast.add({ ...resolveErrorToast({ status, code: data?.code }, t), color: 'error' })
+    }
+    return
+  }
+
+  trackEvent(
+    'Automation setup',
+    automationSetupProperties(
+      sent,
+      props.catalog.triggers.find(({ type }) => type === sent.triggerType),
+    ),
+  )
+  toast.add({ title: t('automations.toast.updated'), color: 'success' })
+  await navigateTo({ name: 'automations-list' })
+}
+
+defineExpose({ submit, saving })
+</script>
+
+<template>
+  <UAlert
+    v-if="system"
+    color="info"
+    variant="soft"
+    icon="ph:lock-simple-bold"
+    :title="t('automations.system.alert')"
+    :actions="[
+      {
+        label: t('common.actions.duplicate'),
+        color: 'info',
+        variant: 'outline',
+        size: 'sm',
+        onClick: () => askClone(stored),
+      },
+    ]"
+  />
+
+  <AutomationsSaveProblems :lines="problems.lines.value" :incomplete="submitted && incomplete" />
+
+  <AutomationsForm
+    ref="formElement"
+    v-model="form"
+    :catalog="catalog"
+    :context="context"
+    :submitted="submitted"
+    :invalid-action-keys="problems.invalidActionKeys.value"
+    :open-action="trip.restored?.openAction"
+    :data-form="dataForm"
+    :system="system"
+    @edit-message="trip.leave({ form, stored }, $event)"
+  />
+</template>