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/components/widgets/conversation/ContentTemplates/ContentTemplatesModal.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import TemplatesPicker from './ContentTemplatesPicker.vue';
+import TemplateParser from '../../../../components-next/content-templates/ContentTemplateParser.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  inboxId: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['onSend', 'cancel', 'update:show']);
+
+const { t } = useI18n();
+
+const selectedContentTemplate = ref(null);
+
+const localShow = computed({
+  get() {
+    return props.show;
+  },
+  set(value) {
+    emit('update:show', value);
+  },
+});
+
+const modalHeaderContent = computed(() => {
+  return selectedContentTemplate.value
+    ? t('CONTENT_TEMPLATES.MODAL.TEMPLATE_SELECTED_SUBTITLE', {
+        templateName: selectedContentTemplate.value.friendly_name,
+      })
+    : t('CONTENT_TEMPLATES.MODAL.SUBTITLE');
+});
+
+const pickTemplate = template => {
+  selectedContentTemplate.value = template;
+};
+
+const onResetTemplate = () => {
+  selectedContentTemplate.value = null;
+};
+
+const onSendMessage = message => {
+  emit('onSend', message);
+};
+
+const onClose = () => {
+  emit('cancel');
+};
+</script>
+
+<template>
+  <woot-modal v-model:show="localShow" :on-close="onClose" size="modal-big">
+    <woot-modal-header
+      :header-title="$t('CONTENT_TEMPLATES.MODAL.TITLE')"
+      :header-content="modalHeaderContent"
+    />
+    <div class="px-8 py-6 row">
+      <TemplatesPicker
+        v-if="!selectedContentTemplate"
+        :inbox-id="inboxId"
+        @on-select="pickTemplate"
+      />
+      <TemplateParser
+        v-else
+        :template="selectedContentTemplate"
+        @reset-template="onResetTemplate"
+        @send-message="onSendMessage"
+      >
+        <template #actions="{ sendMessage, resetTemplate, disabled }">
+          <div class="flex gap-2 mt-6">
+            <Button
+              :label="t('CONTENT_TEMPLATES.PARSER.GO_BACK_LABEL')"
+              color="slate"
+              variant="faded"
+              class="flex-1"
+              @click="resetTemplate"
+            />
+            <Button
+              :label="t('CONTENT_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
+              class="flex-1"
+              :disabled="disabled"
+              @click="sendMessage"
+            />
+          </div>
+        </template>
+      </TemplateParser>
+    </div>
+  </woot-modal>
+</template>