@dev.smartpricing/message-composer-layer 4.3.2-fix.1 → 4.4.1-next.0

package/app/components/Common/MessageGroupSelect.vue

@@ -1,9 +1,41 @@
 <script setup lang="ts">
-import type { RenderType, MessageStatus } from '@dev.smartpricing/message-composer-utils/types'
-import { useMessageGroupsQuery } from '~/queries/messageGroups'
+import type { MessageStatus, RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import { usePagedMessageGroups } from '~/composables/usePagedMessageGroups'
+import { useMessageGroupQuery } from '~/queries/messageGroups'
+import { useAppContextStore } from '~/stores/appContext'
 
 defineOptions({ name: 'MessageGroupSelect' })
 
+type MessageGroupEligibility = 'active' | 'sendable'
+
+/** Per mode: the selectability rule and the copy shown for groups that fail it. */
+const ELIGIBILITY_RULES: Record<
+  MessageGroupEligibility,
+  {
+    isEligible: (messages: Array<{ status: MessageStatus }>) => boolean
+    tooltipKey: string
+    hideFilterKey: string
+  }
+> = {
+  active: {
+    isEligible: (messages) => messages.length > 0 && messages.every((m) => m.status === 'approved'),
+    tooltipKey: 'common.messageGroupSelect.inactive_tooltip',
+    hideFilterKey: 'common.messageGroupSelect.hide_inactive',
+  },
+  sendable: {
+    isEligible: (messages) => messages.some((m) => m.status === 'approved'),
+    tooltipKey: 'common.messageGroupSelect.not_sendable_tooltip',
+    hideFilterKey: 'common.messageGroupSelect.hide_not_sendable',
+  },
+}
+
+/**
+ * In-composer Message Group picker (ADR 0012). Always lists the context
+ * Product's groups only: search is server-side, debounced and bound to the
+ * 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).
+ */
 const props = withDefaults(
   defineProps<{
     renderType?: RenderType
@@ -21,10 +53,18 @@ const props = withDefaults(
     disabledGroupReasons?: Record<string, string>
     /** Overrides the "hide inactive" filter label. Defaults to the built-in translation. */
     hideFilterLabel?: string
+    /**
+     * Which groups are selectable: `active` (every Message approved, the
+     * composer's own rule) or `sendable` (at least one approved Message, the
+     * Message Send Flow's rule). The disabled tooltip and the hide filter
+     * follow the mode.
+     */
+    eligibility?: MessageGroupEligibility
   }>(),
   {
     placeholder: 'Select a message group',
     searchPlaceholder: 'Search...',
+    eligibility: 'active',
   },
 )
 
@@ -34,20 +74,95 @@ const emit = defineEmits<{
   select: [item: { id: string; name: string }]
 }>()
 
+/** What the picker needs from a group, whichever endpoint it came from. */
+interface PickerGroup {
+  id: string
+  name: string
+  messages: Array<{ status: MessageStatus }>
+}
+
+const PER_PAGE = 100
+
 const { t } = useI18n()
+const appContext = useAppContextStore()
 
-const { data: messageGroups, isLoading } = useMessageGroupsQuery(() => ({
-  renderType: props.renderType,
-}))
+// Server-side search: the menu's own client filter is off (`ignore-filter`),
+// the typed term reaches the list request once it settles. A new search,
+// render type or context Product starts over from page one.
+const searchTerm = ref('')
+const page = ref(1)
 
-const hideInactive = ref(false)
+// Without a context Product the server would answer with every Product's
+// groups (ADR 0011): never ask. The host's missing Product is already reported
+// by the app-context validation.
+const {
+  query: { data: envelope, isPlaceholderData },
+  loading,
+} = usePagedMessageGroups({
+  search: searchTerm,
+  page,
+  perPage: PER_PAGE,
+  renderType: () => props.renderType,
+  filters: () => ({
+    product: appContext.product,
+    visibility: appContext.isAdmin ? 'all' : 'public',
+  }),
+  resetOn: [() => appContext.product],
+  enabled: () => appContext.product != null,
+})
 
-function isGroupActive(messages: Array<{ status: MessageStatus }>): boolean {
-  return messages.length > 0 && messages.every((m) => m.status === 'approved')
-}
+// Pages loaded so far, indexed by page number: page one replaces everything,
+// later pages slot in at their index (a refetch replaces, never duplicates).
+const pages = shallowRef<PickerGroup[][]>([])
+watch(
+  envelope,
+  (value) => {
+    if (!value) return
+    const index = value.meta.current_page - 1
+    pages.value = index === 0 ? [value.data] : [...pages.value.slice(0, index), value.data]
+  },
+  { immediate: true },
+)
+const loadedGroups = computed(() => pages.value.flat())
+
+// The selected group is pinned on top of the loaded pages when they do not
+// contain it: remembered from the last pick, or fetched by id when preselected.
+const lastPicked = shallowRef<PickerGroup>()
+const missingSelectedId = computed(() => {
+  const id = modelValue.value
+  if (!id || loadedGroups.value.some((g) => g.id === id)) return undefined
+  return lastPicked.value?.id === id ? undefined : id
+})
+const { data: fetchedSelected } = useMessageGroupQuery(() => missingSelectedId.value ?? '', {
+  enabled: () => missingSelectedId.value != null,
+})
+const messageGroups = computed<PickerGroup[]>(() => {
+  const id = modelValue.value
+  if (!id || loadedGroups.value.some((g) => g.id === id)) return loadedGroups.value
+  const pinned =
+    lastPicked.value?.id === id
+      ? lastPicked.value
+      : fetchedSelected.value?.id === id
+        ? fetchedSelected.value
+        : undefined
+  return pinned ? [pinned, ...loadedGroups.value] : loadedGroups.value
+})
+
+const hasMore = computed(
+  () =>
+    !isPlaceholderData.value &&
+    envelope.value != null &&
+    envelope.value.meta.current_page < envelope.value.meta.last_page,
+)
+const isLoadingFirstPage = computed(() => page.value === 1 && loading.value)
+const isLoadingMore = computed(() => page.value > 1 && loading.value)
+
+const hideIneligible = ref(false)
+
+const rule = computed(() => ELIGIBILITY_RULES[props.eligibility])
+const hideFilterLabel = computed(() => props.hideFilterLabel ?? t(rule.value.hideFilterKey))
 
 const items = computed(() => {
-  if (!messageGroups.value) return []
   return messageGroups.value.reduce<
     Array<{
       label: string
@@ -58,20 +173,18 @@ const items = computed(() => {
     }>
   >((acc, group) => {
     const externalReason = props.disabledGroupReasons?.[group.id]
-    const externallyUsed = externalReason != null
-    const active = isGroupActive(group.messages)
-    const disabled = !active || externallyUsed
-    if (hideInactive.value && disabled) return acc
+    const eligible = rule.value.isEligible(group.messages)
+    const disabled = !eligible || externalReason != null
+    if (hideIneligible.value && disabled) return acc
+    // External reason wins over the mode's own tooltip when both apply.
+    let tooltip: string | undefined
+    if (externalReason != null) tooltip = externalReason
+    else if (!eligible) tooltip = t(rule.value.tooltipKey)
     acc.push({
       label: group.name,
       value: group.id,
       disabled,
-      // External reason wins over the inactive tooltip when both apply.
-      tooltip: externallyUsed
-        ? externalReason
-        : !active
-          ? t('common.messageGroupSelect.inactive_tooltip')
-          : undefined,
+      tooltip,
       chip: { color: disabled ? 'neutral' : 'success' },
     })
     return acc
@@ -80,18 +193,21 @@ const items = computed(() => {
 
 function handleUpdate(value: string) {
   modelValue.value = value
-  const group = messageGroups.value?.find((g) => g.id === value)
+  const group = messageGroups.value.find((g) => g.id === value)
+  lastPicked.value = group
   emit('select', { id: value, name: group?.name ?? '' })
 }
 </script>
 
 <template>
   <USelectMenu
+    v-model:search-term="searchTerm"
     :model-value="modelValue"
     :items="items"
     value-key="value"
-    :loading="isLoading"
+    :loading="isLoadingFirstPage"
     searchable
+    ignore-filter
     :placeholder="placeholder"
     :search-input="{ placeholder: searchPlaceholder }"
     :data-testid="messageGroupSelectTestIds.root"
@@ -106,10 +222,21 @@ function handleUpdate(value: string) {
 
     <template #content-top>
       <div class="flex items-center gap-2 px-2 py-1.5 border-b border-default">
-        <USwitch v-model="hideInactive" size="xs" />
-        <span class="text-xs text-muted">
-          {{ hideFilterLabel ?? t('common.messageGroupSelect.hide_inactive') }}
-        </span>
+        <USwitch v-model="hideIneligible" size="xs" />
+        <span class="text-xs text-muted">{{ hideFilterLabel }}</span>
+      </div>
+    </template>
+
+    <template v-if="hasMore || isLoadingMore" #content-bottom>
+      <div class="flex justify-center px-2 py-1.5 border-t border-default">
+        <UButton
+          variant="link"
+          size="xs"
+          :loading="isLoadingMore"
+          :label="t('common.messageGroupSelect.load_more')"
+          :data-testid="messageGroupSelectTestIds.loadMore"
+          @click="page++"
+        />
       </div>
     </template>
   </USelectMenu>

package/app/components/Common/MessagePreviewSlideover.vue

@@ -14,6 +14,8 @@ import { useEmailEditorStore } from '~/stores/emailEditor'
 interface Props {
   message: PostEntity<Message> | MessageFromDb | null | undefined
   messageGroupId?: string
+  /** WhatsApp only, forwarded to `WhatsappPreview`: operator-typed values overriding the resolved ones. No effect on the email preview. */
+  parameters?: Record<string, string>
 }
 
 const props = defineProps<Props>()
@@ -72,6 +74,7 @@ const isEmail = computed(() => renderType.value === 'email_v1')
         v-if="isWhatsapp && messageGroupId"
         :message="message as WhatsappMessage"
         :message-group-id="messageGroupId"
+        :parameters="parameters"
       />
 
       <!-- Email Inline Preview (client-driven, reflects unsaved changes) -->

package/app/components/Composer/MessageLibrary.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  useMessageGroupsQuery,
   useDeleteMessageGroupMutation,
   usePublishMessageGroupMutation,
   useUnpublishMessageGroupMutation,
@@ -10,7 +9,6 @@ import type {
   RenderType,
 } from '@dev.smartpricing/message-composer-utils/types'
 import type { MessageActionProperties, MessagesKind } from '@/types/tracking'
-import { computed } from 'vue'
 import BaseTable from '@/components/TemplateList/BaseTable.vue'
 
 const renderType = defineModel<RenderType>('renderType', { required: true })
@@ -26,12 +24,17 @@ const emit = defineEmits<{
 const { trackEvent } = useTracking()
 const { t } = useI18n()
 
-// Query
+// List state + server-side paginated query (ADR 0012)
 const {
-  data: messageGroups,
-  isPending: isFetching,
+  state: listState,
+  setFilters,
+  setSorting,
+  setPage,
+  rows: messageGroups,
+  meta,
+  loading: isFetching,
   refetch: execute,
-} = useMessageGroupsQuery(computed(() => ({ renderType: renderType.value })))
+} = useMessageGroupList(renderType)
 
 // Polling
 const interval = setInterval(() => execute(), 15000)
@@ -144,8 +147,15 @@ defineExpose({ execute })
 <template>
   <BaseTable
     :loading="isFetching"
-    :message-groups="messageGroups || []"
+    :message-groups="messageGroups"
+    :meta="meta"
     :render-type="renderType"
+    :filters="listState"
+    :sorting="listState"
+    :page="listState.page"
+    @update:filters="setFilters"
+    @update:sorting="setSorting"
+    @update:page="setPage"
     @edit="navigate"
     @delete="askDeleteGroup"
     @duplicate="handleDuplicate"

package/app/components/MessageSendFlow/EmailPreview.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useQuery } from '@pinia/colada'
+import { computed, toRef } from 'vue'
+import { compilationApi } from '~/api'
+import HtmlPreviewIframe from '~/components/Common/HtmlPreviewIframe.vue'
+import { messageSendFlowTestIds } from '~/utils/testIds.const'
+
+defineOptions({ name: 'MessageSendFlowEmailPreview' })
+
+/**
+ * The compiled email of the Preview step: `/compile` with the operator's
+ * parameter values (not strict, so an empty field shows as its placeholder;
+ * Confirm is the strict call), the brand cascade applied server-side.
+ */
+const props = defineProps<{
+  messageGroupId: string
+  language: string
+  parameters: Record<string, string>
+  brandId?: string
+}>()
+
+// The panel follows the form live; one compile per pause, not per keystroke.
+const debouncedParameters = refDebounced(toRef(props, 'parameters'), 300)
+
+const { data, isPending, isLoading, error } = useQuery({
+  key: () => [
+    'send-flow',
+    'email-preview',
+    props.messageGroupId,
+    props.language,
+    props.brandId ?? '',
+    JSON.stringify(debouncedParameters.value),
+  ],
+  query: () =>
+    compilationApi.compile(
+      props.messageGroupId,
+      {
+        language: props.language,
+        parameters: { ...debouncedParameters.value },
+        strict: false,
+        strict_language: true,
+        brand_id: props.brandId,
+      },
+      { skipErrorToast: true },
+    ),
+  // Keep the last email on screen while the next one compiles: no skeleton, no blank.
+  placeholderData: (previousData) => previousData,
+})
+
+const compiled = computed(() => (data.value?.render_type === 'email_v1' ? data.value : undefined))
+</script>
+
+<template>
+  <div class="w-full max-w-[600px]" :data-testid="messageSendFlowTestIds.emailPreview">
+    <div v-if="isPending && !compiled" class="space-y-2">
+      <USkeleton class="h-6 w-1/3" />
+      <USkeleton class="h-4" />
+      <USkeleton class="h-32" />
+    </div>
+    <div
+      v-else-if="compiled"
+      class="transition-opacity duration-200"
+      :class="{ 'opacity-60': isLoading }"
+    >
+      <p class="mb-2">
+        <span class="paragraph-sm-bold">{{ $t('email_preview.subject') }}:&nbsp;</span>
+        <span class="paragraph-sm">{{ compiled.subject }}</span>
+      </p>
+      <HtmlPreviewIframe
+        :html="compiled.html"
+        title="Email preview"
+        :min-height="480"
+        class="w-full rounded-lg border border-default bg-white"
+      />
+    </div>
+    <p v-else-if="error" class="text-sm text-muted">{{ $t('email_preview.no_preview') }}</p>
+  </div>
+</template>

package/app/components/MessageSendFlow/LanguageSelect.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { MessageSendFlowLanguage } from '~/composables/useMessageSendFlow'
+import { messageSendFlowTestIds } from '~/utils/testIds.const'
+
+defineOptions({ name: 'MessageSendFlowLanguageSelect' })
+
+/**
+ * The approved Messages of a Sendable group, one radio card per language.
+ * Non-approved languages stay visible but disabled, with their status.
+ */
+const props = defineProps<{
+  languages: MessageSendFlowLanguage[]
+}>()
+
+const modelValue = defineModel<string>()
+
+const { t } = useI18n()
+
+const items = computed(() =>
+  props.languages.map((l) => ({
+    value: l.code,
+    label: l.code.toUpperCase(),
+    description: l.approved
+      ? t('send_flow.language.approved')
+      : t('send_flow.language.not_sendable', { status: t(`status.${l.status}`) }),
+    disabled: !l.approved,
+  })),
+)
+</script>
+
+<template>
+  <URadioGroup
+    v-model="modelValue"
+    :items="items"
+    variant="card"
+    :data-testid="messageSendFlowTestIds.languageGroup"
+  />
+</template>

package/app/components/MessageSendFlow/MessageSendFlow.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import type {
+  PostEntity,
+  RenderType,
+  WhatsappMessage,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { StepperStep } from 'nuxt-ui-layer/types'
+import { computed, ref, watchEffect } from 'vue'
+import MessageGroupSelect from '~/components/Common/MessageGroupSelect.vue'
+import WhatsappPreview from '~/components/Whatsapp/Preview.vue'
+import EmailPreview from './EmailPreview.vue'
+import LanguageSelect from './LanguageSelect.vue'
+import ParametersForm from './ParametersForm.vue'
+import { useMessageSendFlow, type MessageSendFlowEmits } from '~/composables/useMessageSendFlow'
+import { useTracking } from '~/composables/useTracking'
+import type { MessageSendFlowStep } from '~/types/tracking'
+import { messageSendFlowTestIds } from '~/utils/testIds.const'
+
+defineOptions({ name: 'MessageSendFlow' })
+
+/**
+ * Message Send Flow (spec #67): Message → Parameters (with the preview beside
+ * both), then one `/compile` on Confirm whose Sendable Message is emitted as
+ * `compiled`.
+ * The host owns the container and the send; the component keeps its state
+ * after `compiled` and never resets itself.
+ *
+ * Anatomy follows the design system's multi-step form: a vertical `SStepper`
+ * in a body sidebar, the step content beside it, the channel preview in a
+ * right panel on every step, Cancel/Back left and Next/Confirm right in the
+ * container's footer (`actionsTo`).
+ */
+const props = withDefaults(
+  defineProps<{
+    renderType?: RenderType
+    /** Preferred language: preselected when approved, else the first approved. */
+    language?: string
+    /** Editable prefill; keys the Message does not need are ignored. */
+    parameters?: Record<string, string>
+    /** Brand override passed to `/compile`. */
+    brandId?: string
+    /**
+     * Where to render the action bar (Cancel, Back, Next, Confirm): a selector
+     * or element in the host's container, e.g. a `UModal` footer. Unset, the
+     * bar renders under the steps.
+     */
+    actionsTo?: string | HTMLElement
+  }>(),
+  { renderType: 'whatsapp_v1' },
+)
+
+const groupId = defineModel<string>('messageGroupId')
+const emit = defineEmits<MessageSendFlowEmits>()
+
+const { t } = useI18n()
+const { trackEvent } = useTracking()
+
+const {
+  group,
+  groupLoading,
+  languages,
+  sendable,
+  selectedLanguage,
+  selectedMessage,
+  parameterKeys,
+  parametersLoading,
+  placeholders,
+  parameterValues,
+  flowError,
+  compiling,
+  canConfirm,
+  confirm,
+} = useMessageSendFlow({
+  groupId,
+  renderType: () => props.renderType,
+  preferredLanguage: () => props.language,
+  prefill: () => props.parameters,
+  brandId: () => props.brandId,
+  emit,
+})
+
+// --- Steps: `useStepperNavigation` keeps each step's status in sync ---------
+const STEP_KEYS: MessageSendFlowStep[] = ['message', 'parameters']
+const steps = ref<StepperStep[]>(
+  STEP_KEYS.map((id, index) => ({ id, label: '', status: index === 0 ? 'current' : 'todo' })),
+)
+// Labels follow the locale; statuses are the composable's, so they are patched in place.
+watchEffect(() => {
+  for (const step of steps.value) {
+    step.label = t(`send_flow.steps.${step.id}.title`)
+    step.description = t(`send_flow.steps.${step.id}.description`)
+  }
+})
+const activeStepId = ref<string>('message')
+const { currentIndex, canGoBack, goBack, goNext, goToStep } = useStepperNavigation(
+  steps,
+  activeStepId,
+)
+const currentStep = computed(() => activeStepId.value as MessageSendFlowStep)
+const isLastStep = computed(() => currentIndex.value === steps.value.length - 1)
+
+const canNext = computed(() => {
+  if (currentStep.value === 'message')
+    return !!groupId.value && sendable.value && !!selectedLanguage.value && !groupLoading.value
+  // Parameters is the last step: Confirm, not Next (empty fields are its MISSING_PARAMETERS).
+  return false
+})
+
+const approvedCount = computed(() => languages.value.filter((l) => l.approved).length)
+
+// The Preview step is the one channel-specific block.
+const whatsappMessage = computed(() =>
+  props.renderType === 'whatsapp_v1'
+    ? (selectedMessage.value as PostEntity<WhatsappMessage> | undefined)
+    : undefined,
+)
+
+function cancel() {
+  trackEvent('send_flow.cancel', { step: currentStep.value })
+  emit('cancel')
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6" :data-testid="messageSendFlowTestIds.root">
+    <UAlert
+      v-if="flowError"
+      color="error"
+      variant="subtle"
+      icon="i-lucide-triangle-alert"
+      :title="$t('common.error')"
+      :description="flowError.message"
+      :data-testid="messageSendFlowTestIds.alert"
+    />
+
+    <div class="flex min-h-[420px] gap-6">
+      <!-- Done steps are clickable (the stepper's own rule); todo steps only through Next. -->
+      <div class="w-[200px] shrink-0 border-r border-default pr-4">
+        <SStepper
+          v-model="activeStepId"
+          :steps="steps"
+          :data-testid="messageSendFlowTestIds.stepper"
+          @step-click="goToStep"
+        />
+      </div>
+
+      <div class="min-w-0 flex-1">
+        <div v-if="currentStep === 'message'" class="max-w-md space-y-4">
+          <div class="space-y-2">
+            <p class="label-lg">{{ $t('send_flow.questions.message') }}</p>
+            <div :data-testid="messageSendFlowTestIds.picker">
+              <MessageGroupSelect
+                v-model="groupId"
+                :render-type="renderType"
+                eligibility="sendable"
+                class="w-full"
+              />
+            </div>
+            <p class="text-xs text-muted">{{ $t('send_flow.not_sendable_hint') }}</p>
+          </div>
+
+          <div v-if="group && sendable" class="space-y-2">
+            <p class="label-lg">{{ $t('send_flow.questions.language') }}</p>
+            <p class="text-sm text-muted">
+              {{
+                $t('send_flow.language.approved_count', { name: group.name, count: approvedCount })
+              }}
+            </p>
+            <LanguageSelect v-model="selectedLanguage" :languages="languages" />
+          </div>
+        </div>
+
+        <div v-else class="max-w-md space-y-3">
+          <p class="label-lg">{{ $t('send_flow.questions.parameters') }}</p>
+          <ParametersForm
+            v-model="parameterValues"
+            :parameter-keys="parameterKeys"
+            :placeholders="placeholders"
+            :loading="parametersLoading"
+          />
+        </div>
+      </div>
+
+      <!-- The preview follows every step: the picked Message, then the typed values. -->
+      <aside
+        class="flex w-[400px] shrink-0 flex-col items-center gap-2 border-l border-default pl-6"
+        :data-testid="messageSendFlowTestIds.previewPanel"
+      >
+        <p class="label-lg self-start">{{ $t('send_flow.questions.preview') }}</p>
+        <WhatsappPreview
+          v-if="whatsappMessage && groupId"
+          :message="whatsappMessage"
+          :message-group-id="groupId"
+          :parameters="parameterValues"
+          :data-testid="messageSendFlowTestIds.preview"
+        />
+        <EmailPreview
+          v-else-if="selectedMessage && groupId && selectedLanguage"
+          :message-group-id="groupId"
+          :language="selectedLanguage"
+          :parameters="parameterValues"
+          :brand-id="brandId"
+        />
+        <p v-else class="self-start text-sm text-muted">{{ $t('email_preview.no_preview') }}</p>
+      </aside>
+    </div>
+
+    <!-- `defer`: a host footer renders after the body, so the target is resolved after this render. -->
+    <Teleport :to="actionsTo" :disabled="!actionsTo" defer>
+      <div
+        class="flex w-full items-center justify-between"
+        :class="{ 'border-t border-default pt-4': !actionsTo }"
+        :data-testid="messageSendFlowTestIds.actions"
+      >
+        <div class="flex gap-2">
+          <UButton
+            variant="ghost"
+            color="neutral"
+            :label="$t('send_flow.actions.cancel')"
+            :data-testid="messageSendFlowTestIds.cancel"
+            @click="cancel"
+          />
+          <UButton
+            v-if="canGoBack"
+            variant="outline"
+            color="neutral"
+            :label="$t('send_flow.actions.back')"
+            :data-testid="messageSendFlowTestIds.back"
+            @click="goBack()"
+          />
+        </div>
+        <UButton
+          v-if="!isLastStep"
+          :label="$t('send_flow.actions.next')"
+          trailing-icon="i-lucide-arrow-right"
+          :disabled="!canNext"
+          :data-testid="messageSendFlowTestIds.next"
+          @click="goNext()"
+        />
+        <UButton
+          v-else
+          :label="$t('send_flow.actions.confirm')"
+          icon="i-lucide-send"
+          :loading="compiling"
+          :disabled="!canConfirm"
+          :data-testid="messageSendFlowTestIds.confirm"
+          @click="confirm()"
+        />
+      </div>
+    </Teleport>
+  </div>
+</template>