Initial commit: Add logistics and order_detail message types

- Add Logistics component with progress tracking
- Add OrderDetail component for order information
- Support data-driven steps and actions
- Add blue color scale to widget SCSS
- Fix node overflow and progress bar rendering issues
- Add English translations for dashboard components

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue

@@ -0,0 +1,87 @@
+<script setup>
+import Avatar from 'next/avatar/Avatar.vue';
+
+defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+  thumbnail: {
+    type: String,
+    default: '',
+  },
+  email: {
+    type: String,
+    default: '',
+  },
+  phoneNumber: {
+    type: String,
+    default: '',
+  },
+  identifier: {
+    type: [String, Number],
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="option-item--user">
+    <Avatar :src="thumbnail" :size="28" :name="name" rounded-full />
+    <div class="option__user-data">
+      <h5 class="option__title">
+        {{ name }}
+        <span v-if="identifier" class="user-identifier">
+          {{ $t('MERGE_CONTACTS.DROPDOWN_ITEM.ID', { identifier }) }}
+        </span>
+      </h5>
+      <p class="option__body">
+        <span v-if="email" class="email-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
+          {{ email }}
+        </span>
+        <span v-if="phoneNumber" class="phone-icon-wrap">
+          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
+          {{ phoneNumber }}
+        </span>
+        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.option-item--user {
+  @apply flex items-center;
+}
+.user-identifier {
+  @apply text-xs ml-0.5 text-n-slate-12;
+}
+.option__user-data {
+  @apply flex flex-col flex-grow ml-2 mr-2;
+}
+.option__body,
+.option__title {
+  @apply flex items-center justify-start leading-[1.2] text-sm;
+}
+.option__body .icon {
+  @apply relative top-px mr-0.5 rtl:mr-0 rtl:ml-0.5;
+}
+.option__title {
+  @apply text-n-slate-12 font-medium mb-0.5;
+}
+.option__body {
+  @apply text-xs text-n-slate-12 mt-1;
+}
+
+.option__user-data .option__body {
+  > .phone-icon-wrap,
+  > .email-icon-wrap {
+    @apply w-auto flex items-center;
+  }
+}
+
+.merge-contact--icon {
+  @apply -mb-0.5 mr-0.5;
+}
+</style>

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -0,0 +1,220 @@
+<script>
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
+import ContactDropdownItem from './ContactDropdownItem.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: { MergeContactSummary, ContactDropdownItem, NextButton },
+  props: {
+    primaryContact: {
+      type: Object,
+      required: true,
+    },
+    isSearching: {
+      type: Boolean,
+      default: false,
+    },
+    isMerging: {
+      type: Boolean,
+      default: false,
+    },
+    searchResults: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['search', 'submit', 'cancel'],
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations: {
+    primaryContact: {
+      required,
+    },
+    parentContact: {
+      required,
+    },
+  },
+  data() {
+    return {
+      parentContact: undefined,
+    };
+  },
+
+  computed: {
+    parentContactName() {
+      return this.parentContact ? this.parentContact.name : '';
+    },
+  },
+  methods: {
+    searchChange(query) {
+      this.$emit('search', query);
+    },
+    onSubmit() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      this.$emit('submit', this.parentContact.id);
+    },
+    onCancel() {
+      this.$emit('cancel');
+    },
+  },
+};
+</script>
+
+<template>
+  <form @submit.prevent="onSubmit">
+    <div>
+      <div>
+        <div
+          class="mt-1 multiselect-wrap--medium"
+          :class="{ error: v$.parentContact.$error }"
+        >
+          <label class="multiselect__label">
+            {{ $t('MERGE_CONTACTS.PARENT.TITLE') }}
+            <woot-label
+              :title="$t('MERGE_CONTACTS.PARENT.HELP_LABEL')"
+              color-scheme="success"
+              small
+              class="ml-2"
+            />
+          </label>
+          <multiselect
+            v-model="parentContact"
+            :options="searchResults"
+            label="name"
+            track-by="id"
+            :internal-search="false"
+            :clear-on-select="false"
+            :show-labels="false"
+            :placeholder="$t('MERGE_CONTACTS.PARENT.PLACEHOLDER')"
+            allow-empty
+            :loading="isSearching"
+            :max-height="150"
+            open-direction="top"
+            @search-change="searchChange"
+          >
+            <template #singleLabel="props">
+              <ContactDropdownItem
+                :thumbnail="props.option.thumbnail"
+                :identifier="props.option.id"
+                :name="props.option.name"
+                :email="props.option.email"
+                :phone-number="props.option.phone_number"
+              />
+            </template>
+            <template #option="props">
+              <ContactDropdownItem
+                :thumbnail="props.option.thumbnail"
+                :identifier="props.option.id"
+                :name="props.option.name"
+                :email="props.option.email"
+                :phone-number="props.option.phone_number"
+              />
+            </template>
+            <template #noResult>
+              <span>
+                {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
+              </span>
+            </template>
+          </multiselect>
+          <span v-if="v$.parentContact.$error" class="message">
+            {{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
+          </span>
+        </div>
+      </div>
+      <div class="flex multiselect-wrap--medium">
+        <div
+          class="w-8 relative text-base text-n-strong after:content-[''] after:h-12 after:w-0 ltr:after:left-4 rtl:after:right-4 after:absolute after:border-l after:border-solid after:border-n-strong before:content-[''] before:h-0 before:w-4 ltr:before:left-4 rtl:before:right-4 before:top-12 before:absolute before:border-b before:border-solid before:border-n-strong"
+        >
+          <fluent-icon
+            icon="arrow-up"
+            class="absolute -top-1 ltr:left-2 rtl:right-2"
+            size="17"
+          />
+        </div>
+        <div class="flex flex-col w-full ltr:pl-8 rtl:pr-8">
+          <label class="multiselect__label">
+            {{ $t('MERGE_CONTACTS.PRIMARY.TITLE') }}
+            <woot-label
+              :title="$t('MERGE_CONTACTS.PRIMARY.HELP_LABEL')"
+              color-scheme="alert"
+              small
+              class="ml-2"
+            />
+          </label>
+          <multiselect
+            :model-value="primaryContact"
+            disabled
+            :options="[]"
+            :show-labels="false"
+            label="name"
+            track-by="id"
+          >
+            <template #singleLabel="props">
+              <ContactDropdownItem
+                :thumbnail="props.option.thumbnail"
+                :name="props.option.name"
+                :identifier="props.option.id"
+                :email="props.option.email"
+                :phone-number="props.option.phoneNumber"
+              />
+            </template>
+          </multiselect>
+        </div>
+      </div>
+    </div>
+    <MergeContactSummary
+      :primary-contact-name="primaryContact.name"
+      :parent-contact-name="parentContactName"
+    />
+    <div class="flex justify-end gap-2 mt-6">
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('MERGE_CONTACTS.FORM.CANCEL')"
+        @click.prevent="onCancel"
+      />
+      <NextButton
+        type="submit"
+        :is-loading="isMerging"
+        :label="$t('MERGE_CONTACTS.FORM.SUBMIT')"
+      />
+    </div>
+  </form>
+</template>
+
+<style lang="scss" scoped>
+/* TDOD: Clean errors in forms style */
+.error .message {
+  @apply mt-0;
+}
+
+::v-deep {
+  .multiselect {
+    @apply rounded-md;
+  }
+
+  .multiselect--disabled {
+    @apply border-0;
+
+    .multiselect__tags {
+      @apply border;
+    }
+  }
+
+  .multiselect__tags {
+    @apply h-auto;
+  }
+
+  .multiselect__select {
+    @apply mt-px mr-1;
+  }
+}
+</style>

app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue

@@ -0,0 +1,49 @@
+<script>
+export default {
+  props: {
+    primaryContactName: {
+      type: String,
+      default: '',
+    },
+    parentContactName: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div
+    v-if="parentContactName"
+    class="my-4 relative p-2.5 border rounded-[4px] text-n-slate-12 border-n-weak bg-n-background"
+  >
+    <h5 class="text-base font-medium text-n-slate-12">
+      {{ $t('MERGE_CONTACTS.SUMMARY.TITLE') }}
+    </h5>
+    <ul class="ml-0 list-none">
+      <li>
+        <span class="inline-block mr-1">❌</span>
+        <span
+          v-dompurify-html="
+            $t('MERGE_CONTACTS.SUMMARY.DELETE_WARNING', {
+              primaryContactName,
+            })
+          "
+        />
+      </li>
+      <li>
+        <span class="inline-block mr-1">✅</span>
+        <span
+          v-dompurify-html="
+            $t('MERGE_CONTACTS.SUMMARY.ATTRIBUTE_WARNING', {
+              primaryContactName,
+              parentContactName,
+            })
+          "
+        />
+      </li>
+    </ul>
+  </div>
+</template>