@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,341 @@
+<script lang="ts" setup>
+import ViewLessMore from '@/components/Common/ViewLessMore.vue'
+
+import type {
+  ButtonBlockV1,
+  WaButtonV1,
+  WaButtonTypeV1,
+  ManagedLocales,
+} from '@dev.smartpricing/message-composer-utils/types'
+import {
+  WA_BUTTON_TYPES_V1,
+  WA_BUTTON_TEXT_MAX_LENGTH,
+  WA_BUTTON_MAX_LINK_BUTTONS,
+  WA_BUTTON_MAX_PHONE_BUTTONS,
+  WA_BUTTON_MAX_BUTTONS,
+  WA_BUTTON_MAX_UNSUBSCRIBE_BUTTONS,
+  WA_BUTTON_MAX_QUICK_REPLY_BUTTONS,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { extractFromLocale } from '@/utils/locale'
+import { computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { DropdownSectionAction } from '#ui/types'
+import PhoneInput from '@/components/Common/PhoneInput.vue'
+import { z } from 'zod'
+import {
+  VALID_PHONE_NUMBER_REGEX,
+  VALID_URL_REGEX,
+} from '@dev.smartpricing/message-composer-utils/utils'
+
+defineOptions({
+  name: 'WhatsappButtons',
+})
+
+const { locale } = defineProps<{
+  locale: ManagedLocales
+}>()
+
+const emit = defineEmits<{
+  buttonAdded: [button: WaButtonV1]
+  buttonRemoved: [buttonId: string]
+  buttonTypeChanged: [button: WaButtonV1]
+}>()
+
+const { t } = useI18n()
+const model = defineModel<ButtonBlockV1>({ required: true })
+
+const buttonTypes = computed<DropdownSectionAction[]>(() =>
+  WA_BUTTON_TYPES_V1.map((type) => ({
+    value: type,
+    label: t(`editor.whatsapp.buttons.button_types.${type}`),
+    disabled:
+      (type === 'unsubscribe' &&
+        unsubscribeButtonCount.value >= WA_BUTTON_MAX_UNSUBSCRIBE_BUTTONS) ||
+      (type === 'phone' && phoneButtonCount.value >= WA_BUTTON_MAX_PHONE_BUTTONS) ||
+      (type === 'link' && linkButtonCount.value >= WA_BUTTON_MAX_LINK_BUTTONS) ||
+      (type === 'quick_reply' && quickReplyButtonCount.value >= WA_BUTTON_MAX_QUICK_REPLY_BUTTONS),
+  })),
+)
+
+const addButtonActions = computed<DropdownSectionAction[]>(() => [
+  {
+    label: t('editor.whatsapp.buttons.button_types.phone'),
+    onClick: () => addButton('phone'),
+    disabled: phoneButtonCount.value >= WA_BUTTON_MAX_PHONE_BUTTONS,
+  },
+  {
+    label: t('editor.whatsapp.buttons.button_types.unsubscribe'),
+    onClick: () => addButton('unsubscribe'),
+    disabled: unsubscribeButtonCount.value >= WA_BUTTON_MAX_UNSUBSCRIBE_BUTTONS,
+  },
+  {
+    label: t('editor.whatsapp.buttons.button_types.link'),
+    onClick: () => addButton('link'),
+    disabled: linkButtonCount.value >= WA_BUTTON_MAX_LINK_BUTTONS,
+  },
+  {
+    label: t('editor.whatsapp.buttons.button_types.quick_reply'),
+    onClick: () => addButton('quick_reply'),
+    disabled: quickReplyButtonCount.value >= WA_BUTTON_MAX_QUICK_REPLY_BUTTONS,
+  },
+])
+
+async function addButton(type: WaButtonTypeV1) {
+  let text = ''
+  if (type === 'phone') {
+    text = await extractFromLocale('editor.whatsapp.buttons.default_text.phone', locale)
+  } else if (type === 'link') {
+    text = await extractFromLocale('editor.whatsapp.buttons.default_text.link', locale)
+  } else if (type === 'unsubscribe') {
+    text = await extractFromLocale('editor.whatsapp.buttons.default_text.unsubscribe', locale)
+  }
+
+  const newButton: WaButtonV1 = {
+    id: crypto.randomUUID(),
+    type,
+    text,
+    ...(type === 'phone' && { phoneNumber: '' }),
+    ...(type === 'link' && { url: 'https://' }),
+  } as WaButtonV1
+
+  model.value.buttons.push(newButton)
+  emit('buttonAdded', newButton)
+}
+
+function removeButton(button: WaButtonV1) {
+  model.value.buttons = model.value.buttons.filter((btn) => btn.id !== button.id)
+  emit('buttonRemoved', button.id)
+}
+
+function updateButtonType(button: WaButtonV1, index: number, type: WaButtonTypeV1) {
+  // Reset other values when type changes
+  switch (type) {
+    case 'phone':
+      button = {
+        text: button.text,
+        type: 'phone',
+        phoneNumber: '',
+        id: button.id,
+      }
+
+      break
+    case 'link':
+      button = {
+        text: button.text,
+        type: 'link',
+        url: 'https://',
+        id: button.id,
+      }
+      break
+    case 'unsubscribe':
+      button = {
+        text: button.text,
+        type: 'unsubscribe',
+        id: button.id,
+      }
+      break
+    case 'quick_reply':
+      button = {
+        text: button.text,
+        type: 'quick_reply',
+        id: button.id,
+      }
+      break
+    default:
+      break
+  }
+
+  model.value.buttons.splice(index, 1, button)
+  emit('buttonTypeChanged', button)
+}
+
+const phoneButtonCount = computed(
+  () => model.value.buttons.filter((btn) => btn.type === 'phone').length,
+)
+
+const unsubscribeButtonCount = computed(
+  () => model.value.buttons.filter((btn) => btn.type === 'unsubscribe').length,
+)
+
+const linkButtonCount = computed(
+  () => model.value.buttons.filter((btn) => btn.type === 'link').length,
+)
+
+const quickReplyButtonCount = computed(
+  () => model.value.buttons.filter((btn) => btn.type === 'quick_reply').length,
+)
+
+const buttonsCount = computed(() => model.value.buttons.length)
+
+// Validation schema for button fields
+const buttonTextSchema = z.object({
+  text: z.string().max(WA_BUTTON_TEXT_MAX_LENGTH, {
+    message: t('editor.validation.error.textTooLong'),
+  }),
+})
+
+const phoneButtonSchema = z.object({
+  phoneNumber: z
+    .string()
+    .regex(VALID_PHONE_NUMBER_REGEX, { message: t('editor.validation.error.phoneInvalid') }),
+})
+
+const linkButtonSchema = z.object({
+  url: z.string().regex(VALID_URL_REGEX, { message: t('editor.validation.error.urlInvalid') }),
+})
+
+// Watch for button changes to update enabled state
+watch(
+  () => model.value.buttons.length,
+  () => {
+    model.value.enabled = model.value.buttons.length > 0
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div :data-testid="whatsappEditorButtonsTestIds.container">
+    <!-- Title and Description Section -->
+    <section class="pb-3">
+      <div class="flex justify-between items-center pb-3">
+        <h4 class="label-md">{{ $t('editor.whatsapp.buttons.title') }}</h4>
+        <UDropdownMenu
+          :items="addButtonActions"
+          :data-testid="whatsappEditorButtonsTestIds.addButtonDropdown"
+        >
+          <UButton
+            variant="outline"
+            color="primary"
+            :disabled="buttonsCount >= WA_BUTTON_MAX_BUTTONS"
+            :data-testid="whatsappEditorButtonsTestIds.addButton"
+          >
+            {{ t('editor.whatsapp.buttons.add_button') }}
+          </UButton>
+        </UDropdownMenu>
+      </div>
+      <div class="max-w-[400px]">
+        <p
+          class="paragraph-sm pb-2 text-primary-800"
+          v-html="$t('editor.whatsapp.buttons.description_main')"
+        />
+        <ViewLessMore>
+          <ul class="list-disc list-inside text-sm space-y-2 text-primary-800 pb-2">
+            <li
+              class="paragraph-sm"
+              v-html="$t('editor.whatsapp.buttons.description_unsubscribe')"
+            />
+            <li class="paragraph-sm" v-html="$t('editor.whatsapp.buttons.description_phone')" />
+            <li class="paragraph-sm" v-html="$t('editor.whatsapp.buttons.description_link')" />
+            <li
+              class="paragraph-sm"
+              v-html="$t('editor.whatsapp.buttons.description_quick_reply')"
+            />
+          </ul>
+        </ViewLessMore>
+      </div>
+    </section>
+
+    <!-- Add Button Dropdown -->
+
+    <!-- Button Configuration Grid -->
+    <div class="space-y-4">
+      <div
+        v-for="(button, index) in model.buttons"
+        :key="button.id"
+        class="flex gap-2"
+        :data-testid="`${whatsappEditorButtonsTestIds.buttonItem}-${button.id}`"
+      >
+        <!-- Type Select -->
+        <div class="w-1/3">
+          <USelect
+            :model-value="button.type"
+            :items="buttonTypes"
+            @update:model-value="updateButtonType(button, index, $event as WaButtonTypeV1)"
+            :data-testid="`${whatsappEditorButtonsTestIds.buttonTypeSelect}-${button.id}`"
+          />
+        </div>
+
+        <!-- Text Input -->
+        <div class="flex-1 space-y-2">
+          <UForm :schema="buttonTextSchema" :state="button" :validate-on="['input', 'blur']">
+            <UFormField
+              name="text"
+              :data-testid="`${whatsappEditorButtonsTestIds.buttonTextField}-${button.id}`"
+            >
+              <UInput
+                v-model="button.text"
+                :placeholder="t('editor.whatsapp.buttons.placeholders.text')"
+                :maxlength="WA_BUTTON_TEXT_MAX_LENGTH"
+                :aria-describedby="`character-count-${index}`"
+                :ui="{ trailing: 'pointer-events-none' }"
+                :data-testid="`${whatsappEditorButtonsTestIds.buttonTextInput}-${button.id}`"
+              >
+                <template #trailing>
+                  <div
+                    :id="`character-count-${index}`"
+                    class="text-xs text-muted tabular-nums"
+                    aria-live="polite"
+                    role="status"
+                  >
+                    {{ button.text?.length }}/{{ WA_BUTTON_TEXT_MAX_LENGTH }}
+                  </div>
+                </template>
+              </UInput>
+            </UFormField>
+          </UForm>
+
+          <!-- Phone Number Field -->
+          <UForm
+            v-if="button.type === 'phone'"
+            :schema="phoneButtonSchema"
+            :state="button"
+            :validate-on="['blur']"
+          >
+            <UFormField
+              name="phoneNumber"
+              :data-testid="`${whatsappEditorButtonsTestIds.buttonPhoneField}-${button.id}`"
+            >
+              <PhoneInput
+                class="w-full"
+                v-model="button.phoneNumber"
+                default-prefix="39"
+                :data-testid="`${whatsappEditorButtonsTestIds.buttonPhoneInput}-${button.id}`"
+              />
+            </UFormField>
+          </UForm>
+          <!-- URL Field -->
+          <UForm
+            v-else-if="button.type === 'link'"
+            :schema="linkButtonSchema"
+            :state="button"
+            :validate-on="['blur']"
+          >
+            <UFormField
+              name="url"
+              :data-testid="`${whatsappEditorButtonsTestIds.buttonUrlField}-${button.id}`"
+            >
+              <UInput
+                v-model="button.url"
+                :placeholder="t('editor.whatsapp.buttons.placeholders.url')"
+                :data-testid="`${whatsappEditorButtonsTestIds.buttonUrlInput}-${button.id}`"
+              />
+            </UFormField>
+          </UForm>
+        </div>
+
+        <!-- Delete Button -->
+        <div>
+          <UButton
+            variant="ghost"
+            color="error"
+            size="sm"
+            icon="ph:trash"
+            @click="removeButton(button)"
+            :data-testid="`${whatsappEditorButtonsTestIds.buttonRemoveButton}-${button.id}`"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import {
+  WA_FOOTER_MAX_LENGTH,
+  type FooterBlockV1,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+  name: 'WhatsappEditorFooter',
+})
+
+const { t } = useI18n()
+const model = defineModel<FooterBlockV1>({ required: true })
+
+const emit = defineEmits<{
+  footerEnabledChanged: [enabled: boolean]
+}>()
+
+watch(
+  () => model.value.content,
+  (newContent) => {
+    const newEnabled = newContent.length > 0
+    const changed = model.value.enabled !== newEnabled
+    model.value.enabled = newEnabled
+
+    if (changed) {
+      emit('footerEnabledChanged', newEnabled)
+    }
+  },
+)
+</script>
+
+<template>
+  <div :data-testid="whatsappEditorFooterTestIds.container">
+    <section class="max-w-[400px] pb-3">
+      <h4 class="label-md pb-3">{{ $t('editor.whatsapp.footer.title') }}</h4>
+      <p
+        class="paragraph-sm text-primary-800"
+        v-html="$t('editor.whatsapp.footer.description_main')"
+      />
+    </section>
+
+    <UFormField
+      :help="t('editor.validation.character_limit')"
+      required
+      :data-testid="whatsappEditorFooterTestIds.contentField"
+    >
+      <UInput
+        v-model="model.content"
+        :placeholder="$t('editor.whatsapp.footer.placeholder')"
+        :maxLength="WA_FOOTER_MAX_LENGTH"
+        aria-describedby="character-count"
+        :ui="{ trailing: 'pointer-events-none' }"
+        :data-testid="whatsappEditorFooterTestIds.contentInput"
+      >
+        <template #trailing>
+          <div
+            id="character-count"
+            class="text-xs text-muted tabular-nums"
+            aria-live="polite"
+            role="status"
+          >
+            {{ model.content?.length }}/{{ WA_FOOTER_MAX_LENGTH }}
+          </div>
+        </template>
+      </UInput>
+    </UFormField>
+  </div>
+</template>

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

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import {
+  WA_HEADER_TEXT_MAX_LENGTH,
+  WA_HEADER_TYPES_V1,
+  type HeaderBlockV1,
+  type MediaFromDb,
+  type WaHeaderTypeV1Url,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { computed, watch, ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+import MediaUploadOrSelect from '@/components/Common/MediaUploadOrSelect.vue'
+import { useAppContextStore } from '@/stores/appContext'
+
+defineOptions({
+  name: 'WhatsappEditorHeader',
+})
+
+const emit = defineEmits<{
+  headerTypeChanged: [header: HeaderBlockV1]
+  headerMediaChanged: [payload: { header: HeaderBlockV1; previousUrl: string }]
+}>()
+
+const { t } = useI18n()
+
+const model = defineModel<HeaderBlockV1>({ required: true })
+const appContext = useAppContextStore()
+
+const initialUrl = ref<string>('')
+onMounted(() => {
+  if (isMultimedia(model.value)) {
+    initialUrl.value = model.value.url
+  }
+})
+
+// Convert header types to options for Select component
+const headerTypeOptions = computed(() =>
+  WA_HEADER_TYPES_V1.map((type) => ({
+    value: type,
+    label: t(`editor.whatsapp.header.types.${type}`),
+  })),
+)
+
+// Reset state when type changes
+watch(
+  () => model.value.type,
+  (newType, oldType) => {
+    let newHeader: HeaderBlockV1 = { type: newType } as HeaderBlockV1
+    if (newType === 'none') {
+      newHeader = { type: 'none' }
+    } else if (newType === 'text') {
+      newHeader = { type: 'text', content: undefined }
+    } else if (['video', 'document', 'image'].includes(newType)) {
+      newHeader = {
+        type: newType,
+        url: '',
+        smartchatMediaId: '',
+      }
+    }
+    model.value = newHeader
+
+    // Emit event when type changes (skip initial mount)
+    if (oldType !== undefined) {
+      emit('headerTypeChanged', newHeader)
+    }
+  },
+)
+
+// Media handling
+function handleMediaSelected(media: MediaFromDb) {
+  if (!isMultimedia(model.value)) return
+  const previousUrl = model.value.url
+  model.value.url = media.remote_url
+  model.value.smartchatMediaId = media.smartchat_media_id ?? ''
+  emit('headerMediaChanged', { header: model.value, previousUrl })
+}
+
+function handleMediaDeleted() {
+  if (!isMultimedia(model.value)) return
+  const previousUrl = model.value.url
+  model.value.url = ''
+  model.value.smartchatMediaId = ''
+  emit('headerMediaChanged', { header: model.value, previousUrl })
+}
+
+function handleMediaRestored() {
+  if (!isMultimedia(model.value)) return
+  const previousUrl = model.value.url
+  model.value.url = initialUrl.value
+  emit('headerMediaChanged', { header: model.value, previousUrl })
+}
+
+function isMultimedia(model: HeaderBlockV1): model is WaHeaderTypeV1Url {
+  return ['video', 'document', 'image'].includes(model.type)
+}
+</script>
+
+<template>
+  <div :data-testid="whatsappEditorHeaderTestIds.container">
+    <section class="max-w-[400px] pb-3">
+      <h4 class="label-md">{{ $t('editor.whatsapp.header.title') }}</h4>
+    </section>
+    <USelect
+      v-model="model.type"
+      class="max-w-1/2"
+      :items="headerTypeOptions"
+      :placeholder="$t('editor.whatsapp.header.type_placeholder')"
+      :data-testid="whatsappEditorHeaderTestIds.typeSelect"
+    />
+
+    <!-- Text Editor -->
+    <div v-if="model.type === 'text'" class="mt-3">
+      <RichTextEditor
+        v-model:text="model.content"
+        preset="whatsapp"
+        bold
+        italic
+        emoji
+        improve
+        :character-limit="WA_HEADER_TEXT_MAX_LENGTH"
+        dynamic-values
+        :data-testid="whatsappEditorHeaderTestIds.textEditor"
+      />
+    </div>
+
+    <!-- Media Uploader -->
+    <div v-if="isMultimedia(model)" class="mt-4">
+      <MediaUploadOrSelect
+        :key="model.type"
+        v-model="model.url"
+        :media-type="model.type"
+        @media-selected="handleMediaSelected"
+        :data-testid="whatsappEditorHeaderTestIds.mediaUpload"
+      >
+        <template #actions>
+          <UButton
+            v-if="model.url"
+            color="error"
+            variant="ghost"
+            icon="ph:trash"
+            @click.stop="handleMediaDeleted"
+            :data-testid="whatsappEditorHeaderTestIds.mediaDeleteButton"
+          />
+          <UButton
+            v-if="initialUrl && model.url !== initialUrl"
+            color="warning"
+            variant="ghost"
+            icon="ph:arrow-counter-clockwise-thin"
+            @click.stop="handleMediaRestored"
+            :data-testid="whatsappEditorHeaderTestIds.mediaRestoreButton"
+          />
+        </template>
+      </MediaUploadOrSelect>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { JSONContent } from '@tiptap/vue-3'
+import type {
+  PostEntity,
+  WhatsappMessage,
+  WaButtonV1,
+  HeaderBlockV1,
+} from '@dev.smartpricing/message-composer-utils/types'
+import WhatsappEditorHeader from './Header.vue'
+import WhatsappEditorBody from './Body.vue'
+import WhatsappEditorFooter from './Footer.vue'
+import WhatsappEditorButtons from './Buttons.vue'
+
+const model = defineModel<PostEntity<WhatsappMessage>>({ required: true })
+
+const emit = defineEmits<{
+  buttonAdded: [button: WaButtonV1]
+  buttonRemoved: [buttonId: string]
+  buttonTypeChanged: [button: WaButtonV1]
+  headerTypeChanged: [header: HeaderBlockV1]
+  headerMediaChanged: [payload: { header: HeaderBlockV1; previousUrl: string }]
+  footerEnabledChanged: [enabled: boolean]
+}>()
+
+defineOptions({
+  name: 'WhatsappEditorIndex',
+})
+
+function extractText(node: JSONContent | undefined): string {
+  if (!node) return ''
+  let text = ''
+  if (node.text) text += node.text
+  if (node.content) {
+    for (const child of node.content) {
+      text += extractText(child)
+    }
+  }
+  return text
+}
+
+const bodyGenerateContext = computed(() => {
+  const parts: string[] = []
+  const header = model.value.body.header
+  if (header.type === 'text') {
+    const text = extractText(header.content).trim()
+    if (text) parts.push(`[header]: ${text}`)
+  }
+  const footer = model.value.body.footer
+  if (footer.enabled && footer.content?.trim()) {
+    parts.push(`[footer]: ${footer.content.trim()}`)
+  }
+  return parts.join('\n') || undefined
+})
+</script>
+
+<template>
+  <div :data-testid="whatsappEditorIndexTestIds.container">
+    <WhatsappEditorHeader
+      class="px-4"
+      v-model="model.body.header"
+      :locale="model.language_id"
+      @header-type-changed="emit('headerTypeChanged', $event)"
+      @header-media-changed="emit('headerMediaChanged', $event)"
+    />
+    <USeparator class="my-6" color="neutral" />
+    <WhatsappEditorBody
+      class="px-4"
+      v-model="model.body.body"
+      :locale="model.language_id"
+      :generate-context="bodyGenerateContext"
+    />
+    <USeparator class="my-6" color="neutral" />
+    <WhatsappEditorFooter
+      class="px-4"
+      v-model="model.body.footer"
+      :locale="model.language_id"
+      @footer-enabled-changed="emit('footerEnabledChanged', $event)"
+    />
+    <USeparator class="my-6" color="neutral" />
+    <WhatsappEditorButtons
+      class="px-4"
+      v-model="model.body.buttons"
+      :locale="model.language_id"
+      @button-added="emit('buttonAdded', $event)"
+      @button-removed="emit('buttonRemoved', $event)"
+      @button-type-changed="emit('buttonTypeChanged', $event)"
+    />
+  </div>
+</template>