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

package/app/components/Automations/ActionEditor.vue

@@ -0,0 +1,398 @@
+<script setup lang="ts">
+import type {
+  AutomationChannel,
+  AutomationTrigger,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { useMessageGroupApprovalsQuery } from '~/queries'
+import {
+  AUTOMATION_RECURRENCES,
+  cloneFormData,
+  dateReferenceValue,
+  localSendingTime,
+  parseDateReferenceValue,
+  type AutomationFormAction,
+  type AutomationRecurrence,
+} from '../../utils/automations/form'
+import type { AutomationUnavailableKind } from '../../utils/automations/unavailable'
+
+/**
+ * The slideover that adds or edits one Action: its Channel, its Message Group
+ * and its Schedule. It works on a copy, handed back on Save only.
+ */
+const props = defineProps<{
+  /** The Action to start from; the slideover is open while there is one. */
+  action: AutomationFormAction | undefined
+  /** Whether `action` is one the form does not hold yet. */
+  isNew: boolean
+  trigger: AutomationTrigger
+  /** The Channels an Action can be on here. */
+  channels: AutomationChannel[]
+  /** The Channels the Organization cannot use. */
+  unusableChannels: AutomationChannel[]
+}>()
+
+const emit = defineEmits<{
+  save: [action: AutomationFormAction]
+  close: []
+  /** The user leaves for the Message editor, with the Action as edited so far. */
+  editMessage: [request: { action: AutomationFormAction; target: 'create' | 'edit' }]
+}>()
+
+const { t } = useI18n()
+
+const edited = ref<AutomationFormAction>()
+
+watch(
+  () => props.action,
+  (action) => {
+    edited.value = action ? cloneFormData(action) : undefined
+  },
+  { immediate: true },
+)
+
+const open = computed({
+  get: () => Boolean(props.action),
+  set: (isOpen) => {
+    if (!isOpen) emit('close')
+  },
+})
+
+const { data: approvals } = useMessageGroupApprovalsQuery(() =>
+  edited.value ? [edited.value.messageGroupId] : [],
+)
+
+const unavailable = useAutomationUnavailable()
+
+/** What the Action being edited holds that is no longer available. */
+const unavailableItems = computed(() =>
+  edited.value
+    ? unavailable.actionItems(edited.value, {
+        trigger: props.trigger,
+        unusableChannels: props.unusableChannels,
+        approvals: approvals.value,
+      })
+    : [],
+)
+
+function unavailableOf(...kinds: AutomationUnavailableKind[]) {
+  return unavailableItems.value.find((item) => kinds.includes(item.kind))
+}
+
+const unusableChannel = computed(() => unavailableOf('channel'))
+const unlistedDateReference = computed(() => unavailableOf('date_reference'))
+const unapproved = computed(() => unavailableOf('message_group_inactive', 'message_group_active'))
+
+/** The Action's own Channel stays in the list when it cannot be picked here, as a disabled option. */
+const channelOptions = computed(() => {
+  const options: { value: AutomationChannel; label: string; disabled?: boolean }[] =
+    props.channels.map((channel) => ({
+      value: channel,
+      label: t(`automations.channels.${channel}`),
+    }))
+
+  const own = edited.value?.channel
+  if (own && !props.channels.includes(own)) {
+    const channel = t(`automations.channels.${own}`)
+    options.unshift({
+      value: own,
+      label: props.unusableChannels.includes(own)
+        ? t('automations.unavailable.channel_option', { channel })
+        : channel,
+      disabled: true,
+    })
+  }
+  return options
+})
+
+function setChannel(channel: AutomationChannel) {
+  if (!edited.value || channel === edited.value.channel) return
+  edited.value.channel = channel
+  // A Message Group is of one Channel.
+  edited.value.messageGroupId = ''
+  edited.value.messageGroupName = ''
+}
+
+/** A stored Date Reference the Trigger no longer lists shows as it is, and cannot be picked. */
+const dateReferenceOptions = computed(() => [
+  ...(edited.value && unlistedDateReference.value
+    ? [
+        {
+          value: dateReferenceValue(edited.value),
+          label: edited.value.dateReference,
+          disabled: true,
+        },
+      ]
+    : []),
+  ...props.trigger.date_references.flatMap((reference) =>
+    reference.directions.map(({ direction, label }) => ({
+      value: dateReferenceValue({ direction, dateReference: reference.key }),
+      label,
+    })),
+  ),
+])
+
+function setDateReference(value: string) {
+  if (edited.value) Object.assign(edited.value, parseDateReferenceValue(value))
+}
+
+// Every hour of the day, by its UTC value and with the user's clock as label.
+const sendingTimeOptions = Array.from({ length: 24 }, (_, hour) => {
+  const value = `${String(hour).padStart(2, '0')}:00:00Z`
+  return { value, label: localSendingTime(value) }
+})
+
+const NO_RECURRENCE = 'none'
+
+const recurrenceOptions = computed(() => [
+  { value: NO_RECURRENCE, label: t('automations.recurrence.none') },
+  ...AUTOMATION_RECURRENCES.map((recurrence) => ({
+    value: recurrence,
+    label: t(`automations.recurrence.${recurrence}`),
+  })),
+])
+
+// A recurrence and a strict delay exclude each other.
+function setRecurrence(value: string) {
+  if (!edited.value) return
+  edited.value.recurrence = value === NO_RECURRENCE ? undefined : (value as AutomationRecurrence)
+  if (edited.value.recurrence) edited.value.strictDelay = false
+}
+
+function setStrictDelay(strict: boolean) {
+  if (!edited.value) return
+  edited.value.strictDelay = strict
+  if (strict) edited.value.recurrence = undefined
+}
+
+const advancedOpen = ref(false)
+
+// Immediate: an Action reopened after an editor trip is there from the start.
+watch(
+  open,
+  (isOpen) => {
+    if (!isOpen || !edited.value) return
+    const { recurrence, strictDelay, preventDuplicates } = edited.value
+    advancedOpen.value = Boolean(recurrence) || strictDelay || !preventDuplicates
+  },
+  { immediate: true },
+)
+
+function editMessage(target: 'create' | 'edit') {
+  if (edited.value) emit('editMessage', { action: edited.value, target })
+}
+
+function save() {
+  if (!edited.value?.messageGroupId) return
+  // An emptied number input holds no number.
+  const days = Math.max(0, Math.round(Number(edited.value.days) || 0))
+  emit('save', { ...edited.value, days })
+}
+</script>
+
+<template>
+  <USlideover
+    v-model:open="open"
+    close-icon="ph:x"
+    :close="{ 'data-testid': automationsTestIds.channelSlideoverCloseButton }"
+    :title="isNew ? t('automations.channel.addTitle') : t('automations.channel.editTitle')"
+    :ui="{ content: 'max-w-4xl', body: 'p-0 sm:p-0', footer: 'justify-end' }"
+    :content="dialogTestId(automationsTestIds.channelSlideover)"
+  >
+    <template #body>
+      <div v-if="edited" class="grid grid-cols-2 h-full divide-muted divide-x">
+        <div class="space-y-5 py-6">
+          <div v-if="unavailableItems.length > 0" class="px-6">
+            <AutomationsUnavailable :items="unavailableItems" in-place />
+          </div>
+
+          <UFormField class="px-6" :label="t('automations.channel.channelType')">
+            <template v-if="unusableChannel" #hint>
+              <AutomationsUnavailableBadge :item="unusableChannel" />
+            </template>
+            <USelect
+              :model-value="edited.channel"
+              :items="channelOptions"
+              class="w-full"
+              :data-testid="automationsTestIds.channelTypeSelect"
+              @update:model-value="setChannel"
+            />
+          </UFormField>
+
+          <USeparator />
+
+          <UFormField
+            class="px-6"
+            :label="t('automations.channel.selectMessage')"
+            :description="t('automations.channel.selectMessageHint')"
+          >
+            <template v-if="unapproved" #hint>
+              <AutomationsUnavailableBadge :item="unapproved" />
+            </template>
+            <!-- Approved only: an Action is Active from the start. -->
+            <CommonMessageGroupSelect
+              :key="edited.channel"
+              v-model="edited.messageGroupId"
+              :render-type="edited.channel === 'whatsapp' ? 'whatsapp_v1' : 'email_v1'"
+              :placeholder="t('automations.channel.selectMessagePlaceholder')"
+              :search-placeholder="t('automations.channel.searchMessagePlaceholder')"
+              @select="edited.messageGroupName = $event.name"
+            />
+
+            <!-- Not on a Channel that cannot be used here: its editor would turn the user away. -->
+            <p
+              v-if="channels.includes(edited.channel)"
+              class="paragraph-sm text-muted mt-2 flex items-center gap-1"
+            >
+              {{ t('automations.channel.cannotFindMessage') }}
+              <UButton
+                variant="link"
+                size="sm"
+                color="secondary"
+                :label="t('automations.channel.createNew')"
+                :data-testid="automationsTestIds.channelCreateNewButton"
+                @click="editMessage('create')"
+              />
+              <UButton
+                v-if="edited.messageGroupId"
+                variant="link"
+                size="sm"
+                color="secondary"
+                :label="t('common.actions.edit')"
+                :data-testid="automationsTestIds.channelEditTemplateButton"
+                @click="editMessage('edit')"
+              />
+            </p>
+          </UFormField>
+
+          <USeparator />
+
+          <UFormField
+            class="px-6"
+            :label="t('automations.channel.when')"
+            :description="t('automations.channel.whenHint')"
+          >
+            <template v-if="unlistedDateReference" #hint>
+              <AutomationsUnavailableBadge :item="unlistedDateReference" />
+            </template>
+            <div class="flex items-center gap-2">
+              <UFieldGroup>
+                <UInputNumber
+                  v-model="edited.days"
+                  :min="0"
+                  :decrement="false"
+                  :increment="false"
+                  :data-testid="automationsTestIds.channelDaysInput"
+                />
+                <UBadge color="neutral" variant="outline" size="sm">
+                  {{ t('automations.channel.chooseDays') }}
+                </UBadge>
+              </UFieldGroup>
+
+              <USelect
+                :model-value="dateReferenceValue(edited)"
+                :items="dateReferenceOptions"
+                class="w-full"
+                :data-testid="automationsTestIds.channelDateRefSelect"
+                @update:model-value="setDateReference"
+              />
+            </div>
+          </UFormField>
+
+          <UFormField class="w-1/2 px-6" :label="t('automations.channel.sendingTime')">
+            <USelect
+              v-model="edited.sendingTimeUTC"
+              :items="sendingTimeOptions"
+              class="w-full"
+              :data-testid="automationsTestIds.channelSendingTimeSelect"
+            />
+          </UFormField>
+
+          <USeparator />
+
+          <UCollapsible
+            v-model:open="advancedOpen"
+            class="px-6"
+            :data-testid="automationsTestIds.channelAdvancedCollapse"
+          >
+            <UButton
+              :label="t('automations.advanced')"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :trailing-icon="advancedOpen ? 'ph:caret-up-bold' : 'ph:caret-down-bold'"
+              block
+              :data-testid="automationsTestIds.channelAdvancedCollapseButton"
+            />
+
+            <template #content>
+              <div class="space-y-4 pt-4">
+                <UFormField :label="t('automations.recurrence.label')">
+                  <USelect
+                    :model-value="edited.recurrence ?? NO_RECURRENCE"
+                    :items="recurrenceOptions"
+                    class="w-full"
+                    :disabled="edited.strictDelay"
+                    :data-testid="automationsTestIds.channelRecurrenceSelect"
+                    @update:model-value="setRecurrence"
+                  />
+                </UFormField>
+
+                <USwitch
+                  :model-value="edited.strictDelay"
+                  :label="t('automations.strictDelay.label')"
+                  :description="t('automations.strictDelay.hint')"
+                  :data-testid="automationsTestIds.channelStrictDelaySwitch"
+                  @update:model-value="setStrictDelay"
+                />
+
+                <USwitch
+                  v-model="edited.preventDuplicates"
+                  :label="t('automations.preventDuplicates.label')"
+                  :description="t('automations.preventDuplicates.hint')"
+                  :data-testid="automationsTestIds.channelPreventDuplicatesSwitch"
+                />
+              </div>
+            </template>
+          </UCollapsible>
+        </div>
+
+        <div class="flex flex-col h-full p-6">
+          <p class="label-lg mb-3">{{ t('automations.channel.preview') }}</p>
+
+          <div class="flex-1" :data-testid="automationsTestIds.channelPreview">
+            <CommonPreviewById
+              v-if="edited.messageGroupId"
+              :id="edited.messageGroupId"
+              class="w-full h-full min-h-[400px]"
+              show-subject
+            />
+            <UEmpty
+              v-else
+              variant="naked"
+              icon="ph:image-square"
+              :title="t('automations.channel.no_message.title')"
+              :description="t('automations.channel.no_message.description')"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <UButton
+        color="neutral"
+        variant="outline"
+        :label="t('common.actions.cancel')"
+        :data-testid="automationsTestIds.channelSlideoverCancel"
+        @click="open = false"
+      />
+      <UButton
+        color="primary"
+        :label="t('common.actions.save')"
+        :disabled="!edited?.messageGroupId"
+        :data-testid="automationsTestIds.channelSlideoverSave"
+        @click="save"
+      />
+    </template>
+  </USlideover>
+</template>

package/app/components/Automations/Actions.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type {
+  AutomationChannel,
+  AutomationTrigger,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type {
+  AutomationMessageRequest,
+  OpenAutomationAction,
+} from '~/composables/useAutomationEditorTrip'
+import { automationActionElementId } from '~/composables/useAutomationUnavailable'
+import { newAutomationFormAction, type AutomationFormAction } from '../../utils/automations/form'
+import type { AutomationUnavailableItem } from '../../utils/automations/unavailable'
+
+/** The Actions of an Automation: their cards, "add", and the editor of one. */
+const props = defineProps<{
+  trigger: AutomationTrigger
+  /** The Channels an Action can be on here. */
+  channels: AutomationChannel[]
+  /** The Channels the Organization cannot use: an Action on one is kept, and not sent. */
+  unusableChannels: AutomationChannel[]
+  /** What each Action holds that is no longer available, by the Action's key. */
+  unavailable: Map<string, AutomationUnavailableItem[]>
+  /** The keys of the Actions a refused save pointed at. */
+  invalidKeys?: string[]
+  /** The form was submitted: having no Action shows as an error. */
+  submitted?: boolean
+  /** The Action the editor starts open on: the one an editor trip left from. */
+  openAction?: OpenAutomationAction
+  /** No Action is added, edited or removed: only the Active switch works. */
+  readOnly?: boolean
+}>()
+
+const emit = defineEmits<{
+  /** The user leaves for the Message editor from the Action in the editor. */
+  editMessage: [request: AutomationMessageRequest]
+}>()
+
+const actions = defineModel<AutomationFormAction[]>({ required: true })
+
+const { t } = useI18n()
+const { trackEvent } = useTracking()
+const { confirm } = useConfirm()
+
+/** The Action in the editor: a copy of one of the form's, or one not added yet. */
+const editing = ref<AutomationFormAction | undefined>(props.openAction?.action)
+const editingIsNew = ref(props.openAction?.isNew ?? false)
+
+function add() {
+  const [channel] = props.channels
+  if (!channel) return
+  editingIsNew.value = true
+  editing.value = newAutomationFormAction(props.trigger, channel)
+}
+
+function saveEdited(edited: AutomationFormAction) {
+  const index = actions.value.findIndex((action) => action.key === edited.key)
+  if (index === -1) {
+    actions.value = [...actions.value, edited]
+    trackEvent('automation.action_added', { channel: edited.channel })
+  } else {
+    actions.value = actions.value.with(index, edited)
+  }
+  editing.value = undefined
+}
+
+function toggle(action: AutomationFormAction, active: boolean) {
+  const status = active ? 'active' : 'inactive'
+  trackEvent('automation.action_toggled', { channel: action.channel, new_status: status })
+  actions.value = actions.value.map((current) =>
+    current.key === action.key ? { ...current, status } : current,
+  )
+}
+
+function edit(action: AutomationFormAction) {
+  editingIsNew.value = false
+  editing.value = action
+}
+
+async function remove(action: AutomationFormAction) {
+  const confirmed = await confirm({
+    title: t('automations.form.actions.deleteConfirm'),
+    message: t('automations.form.actions.deleteConfirmDescription'),
+    confirmProps: { label: t('common.actions.delete') },
+    cancelProps: { label: t('common.actions.cancel') },
+    destructive: true,
+  })
+  if (!confirmed) return
+
+  trackEvent('automation.action_deleted', { channel: action.channel })
+  actions.value = actions.value.filter((current) => current.key !== action.key)
+}
+</script>
+
+<template>
+  <UFormField
+    :label="t('automations.form.messages')"
+    :error="submitted && actions.length === 0 ? t('automations.form.required') : undefined"
+  >
+    <div class="space-y-4">
+      <p
+        v-if="actions.length === 0"
+        class="paragraph-sm text-muted"
+        :data-testid="automationsTestIds.actionsEmpty"
+      >
+        {{ t('automations.form.actions.empty') }}
+      </p>
+
+      <div v-else class="space-y-3">
+        <AutomationsActionCard
+          v-for="action in actions"
+          :id="automationActionElementId(action.key)"
+          :key="action.key"
+          :action="action"
+          :trigger="trigger"
+          :unavailable="unavailable.get(action.key) ?? []"
+          :invalid="invalidKeys?.includes(action.key)"
+          :read-only="readOnly"
+          :data-testid="`${automationsTestIds.actionCard}-${action.key}`"
+          :data-testvalue="action.key"
+          @edit="edit(action)"
+          @remove="remove(action)"
+          @toggle="toggle(action, $event)"
+        />
+      </div>
+
+      <UButton
+        v-if="!readOnly"
+        color="primary"
+        variant="outline"
+        :label="t('automations.actions.addChannel')"
+        :disabled="channels.length === 0"
+        :data-testid="automationsTestIds.addChannelButton"
+        @click="add"
+      />
+    </div>
+
+    <AutomationsActionEditor
+      :action="editing"
+      :is-new="editingIsNew"
+      :trigger="trigger"
+      :channels="channels"
+      :unusable-channels="unusableChannels"
+      @save="saveEdited"
+      @close="editing = undefined"
+      @edit-message="emit('editMessage', { ...$event, isNew: editingIsNew })"
+    />
+  </UFormField>
+</template>

package/app/components/Automations/CloneModal.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+/**
+ * Asks the name of the copy before an Automation is duplicated. Opened
+ * through `useOverlay`; `action` makes the copy while the modal shows it
+ * running, and the modal closes once it is made.
+ */
+const props = defineProps<{
+  defaultName: string
+  action: (name: string) => Promise<void>
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const { t } = useI18n()
+
+const name = ref(props.defaultName)
+const trimmedName = computed(() => name.value.trim())
+const cloning = ref(false)
+
+async function confirmClone() {
+  if (!trimmedName.value || cloning.value) return
+
+  cloning.value = true
+  try {
+    await props.action(trimmedName.value)
+    emit('close')
+  } catch {
+    // Already said by the request's own error toast; the modal stays open
+    // with the name, for another try.
+  } finally {
+    cloning.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal
+    :title="t('automations.clone.title')"
+    close-icon="ph:x"
+    :close="{ disabled: cloning, onClick: () => emit('close') }"
+    :dismissible="false"
+    :content="dialogTestId(automationsTestIds.cloneModal)"
+  >
+    <template #body>
+      <UFormField :label="t('automations.form.name')">
+        <UInput
+          v-model="name"
+          :placeholder="t('automations.clone.namePlaceholder')"
+          :disabled="cloning"
+          autofocus
+          class="w-full"
+          :data-testid="automationsTestIds.cloneModalNameInput"
+          @keyup.enter="confirmClone"
+        />
+      </UFormField>
+    </template>
+
+    <template #footer>
+      <div class="flex gap-2 justify-end w-full">
+        <UButton
+          variant="outline"
+          color="neutral"
+          :label="t('common.actions.cancel')"
+          :disabled="cloning"
+          :data-testid="automationsTestIds.cloneModalCancel"
+          @click="emit('close')"
+        />
+        <UButton
+          :label="t('common.actions.duplicate')"
+          :loading="cloning"
+          :disabled="!trimmedName"
+          :data-testid="automationsTestIds.cloneModalConfirm"
+          @click="confirmClone"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>