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

package/app/components/Composer/WhatsappComposer.vue

@@ -27,8 +27,33 @@ const { mainLanguage } = storeToRefs(useAppContextStore())
 const { trackEvent } = useTracking()
 const { goBackOrFallback } = useGoBack()
 const { submitToMeta, submitMessageToMeta } = useMetaSubmissionStore()
+const { status: whatsappConfiguration } = useWhatsappConfiguration()
 const { confirm } = useConfirm()
 const { t } = useI18n()
+const toast = useToast()
+
+/**
+ * A submission needs a WABA of the Message Group's Organization: when it is
+ * known to have none, or the Message Group is on one the Organization no
+ * longer has, say so before anything is saved on the way to the submission.
+ * While that is not known (lookup running or failed) the submission goes
+ * ahead and the backend decides.
+ */
+function canSubmitToMeta(): boolean {
+  const reason =
+    whatsappConfiguration.value === 'not_configured'
+      ? 'whatsapp_not_configured'
+      : isWabaDetached.value
+        ? 'whatsapp_waba_detached'
+        : null
+  if (!reason) return true
+  toast.add({
+    color: 'error',
+    title: t(`common.${reason}_title`),
+    description: t(`common.${reason}_description`),
+  })
+  return false
+}
 
 // ── Init ──────────────────────────────────────────────────────────
 if (props.mode === 'create') {
@@ -41,6 +66,19 @@ const { data: messageGroupData, isPending: isFetching } =
     ? useMessageGroupQuery(props.messageGroupId)
     : { data: ref(null), isPending: ref(false) }
 
+// The editor works on the Organization of the Message Group it loaded, not on
+// the selector's. Claimed before the watcher below loads dependent data.
+useResourceOrganization(() => messageGroupData.value?.organization_id)
+
+// The WABA the Message Group is on, and the choice of one at its first
+// submission (ADR 0015).
+const {
+  waba: messageGroupWaba,
+  isDetached: isWabaDetached,
+  chooseWaba,
+  markSubmitted,
+} = useMessageGroupWaba(() => messageGroupData.value?.waba_id)
+
 // ── Change tracking ───────────────────────────────────────────────
 const changeTracking = useChangeTracking(computed(() => store.changeTrackingId))
 
@@ -238,6 +276,10 @@ async function saveAsNew() {
 }
 
 async function requestApproval() {
+  // Asked before anything is saved: giving up leaves the editor as it was.
+  const choice = await chooseWaba()
+  if (!choice) return
+
   track('request_approval', getWaDraftProps())
 
   if (props.mode === 'create') {
@@ -246,7 +288,7 @@ async function requestApproval() {
       'draft',
     )
     if (result) {
-      await submitToMeta(result.id.toString())
+      await submitToMeta(result.id.toString(), choice.wabaId)
       emit('saved', { id: result.id, name: result.name })
       notifyParent('TEMPLATE_APPROVAL_REQUESTED', { id: result.id, name: result.name })
     }
@@ -256,7 +298,7 @@ async function requestApproval() {
       messageGroup: store.messageGroupUpdateData,
       messages: store.messages,
     })
-    await submitToMeta(store.messageGroupId)
+    await submitToMeta(store.messageGroupId, choice.wabaId)
     emit('saved', { id: store.messageGroupId, name: store.name })
     notifyParent('TEMPLATE_APPROVAL_REQUESTED', { id: store.messageGroupId, name: store.name })
     goBackOrFallback()
@@ -267,6 +309,10 @@ async function requestApproval() {
 async function onRequestReview(languageId: string) {
   const message = store.messages[languageId] as (WhatsappMessage & { id?: string }) | undefined
   if (!message?.id) return
+  if (!canSubmitToMeta()) return
+
+  const choice = await chooseWaba()
+  if (!choice) return
 
   const languageName = languages.value?.find((l) => l.id === languageId)?.name ?? languageId
 
@@ -278,7 +324,8 @@ async function onRequestReview(languageId: string) {
     action: async () => {
       // Decision C: persist only this language's current edits, then submit it.
       await messagesApi.update(message.id!, message)
-      await submitMessageToMeta(message.id!)
+      await submitMessageToMeta(message.id!, choice.wabaId)
+      markSubmitted(choice.wabaId)
       // Reflect pending locally instead of refetching the group, so unsaved
       // edits in other languages are preserved.
       store.messages[languageId] = { ...message, status: 'pending' }
@@ -312,6 +359,7 @@ async function handleSaveAsNew() {
 }
 
 async function handleRequestApproval() {
+  if (!canSubmitToMeta()) return
   if (!(await validateFull())) return
   if (hasIncompleteTranslations.value) {
     pendingAction.value = 'request_approval'
@@ -409,6 +457,7 @@ defineExpose({
   validationErrors,
   isPending: store.isPending,
   isApproved: store.isApproved,
+  isWabaDetached,
 })
 </script>
 
@@ -439,6 +488,32 @@ defineExpose({
       </UAlert>
     </div>
 
+    <UAlert
+      v-if="isWabaDetached"
+      color="warning"
+      variant="subtle"
+      icon="i-lucide-unplug"
+      :title="$t('common.whatsapp_waba_detached_title')"
+      :description="$t('common.whatsapp_waba_detached_description')"
+      class="rounded-none"
+      data-testid="whatsapp-waba-detached"
+    />
+    <div
+      v-if="messageGroupWaba"
+      class="flex items-center gap-2 px-6 py-2 text-sm text-muted border-b border-default"
+      data-testid="whatsapp-message-group-waba"
+    >
+      <UIcon name="i-lucide-building-2" class="size-4 shrink-0" />
+      <span>{{ $t('common.whatsapp_waba_label') }}</span>
+      <span v-if="messageGroupWaba.name" class="font-medium text-default">
+        {{ messageGroupWaba.name }}
+      </span>
+      <span v-if="messageGroupWaba.phone_numbers.length">
+        {{ messageGroupWaba.phone_numbers.join(', ') }}
+      </span>
+      <span class="text-xs text-dimmed font-mono">{{ messageGroupWaba.id }}</span>
+    </div>
+
     <ComposerWhatsappContent
       v-if="store.activeTab === 'content'"
       :mode="mode"

package/app/components/MessageSendFlow/EmailPreview.vue

@@ -0,0 +1,81 @@
+<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 organization = useEffectiveOrganizationStore()
+
+const { data, isPending, isLoading, error } = useQuery({
+  key: () => [
+    'send-flow',
+    'email-preview',
+    props.messageGroupId,
+    props.language,
+    props.brandId ?? '',
+    JSON.stringify(debouncedParameters.value),
+    organization.organizationId,
+  ],
+  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,265 @@
+<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 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
+    /**
+     * The Organization the flow works on (ADR 0014), e.g. the conversation's.
+     * Unset, the one the layer resolved. The flow never shows a selector.
+     */
+    organizationId?: string
+    /**
+     * The WABA the Host sends from: only WhatsApp groups on it are offered
+     * (ADR 0015). Unset, the groups of every WABA of the Organization.
+     */
+    wabaId?: 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 {
+  group,
+  groupLoading,
+  languages,
+  sendable,
+  selectedLanguage,
+  selectedMessage,
+  parameterKeys,
+  parametersLoading,
+  placeholders,
+  parameterValues,
+  flowError,
+  compiling,
+  canConfirm,
+  confirm,
+  trackEvent,
+} = useMessageSendFlow({
+  groupId,
+  renderType: () => props.renderType,
+  preferredLanguage: () => props.language,
+  prefill: () => props.parameters,
+  brandId: () => props.brandId,
+  organizationId: () => props.organizationId,
+  wabaId: () => props.wabaId,
+  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"
+                :organization-id="organizationId"
+                :waba-id="wabaId"
+                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>