Technical Implementation Details

<template>
  <form @submit.prevent="searchOrder(trackingIdQuery)">
    <TsInputGroup>
      <TsInput
        type="search"
        v-model="trackingIdQuery"
        placeholder="Paste your tracking ID here"
        with-clear
      />
      <TsButton type="submit" :is-loading="searchStatus.status === 'loading'">
        Search
      </TsButton>
    </TsInputGroup>
  </form>

  <div v-if="searchStatus.status === 'success' && orderData">
    <section>
      <h2>Order Details</h2>
      <p>Order ID: {{ orderData.order.id }}</p>
      <p>Placed on: {{ orderData.order.order_date }}</p>
      <p>Status: {{ latestEvent.carrier_description }}</p>
    </section>

    <section>
      <h3>Order Status</h3>
      <TsProgress :value="progressValue" />
      <div>
        <TsStepItem
          v-for="(stage, index) in orderStages"
          :key="index"
          :label="stage.label"
          :date="stage.date"
          :isActive="stage.isActive"
          :icon="stage.icon"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
const trackingIdQuery = ref(route.query.id || ""); // For ease of access and create a shareable URL (e.g https://tracking.toolstation.nl/?id=12345)
const orderData = ref(null);
const searchStatus = ref({ status: "idle", message: "" });

async function searchOrder(trackingId: string) {
  searchStatus.value = { status: "loading" };
  try {
    const res = await $fetch(`/orders/tracking/{trackingId}`);
    orderData.value = res.data;
    searchStatus.value = { status: "success" };
  } catch {
    searchStatus.value = {
      status: "failed",
      message: "No Such Order Found With This Tracking ID",
    };
  }
}

const orderStages = computed(() => {
  if (!orderData.value) return [];

  const orderPlaceStage = {
    label: "Order Placed",
    date: orderData.value.order.order_date,
    isActive: true,
    icon: "bx:cart",
  };

  const trackingStages = orderData.value.tracking_data.events.map(event => ({
    label: event.carrier_description,
    date: event.dateUTC,
    isActive: new Date(event.dateUTC) <= new Date(),
  }));

  return [orderPlaceStage, ...trackingStages];
});

const latestEvent = computed(() =>
  orderData.value?.tracking_data.events.slice(-1)[0]
);

const progressValue = computed(() => {
  const activeStages = orderStages.value.filter(s => s.isActive).length;
  return (activeStages / orderStages.value.length) * 100;
});
</script>