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

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>

package/app/components/MessageSendFlow/ParametersForm.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { messageSendFlowTestIds } from '~/utils/testIds.const'
+
+defineOptions({ name: 'MessageSendFlowParametersForm' })
+
+/**
+ * One required input per operator parameter of the chosen Message. Labels are
+ * humanized from the key (`guest_name` → "Guest name"), placeholders are the
+ * organization-level values.
+ */
+defineProps<{
+  parameterKeys: string[]
+  placeholders: Record<string, string>
+  loading?: boolean
+}>()
+
+const values = defineModel<Record<string, string>>({ required: true })
+
+function humanize(key: string): string {
+  const words = key.replace(/[_-]+/g, ' ').trim()
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+
+function setValue(key: string, value: string) {
+  values.value = { ...values.value, [key]: value }
+}
+</script>
+
+<template>
+  <div class="space-y-3" :data-testid="messageSendFlowTestIds.parametersForm">
+    <div v-if="loading" class="space-y-2">
+      <USkeleton class="h-9" />
+      <USkeleton class="h-9" />
+    </div>
+    <template v-else-if="parameterKeys.length">
+      <UFormField v-for="key in parameterKeys" :key="key" :label="humanize(key)" required>
+        <UInput
+          :model-value="values[key] ?? ''"
+          :placeholder="placeholders[key]"
+          class="w-full"
+          :data-testid="messageSendFlowTestIds.parameterInput"
+          :data-parameter="key"
+          @update:model-value="setValue(key, String($event))"
+        />
+      </UFormField>
+    </template>
+    <p v-else class="text-sm text-muted" :data-testid="messageSendFlowTestIds.noParameters">
+      {{ $t('send_flow.no_parameters') }}
+    </p>
+  </div>
+</template>

package/app/components/Whatsapp/Editor/Header.vue

@@ -112,10 +112,7 @@ function isMultimedia(model: HeaderBlockV1): model is WaHeaderTypeV1Url {
     <div v-if="model.type === 'text'" class="mt-3">
       <RichTextEditor
         v-model:text="model.content"
-        preset="whatsapp"
-        bold
-        italic
-        emoji
+        preset="whatsapp-header"
         improve
         :character-limit="WA_HEADER_TEXT_MAX_LENGTH"
         dynamic-values

package/app/components/Whatsapp/Preview.vue

@@ -9,6 +9,7 @@ import { computed } from 'vue'
 import {
   generateWhatsappHtml,
   getTipTapExtensions,
+  sanitizeContent,
 } from '@dev.smartpricing/message-composer-utils/utils'
 import { useResolvedParametersQuery } from '~/queries/compilation'
 
@@ -19,6 +20,13 @@ defineOptions({
 const props = defineProps<{
   message: PostEntity<WhatsappMessage>
   messageGroupId: string
+  /**
+   * Parameter values that override the resolved (organization-level) ones,
+   * e.g. what an operator typed in a Message Send Flow. Non-empty values win,
+   * keys not in the map keep the resolved value, an empty string shows the raw
+   * `{{key}}` placeholder (as an empty resolved value always did).
+   */
+  parameters?: Record<string, string>
 }>()
 
 const { data: resolvedParams } = useResolvedParametersQuery(
@@ -27,13 +35,14 @@ const { data: resolvedParams } = useResolvedParametersQuery(
 )
 
 function replaceMentionsWithValues(html: string): string {
-  const dynamicData = resolvedParams.value?.parameters
-  if (!dynamicData) return html
+  const dynamicData = { ...resolvedParams.value?.parameters, ...props.parameters }
 
   let replacedHtml = html
   for (const [key, value] of Object.entries(dynamicData)) {
-    const mentionRegex = new RegExp(`{{${key}}}`, 'g')
-    replacedHtml = replacedHtml.replace(mentionRegex, value || `{{${key}}}`)
+    // Literal match and a replacer function: keys and operator-typed values
+    // must never be read as regex or `$` replacement patterns.
+    const placeholder = `{{${key}}}`
+    replacedHtml = replacedHtml.replaceAll(placeholder, () => value || placeholder)
   }
 
   return replacedHtml
@@ -51,9 +60,10 @@ const bodyHtml = computed(() => {
 const headerHtml = computed(() => {
   if (props.message.body.header.type !== 'text') return ''
   if (!props.message.body.header.content) return ''
+  const extensions = getTipTapExtensions({ preset: 'whatsapp-header' })
   const html = generateHTML(
-    props.message.body.header.content,
-    getTipTapExtensions({ preset: 'whatsapp-header' }),
+    sanitizeContent(props.message.body.header.content, extensions),
+    extensions,
   ).replaceAll('<p></p>', '<p>&nbsp;</p>')
   return replaceMentionsWithValues(html)
 })

package/app/components/Whatsapp/PreviewPanel.vue

@@ -9,6 +9,8 @@ defineOptions({
 defineProps<{
   message: PostEntity<WhatsappMessage>
   messageGroupId: string
+  /** Forwarded to `WhatsappPreview`: operator-typed values overriding the resolved ones. */
+  parameters?: Record<string, string>
 }>()
 </script>
 
@@ -19,6 +21,10 @@ defineProps<{
       <h3 class="label-lg">{{ $t('common.preview') }}</h3>
     </div>
 
-    <WhatsappPreview :message="message" :message-group-id="messageGroupId" />
+    <WhatsappPreview
+      :message="message"
+      :message-group-id="messageGroupId"
+      :parameters="parameters"
+    />
   </div>
 </template>

package/app/components/Whatsapp/Translator/Header.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { JSONContent } from '@tiptap/vue-3'
 import { generateHTML } from '@tiptap/vue-3'
-import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+import {
+  getTipTapExtensions,
+  sanitizeContent,
+} from '@dev.smartpricing/message-composer-utils/utils'
 import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
 import { useAppContextStore } from '@/stores/appContext'
 import { WA_HEADER_TEXT_MAX_LENGTH } from '@dev.smartpricing/message-composer-utils/types'
@@ -23,7 +26,8 @@ const appContext = useAppContextStore()
 // Generate HTML for preview of base language with rich text support
 function generatePreviewHtml(content: JSONContent | undefined): string {
   if (!content) return ''
-  return generateHTML(content, getTipTapExtensions({ preset: 'whatsapp-header' })).replaceAll(
+  const extensions = getTipTapExtensions({ preset: 'whatsapp-header' })
+  return generateHTML(sanitizeContent(content, extensions), extensions).replaceAll(
     '<p></p>',
     '<p>&nbsp;</p>',
   )
@@ -45,10 +49,7 @@ function generatePreviewHtml(content: JSONContent | undefined): string {
       <div class="flex-1">
         <RichTextEditor
           v-model:text="targetContent"
-          preset="whatsapp"
-          bold
-          italic
-          emoji
+          preset="whatsapp-header"
           dynamic-values
           :character-limit="WA_HEADER_TEXT_MAX_LENGTH"
           :data-testid="whatsappTranslatorHeaderTestIds.targetEditor"

package/app/composables/useMessageSendFlow.ts

@@ -0,0 +1,246 @@
+import { useQuery } from '@pinia/colada'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
+import type {
+  EmailMessage,
+  MessageStatus,
+  PostEntity,
+  RenderType,
+  SendableMessage,
+  WhatsappMessage,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { compilationApi } from '~/api'
+import { useResolvedParametersQuery } from '~/queries/compilation'
+import { useMessageGroupQuery } from '~/queries/messageGroups'
+import { useTracking } from '~/composables/useTracking'
+
+/** Codes a host receives on `error`; the backend ones pass through unchanged. */
+export type MessageSendFlowErrorCode =
+  | 'NOT_SENDABLE'
+  | 'MISSING_PARAMETERS'
+  | 'TEMPLATE_NOT_SUBMITTED'
+  | 'TEMPLATE_NOT_APPROVED'
+  | 'COMPILE_FAILED'
+
+const BACKEND_CODES = new Set<MessageSendFlowErrorCode>([
+  'TEMPLATE_NOT_SUBMITTED',
+  'TEMPLATE_NOT_APPROVED',
+  'MISSING_PARAMETERS',
+])
+
+export interface MessageSendFlowError {
+  code: MessageSendFlowErrorCode
+  /** The layer's translated text, the same string the inline alert shows. */
+  message: string
+  /** Missing keys (client-side) or the backend error body. */
+  details?: unknown
+}
+
+export interface MessageSendFlowEmits {
+  compiled: [message: SendableMessage]
+  cancel: []
+  error: [error: MessageSendFlowError]
+}
+
+export interface MessageSendFlowLanguage {
+  code: string
+  status: MessageStatus
+  approved: boolean
+}
+
+/** What an operator must fill; `brand_*` keys are baked server-side. */
+export function isOperatorParameter(key: string): boolean {
+  return !key.startsWith('brand_')
+}
+
+/**
+ * Data flow of the Message Send Flow (spec #67): Sendable group → approved
+ * language → parameters → one `/compile` on Confirm. The component owns the
+ * steps and the buttons; the host owns the container and the send.
+ */
+export function useMessageSendFlow(options: {
+  groupId: Ref<string | undefined>
+  renderType: MaybeRefOrGetter<RenderType>
+  preferredLanguage: MaybeRefOrGetter<string | undefined>
+  prefill: MaybeRefOrGetter<Record<string, string> | undefined>
+  brandId: MaybeRefOrGetter<string | undefined>
+  emit: <K extends keyof MessageSendFlowEmits>(event: K, ...args: MessageSendFlowEmits[K]) => void
+}) {
+  const { groupId, emit } = options
+  const { t } = useI18n()
+  const { trackEvent } = useTracking()
+
+  // --- Group -------------------------------------------------------------
+  const { data: group, isLoading: groupLoading } = useMessageGroupQuery(() => groupId.value ?? '', {
+    enabled: () => !!groupId.value,
+  })
+
+  const messages = computed(() =>
+    (group.value?.messages ?? []).filter((m) => m.render_type === toValue(options.renderType)),
+  )
+
+  const languages = computed<MessageSendFlowLanguage[]>(() =>
+    messages.value.map((m) => ({
+      code: m.language_id,
+      status: m.status,
+      approved: m.status === 'approved',
+    })),
+  )
+
+  const sendable = computed(() => languages.value.some((l) => l.approved))
+  const notSendable = computed(
+    () => !!groupId.value && !!group.value && !groupLoading.value && !sendable.value,
+  )
+
+  // --- Language rule: preferred if approved, else first approved -----------
+  const selectedLanguage = ref<string>()
+  watch(
+    [messages, () => toValue(options.preferredLanguage)],
+    ([msgs, preferred]) => {
+      const approved = msgs.filter((m) => m.status === 'approved')
+      const match = approved.find((m) => m.language_id === preferred) ?? approved[0]
+      selectedLanguage.value = match?.language_id
+    },
+    { immediate: true },
+  )
+
+  const selectedMessage = computed(
+    () =>
+      messages.value.find((m) => m.language_id === selectedLanguage.value) as
+        | PostEntity<WhatsappMessage>
+        | PostEntity<EmailMessage>
+        | undefined,
+  )
+
+  // --- Parameters ----------------------------------------------------------
+  const parametersEnabled = () => !!groupId.value && !!selectedLanguage.value
+
+  const { data: parametersData, isLoading: parametersLoading } = useQuery({
+    key: () => ['send-flow', 'parameters', groupId.value ?? '', selectedLanguage.value ?? ''],
+    query: () => compilationApi.getParameters(groupId.value ?? '', selectedLanguage.value ?? ''),
+    enabled: parametersEnabled,
+  })
+
+  // Same query as WhatsappPreview, so the Preview step reuses the cached values.
+  const { data: resolvedData } = useResolvedParametersQuery(
+    () => groupId.value ?? '',
+    () => selectedLanguage.value ?? '',
+  )
+
+  const parameterKeys = computed(() =>
+    (parametersData.value?.parameters ?? []).filter(isOperatorParameter),
+  )
+
+  /** Organization-level values, shown as input placeholders. */
+  const placeholders = computed<Record<string, string>>(() => resolvedData.value?.parameters ?? {})
+
+  /**
+   * One entry per visible key; prefill seeds new keys, unknown prefill keys
+   * are ignored. Rebuilt only once the keys are known, so a language switch
+   * keeps what the operator typed while the next list loads.
+   */
+  const parameterValues = ref<Record<string, string>>({})
+  watch(
+    parameterKeys,
+    (keys) => {
+      if (!parametersData.value) return
+      const prefill = toValue(options.prefill) ?? {}
+      const next: Record<string, string> = {}
+      for (const key of keys) next[key] = parameterValues.value[key] ?? prefill[key] ?? ''
+      parameterValues.value = next
+    },
+    { immediate: true },
+  )
+
+  const missing = computed(() =>
+    parameterKeys.value.filter((k) => !parameterValues.value[k]?.trim()),
+  )
+
+  // --- Errors ---------------------------------------------------------------
+  const flowError = ref<MessageSendFlowError>()
+
+  function fail(code: MessageSendFlowErrorCode, details?: unknown) {
+    const error: MessageSendFlowError = {
+      code,
+      message: t(`send_flow.errors.${code}`, { name: group.value?.name ?? '' }),
+      details,
+    }
+    flowError.value = error
+    trackEvent('send_flow.error', { code })
+    emit('error', error)
+  }
+
+  watch(notSendable, (value) => {
+    if (value) {
+      fail('NOT_SENDABLE')
+    } else if (flowError.value?.code === 'NOT_SENDABLE') {
+      flowError.value = undefined
+    }
+  })
+
+  // --- Compile (once, on Confirm) --------------------------------------------
+  const compiling = ref(false)
+  const canConfirm = computed(() => !!selectedMessage.value && !compiling.value)
+
+  async function confirm() {
+    flowError.value = undefined
+    if (!groupId.value || !selectedLanguage.value || !group.value) return
+
+    if (missing.value.length > 0) {
+      fail('MISSING_PARAMETERS', { missing: missing.value })
+      return
+    }
+
+    trackEvent('send_flow.confirm', {
+      message_name: group.value.name,
+      message_category: group.value.category,
+      language: selectedLanguage.value,
+      parameters_count: parameterKeys.value.length,
+    })
+
+    compiling.value = true
+    try {
+      const res = await compilationApi.compile(
+        groupId.value,
+        {
+          language: selectedLanguage.value,
+          parameters: { ...parameterValues.value },
+          strict: true,
+          strict_language: true,
+          brand_id: toValue(options.brandId),
+        },
+        { skipErrorToast: true },
+      )
+      if (!('message' in res)) {
+        fail('COMPILE_FAILED', res)
+        return
+      }
+      emit('compiled', res.message)
+    } catch (e) {
+      const { status, data } = e as { status?: number; data?: { code?: string } }
+      // 401 reaches the host through `composer:auth-error`; nothing to add here.
+      if (status === 401) return
+      const code = data?.code as MessageSendFlowErrorCode | undefined
+      fail(code && BACKEND_CODES.has(code) ? code : 'COMPILE_FAILED', data ?? e)
+    } finally {
+      compiling.value = false
+    }
+  }
+
+  return {
+    group,
+    groupLoading,
+    languages,
+    sendable,
+    selectedLanguage,
+    selectedMessage,
+    parameterKeys,
+    parametersLoading,
+    placeholders,
+    parameterValues,
+    flowError,
+    compiling,
+    canConfirm,
+    confirm,
+  }
+}

package/app/queries/compilation.ts

@@ -37,7 +37,7 @@ export function useResolvedParametersQuery(
 export function useCompileEmailMutation() {
   return useMutation({
     mutation: ({ messageGroupId, data }: { messageGroupId: string; data: CompileMessageRequest }) =>
-      compilationApi.compileEmail(messageGroupId, data),
+      compilationApi.compile(messageGroupId, data),
   })
 }