@nexxtmove/ui 0.1.23 → 0.1.25

package/src/components/TimelineEvent/TimelineEvent.test.ts

@@ -0,0 +1,166 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TimelineEvent from './TimelineEvent.vue'
+
+const baseEvent = {
+  id: 1,
+  happened_at: '2024-06-15T10:30:00.000Z',
+  medium_type: null,
+  url: null,
+  page_title: null,
+  request_reason: null,
+  agenda_item_type: null,
+  source: 'system',
+  direction: 'outbound',
+  description: null,
+}
+
+const mountEvent = (eventOverrides = {}, props = {}) =>
+  mount(TimelineEvent, {
+    props: {
+      event: { ...baseEvent, type: 'contact_created', ...eventOverrides },
+      ...props,
+    },
+    global: {
+      stubs: {
+        NexxtIcon: true,
+      },
+    },
+  })
+
+describe('TimelineEvent', () => {
+  it('renders the formatted date', () => {
+    const wrapper = mountEvent()
+    const dateText = wrapper.find('.extra-small-normal').text()
+    expect(dateText).toContain('om')
+  })
+
+  it('sets data-event-source attribute from direction', () => {
+    const wrapper = mountEvent({ direction: 'inbound' })
+    expect(wrapper.attributes('data-event-source')).toBe('inbound')
+  })
+
+  it('sets data-event-date attribute from happened_at', () => {
+    const wrapper = mountEvent({ happened_at: '2024-06-15T10:30:00.000Z' })
+    expect(wrapper.attributes('data-event-date')).toBe('2024-06-15T10:30:00.000Z')
+  })
+
+  it('sets date-event-type attribute from type', () => {
+    const wrapper = mountEvent({ type: 'page_viewed' })
+    expect(wrapper.attributes('date-event-type')).toBe('page_viewed')
+  })
+
+  it('renders the event label for a known event type', () => {
+    const wrapper = mountEvent({ type: 'contact_created' })
+    expect(wrapper.text()).toContain('Contact aangemaakt')
+  })
+
+  it('renders the event type as label for an unknown event type', () => {
+    const wrapper = mountEvent({ type: 'custom_unknown_type' })
+    expect(wrapper.text()).toContain('custom_unknown_type')
+  })
+
+  it('does not render a link when event.url is null', () => {
+    const wrapper = mountEvent({ url: null })
+    expect(wrapper.find('a').exists()).toBe(false)
+  })
+
+  it('renders a link when event.url is set', () => {
+    const wrapper = mountEvent({ url: 'https://example.com' })
+    const link = wrapper.find('a')
+    expect(link.exists()).toBe(true)
+    expect(link.attributes('href')).toBe('https://example.com')
+    expect(link.attributes('target')).toBe('_blank')
+  })
+
+  it('renders event.description as link text when set', () => {
+    const wrapper = mountEvent({ url: 'https://example.com', description: 'Mijn voorstel' })
+    expect(wrapper.find('a').text()).toContain('Mijn voorstel')
+  })
+
+  it('renders event.url as link text when description is null', () => {
+    const wrapper = mountEvent({ url: 'https://example.com', description: null })
+    expect(wrapper.find('a').text()).toContain('https://example.com')
+  })
+
+  it('does not render request_reason when not set', () => {
+    const wrapper = mountEvent({ request_reason: null })
+    expect(wrapper.text()).not.toContain('Reden:')
+  })
+
+  it('renders request_reason when set', () => {
+    const wrapper = mountEvent({ request_reason: 'Interesse in de woning' })
+    expect(wrapper.text()).toContain('Reden: Interesse in de woning')
+  })
+
+  it('aligns outbound events to the left by default (no justify-end)', () => {
+    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
+    expect(wrapper.classes()).not.toContain('justify-end')
+  })
+
+  it('aligns inbound events to the right when splitView is true', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
+    expect(wrapper.classes()).toContain('justify-end')
+  })
+
+  it('does not align inbound events to the right when splitView is false', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: false })
+    expect(wrapper.classes()).not.toContain('justify-end')
+  })
+
+  it('reverses icon and content order for inbound events in splitView', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
+    const innerRow = wrapper.find('.flex.w-full.shrink-0')
+    expect(innerRow.classes()).toContain('flex-row-reverse')
+  })
+
+  it('does not reverse order for outbound events', () => {
+    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
+    const innerRow = wrapper.find('.flex.w-full.shrink-0')
+    expect(innerRow.classes()).not.toContain('flex-row-reverse')
+  })
+
+  it('applies max-w-lg to content when splitView is true', () => {
+    const wrapper = mountEvent({}, { splitView: true })
+    const content = wrapper.find('.rounded-xl')
+    expect(content.classes()).toContain('max-w-lg')
+  })
+
+  it('does not apply max-w-lg to content when splitView is false', () => {
+    const wrapper = mountEvent({}, { splitView: false })
+    const content = wrapper.find('.rounded-xl')
+    expect(content.classes()).not.toContain('max-w-lg')
+  })
+
+  it('defaults splitView to true', () => {
+    const wrapper = mount(TimelineEvent, {
+      props: {
+        event: { ...baseEvent, type: 'contact_created', direction: 'inbound' },
+      },
+      global: { stubs: { NexxtIcon: true } },
+    })
+    expect(wrapper.classes()).toContain('justify-end')
+  })
+
+  it('applies correct background color class for known event type', () => {
+    const wrapper = mountEvent({ type: 'contact_created' })
+    const iconWrapper = wrapper.find('.rounded-full')
+    expect(iconWrapper.classes()).toContain('bg-pink-500')
+  })
+
+  it('applies default background color for unknown event type', () => {
+    const wrapper = mountEvent({ type: 'unknown_type' })
+    const iconWrapper = wrapper.find('.rounded-full')
+    expect(iconWrapper.classes()).toContain('bg-gray-500')
+  })
+
+  it('aligns date text to the right for inbound events in splitView', () => {
+    const wrapper = mountEvent({ direction: 'inbound' }, { splitView: true })
+    expect(wrapper.find('.extra-small-normal').classes()).toContain('text-right')
+  })
+
+  it('does not align date text to the right for outbound events', () => {
+    const wrapper = mountEvent({ direction: 'outbound' }, { splitView: true })
+    expect(wrapper.find('.extra-small-normal').classes()).not.toContain('text-right')
+  })
+})

package/src/components/TimelineEvent/TimelineEvent.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import NexxtIcon from '../Icon/Icon.vue'
+import { computed } from 'vue'
+import { EVENT_CONFIG_MAP, type TimelineEvent as Event } from './TimelineTypes'
+
+interface EventConfig {
+  label: string
+  icon: string
+  color: string
+}
+
+const defaultEventConfig: EventConfig = {
+  label: 'Gebeurtenis',
+  icon: 'info',
+  color: 'bg-gray-500',
+}
+
+const eventConfig = computed(() => {
+  return EVENT_CONFIG_MAP[props.event.type] || { ...defaultEventConfig, label: props.event.type }
+})
+
+const props = withDefaults(
+  defineProps<{
+    event: Event
+    splitView?: boolean
+  }>(),
+  {
+    splitView: true,
+  },
+)
+
+const formattedDate = computed(() => {
+  const date = new Date(props.event.happened_at)
+  const datePart = date.toLocaleDateString('nl-NL', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+  const timePart = date.toLocaleTimeString('nl-NL', {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+  return `${datePart} om ${timePart}`
+})
+
+const isContactEvent = computed(() => {
+  return props.splitView && props.event.direction === 'inbound'
+})
+</script>
+
+<template>
+  <div
+    :data-event-source="event.direction"
+    :data-event-date="event.happened_at"
+    :date-event-type="event.type"
+    class="relative z-20 flex flex-wrap items-center gap-x-6 gap-y-2"
+    :class="{
+      'justify-end': isContactEvent,
+    }"
+  >
+    <div
+      class="w-full px-24 extra-small-normal text-gray-600"
+      :class="{
+        'text-right': isContactEvent,
+      }"
+    >
+      {{ formattedDate }}
+    </div>
+
+    <div
+      class="flex w-full shrink-0 items-center gap-6"
+      :class="{
+        'flex-row-reverse': isContactEvent,
+      }"
+    >
+      <div
+        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
+        :class="[eventConfig.color]"
+      >
+        <NexxtIcon
+          :name="eventConfig.icon as any"
+          :type="eventConfig.icon === 'whatsapp' ? 'brands' : 'light'"
+          class="flex h-6 w-6 text-xl text-white"
+        />
+      </div>
+      <div
+        class="flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8"
+        :class="{ 'max-w-lg': splitView }"
+      >
+        <span class="heading-3">
+          {{ eventConfig.label }}
+        </span>
+        <a
+          v-if="event.url"
+          :href="event.url"
+          target="_blank"
+          class="group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
+        >
+          <span class="truncate group-hover:underline">
+            {{ event.description || event.url }}
+          </span>
+          <NexxtIcon name="external-link" class="ml-1 h-4 w-4 text-gray-950" />
+        </a>
+        <span v-if="event.request_reason" class="mt-1 text-sm text-gray-500">
+          Reden: {{ event.request_reason }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/TimelineEvent/TimelineTypes.ts

@@ -0,0 +1,236 @@
+export interface TimelineEvent {
+  id: number
+  type: string
+  happened_at: string
+  medium_type: string | null
+  url: string | null
+  page_title: string | null
+  request_reason: string | null
+  agenda_item_type: string | null
+  source: string
+  direction: string
+  description: string | null
+}
+
+export interface TimelinePhase {
+  phase: {
+    value: number
+  }
+  entered_at: string | null
+  exited_at: string | null
+  events: TimelineEvent[]
+}
+
+export interface TimelineResponse {
+  data: {
+    current_phase: {
+      value: number
+      entered_at?: string
+    }
+    phases: TimelinePhase[]
+  }
+}
+
+export interface PhaseConfig {
+  label: string
+  color: string
+  bgColor: string
+  fromColor: string
+  toColor: string
+  textColor: string
+}
+
+export const EVENT_CONFIG_MAP: Record<string, { label: string; icon: string; color: string }> = {
+  // FieldResearch / Awareness
+  contact_created: { label: 'Contact aangemaakt', icon: 'user-plus', color: 'bg-pink-500' },
+  page_viewed: { label: 'Pagina bekeken', icon: 'eye', color: 'bg-blue-500' },
+  house_viewing_requested: {
+    label: 'Bezichtiging aangevraagd',
+    icon: 'house-chimney',
+    color: 'bg-orange-500',
+  },
+  automation_phase_opened: {
+    label: 'Automation e-mail geopend',
+    icon: 'envelope-open-text',
+    color: 'bg-indigo-500',
+  },
+  automation_whatsapp_button_clicked: {
+    label: 'WhatsApp knop geklikt',
+    icon: 'whatsapp',
+    color: 'bg-[#25D366]',
+  },
+  automation_button_mail_answered: {
+    label: 'Automation mail beantwoord',
+    icon: 'reply',
+    color: 'bg-indigo-600',
+  },
+  waiting_list_signup: {
+    label: 'Aangemeld voor wachtlijst',
+    icon: 'list-check',
+    color: 'bg-yellow-500',
+  },
+  viewing_created: {
+    label: 'Bezichtiging aangemaakt',
+    icon: 'house',
+    color: 'bg-orange-400',
+  },
+  viewing_agenda_item_scheduled: {
+    label: 'Bezichtiging gepland',
+    icon: 'calendar-check',
+    color: 'bg-orange-400',
+  },
+  general_agenda_item_scheduled: {
+    label: 'Afspraak gepland',
+    icon: 'calendar',
+    color: 'bg-gray-400',
+  },
+  sales_agenda_item_scheduled: {
+    label: 'Verkoopgesprek gepland',
+    icon: 'handshake',
+    color: 'bg-blue-500',
+  },
+  agenda_item_scheduled: {
+    label: 'Agenda-item gepland',
+    icon: 'calendar-plus',
+    color: 'bg-gray-500',
+  },
+  whatsapp_message_sent: {
+    label: 'WhatsApp-bericht verzonden',
+    icon: 'paper-plane',
+    color: 'bg-[#25D366]',
+  },
+  whatsapp_message_received: {
+    label: 'WhatsApp-bericht ontvangen',
+    icon: 'whatsapp',
+    color: 'bg-[#25D366]',
+  },
+
+  // Transaction
+  appraisal_agenda_item_scheduled: {
+    label: 'Taxatie gepland',
+    icon: 'file-invoice-dollar',
+    color: 'bg-teal-500',
+  },
+  purchase_agenda_item_scheduled: {
+    label: 'Aankoopgesprek gepland',
+    icon: 'cart-shopping',
+    color: 'bg-emerald-600',
+  },
+  structural_inspection_agenda_item_scheduled: {
+    label: 'Bouwkundige keuring gepland',
+    icon: 'hard-hat',
+    color: 'bg-amber-600',
+  },
+  valuation_agenda_item_scheduled: {
+    label: 'Waardebepaling gepland',
+    icon: 'calculator',
+    color: 'bg-teal-600',
+  },
+  mortgage_agenda_item_scheduled: {
+    label: 'Hypotheekgesprek gepland',
+    icon: 'money-check-dollar-pen',
+    color: 'bg-blue-600',
+  },
+  purchase_deed_signing_agenda_item_scheduled: {
+    label: 'Koopovereenkomst tekenen',
+    icon: 'pen-fancy',
+    color: 'bg-emerald-500',
+  },
+  proposal_sent: { label: 'Voorstel verzonden', icon: 'paper-plane-top', color: 'bg-blue-400' },
+  proposal_opened: { label: 'Voorstel geopend', icon: 'envelope-open', color: 'bg-blue-300' },
+  proposal_accepted: { label: 'Voorstel geaccepteerd', icon: 'check', color: 'bg-emerald-500' },
+
+  // Aftercare
+  final_inspection_agenda_item_scheduled: {
+    label: 'Eindinspectie gepland',
+    icon: 'clipboard-check',
+    color: 'bg-green-400',
+  },
+  key_handover_agenda_item_scheduled: {
+    label: 'Sleuteloverdracht gepland',
+    icon: 'key',
+    color: 'bg-green-500',
+  },
+  transport_agenda_item_scheduled: {
+    label: 'Transport bij notaris',
+    icon: 'file-signature',
+    color: 'bg-green-600',
+  },
+
+  // Other / Awareness
+  newsletter_opened: {
+    label: 'Nieuwsbrief geopend',
+    icon: 'envelope-open',
+    color: 'bg-indigo-400',
+  },
+  contact_requested: { label: 'Contactaanvraag', icon: 'user', color: 'bg-indigo-500' },
+  house_valuation_requested: {
+    label: 'Waardebepaling aangevraagd',
+    icon: 'search',
+    color: 'bg-teal-500',
+  },
+  unsubscribed: {
+    label: 'Afgemeld',
+    icon: 'user-slash',
+    color: 'bg-red-500',
+  },
+}
+
+export const PHASE_MAP: Record<number, PhaseConfig> = {
+  0: {
+    label: 'Inactief',
+    color: 'border-slate-300',
+    bgColor: 'bg-slate-300',
+    fromColor: 'from-slate-300',
+    toColor: 'to-slate-300',
+    textColor: 'text-gray-700',
+  },
+  1: {
+    label: 'Latente woonfase',
+    color: 'border-amber-500',
+    bgColor: 'bg-amber-500',
+    fromColor: 'from-amber-500',
+    toColor: 'to-amber-500',
+    textColor: 'text-white',
+  },
+  2: {
+    label: 'Oriëntatie',
+    color: 'border-purple-500',
+    bgColor: 'bg-purple-500',
+    fromColor: 'from-purple-500',
+    toColor: 'to-purple-500',
+    textColor: 'text-white',
+  },
+  3: {
+    label: 'Actieve zoektocht',
+    color: 'border-yellow-500',
+    bgColor: 'bg-yellow-500',
+    fromColor: 'from-yellow-500',
+    toColor: 'to-yellow-500',
+    textColor: 'text-white',
+  },
+  4: {
+    label: 'Selectie',
+    color: 'border-blue-500',
+    bgColor: 'bg-blue-500',
+    fromColor: 'from-blue-500',
+    toColor: 'to-blue-500',
+    textColor: 'text-white',
+  },
+  5: {
+    label: 'Transactie',
+    color: 'border-emerald-500',
+    bgColor: 'bg-emerald-500',
+    fromColor: 'from-emerald-500',
+    toColor: 'to-emerald-500',
+    textColor: 'text-white',
+  },
+  6: {
+    label: 'Wonen',
+    color: 'border-green-500',
+    bgColor: 'bg-green-500',
+    fromColor: 'from-green-500',
+    toColor: 'to-green-500',
+    textColor: 'text-white',
+  },
+}

package/src/components/TimelinePhaseblock/TimelinePhaseblock.stories.ts

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import TimelinePhaseblock from './TimelinePhaseblock.vue'
+import type { TimelinePhase } from '../TimelineEvent/TimelineTypes'
+
+export default {
+  title: 'Components/Molecules/Timeline Phaseblock',
+  component: TimelinePhaseblock,
+} satisfies Meta<typeof TimelinePhaseblock>
+
+type Story = StoryObj<typeof TimelinePhaseblock>
+
+const makePhase = (
+  value: number,
+  entered_at: string | null = '2024-06-01T09:00:00.000Z',
+  exited_at: string | null = '2024-07-01T09:00:00.000Z',
+  events: TimelinePhase['events'] = [],
+): TimelinePhase => ({
+  phase: { value },
+  entered_at,
+  exited_at,
+  events,
+})
+
+const sampleEvent = {
+  id: 1,
+  type: 'contact_created',
+  happened_at: '2024-06-10T10:30:00.000Z',
+  medium_type: null,
+  url: null,
+  page_title: null,
+  request_reason: null,
+  agenda_item_type: null,
+  source: 'system',
+  direction: 'outbound',
+  description: null,
+}
+
+// Single phase at the end of the timeline (no separator shown)
+export const SinglePhase: Story = {
+  args: {
+    phase: makePhase(1),
+    index: 0,
+    phases: [makePhase(1)],
+    isSplitView: true,
+    isLast: true,
+  },
+}
+
+// First phase (index 0) in split view — shows the Outbound/Inbound header
+export const FirstPhaseWithHeader: Story = {
+  args: {
+    phase: makePhase(4),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Phase separator visible — phase progressed upward (arrow up)
+export const PhaseProgressedUp: Story = {
+  args: {
+    phase: makePhase(4),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Phase separator visible — phase regressed downward (arrow down)
+export const PhaseRegressedDown: Story = {
+  args: {
+    phase: makePhase(2),
+    index: 0,
+    phases: [makePhase(2), makePhase(4)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Last item in a multi-phase list — no separator shown
+export const LastInList: Story = {
+  args: {
+    phase: makePhase(1),
+    index: 1,
+    phases: [makePhase(4), makePhase(1)],
+    isSplitView: true,
+    isLast: true,
+  },
+}
+
+// Non-split view — with phase separator
+export const NonSplitView: Story = {
+  args: {
+    phase: makePhase(3),
+    index: 0,
+    phases: [makePhase(3), makePhase(1)],
+    isSplitView: false,
+    isLast: false,
+  },
+}
+
+// Non-split view — single/last phase (no separator)
+export const NonSplitViewLast: Story = {
+  args: {
+    phase: makePhase(3),
+    index: 0,
+    phases: [makePhase(3)],
+    isSplitView: false,
+    isLast: true,
+  },
+}
+
+// Non-split view — with events
+export const NonSplitViewWithEvents: Story = {
+  args: {
+    phase: makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
+      sampleEvent,
+      { ...sampleEvent, id: 2, type: 'page_viewed', happened_at: '2024-06-12T14:00:00.000Z' },
+    ]),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: false,
+    isLast: false,
+  },
+}
+
+// Phase with events
+export const WithEvents: Story = {
+  args: {
+    phase: makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
+      sampleEvent,
+      { ...sampleEvent, id: 2, type: 'page_viewed', happened_at: '2024-06-12T14:00:00.000Z' },
+      {
+        ...sampleEvent,
+        id: 3,
+        type: 'whatsapp_message_received',
+        direction: 'inbound',
+        happened_at: '2024-06-15T11:00:00.000Z',
+      },
+    ]),
+    index: 0,
+    phases: [makePhase(4), makePhase(2)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// All phases shown together (newest first)
+export const FullTimeline: Story = {
+  args: {
+    phase: makePhase(5, '2024-08-01T09:00:00.000Z', null, [
+      { ...sampleEvent, id: 4, type: 'proposal_accepted', happened_at: '2024-08-05T10:00:00.000Z' },
+    ]),
+    index: 0,
+    phases: [
+      makePhase(5, '2024-08-01T09:00:00.000Z', null),
+      makePhase(4, '2024-06-01T09:00:00.000Z', '2024-08-01T09:00:00.000Z'),
+      makePhase(1, '2024-01-01T09:00:00.000Z', '2024-06-01T09:00:00.000Z'),
+    ],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Phase with no entered_at or exited_at dates
+export const NoDates: Story = {
+  args: {
+    phase: makePhase(2, null, null),
+    index: 0,
+    phases: [makePhase(2, null, null), makePhase(1, null, null)],
+    isSplitView: true,
+    isLast: false,
+  },
+}
+
+// Inactive phase (value 0)
+export const InactivePhase: Story = {
+  args: {
+    phase: makePhase(0),
+    index: 0,
+    phases: [makePhase(0)],
+    isSplitView: true,
+    isLast: true,
+  },
+}
+
+// Wonen phase (value 6 — highest)
+export const WonenPhase: Story = {
+  args: {
+    phase: makePhase(6),
+    index: 0,
+    phases: [makePhase(6), makePhase(5)],
+    isSplitView: true,
+    isLast: false,
+  },
+}