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/widget-preview/components/Widget.vue

@@ -0,0 +1,206 @@
+<script>
+import WidgetHead from './WidgetHead.vue';
+import WidgetBody from './WidgetBody.vue';
+import WidgetFooter from './WidgetFooter.vue';
+import InputRadioGroup from 'dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue';
+import { useBranding } from 'shared/composables/useBranding';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'Widget',
+  components: {
+    WidgetHead,
+    WidgetBody,
+    WidgetFooter,
+    InputRadioGroup,
+  },
+  props: {
+    welcomeHeading: {
+      type: String,
+      default: '',
+    },
+    welcomeTagline: {
+      type: String,
+      default: '',
+    },
+    websiteName: {
+      type: String,
+      required: true,
+    },
+    logo: {
+      type: String,
+      default: '',
+    },
+    isOnline: {
+      type: Boolean,
+      default: true,
+    },
+    replyTime: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    widgetBubblePosition: {
+      type: String,
+      default: '',
+    },
+    widgetBubbleLauncherTitle: {
+      type: String,
+      default: '',
+    },
+    widgetBubbleType: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    const { replaceInstallationName } = useBranding();
+    return {
+      replaceInstallationName,
+    };
+  },
+  data() {
+    return {
+      widgetScreens: [
+        {
+          id: 'default',
+          title: this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_SCREEN.DEFAULT'),
+          checked: true,
+        },
+        {
+          id: 'chat',
+          title: this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_SCREEN.CHAT'),
+          checked: false,
+        },
+      ],
+      isDefaultScreen: true,
+      isWidgetVisible: true,
+    };
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    getWidgetConfig() {
+      return {
+        welcomeHeading: this.welcomeHeading,
+        welcomeTagline: this.welcomeTagline,
+        websiteName: this.websiteName,
+        logo: this.logo,
+        isDefaultScreen: this.isDefaultScreen,
+        isOnline: this.isOnline,
+        replyTime: this.replyTimeText,
+        color: this.color,
+      };
+    },
+    replyTimeText() {
+      switch (this.replyTime) {
+        case 'in_a_few_minutes':
+          return this.$t(
+            'INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_FEW_MINUTES'
+          );
+        case 'in_a_day':
+          return this.$t('INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_DAY');
+        default:
+          return this.$t('INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_FEW_HOURS');
+      }
+    },
+    getBubblePositionStyle() {
+      return {
+        justifyContent: this.widgetBubblePosition === 'left' ? 'start' : 'end',
+      };
+    },
+    isBubbleExpanded() {
+      return (
+        !this.isWidgetVisible && this.widgetBubbleType === 'expanded_bubble'
+      );
+    },
+    getWidgetBubbleLauncherTitle() {
+      return this.isWidgetVisible || this.widgetBubbleType === 'standard'
+        ? ' '
+        : this.widgetBubbleLauncherTitle;
+    },
+  },
+  methods: {
+    handleScreenChange(item) {
+      this.isDefaultScreen = item.id === 'default';
+    },
+    toggleWidget() {
+      this.isWidgetVisible = !this.isWidgetVisible;
+      this.isDefaultScreen = true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="isWidgetVisible" class="flex flex-col items-center">
+      <InputRadioGroup
+        name="widget-screen"
+        :items="widgetScreens"
+        :action="handleScreenChange"
+      />
+    </div>
+    <div
+      v-if="isWidgetVisible"
+      class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-n-slate-2 dark:bg-n-solid-1 h-[31.25rem] w-80"
+    >
+      <WidgetHead :config="getWidgetConfig" />
+      <div>
+        <WidgetBody
+          v-if="!getWidgetConfig.isDefaultScreen"
+          :config="getWidgetConfig"
+        />
+        <WidgetFooter :config="getWidgetConfig" />
+        <div class="py-2.5 flex justify-center">
+          <a
+            class="items-center gap-0.5 text-n-slate-11 cursor-pointer flex filter grayscale opacity-90 hover:grayscale-0 hover:opacity-100 text-xxs"
+          >
+            <img
+              class="max-w-2.5 max-h-2.5"
+              :src="globalConfig.logoThumbnail"
+            />
+            <span>
+              {{
+                replaceInstallationName(
+                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT')
+                )
+              }}
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="flex mt-4 w-[320px]" :style="getBubblePositionStyle">
+      <button
+        class="relative flex items-center justify-center rounded-full cursor-pointer"
+        :style="{ background: color }"
+        :class="
+          isBubbleExpanded
+            ? 'w-auto font-medium text-base text-white dark:text-white h-12 px-4'
+            : 'w-16 h-16'
+        "
+        @click="toggleWidget"
+      >
+        <img
+          v-if="!isWidgetVisible"
+          src="~dashboard/assets/images/bubble-logo.svg"
+          alt=""
+          draggable="false"
+          class="w-6 h-6 mx-auto"
+        />
+        <div v-if="isBubbleExpanded" class="ltr:pl-2.5 rtl:pr-2.5">
+          {{ getWidgetBubbleLauncherTitle }}
+        </div>
+        <div v-if="isWidgetVisible" class="relative">
+          <div class="absolute w-0.5 h-8 rotate-45 -translate-y-1/2 bg-white" />
+          <div
+            class="absolute w-0.5 h-8 -rotate-45 -translate-y-1/2 bg-white"
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<template>
+  <div class="h-[calc(2rem*10)] px-4 overflow-y-auto">
+    <div>
+      <div>
+        <div
+          class="items-end flex justify-end ml-auto mb-1 mt-0 max-w-[85%] text-right"
+        >
+          <div
+            class="rounded-[1.25rem] rounded-br-[0.25rem] text-white dark:text-white text-sm px-4 py-3"
+            :style="{ background: config.color }"
+          >
+            <p class="m-0">
+              {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="shadow rounded-[1.25rem] rounded-bl-[0.25rem] px-4 py-3 inline-block text-sm text-n-slate-12 bg-n-background dark:bg-n-solid-3"
+      >
+        <div>
+          <p class="m-0">
+            {{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const isInputFocused = ref(false);
+
+const getStatusText = computed(() => {
+  return props.config.isOnline
+    ? t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
+    : t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
+});
+</script>
+
+<template>
+  <div class="relative flex flex-col w-full px-4">
+    <div
+      v-if="config.isDefaultScreen"
+      class="p-4 rounded-md shadow-sm bg-n-background dark:bg-n-solid-2"
+    >
+      <div class="flex items-center justify-between">
+        <div>
+          <div
+            class="text-sm font-medium leading-4 text-n-slate-12 dark:text-n-slate-50"
+          >
+            {{ getStatusText }}
+          </div>
+          <div class="mt-1 text-xs text-n-slate-11">
+            {{ config.replyTime }}
+          </div>
+        </div>
+        <Avatar name="C" :size="34" rounded-full />
+      </div>
+      <button
+        v-if="config.isDefaultScreen"
+        class="inline-flex items-center justify-between px-2 py-1 mt-1 -ml-2 font-medium leading-6 bg-transparent rounded-md text-n-slate-12 dark:bg-transparent"
+        :style="{ color: config.color }"
+      >
+        <span class="pr-2 text-xs">
+          {{
+            $t(
+              'INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT'
+            )
+          }}
+        </span>
+        <FluentIcon icon="arrow-right" size="14" />
+      </button>
+    </div>
+    <div
+      v-else
+      class="flex items-center h-10 bg-white rounded-md dark:!bg-n-slate-3"
+      :class="{ 'ring-2 ring-n-brand dark:ring-n-brand': isInputFocused }"
+    >
+      <ResizableTextArea
+        id="chat-input"
+        :rows="1"
+        :placeholder="
+          $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
+        "
+        class="flex-grow !bg-white border-0 outline-none !outline-0 border-none h-8 text-sm dark:!bg-n-slate-3 pb-0 !pt-1.5 resize-none px-3 !mb-0 focus:outline-none rounded-md"
+        @focus="isInputFocused = true"
+        @blur="isInputFocused = false"
+      />
+      <div class="flex items-center gap-2 px-2">
+        <FluentIcon icon="emoji" />
+        <FluentIcon class="icon-send" icon="send" />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { formatMessage } = useMessageFormatter();
+
+const isDefaultScreen = computed(() => {
+  return (
+    props.config.isDefaultScreen &&
+    ((props.config.welcomeHeading &&
+      props.config.welcomeHeading.length !== 0) ||
+      (props.config.welcomeTagLine && props.config.welcomeTagline.length !== 0))
+  );
+});
+</script>
+
+<template>
+  <div
+    class="rounded-t-lg flex-shrink-0 transition-[max-height] duration-300"
+    :class="
+      isDefaultScreen
+        ? 'bg-n-slate-2 dark:bg-n-solid-1 px-4 py-5'
+        : 'bg-n-slate-2 dark:bg-n-solid-1 p-4'
+    "
+  >
+    <div class="relative top-px">
+      <div class="flex items-center justify-start">
+        <img
+          v-if="config.logo"
+          :src="config.logo"
+          class="mr-2 rounded-full logo"
+          :class="!isDefaultScreen ? 'h-8 w-8 mb-1' : 'h-12 w-12 mb-2'"
+        />
+        <div v-if="!isDefaultScreen">
+          <div class="flex items-center justify-start gap-1">
+            <span class="text-base font-medium leading-3 text-n-slate-12">
+              {{ config.websiteName }}
+            </span>
+            <div
+              v-if="config.isOnline"
+              class="w-2 h-2 bg-n-teal-10 rounded-full"
+            />
+          </div>
+          <span class="mt-1 text-xs text-n-slate-11">
+            {{ config.replyTime }}
+          </span>
+        </div>
+      </div>
+      <div v-if="isDefaultScreen" class="overflow-auto max-h-60">
+        <h2 class="mb-2 text-2xl break-words text-n-slate-12">
+          {{ config.welcomeHeading }}
+        </h2>
+        <p
+          v-dompurify-html="formatMessage(config.welcomeTagline)"
+          class="text-sm break-words text-n-slate-11 [&_a]:!text-n-slate-11 [&_a]:underline"
+        />
+      </div>
+    </div>
+  </div>
+</template>